@persona/design-system 0.10.4 → 0.10.6

package/dist/{VersionHistoryItem-BExp7oSr.d.mts → VersionHistoryItem-Px3ylMMq.d.mts}

@@ -1,6 +1,6 @@
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region components/VersionHistory/VersionHistoryItem.d.ts
+//#region src/components/VersionHistory/VersionHistoryItem.d.ts
 type VersionHistoryStatus = 'live' | 'saved' | 'unsaved' | 'published';
 type VersionHistoryItemProps = {
   id: string;
@@ -51,4 +51,4 @@ declare const VersionHistoryItem: ({
 }: VersionHistoryItemViewProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { hasVersionHistoryItemActions as i, VersionHistoryItemProps as n, VersionHistoryStatus as r, VersionHistoryItem as t };
-//# sourceMappingURL=VersionHistoryItem-BExp7oSr.d.mts.map
+//# sourceMappingURL=VersionHistoryItem-Px3ylMMq.d.mts.map

package/dist/VersionHistoryItem.d.mts

@@ -1,2 +1,2 @@
-import { i as hasVersionHistoryItemActions, n as VersionHistoryItemProps, r as VersionHistoryStatus, t as VersionHistoryItem } from "./VersionHistoryItem-BExp7oSr.mjs";
+import { i as hasVersionHistoryItemActions, n as VersionHistoryItemProps, r as VersionHistoryStatus, t as VersionHistoryItem } from "./VersionHistoryItem-Px3ylMMq.mjs";
 export { VersionHistoryItemProps, VersionHistoryStatus, VersionHistoryItem as default, hasVersionHistoryItemActions };

package/dist/WizardModal.d.mts

@@ -1,9 +1,9 @@
-import { i as ModalRenderProps, s as _default } from "./Modal-BuxggahW.mjs";
-import { i as StepStatus, r as ProgressIndicatorStep } from "./ProgressIndicator-C5sbFQcd.mjs";
+import { i as ModalRenderProps, s as _default } from "./Modal-Bhwq1bQJ.mjs";
+import { i as StepStatus, r as ProgressIndicatorStep } from "./ProgressIndicator-COCwRZfK.mjs";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region patterns/WizardModal/WizardModal.d.ts
+//#region src/patterns/WizardModal/WizardModal.d.ts
 type ModalChromeProps = Pick<ComponentProps<typeof _default>, 'title' | 'open' | 'defaultOpen' | 'onOpenChange' | 'size' | 'trigger' | 'isDismissable' | 'isKeyboardDismissDisabled'>;
 type WizardProceedResult = 'valid' | Extract<StepStatus, 'warning' | 'error'>;
 declare const statusFromProceed: (result: WizardProceedResult) => StepStatus;

package/dist/{accordionTitleTypography-PMKnfoy0.d.mts → accordionTitleTypography-Dlo2YyWd.d.mts}

@@ -1,6 +1,6 @@
-import { i as ParagraphSize, n as HeadingSize } from "./text-BNfECpa5.mjs";
+import { i as ParagraphSize, n as HeadingSize } from "./text-Csytfclh.mjs";
 
-//#region components/Accordion/accordionTitleTypography.d.ts
+//#region src/components/Accordion/accordionTitleTypography.d.ts
 type AccordionSize = 'sm' | 'md' | 'lg';
 type AccordionTitleTypography = {
   variant: 'heading';
@@ -14,4 +14,4 @@ declare const getDefaultTitleTypography: (size: AccordionSize) => AccordionTitle
 declare const resolveTitleTypography: (size: AccordionSize, titleTypography?: AccordionTitleTypography) => AccordionTitleTypography;
 //#endregion
 export { resolveTitleTypography as i, AccordionTitleTypography as n, getDefaultTitleTypography as r, AccordionSize as t };
-//# sourceMappingURL=accordionTitleTypography-PMKnfoy0.d.mts.map
+//# sourceMappingURL=accordionTitleTypography-Dlo2YyWd.d.mts.map

package/dist/accordionTitleTypography.d.mts

@@ -1,2 +1,2 @@
-import { i as resolveTitleTypography, n as AccordionTitleTypography, r as getDefaultTitleTypography, t as AccordionSize } from "./accordionTitleTypography-PMKnfoy0.mjs";
+import { i as resolveTitleTypography, n as AccordionTitleTypography, r as getDefaultTitleTypography, t as AccordionSize } from "./accordionTitleTypography-Dlo2YyWd.mjs";
 export { AccordionSize, AccordionTitleTypography, getDefaultTitleTypography, resolveTitleTypography };

package/dist/assertNever.d.mts

@@ -1,4 +1,4 @@
-//#region lib/assertNever.d.ts
+//#region src/lib/assertNever.d.ts
 declare function assertNever(value: never): never;
 //#endregion
 export { assertNever };

package/dist/chainTypes-aF5rWav-.d.mts

@@ -0,0 +1,17 @@
+import { n as JsonSchema } from "./jsonSchema-DUkfAip_.mjs";
+import { n as Chain } from "./methodChainTypes-BtbYWrdP.mjs";
+import { t as Option } from "./schemaOptions-C_JM2-sg.mjs";
+
+//#region src/lib/chainTypes.d.ts
+interface ChainRoot {
+  chain: Chain;
+  label: string;
+  schema: JsonSchema;
+}
+interface PossibleChainSchema extends Option {
+  parentSchema: JsonSchema;
+  returnType: string;
+}
+//#endregion
+export { PossibleChainSchema as n, ChainRoot as t };
+//# sourceMappingURL=chainTypes-aF5rWav-.d.mts.map

package/dist/{clientFilterUtils-BqDn44aM.d.mts → clientFilterUtils-DDDG1g7e.d.mts}

@@ -1,8 +1,8 @@
-import { s as FilterConfig } from "./types-CrRWZ0Ia.mjs";
+import { s as FilterConfig } from "./types-sUEmxsGM.mjs";
 import { Dispatch, SetStateAction } from "react";
 import { Column, ColumnFiltersState, Header, RowData, Table } from "@tanstack/react-table";
 
-//#region components/DataTable/clientFilterUtils.d.ts
+//#region src/components/DataTable/clientFilterUtils.d.ts
 declare const getFilterFnName: (filterType: string) => string;
 /** Converts column-level client filters into controls backed by TanStack's column-filter state. */
 declare const generateClientFilters: <TData extends RowData>(columns: Array<{
@@ -17,4 +17,4 @@ declare const generateClientFilters: <TData extends RowData>(columns: Array<{
 }>, columnFilters: ColumnFiltersState, setColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>) => FilterConfig[];
 //#endregion
 export { getFilterFnName as n, generateClientFilters as t };
-//# sourceMappingURL=clientFilterUtils-BqDn44aM.d.mts.map
+//# sourceMappingURL=clientFilterUtils-DDDG1g7e.d.mts.map

package/dist/clientFilterUtils.d.mts

@@ -1,2 +1,2 @@
-import { n as getFilterFnName, t as generateClientFilters } from "./clientFilterUtils-BqDn44aM.mjs";
+import { n as getFilterFnName, t as generateClientFilters } from "./clientFilterUtils-DDDG1g7e.mjs";
 export { generateClientFilters, getFilterFnName };

package/dist/{codec-KAvQRjTW.d.mts → codec-D8ZKFLgs.d.mts}

@@ -1,7 +1,7 @@
-import { a as DateFilterPreset, c as RelativeDateFilterValue, n as AbsoluteDateRange, o as DateFilterValue } from "./types-39QvBZuZ.mjs";
+import { a as DateFilterPreset, c as RelativeDateFilterValue, n as AbsoluteDateRange, o as DateFilterValue } from "./types-rDQg74j-.mjs";
 import { DateTime } from "luxon";
 
-//#region lib/date-filter/codec.d.ts
+//#region src/lib/date-filter/codec.d.ts
 declare function parseDateFilterValue(raw: unknown): DateFilterValue | null;
 declare function resolveDateFilterValue(value: RelativeDateFilterValue, context?: {
   zone?: string;
@@ -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-KAvQRjTW.d.mts.map
+//# sourceMappingURL=codec-D8ZKFLgs.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-KAvQRjTW.mjs";
+import { a as selectedPresetFor, i as resolveDateFilterValue, n as isRelative, r as parseDateFilterValue, t as formatDateFilterValue } from "./codec-D8ZKFLgs.mjs";
 export { formatDateFilterValue, isRelative, parseDateFilterValue, resolveDateFilterValue, selectedPresetFor };

package/dist/{color-C5B1pN1D.d.mts → color-Cy_0z4IY.d.mts}

@@ -1,7 +1,7 @@
-import { t as CssPercentage } from "./semantic-DjKvtUi8.mjs";
+import { t as CssPercentage } from "./semantic-BLaQSW1r.mjs";
 import { Color } from "@persona/design-tokens";
 
-//#region lib/color.d.ts
+//#region src/lib/color.d.ts
 /**
  * A computed theme colour (not a token primitive). Property-branded rather than `unique symbol`
  * so the brand survives declaration emit.
@@ -22,4 +22,4 @@ declare const withAlpha: (color: Color, amount: CssPercentage) => CssColor;
 declare const opaqueOver: (overlay: Color, amount: CssPercentage, base: Color) => CssColor;
 //#endregion
 export { transparent as a, opaqueOver as i, PdsColor as n, withAlpha as o, opacityOf as r, CssColor as t };
-//# sourceMappingURL=color-C5B1pN1D.d.mts.map
+//# sourceMappingURL=color-Cy_0z4IY.d.mts.map

package/dist/common.d.mts

@@ -1,6 +1,6 @@
 import { GregorianCalendar } from "@internationalized/date";
 
-//#region components/DatePicker/common.d.ts
+//#region src/components/DatePicker/common.d.ts
 declare const createCalendar: () => GregorianCalendar;
 //#endregion
 export { createCalendar };

package/dist/complete-typography.d.mts

@@ -0,0 +1,7 @@
+import { r as Rule } from "./index-BWAycP6L.mjs";
+
+//#region src/lint/rules/complete-typography.d.ts
+declare const completeTypography: Rule;
+//#endregion
+export { completeTypography };
+//# sourceMappingURL=complete-typography.d.mts.map

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

@@ -1,4 +1,4 @@
-import { n as AccordionTitleTypography, t as AccordionSize } from "../../accordionTitleTypography-PMKnfoy0.mjs";
+import { n as AccordionTitleTypography, t as AccordionSize } from "../../accordionTitleTypography-Dlo2YyWd.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

@@ -1,18 +1,18 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.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-CSwFifQF.mjs";
+import { i as Paragraph, n as Heading$1 } from "../../Text-D0vEReED.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-BkC7FCdF.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
+import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
 import { useLayoutEffect, useRef } from "react";
+import { Color, Spacing } from "@persona/design-tokens";
 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
+//#region src/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";
@@ -91,7 +91,7 @@ const resolveAccordionTriggerElement = (itemElement) => {
 	return itemElement.querySelector("[slot=\"trigger\"]") ?? itemElement.querySelector("button");
 };
 //#endregion
-//#region components/Accordion/AccordionItem.tsx
+//#region src/components/Accordion/AccordionItem.tsx
 const SIZE_HEIGHT = {
 	sm: Spacing[5],
 	md: Spacing[6],
@@ -281,7 +281,7 @@ const AccordionItem = ({ title, children, defaultExpanded = false, disabled = fa
 	});
 };
 //#endregion
-//#region components/Accordion/accordionTitleTypography.ts
+//#region src/components/Accordion/accordionTitleTypography.ts
 const getDefaultTitleTypography = (size) => {
 	if (size === "lg") return {
 		variant: "heading",
@@ -300,7 +300,7 @@ const getDefaultTitleTypography = (size) => {
 };
 const resolveTitleTypography = (size, titleTypography) => titleTypography ?? getDefaultTitleTypography(size);
 //#endregion
-//#region components/Accordion/Accordion.tsx
+//#region src/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);

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

@@ -1 +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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"}
+{"version":3,"file":"index.mjs","names":["Heading"],"sources":["../../../src/components/Accordion/scrollExpandedItemIntoView.ts","../../../src/components/Accordion/AccordionItem.tsx","../../../src/components/Accordion/accordionTitleTypography.ts","../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { TransitionDurationInSeconds } from '#src/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';\n\nimport { HStack } from '#src/components/Stack';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport { HeadlessAriaButton } from '#src/lib/HeadlessAriaButton';\nimport { isFocusedVisible, isNotDisabled } from '#src/lib/pseudoClass';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { TruncatedText } from '#src/lib/TruncatedText';\nimport { focusOutlineControlled } from '#src/mixins/focus';\nimport { TransitionDuration } from '#src/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 '#src/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';\n\nimport { Stack } from '#src/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

@@ -1,18 +1,18 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
-import { i as Paragraph } from "../../Text-CSwFifQF.mjs";
-import { r as HelperTooltip } from "../../Tooltip-B-0VRuKT.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
+import { r as HelperTooltip } from "../../Tooltip-YViXzMdm.mjs";
 import { isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
-import { t as IconButton } from "../../IconButton-HWx5Hlmi.mjs";
-import { n as Sticker } from "../../Sticker-yhxtIYH8.mjs";
-import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { t as IconButton } from "../../IconButton-DftINsp7.mjs";
+import { n as Sticker } from "../../Sticker-Bi_fezCO.mjs";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { EyeIcon, EyeOffIcon } from "@persona/icons";
 import { repeat, uniqueId } from "lodash-es";
 import { useToggleButton } from "react-aria";
 import { useToggleState } from "react-stately";
-//#region components/Attribute/Attribute.tsx
+//#region src/components/Attribute/Attribute.tsx
 const AttributeContext = createContext({});
 const IconButtonContainer = styled(IconButton)`
   display: inline-flex;
@@ -179,7 +179,7 @@ const Attribute = ({ label, value, redacted, placeholder = "-", wordBreak, label
 	});
 };
 //#endregion
-//#region components/Attribute/AttributeGrid.tsx
+//#region src/components/Attribute/AttributeGrid.tsx
 const AttributeGridComponent = styled.dl`
   ${({ colCount, table, horizontal, size }) => table ? css`
           display: table;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat, uniqueId } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport Sticker from 'design-system/components/Sticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport { HelperTooltip } from 'design-system/components/Tooltip';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport type { ParagraphSize } from 'design-system/mixins/text';\n\nexport type WordBreak = 'break-all' | 'break-word' | 'normal';\nexport type TextTransform = 'capitalize' | 'sentence';\nexport type TableLayoutValue = boolean | 'full-width';\n\nexport type AttributeSize = 'sm' | 'md';\n\nexport const AttributeContext = createContext<{\n  table?: TableLayoutValue;\n  horizontal?: boolean;\n  size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    transition-duration: 150ms;\n  }\n\n  :hover {\n    svg {\n      color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple800)};\n    }\n  }\n\n  ${semanticOnly(\n    (tokens) => css`\n      background-color: ${tokens.ActionNeutral};\n      color: ${tokens.FgPrimary};\n\n      svg {\n        color: ${tokens.FgPrimary};\n      }\n\n      svg.pds-icon path[stroke] {\n        stroke: currentColor;\n      }\n\n      &${isHovered}${isNotDisabled} {\n        background-color: ${tokens.ActionNeutralHover};\n        color: ${tokens.FgAccent};\n\n        svg path {\n          stroke: currentColor;\n        }\n      }\n    `,\n  )}\n`;\n\ninterface AttributeValueProps {\n  placeholder: ReactNode;\n  show?: boolean;\n  redacted?: boolean;\n  value?: ReactNode;\n  textTransform?: TextTransform;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n  'aria-labelledby': string;\n  id: string;\n}\n\ninterface ValueFormatterProps {\n  isPlaceholder?: boolean;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n  ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n  color: ${({ isPlaceholder, theme }) =>\n    isPlaceholder\n      ? semanticColor(theme, 'FgSecondary', Color.TextSecondary)\n      : semanticColor(theme, 'FgPrimary', Color.CoreSlate1000)};\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n  word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n  ul,\n  ol {\n    list-style-position: inside;\n  }\n\n  a {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n    text-decoration: none;\n\n    &:visited {\n      color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n    }\n  }\n`;\n\nexport const AttributeValue = ({\n  placeholder,\n  show,\n  redacted,\n  value,\n  wordBreak,\n  size,\n  id,\n  'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n  const isEmpty = value == null || value === '';\n\n  const renderedVal = isEmpty ? (\n    placeholder\n  ) : (\n    <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n  );\n\n  return (\n    <Value\n      isPlaceholder={isEmpty}\n      wordBreak={wordBreak}\n      size={size}\n      title={typeof value === 'string' ? value : undefined}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n    >\n      {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n    </Value>\n  );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Title of the attribute. Rendered as a <dt>.\n   */\n  label: ReactNode;\n\n  /**\n   * Value to display. Rendered as a <dd>.\n   */\n  value?: ReactNode;\n\n  /**\n   * Will display a \"Redacted\" sticker if there is a value.\n   */\n  redacted?: boolean;\n\n  /**\n   * Renders toggleable eye button to the right of the label\n   */\n  toggleable?: boolean;\n\n  /**\n   * Text to display in presence of null value.\n   */\n  placeholder?: string;\n\n  /**\n   * Word break styling for value.\n   */\n  wordBreak?: WordBreak;\n\n  /**\n   * Render a custom label component\n   */\n  labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n  /**\n   * Render a custom value component\n   */\n  valueComponent?: ComponentType<AttributeValueProps>;\n\n  /**\n   * Renders a HelperTooltip to display help text to the right of the label.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * Custom adornments to display to the right of the label.\n   */\n  right?: ReactNode;\n\n  /**\n   * Renders attributes in a tabular layout.\n   */\n  table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n  ${({ table, size }) =>\n    table &&\n    css`\n      display: table-row;\n\n      > * {\n        display: table-cell;\n      }\n\n      & > ${AttributeLabel} {\n        padding: ${Spacing[1]} 0;\n        padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n      }\n      & > ${Value} {\n        padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n      }\n    `}\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: grid;\n      gap: ${Spacing[4]};\n      grid-template-columns: subgrid;\n      grid-column: span 2;\n    `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n  size: props.size ?? 'md',\n  color: 'tertiary',\n  as: 'dt',\n}))`\n  margin: 0;\n  overflow-wrap: break-word;\n  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst RightContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n  label,\n  value,\n  redacted,\n  placeholder = '-',\n  wordBreak,\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  labelComponent: LabelComponent = AttributeLabel,\n  valueComponent: ValueComponent = AttributeValue,\n  right,\n  helpText,\n  toggleable,\n  table,\n  ...elemProps\n}: AttributeProps) => {\n  const attrCtx = useContext(AttributeContext);\n  const size = attrCtx?.size ?? 'md';\n  const toggleRef = useRef();\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  const valueAsArray = [].concat(value).filter(Boolean);\n  const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n  const state = useToggleState({ defaultSelected: !toggleable });\n  const { buttonProps } = useToggleButton(\n    {\n      'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n      elementType: 'button',\n    },\n    state,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    toggleRef,\n  );\n  const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n  const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n  const show = state.isSelected;\n\n  useEffect(() => {\n    state.setSelected(!toggleable);\n  }, [toggleable]);\n\n  return (\n    <AttributeContainer\n      table={table || attrCtx?.table}\n      horizontal={attrCtx?.horizontal}\n      size={size}\n      {...elemProps}\n    >\n      <LabelComponent id={labelId} aria-details={valueId} size={size}>\n        {label}\n        {helpText && (\n          <RightContainer>\n            <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n          </RightContainer>\n        )}\n        {showToggleButton && (\n          <RightContainer>\n            {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n            <IconButtonContainer {...buttonProps} ref={toggleRef}>\n              {show ? <EyeIcon /> : <EyeOffIcon />}\n            </IconButtonContainer>\n          </RightContainer>\n        )}\n        {right && <RightContainer>{right}</RightContainer>}\n      </LabelComponent>\n      <ValueComponent\n        id={valueId}\n        value={value}\n        placeholder={placeholder}\n        wordBreak={wordBreak}\n        redacted={redacted}\n        show={show}\n        size={size}\n        aria-labelledby={labelId}\n      />\n    </AttributeContainer>\n  );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n  children?: ReactNode;\n  /**\n   * Sets the font size and spacing density for all child Attributes.\n   * Defaults to `'md'`.\n   */\n  size?: AttributeSize;\n} & (\n  | {\n      /**\n       * Set a fixed number of columns for the grid.\n       */\n      colCount?: number;\n      /**\n       * Display attributes in a stacked list with label first then value.\n       */\n      horizontal?: boolean;\n\n      table?: never;\n    }\n  | {\n      /**\n       * Display attributes in a fixed tabular layout.\n       * Set to `full-width` to expand to full width of container.\n       */\n      table?: TableLayoutValue;\n\n      colCount?: never;\n      horizontal?: never;\n    }\n);\n\ntype AttributeGridComponentProps = {\n  colCount?: number;\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n  ${({ colCount, table, horizontal, size }) =>\n    table\n      ? css`\n          display: table;\n          ${\n            table === 'full-width' &&\n            css`\n            width: 100%;\n            table-layout: fixed;\n            border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n          `\n          };\n        `\n      : css`\n          display: grid;\n          gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n          /* If the layout is horizontal we guarentee an even number of columns */\n          grid-template-columns: ${\n            colCount\n              ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n              : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n          };\n        `}\n  margin: 0;\n\n  & + & {\n    padding-bottom: ${Spacing[5]};\n  }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n  return (\n    <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n      <AttributeContext.Provider value={{ horizontal, table, size }}>\n        {children}\n      </AttributeContext.Provider>\n    </AttributeGridComponent>\n  );\n};\n\nexport default AttributeGrid;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/Attribute/Attribute.tsx","../../../src/components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat, uniqueId } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\n\nimport IconButton from '#src/components/Button/IconButton';\nimport Sticker from '#src/components/Sticker';\nimport { Paragraph } from '#src/components/Text';\nimport { HelperTooltip } from '#src/components/Tooltip';\nimport { isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport type { ParagraphSize } from '#src/mixins/text';\n\nexport type WordBreak = 'break-all' | 'break-word' | 'normal';\nexport type TextTransform = 'capitalize' | 'sentence';\nexport type TableLayoutValue = boolean | 'full-width';\n\nexport type AttributeSize = 'sm' | 'md';\n\nexport const AttributeContext = createContext<{\n  table?: TableLayoutValue;\n  horizontal?: boolean;\n  size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    transition-duration: 150ms;\n  }\n\n  :hover {\n    svg {\n      color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple800)};\n    }\n  }\n\n  ${semanticOnly(\n    (tokens) => css`\n      background-color: ${tokens.ActionNeutral};\n      color: ${tokens.FgPrimary};\n\n      svg {\n        color: ${tokens.FgPrimary};\n      }\n\n      svg.pds-icon path[stroke] {\n        stroke: currentColor;\n      }\n\n      &${isHovered}${isNotDisabled} {\n        background-color: ${tokens.ActionNeutralHover};\n        color: ${tokens.FgAccent};\n\n        svg path {\n          stroke: currentColor;\n        }\n      }\n    `,\n  )}\n`;\n\ninterface AttributeValueProps {\n  placeholder: ReactNode;\n  show?: boolean;\n  redacted?: boolean;\n  value?: ReactNode;\n  textTransform?: TextTransform;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n  'aria-labelledby': string;\n  id: string;\n}\n\ninterface ValueFormatterProps {\n  isPlaceholder?: boolean;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n  ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n  color: ${({ isPlaceholder, theme }) =>\n    isPlaceholder\n      ? semanticColor(theme, 'FgSecondary', Color.TextSecondary)\n      : semanticColor(theme, 'FgPrimary', Color.CoreSlate1000)};\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n  word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n  ul,\n  ol {\n    list-style-position: inside;\n  }\n\n  a {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n    text-decoration: none;\n\n    &:visited {\n      color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n    }\n  }\n`;\n\nexport const AttributeValue = ({\n  placeholder,\n  show,\n  redacted,\n  value,\n  wordBreak,\n  size,\n  id,\n  'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n  const isEmpty = value == null || value === '';\n\n  const renderedVal = isEmpty ? (\n    placeholder\n  ) : (\n    <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n  );\n\n  return (\n    <Value\n      isPlaceholder={isEmpty}\n      wordBreak={wordBreak}\n      size={size}\n      title={typeof value === 'string' ? value : undefined}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n    >\n      {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n    </Value>\n  );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Title of the attribute. Rendered as a <dt>.\n   */\n  label: ReactNode;\n\n  /**\n   * Value to display. Rendered as a <dd>.\n   */\n  value?: ReactNode;\n\n  /**\n   * Will display a \"Redacted\" sticker if there is a value.\n   */\n  redacted?: boolean;\n\n  /**\n   * Renders toggleable eye button to the right of the label\n   */\n  toggleable?: boolean;\n\n  /**\n   * Text to display in presence of null value.\n   */\n  placeholder?: string;\n\n  /**\n   * Word break styling for value.\n   */\n  wordBreak?: WordBreak;\n\n  /**\n   * Render a custom label component\n   */\n  labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n  /**\n   * Render a custom value component\n   */\n  valueComponent?: ComponentType<AttributeValueProps>;\n\n  /**\n   * Renders a HelperTooltip to display help text to the right of the label.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * Custom adornments to display to the right of the label.\n   */\n  right?: ReactNode;\n\n  /**\n   * Renders attributes in a tabular layout.\n   */\n  table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n  ${({ table, size }) =>\n    table &&\n    css`\n      display: table-row;\n\n      > * {\n        display: table-cell;\n      }\n\n      & > ${AttributeLabel} {\n        padding: ${Spacing[1]} 0;\n        padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n      }\n      & > ${Value} {\n        padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n      }\n    `}\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: grid;\n      gap: ${Spacing[4]};\n      grid-template-columns: subgrid;\n      grid-column: span 2;\n    `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n  size: props.size ?? 'md',\n  color: 'tertiary',\n  as: 'dt',\n}))`\n  margin: 0;\n  overflow-wrap: break-word;\n  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst RightContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n  label,\n  value,\n  redacted,\n  placeholder = '-',\n  wordBreak,\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  labelComponent: LabelComponent = AttributeLabel,\n  valueComponent: ValueComponent = AttributeValue,\n  right,\n  helpText,\n  toggleable,\n  table,\n  ...elemProps\n}: AttributeProps) => {\n  const attrCtx = useContext(AttributeContext);\n  const size = attrCtx?.size ?? 'md';\n  const toggleRef = useRef();\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  const valueAsArray = [].concat(value).filter(Boolean);\n  const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n  const state = useToggleState({ defaultSelected: !toggleable });\n  const { buttonProps } = useToggleButton(\n    {\n      'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n      elementType: 'button',\n    },\n    state,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    toggleRef,\n  );\n  const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n  const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n  const show = state.isSelected;\n\n  useEffect(() => {\n    state.setSelected(!toggleable);\n  }, [toggleable]);\n\n  return (\n    <AttributeContainer\n      table={table || attrCtx?.table}\n      horizontal={attrCtx?.horizontal}\n      size={size}\n      {...elemProps}\n    >\n      <LabelComponent id={labelId} aria-details={valueId} size={size}>\n        {label}\n        {helpText && (\n          <RightContainer>\n            <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n          </RightContainer>\n        )}\n        {showToggleButton && (\n          <RightContainer>\n            {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n            <IconButtonContainer {...buttonProps} ref={toggleRef}>\n              {show ? <EyeIcon /> : <EyeOffIcon />}\n            </IconButtonContainer>\n          </RightContainer>\n        )}\n        {right && <RightContainer>{right}</RightContainer>}\n      </LabelComponent>\n      <ValueComponent\n        id={valueId}\n        value={value}\n        placeholder={placeholder}\n        wordBreak={wordBreak}\n        redacted={redacted}\n        show={show}\n        size={size}\n        aria-labelledby={labelId}\n      />\n    </AttributeContainer>\n  );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n  children?: ReactNode;\n  /**\n   * Sets the font size and spacing density for all child Attributes.\n   * Defaults to `'md'`.\n   */\n  size?: AttributeSize;\n} & (\n  | {\n      /**\n       * Set a fixed number of columns for the grid.\n       */\n      colCount?: number;\n      /**\n       * Display attributes in a stacked list with label first then value.\n       */\n      horizontal?: boolean;\n\n      table?: never;\n    }\n  | {\n      /**\n       * Display attributes in a fixed tabular layout.\n       * Set to `full-width` to expand to full width of container.\n       */\n      table?: TableLayoutValue;\n\n      colCount?: never;\n      horizontal?: never;\n    }\n);\n\ntype AttributeGridComponentProps = {\n  colCount?: number;\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n  ${({ colCount, table, horizontal, size }) =>\n    table\n      ? css`\n          display: table;\n          ${\n            table === 'full-width' &&\n            css`\n            width: 100%;\n            table-layout: fixed;\n            border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n          `\n          };\n        `\n      : css`\n          display: grid;\n          gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n          /* If the layout is horizontal we guarentee an even number of columns */\n          grid-template-columns: ${\n            colCount\n              ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n              : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n          };\n        `}\n  margin: 0;\n\n  & + & {\n    padding-bottom: ${Spacing[5]};\n  }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n  return (\n    <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n      <AttributeContext.Provider value={{ horizontal, table, size }}>\n        {children}\n      </AttributeContext.Provider>\n    </AttributeGridComponent>\n  );\n};\n\nexport default AttributeGrid;\n"],"mappings":"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"}

package/dist/components/Badge/index.mjs

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

package/dist/components/Banner/index.mjs

@@ -1,14 +1,14 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 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-HWx5Hlmi.mjs";
+import { n as Button } from "../../IconButton-DftINsp7.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
 import { useFocusVisible } from "react-aria";
-//#region components/Banner/Banner.tsx
+//#region src/components/Banner/Banner.tsx
 const StyledBanner = styled("div")`
   ${paragraphMixins.sm};
   display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport { useFocusVisible } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport { withAlpha } from 'design-system/lib/color';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface BannerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n\n  /**\n   * Semantic colour theme for the banner background.\n   *\n   * - `informational` – purple, for general tips or announcements (default).\n   * - `success` – green, for confirmations or completed actions.\n   * - `warning` – yellow, for non-blocking cautions.\n   * - `alert` – red, for errors or destructive warnings.\n   *\n   * @defaultValue 'informational'\n   */\n  variant?: 'informational' | 'success' | 'warning' | 'alert';\n\n  /**\n   * Action affordance rendered to the right of the content.\n   *\n   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.\n   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).\n   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.\n   */\n  action?: string | ReactElement;\n\n  /**\n   * Called when the user clicks the close (×) button.\n   * When provided and `action` is absent, a close icon button is rendered automatically.\n   * When `action` is a string, clicking that string-labelled button calls this handler.\n   */\n  onClose?: VoidFunction;\n\n  /**\n   * When true, the content area stretches to fill the full banner width.\n   * Useful when `children` contains a layout that needs to span the entire space.\n   */\n  extendContentWidth?: boolean;\n}\n\nconst StyledBanner = styled('div')<BannerProps>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: ${Spacing[2]};\n  border-radius: 4px;\n  background: ${({ theme, variant }) => {\n    const tokens = semanticTokens(theme);\n    switch (variant) {\n      case 'success':\n        return tokens ? withAlpha(tokens.FeedbackSuccess1, tokens.Opacity15) : Color.CoreGreen100;\n      case 'warning':\n        return tokens ? withAlpha(tokens.FeedbackWarning1, tokens.Opacity15) : Color.CoreYellow100;\n      case 'alert':\n        return tokens ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity15) : Color.CoreRed100;\n      case 'informational':\n      default:\n        return tokens ? withAlpha(tokens.FeedbackInfo1, tokens.Opacity25) : Color.CorePurple100;\n    }\n  }};\n\n  ${semanticOnly(\n    (tokens) => css`\n      color: ${tokens.FgPrimary};\n\n      svg {\n        color: ${tokens.FgPrimary};\n      }\n    `,\n  )}\n`;\n\nconst BannerContent = styled.div<{ extendContentWidth?: boolean }>`\n  display: flex;\n  align-items: center;\n\n  > svg:first-child {\n    margin-right: ${Spacing[2]};\n    flex-shrink: 0;\n  }\n\n  ${({ extendContentWidth }) =>\n    extendContentWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nconst ActionButton = styled(Button)<{ isFocusVisible?: boolean }>`\n  background-color: transparent;\n  justify-self: space-between;\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: unset;\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nexport const Banner = ({\n  children,\n  variant,\n  action,\n  onClose,\n  extendContentWidth,\n  ...elemProps\n}: BannerProps) => {\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <StyledBanner variant={variant} role='alert' {...elemProps}>\n      <BannerContent extendContentWidth={extendContentWidth}>{children}</BannerContent>\n      {typeof action === 'string'\n        ? onClose && (\n            <ActionButton variant='basic' width='auto' size='sm' onClick={onClose}>\n              {action}\n            </ActionButton>\n          )\n        : action}\n      {!action && onClose && (\n        <ActionButton\n          variant='basic'\n          width='icon'\n          size='sm'\n          aria-label='Close'\n          title='Close'\n          onClick={onClose}\n          isFocusVisible={isFocusVisible}\n        >\n          <XIcon />\n        </ActionButton>\n      )}\n    </StyledBanner>\n  );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;;;AAkDA,MAAM,eAAe,OAAO,MAAM;IAC9B,gBAAgB,GAAG;;;;;;aAMV,QAAQ,GAAG;;iBAEP,EAAE,OAAO,cAAc;CACpC,MAAM,SAAS,eAAe,MAAM;AACpC,SAAQ,SAAR;EACE,KAAK,UACH,QAAO,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAC/E,KAAK,UACH,QAAO,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAC/E,KAAK,QACH,QAAO,SAAS,UAAU,OAAO,iBAAiB,OAAO,UAAU,GAAG,MAAM;EAE9E,QACE,QAAO,SAAS,UAAU,OAAO,eAAe,OAAO,UAAU,GAAG,MAAM;;EAE9E;;IAEA,cACC,WAAW,GAAG;eACJ,OAAO,UAAU;;;iBAGf,OAAO,UAAU;;MAG/B,CAAC;;AAGJ,MAAM,gBAAgB,OAAO,GAAqC;;;;;oBAK9C,QAAQ,GAAG;;;;KAI1B,EAAE,yBACH,sBACA,GAAG;;MAED;;AAGN,MAAM,eAAe,OAAO,OAAO;;;;KAI9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAa,UAAU,EACrB,UACA,SACA,QACA,SACA,oBACA,GAAG,gBACc;CACjB,MAAM,EAAE,mBAAmB,iBAAiB;AAE5C,QACE,qBAAC,cAAD;EAAuB;EAAS,MAAK;EAAQ,GAAI;YAAjD;GACE,oBAAC,eAAD;IAAmC;IAAqB;IAAyB,CAAA;GAChF,OAAO,WAAW,WACf,WACE,oBAAC,cAAD;IAAc,SAAQ;IAAQ,OAAM;IAAO,MAAK;IAAK,SAAS;cAC3D;IACY,CAAA,GAEjB;GACH,CAAC,UAAU,WACV,oBAAC,cAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAW;IACX,OAAM;IACN,SAAS;IACO;cAEhB,oBAAC,OAAD,EAAS,CAAA;IACI,CAAA;GAEJ"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport { useFocusVisible } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport Button from '#src/components/Button';\nimport { withAlpha } from '#src/lib/color';\nimport { isActive, isFocused, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { semanticOnly, semanticTokens } from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/mixins/text';\n\nexport interface BannerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n\n  /**\n   * Semantic colour theme for the banner background.\n   *\n   * - `informational` – purple, for general tips or announcements (default).\n   * - `success` – green, for confirmations or completed actions.\n   * - `warning` – yellow, for non-blocking cautions.\n   * - `alert` – red, for errors or destructive warnings.\n   *\n   * @defaultValue 'informational'\n   */\n  variant?: 'informational' | 'success' | 'warning' | 'alert';\n\n  /**\n   * Action affordance rendered to the right of the content.\n   *\n   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.\n   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).\n   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.\n   */\n  action?: string | ReactElement;\n\n  /**\n   * Called when the user clicks the close (×) button.\n   * When provided and `action` is absent, a close icon button is rendered automatically.\n   * When `action` is a string, clicking that string-labelled button calls this handler.\n   */\n  onClose?: VoidFunction;\n\n  /**\n   * When true, the content area stretches to fill the full banner width.\n   * Useful when `children` contains a layout that needs to span the entire space.\n   */\n  extendContentWidth?: boolean;\n}\n\nconst StyledBanner = styled('div')<BannerProps>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: ${Spacing[2]};\n  border-radius: 4px;\n  background: ${({ theme, variant }) => {\n    const tokens = semanticTokens(theme);\n    switch (variant) {\n      case 'success':\n        return tokens ? withAlpha(tokens.FeedbackSuccess1, tokens.Opacity15) : Color.CoreGreen100;\n      case 'warning':\n        return tokens ? withAlpha(tokens.FeedbackWarning1, tokens.Opacity15) : Color.CoreYellow100;\n      case 'alert':\n        return tokens ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity15) : Color.CoreRed100;\n      case 'informational':\n      default:\n        return tokens ? withAlpha(tokens.FeedbackInfo1, tokens.Opacity25) : Color.CorePurple100;\n    }\n  }};\n\n  ${semanticOnly(\n    (tokens) => css`\n      color: ${tokens.FgPrimary};\n\n      svg {\n        color: ${tokens.FgPrimary};\n      }\n    `,\n  )}\n`;\n\nconst BannerContent = styled.div<{ extendContentWidth?: boolean }>`\n  display: flex;\n  align-items: center;\n\n  > svg:first-child {\n    margin-right: ${Spacing[2]};\n    flex-shrink: 0;\n  }\n\n  ${({ extendContentWidth }) =>\n    extendContentWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nconst ActionButton = styled(Button)<{ isFocusVisible?: boolean }>`\n  background-color: transparent;\n  justify-self: space-between;\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: unset;\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nexport const Banner = ({\n  children,\n  variant,\n  action,\n  onClose,\n  extendContentWidth,\n  ...elemProps\n}: BannerProps) => {\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <StyledBanner variant={variant} role='alert' {...elemProps}>\n      <BannerContent extendContentWidth={extendContentWidth}>{children}</BannerContent>\n      {typeof action === 'string'\n        ? onClose && (\n            <ActionButton variant='basic' width='auto' size='sm' onClick={onClose}>\n              {action}\n            </ActionButton>\n          )\n        : action}\n      {!action && onClose && (\n        <ActionButton\n          variant='basic'\n          width='icon'\n          size='sm'\n          aria-label='Close'\n          title='Close'\n          onClick={onClose}\n          isFocusVisible={isFocusVisible}\n        >\n          <XIcon />\n        </ActionButton>\n      )}\n    </StyledBanner>\n  );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe,OAAO,MAAM;IAC9B,gBAAgB,GAAG;;;;;;aAMV,QAAQ,GAAG;;iBAEP,EAAE,OAAO,cAAc;CACpC,MAAM,SAAS,eAAe,MAAM;AACpC,SAAQ,SAAR;EACE,KAAK,UACH,QAAO,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAC/E,KAAK,UACH,QAAO,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAC/E,KAAK,QACH,QAAO,SAAS,UAAU,OAAO,iBAAiB,OAAO,UAAU,GAAG,MAAM;EAE9E,QACE,QAAO,SAAS,UAAU,OAAO,eAAe,OAAO,UAAU,GAAG,MAAM;;EAE9E;;IAEA,cACC,WAAW,GAAG;eACJ,OAAO,UAAU;;;iBAGf,OAAO,UAAU;;MAG/B,CAAC;;AAGJ,MAAM,gBAAgB,OAAO,GAAqC;;;;;oBAK9C,QAAQ,GAAG;;;;KAI1B,EAAE,yBACH,sBACA,GAAG;;MAED;;AAGN,MAAM,eAAe,OAAO,OAAO;;;;KAI9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAa,UAAU,EACrB,UACA,SACA,QACA,SACA,oBACA,GAAG,gBACc;CACjB,MAAM,EAAE,mBAAmB,iBAAiB;AAE5C,QACE,qBAAC,cAAD;EAAuB;EAAS,MAAK;EAAQ,GAAI;YAAjD;GACE,oBAAC,eAAD;IAAmC;IAAqB;IAAyB,CAAA;GAChF,OAAO,WAAW,WACf,WACE,oBAAC,cAAD;IAAc,SAAQ;IAAQ,OAAM;IAAO,MAAK;IAAK,SAAS;cAC3D;IACY,CAAA,GAEjB;GACH,CAAC,UAAU,WACV,oBAAC,cAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAW;IACX,OAAM;IACN,SAAS;IACO;cAEhB,oBAAC,OAAD,EAAS,CAAA;IACI,CAAA;GAEJ"}

package/dist/components/BottomPanel/index.mjs

@@ -1,16 +1,16 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { useResizablePanel } from "../../lib/useResizablePanel.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
 import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
-import { t as IconButton } from "../../IconButton-HWx5Hlmi.mjs";
-import { t as Badge } from "../../Badge-Bvn3afds.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-SX8E9-Bk.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
+import { t as IconButton } from "../../IconButton-DftINsp7.mjs";
+import { t as Badge } from "../../Badge-8YzapjWf.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-DpXYsWgS.mjs";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from "@persona/icons";
 import { useId } from "react-aria";
-//#region components/BottomPanel/ResizeHandle.tsx
+//#region src/components/BottomPanel/ResizeHandle.tsx
 const DRAGGING_CLASSNAME = "dragging";
 const ResizeHandleContainer = styled.div`
   cursor: row-resize;
@@ -122,7 +122,7 @@ const ResizeHandle = ({ ariaLabel, onDoubleClick, onMoveTo, onRelease, panelRef
 	});
 };
 //#endregion
-//#region components/BottomPanel/ResizableVerticalPanel.tsx
+//#region src/components/BottomPanel/ResizableVerticalPanel.tsx
 const TriStatePanel = styled.div.attrs(({ customHeight, minHeight, panelState }) => ({ style: { height: panelState === "maximized" ? "100%" : `${customHeight ?? minHeight}px` } }))`
   box-sizing: border-box;
   display: flex;
@@ -209,7 +209,7 @@ const ResizableVerticalPanel = ({ children, headerContent, hookState, minHeight
 	});
 };
 //#endregion
-//#region components/BottomPanel/BottomPanel.tsx
+//#region src/components/BottomPanel/BottomPanel.tsx
 const PANEL_MIN_HEIGHT = 33;
 const OPEN_HEIGHT = 200;
 const Header = styled.div`