npm - @persona/design-system - Versions diffs - 0.10.5 → 0.10.7 - Mend

@persona/design-system 0.10.5 → 0.10.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (559) hide show

package/dist/codec.d.mts CHANGED Viewed

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

package/dist/{color-Cy_0z4IY.d.mts → color-Db57Wms_.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { t as CssPercentage } from "./semantic-BLaQSW1r.mjs";
+import { t as CssPercentage } from "./semantic-BZbvb3LV.mjs";
 import { Color } from "@persona/design-tokens";
 //#region src/lib/color.d.ts
@@ -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-Cy_0z4IY.d.mts.map
+//# sourceMappingURL=color-Db57Wms_.d.mts.map

package/dist/complete-typography.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as Rule } from "./index-BWAycP6L.mjs";
+import { r as Rule } from "./index-B9kfFACl.mjs";
 //#region src/lint/rules/complete-typography.d.ts
 declare const completeTypography: Rule;

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

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

	@@ -1 +1 @@
1	- {"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 '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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"}
1	+ {"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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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';\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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"}
1	+ {"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/Banner/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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';\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"}
1	+ {"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 CHANGED Viewed

@@ -1,14 +1,19 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
+import { a as styled, o as useTheme, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
+import { l as usePDSStrings } from "../../i18n-DaOKaFc2.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
 import { useResizablePanel } from "../../lib/useResizablePanel.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
 import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
 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 { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from "@persona/icons";
+import { ArrowCollapseIcon, ArrowExpandIcon, CircleXInverseIcon, XIcon } from "@persona/icons";
 import { useId } from "react-aria";
 //#region src/components/BottomPanel/ResizeHandle.tsx
 const DRAGGING_CLASSNAME = "dragging";
@@ -215,12 +220,50 @@ const OPEN_HEIGHT = 200;
 const Header = styled.div`
   display: flex;
   align-items: center;
+  justify-content: space-between;
   box-sizing: border-box;
   width: 100%;
+  min-width: 0;
   padding-left: ${Spacing[4]};
 `;
+const ErrorSummary = styled(HStack).attrs({ align: "center" })`
+  flex-shrink: 0;
+  padding-right: ${Spacing[2]};
+`;
+const ErrorSummaryDivider = styled.div`
+  width: 1px;
+  height: ${Spacing[6]};
+  background: ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+`;
+const ErrorIndicator = styled(Stack).attrs({
+	align: "center",
+	direction: "horizontal",
+	spacing: Spacing[1]
+})`
+  padding: ${Spacing[1]} ${Spacing[2]};
+  background: none;
+  border: none;
+  border-radius: ${BorderRadius.Sm};
+  font: inherit;
+  color: inherit;
+  ${({ $clickable }) => $clickable ? css`
+          cursor: pointer;
+          &:hover {
+            background: ${({ theme }) => semanticColor(theme, "ActionNeutralHover", theme.color.variants.basic.hover)};
+          }
+          &:active {
+            background: ${({ theme }) => semanticColor(theme, "ActionNeutralActive", theme.color.variants.basic.highlight)};
+          }
+          ${focusOutline}
+        ` : ""}
+`;
 const HeaderTabBar = styled(TabBar)`
   border-bottom: none;
+  flex: 1;
+  min-width: 0;
 `;
 const PanelContent = styled.div`
   ${({ $hidden }) => $hidden ? css`
@@ -241,7 +284,9 @@ const PanelContent = styled.div`
 * panel. Owns the tab bar, expand/collapse/resize, and always-mounted content;
 * the caller owns what each panel shows.
 */
-const BottomPanel = forwardRef(function BottomPanel({ panels }, ref) {
+const BottomPanel = forwardRef(function BottomPanel({ panels, errorCount, onErrorCountClick }, ref) {
+	const strings = usePDSStrings();
+	const theme = useTheme();
 	const baseId = useId();
 	const [selected, setSelected] = useState(panels[0]?.label);
 	const hasSelected = panels.some((panel) => panel.label === selected);
@@ -266,14 +311,30 @@ const BottomPanel = forwardRef(function BottomPanel({ panels }, ref) {
 		if (panels.some((panel) => panel.label === label)) openPanel(label);
 	} }), [openPanel, panels]);
 	return /* @__PURE__ */ jsx(ResizableVerticalPanel, {
-		headerContent: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderTabBar, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(Tab, {
+		headerContent: /* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsx(HeaderTabBar, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(Tab, {
 			"aria-controls": `${baseId}-panel-${index}`,
 			badge: panel.badge ? /* @__PURE__ */ jsx(Badge, { children: panel.badge }) : void 0,
 			id: `${baseId}-tab-${index}`,
 			onClick: () => openPanel(panel.label),
 			selected: selectedLabel === panel.label,
 			children: panel.label
-		}, panel.label)) }) }),
+		}, panel.label)) }), errorCount != null && /* @__PURE__ */ jsxs(ErrorSummary, { children: [/* @__PURE__ */ jsx(ErrorSummaryDivider, { "aria-hidden": true }), /* @__PURE__ */ jsxs(ErrorIndicator, {
+			$clickable: onErrorCountClick != null,
+			"aria-label": strings.errorCount(errorCount),
+			as: onErrorCountClick ? "button" : "div",
+			onClick: onErrorCountClick,
+			role: onErrorCountClick ? void 0 : "img",
+			type: onErrorCountClick ? "button" : void 0,
+			children: [/* @__PURE__ */ jsx(CircleXInverseIcon, {
+				"aria-hidden": true,
+				color: errorCount === 0 ? semanticColor(theme, "FgDisabled", Color.TextDisabled) : semanticColor(theme, "FgDanger1", Color.TextDanger)
+			}), /* @__PURE__ */ jsx(Paragraph, {
+				as: "span",
+				color: errorCount === 0 ? "disabled" : "primary",
+				size: "md",
+				children: errorCount
+			})]
+		})] })] }),
 		hookState: resizablePanelState,
 		minHeight: PANEL_MIN_HEIGHT,
 		children: panels.map((panel, index) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/BottomPanel/ResizeHandle.tsx","../../../src/components/BottomPanel/ResizableVerticalPanel.tsx","../../../src/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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"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/BottomPanel/ResizeHandle.tsx","../../../src/components/BottomPanel/ResizableVerticalPanel.tsx","../../../src/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 { semanticScrollbar } from '#src/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, useTheme } from 'styled-components';\n\nimport Badge from '@persona/design-system/components/Badge';\nimport { HStack, Stack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { usePDSStrings } from '@persona/design-system/lib/i18n';\nimport { semanticColor } from '@persona/design-system/lib/semanticColor';\nimport { PanelState, useResizablePanel } from '@persona/design-system/lib/useResizablePanel';\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\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 Error count rendered as an icon + count at the right edge of the header, next to\n * the expand/collapse controls. `0` renders dimmed; `undefined` hides it.\n /\n errorCount?: number;\n /* Turns the error count into a button (e.g. to open the panel listing the errors). /\n onErrorCountClick?: () => void;\n}\n\nconst Header = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n padding-left: ${Spacing[4]};\n`;\n\nconst ErrorSummary = styled(HStack).attrs({ align: 'center' })`\n flex-shrink: 0;\n padding-right: ${Spacing[2]};\n`;\n\nconst ErrorSummaryDivider = styled.div`\n width: 1px;\n height: ${Spacing[6]};\n background: ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\n// styled(Stack), not styled(HStack): HStack is a plain function component, so `as` would\n// replace it entirely and drop the flex layout when this renders as a <button>.\nconst ErrorIndicator = styled(Stack).attrs<{ $clickable: boolean }>({\n align: 'center',\n direction: 'horizontal',\n spacing: Spacing[1],\n})`\n padding: ${Spacing[1]} ${Spacing[2]};\n background: none;\n border: none;\n border-radius: ${BorderRadius.Sm};\n font: inherit;\n color: inherit;\n ${({ $clickable }) =>\n $clickable\n ? css`\n cursor: pointer;\n\n &:hover {\n background: ${({ theme }) =>\n semanticColor(theme, 'ActionNeutralHover', theme.color.variants.basic.hover)};\n }\n\n &:active {\n background: ${({ theme }) =>\n semanticColor(theme, 'ActionNeutralActive', theme.color.variants.basic.highlight)};\n }\n\n ${focusOutline}\n `\n : ''}\n`;\n\n// The header row draws the divider edge to edge; the tab bar must not add its own.\n// It shrinks and clips overflowing tabs so the header controls stay pinned right.\nconst HeaderTabBar = styled(TabBar)`\n border-bottom: none;\n flex: 1;\n min-width: 0;\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, errorCount, onErrorCountClick },\n ref,\n) {\n const strings = usePDSStrings();\n const theme = useTheme();\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 {errorCount != null && (\n <ErrorSummary>\n <ErrorSummaryDivider aria-hidden />\n <ErrorIndicator\n $clickable={onErrorCountClick != null}\n aria-label={strings.errorCount(errorCount)}\n as={onErrorCountClick ? 'button' : 'div'}\n onClick={onErrorCountClick}\n role={onErrorCountClick ? undefined : 'img'}\n type={onErrorCountClick ? 'button' : undefined}\n >\n <CircleXInverseIcon\n aria-hidden\n color={\n errorCount === 0\n ? semanticColor(theme, 'FgDisabled', Color.TextDisabled)\n : semanticColor(theme, 'FgDanger1', Color.TextDanger)\n }\n />\n <Paragraph as='span' color={errorCount === 0 ? 'disabled' : 'primary'} size='md'>\n {errorCount}\n </Paragraph>\n </ErrorIndicator>\n </ErrorSummary>\n )}\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":";;;;;;;;;;;;;;;;;;AAMA,MAAM,qBAAqB;AAgB3B,MAAM,wBAAwB,OAAO,GAAG;;;YAG5B,QAAQ,GAAG;UACb,QAAQ,GAAG;;;aAGR,UAAU,SAAS;;;;;;WAMrB,QAAQ,GAAG;;;;;;;;;;MAUhB,mBAAmB;yBACA,EAAE,YAAY,MAAM,MAAM,OAAO,OAAO;;;;AAKjE,MAAa,gBAAuC,EAClD,WACA,eACA,UACA,WACA,eACI;CACJ,MAAM,kBAAkB,OAAuB,KAAK;CACpD,MAAM,iBAAiB,OAAO,EAAE;CAChC,MAAM,qBAAqB,OAAsB,KAAK;CACtD,MAAM,uBAAuB,OAGnB,KAAK;CAGf,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,eAAe,OAAO,UAAU;AACtC,aAAY,UAAU;AACtB,cAAa,UAAU;CAEvB,MAAM,gCAAgC;EACpC,MAAM,YAAY,qBAAqB;AACvC,MAAI,CAAC,UACH;AAGF,WAAS,oBAAoB,eAAe,UAAU,WAAW;AACjE,WAAS,oBAAoB,aAAa,UAAU,UAAU;AAC9D,WAAS,oBAAoB,iBAAiB,UAAU,UAAU;AAClE,uBAAqB,UAAU;;CAOjC,MAAM,WAAW,cAAsB;AACrC,MAAI,mBAAmB,YAAY,UACjC;AAGF,qBAAmB,UAAU;AAC7B,2BAAyB;AACzB,MAAI;AACF,mBAAgB,SAAS,sBAAsB,UAAU;UACnD;AAIR,kBAAgB,SAAS,UAAU,OAAO,mBAAmB;AAC7D,iBAAe,UAAU;AACzB,eAAa,WAAW;;CAG1B,MAAM,6BAA6B,UAAwB;AACzD,MAAI,mBAAmB,YAAY,MAAM,UACvC;AAGF,cAAY,QAAQ,MAAM,UAAU,eAAe,QAAQ;;CAG7D,MAAM,6BAA6B;AACjC,2BAAyB;EAEzB,MAAM,YAAY;GAChB,YAAY,UAAwB,QAAQ,MAAM,UAAU;GAC5D,YAAY;GACb;AACD,uBAAqB,UAAU;AAC/B,WAAS,iBAAiB,eAAe,UAAU,WAAW;AAC9D,WAAS,iBAAiB,aAAa,UAAU,UAAU;AAC3D,WAAS,iBAAiB,iBAAiB,UAAU,UAAU;;CAGjE,MAAM,aAAa,OAAO,QAAQ;AAClC,YAAW,UAAU;AACrB,iBAAgB;AACd,eAAa;GACX,MAAM,kBAAkB,mBAAmB;AAC3C,OAAI,mBAAmB,KACrB,YAAW,QAAQ,gBAAgB;;IAGtC,EAAE,CAAC;AAEN,QACE,oBAAC,uBAAD;EACE,cAAY;EACG;EACf,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,qBAAiB;AACjB,MAAE,gBAAgB;;;EAGtB,uBAAuB,MAAM,QAAQ,EAAE,UAAU;EACjD,kBAAkB,MAAM,QAAQ,EAAE,UAAU;EAC5C,gBAAgB,MAAM;AAGpB,OAAI,EAAE,WAAW,KAAK,mBAAmB,WAAW,KAClD;GAEF,MAAM,YAAY,SAAS,SAAS,uBAAuB;AAC3D,kBAAe,UAAU,YAAY,UAAU,MAAM,EAAE,UAAU;AACjE,sBAAmB,UAAU,EAAE;AAC/B,mBAAgB,SAAS,UAAU,IAAI,mBAAmB;AAC1D,yBAAsB;AACtB,OAAI;AACF,oBAAgB,SAAS,kBAAkB,EAAE,UAAU;WACjD;AAIR,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;EAErB,cAAc,MAAM,QAAQ,EAAE,UAAU;EACxC,KAAK;EACL,MAAK;EACL,UAAU;EACV,CAAA;;;;ACtJN,MAAM,gBAAgB,OAAO,IAAI,OAI7B,EAAE,cAAc,WAAW,kBAAkB,EAC/C,OAAO,EACL,QAAQ,eAAA,cAAsC,SAAS,GAAG,gBAAgB,UAAU,KACrF,EACF,EAAE;;;;;uBASoB,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;iBAEnD,EAAE,gBAAgB,UAAU;;0BAEnB,MAAM,cAAc;aACjC,UAAU,OAAO;;AAG9B,MAAM,kBAAkB,OAAO,GAAG;;;;uCAIK,MAAM,cAAc;;AAG3D,MAAM,yBAAyB,OAAO,GAAG;;;eAG1B,QAAQ,GAAG;SACjB,QAAQ,GAAG;;;AAIpB,MAAM,mBAAmB,OAAO,GAAG;;wBAEX,QAAQ,GAAG;;IAE/B,kBAAkB;;;;;;;;;AAUtB,MAAa,0BAA2D,EACtE,UACA,eACA,WACA,gBACI;CACJ,MAAM,EACJ,UACA,gBAAgB,qBAChB,mBACA,UACA,YACA,SACA,MACA,oBACE;CACJ,MAAM,WAAW,OAAuB,KAAK;CAE7C,MAAM,eAAgB,QAAQ,QAAQ,OAAO,aAAc,eAAA;CAG3D,MAAM,kBAAkB,YAAoB;EAC1C,MAAM,QAAQ,SAAS;EACvB,MAAM,YAAY,OAAO;AACzB,MAAI,CAAC,SAAS,CAAC,UACb;EAEF,MAAM,cAAc,MAAM,uBAAuB,CAAC;EAClD,MAAM,eAAe,UAAU,uBAAuB,CAAC;AACvD,sBAAoB,cAAc,SAAS,cAAc,aAAa;;AAGxE,QACE,qBAAC,eAAD;EACE,cAAW;EACX,cAAc;EACH;EACC;EACZ,KAAK;EACL,MAAK;YANP;GAQE,oBAAC,cAAD;IACE,WAAU;IACV,eAAe;IACf,UAAU;IACV,WAAW;IACD;IACV,CAAA;GAEF,qBAAC,iBAAD,EAAA,UAAA,CACG,eAEA,gBACC,qBAAC,wBAAD,EAAA,UAAA,CACG,eAAA,cACC,oBAAC,YAAD;IAAY,cAAW;IAA2B,SAAS;IAAS,MAAK;cACvE,oBAAC,mBAAD,EAAqB,CAAA;IACV,CAAA,GAEb,oBAAC,YAAD;IAAY,cAAW;IAA4B,SAAS;IAAU,MAAK;cACzE,oBAAC,iBAAD,EAAmB,CAAA;IACR,CAAA,EAEf,oBAAC,YAAD;IAAY,cAAW;IAAqB,SAAS;IAAU,MAAK;cAClE,oBAAC,OAAD,EAAS,CAAA;IACE,CAAA,CACU,EAAA,CAAA,CAEX,EAAA,CAAA;GAElB,oBAAC,kBAAD,EAAmB,UAA4B,CAAA;GACjC;;;;;AC5HpB,MAAM,mBAAmB;AAEzB,MAAM,cAAc;AA+BpB,MAAM,SAAS,OAAO,GAAG;;;;;;;kBAOP,QAAQ,GAAG;;AAG7B,MAAM,eAAe,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;;mBAE3C,QAAQ,GAAG;;AAG9B,MAAM,sBAAsB,OAAO,GAAG;;YAE1B,QAAQ,GAAG;iBACN,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;AAKzF,MAAM,iBAAiB,OAAO,MAAM,CAAC,MAA+B;CAClE,OAAO;CACP,WAAW;CACX,SAAS,QAAQ;CAClB,CAAC;aACW,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;mBAGnB,aAAa,GAAG;;;KAG9B,EAAE,iBACH,aACI,GAAG;;;;2BAIgB,EAAE,YACf,cAAc,OAAO,sBAAsB,MAAM,MAAM,SAAS,MAAM,MAAM,CAAC;;;;2BAIhE,EAAE,YACf,cAAc,OAAO,uBAAuB,MAAM,MAAM,SAAS,MAAM,UAAU,CAAC;;;YAGpF,aAAa;YAEjB,GAAG;;AAKX,MAAM,eAAe,OAAO,OAAO;;;;;AAMnC,MAAM,eAAe,OAAO,GAAyB;KAChD,EAAE,cACH,UACI,GAAG;;;;;;YAOH,GAAG;;;;;UAKD;;;;;;;AAQV,MAAM,cAAc,WAAgD,SAAS,YAC3E,EAAE,QAAQ,YAAY,qBACtB,KACA;CACA,MAAM,UAAU,eAAe;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,SAAS,OAAO;CACtB,MAAM,CAAC,UAAU,eAAe,SAA6B,OAAO,IAAI,MAAM;CAG9E,MAAM,cAAc,OAAO,MAAM,UAAU,MAAM,UAAU,SAAS;CACpE,MAAM,gBAAgB,cAAc,WAAW,OAAO,IAAI;AAC1D,iBAAgB;AACd,MAAI,CAAC,YACH,aAAY,cAAc;IAE3B,CAAC,aAAa,cAAc,CAAC;CAEhC,MAAM,sBAAsB,kBAAkB;EAC5C,aAAa;EACb,SAAS;EACV,CAAC;CACF,MAAM,EAAE,UAAU,YAAY,SAAS;CAGvC,MAAM,YAAY,aACf,UAAkB;AACjB,MAAI,eAAA,aAAqC,QAAQ,QAAQ,QAAQ,kBAC/D,UAAS,YAAY;AAEvB,cAAY,MAAM;IAEpB;EAAC;EAAU;EAAY;EAAK,CAC7B;AAED,qBACE,YACO,EACL,YAAY,UAAkB;AAC5B,MAAI,OAAO,MAAM,UAAU,MAAM,UAAU,MAAM,CAC/C,WAAU,MAAM;IAGrB,GACD,CAAC,WAAW,OAAO,CACpB;AAED,QACE,oBAAC,wBAAD;EACE,eACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,oBAAC,KAAD;GACE,iBAAe,GAAG,OAAO,SAAS;GAClC,OAAO,MAAM,QAAQ,oBAAC,OAAD,EAAA,UAAQ,MAAM,OAAc,CAAA,GAAG,KAAA;GACpD,IAAI,GAAG,OAAO,OAAO;GAErB,eAAe,UAAU,MAAM,MAAM;GACrC,UAAU,kBAAkB,MAAM;aAEjC,MAAM;GACH,EALC,MAAM,MAKP,CACN,EACW,CAAA,EACd,cAAc,QACb,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAqB,eAAA,MAAc,CAAA,EACnC,qBAAC,gBAAD;GACE,YAAY,qBAAqB;GACjC,cAAY,QAAQ,WAAW,WAAW;GAC1C,IAAI,oBAAoB,WAAW;GACnC,SAAS;GACT,MAAM,oBAAoB,KAAA,IAAY;GACtC,MAAM,oBAAoB,WAAW,KAAA;aANvC,CAQE,oBAAC,oBAAD;IACE,eAAA;IACA,OACE,eAAe,IACX,cAAc,OAAO,cAAc,MAAM,aAAa,GACtD,cAAc,OAAO,aAAa,MAAM,WAAW;IAEzD,CAAA,EACF,oBAAC,WAAD;IAAW,IAAG;IAAO,OAAO,eAAe,IAAI,aAAa;IAAW,MAAK;cACzE;IACS,CAAA,CACG;KACJ,EAAA,CAAA,CAEV,EAAA,CAAA;EAEX,WAAW;EACX,WAAW;YAEV,OAAO,KAAK,OAAO,UAAU;GAC5B,MAAM,aAAa,kBAAkB,MAAM;AAC3C,UACE,oBAAC,cAAD;IACE,SAAS,CAAC;IACV,eAAa,CAAC;IACd,mBAAiB,GAAG,OAAO,OAAO;IAClC,IAAI,GAAG,OAAO,SAAS;IAEvB,MAAK;cAEJ,MAAM;IACM,EAJR,MAAM,MAIE;IAEjB;EACqB,CAAA;EAE3B"}

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

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

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

@@ -1,3 +1,3 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-Cg8KyT5M.mjs";
-import { t as IconButton } from "../../IconButton-KhCwTwPx.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-B79_aXfC.mjs";
+import { t as IconButton } from "../../IconButton-CaEvsrOn.mjs";
 export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/ButtonGroup/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport type {\n ToggleGroupMultipleProps,\n ToggleGroupSingleProps,\n} from '@radix-ui/react-toggle-group';\nimport { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\nimport IconButton from '~~design-system~~/components/Button/IconButton';\nimport { buttonPalette } from '~~design-system~~/components/Button/palette';\nimport useFormField from '~~design-system~~/components/FormControl/useFormField';\nimport { withAlpha } from '~~design-system~~/lib/color';\nimport { semanticOnly } from '~~design-system~~/lib/semanticColor';\n\nexport interface ButtonGroupProps {\n id?: string;\n className?: string;\n fullWidth?: boolean;\n}\n\nconst OptionItem = styled(IconButton)`\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n flex: 1;\n border-radius: ${BorderRadius.Md};\n width: 32px;\n height: 32px;\n background-color: ${({ theme }) => buttonPalette(theme, 'basic').default};\n white-space: nowrap;\n\n // radix-toggle-group adds a wrapping div to the options, so this is to\n // make sure the content is always center-aligned\n & > div {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &[data-state='on'] {\n background-color: ${({ theme }) => buttonPalette(theme, 'basic').active};\n }\n\n ${semanticOnly(\n (tokens) => css`\n &:disabled {\n background-color: ${withAlpha(tokens.ActionNeutral, tokens.Opacity65)};\n }\n `,\n )}\n\n &:first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &:last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n\n &[tabindex='0'] {\n z-index: 1;\n }\n`;\n\nconst ButtonGroupContainer = styled.div<{ fullWidth?: boolean }>`\n display: inline-flex;\n justify-content: space-between;\n border-radius: 4px;\n width: ${({ fullWidth }) => (fullWidth ? `100%` : `max-content`)};\n gap: 1px;\n\n > * {\n ${({ fullWidth }) =>\n fullWidth &&\n css`\n flex: 1;\n `}\n }\n`;\n\nexport const ButtonGroup = ({\n children,\n fullWidth,\n ...props\n}: (ToggleGroupSingleProps \| ToggleGroupMultipleProps) & ButtonGroupProps) => {\n const { disabled } = props;\n const field = useFormField({ inputId: props.id, disabled });\n\n return (\n <ToggleGroupPrimitive.Root\n {...props}\n disabled={field.disabled}\n aria-describedby={field.helperTextId}\n aria-errormessage={field.hasError ? field.helperTextId : undefined}\n aria-invalid={field.hasError}\n >\n <ButtonGroupContainer fullWidth={fullWidth} {...props}>\n {children}\n </ButtonGroupContainer>\n </ToggleGroupPrimitive.Root>\n );\n};\n\nexport default ButtonGroup;\n\nconst ButtonItem = forwardRef<HTMLButtonElement, ToggleGroupPrimitive.ToggleGroupItemProps>(\n function ButtonItem(props: ToggleGroupPrimitive.ToggleGroupItemProps, forwardedRef) {\n return <OptionItem ref={forwardedRef} {...props} />;\n },\n);\n\nexport const ButtonGroupItem = forwardRef<\n HTMLButtonElement,\n ToggleGroupPrimitive.ToggleGroupItemProps\n>(function ButtonGroupItem({ children, ...props }, forwardedRef) {\n return (\n <ToggleGroupPrimitive.Item {...props} ref={forwardedRef} asChild>\n <ButtonItem {...props}>{children}</ButtonItem>\n </ToggleGroupPrimitive.Item>\n );\n});\n"],"mappings":";;;;;;;;;;~~AAqBA~~,MAAM,aAAa,OAAO,WAAW;;;;;;mBAMlB,aAAa,GAAG;;;uBAGZ,EAAE,YAAY,cAAc,OAAO,QAAQ,CAAC,QAAQ;;;;;;;;;;;;yBAYlD,EAAE,YAAY,cAAc,OAAO,QAAQ,CAAC,OAAO;;;IAGxE,cACC,WAAW,GAAG;;4BAES,UAAU,OAAO,eAAe,OAAO,UAAU,CAAC;;MAG3E,CAAC;;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,uBAAuB,OAAO,GAA4B;;;;YAIpD,EAAE,gBAAiB,YAAY,SAAS,cAAe;;;;OAI5D,EAAE,gBACH,aACA,GAAG;;QAED;;;AAIR,MAAa,eAAe,EAC1B,UACA,WACA,GAAG,YACyE;CAC5E,MAAM,EAAE,aAAa;CACrB,MAAM,QAAQ,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU,CAAC;AAE3D,QACE,oBAAC,qBAAqB,MAAtB;EACE,GAAI;EACJ,UAAU,MAAM;EAChB,oBAAkB,MAAM;EACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;EACzD,gBAAc,MAAM;YAEpB,oBAAC,sBAAD;GAAiC;GAAW,GAAI;GAC7C;GACoB,CAAA;EACG,CAAA;;AAMhC,MAAM,aAAa,WACjB,SAAS,WAAW,OAAkD,cAAc;AAClF,QAAO,oBAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EAEtD;AAED,MAAa,kBAAkB,WAG7B,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS,cAAc;AAC/D,QACE,oBAAC,qBAAqB,MAAtB;EAA2B,GAAI;EAAO,KAAK;EAAc,SAAA;YACvD,oBAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpB,CAAA;EAE9B"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport type {\n ToggleGroupMultipleProps,\n ToggleGroupSingleProps,\n} from '@radix-ui/react-toggle-group';\nimport { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport IconButton from '#src/components/Button/IconButton';\nimport { buttonPalette } from '#src/components/Button/palette';\nimport useFormField from '#src/components/FormControl/useFormField';\nimport { withAlpha } from '#src/lib/color';\nimport { semanticOnly } from '#src/lib/semanticColor';\n\nexport interface ButtonGroupProps {\n id?: string;\n className?: string;\n fullWidth?: boolean;\n}\n\nconst OptionItem = styled(IconButton)`\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n flex: 1;\n border-radius: ${BorderRadius.Md};\n width: 32px;\n height: 32px;\n background-color: ${({ theme }) => buttonPalette(theme, 'basic').default};\n white-space: nowrap;\n\n // radix-toggle-group adds a wrapping div to the options, so this is to\n // make sure the content is always center-aligned\n & > div {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &[data-state='on'] {\n background-color: ${({ theme }) => buttonPalette(theme, 'basic').active};\n }\n\n ${semanticOnly(\n (tokens) => css`\n &:disabled {\n background-color: ${withAlpha(tokens.ActionNeutral, tokens.Opacity65)};\n }\n `,\n )}\n\n &:first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &:last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n\n &[tabindex='0'] {\n z-index: 1;\n }\n`;\n\nconst ButtonGroupContainer = styled.div<{ fullWidth?: boolean }>`\n display: inline-flex;\n justify-content: space-between;\n border-radius: 4px;\n width: ${({ fullWidth }) => (fullWidth ? `100%` : `max-content`)};\n gap: 1px;\n\n > * {\n ${({ fullWidth }) =>\n fullWidth &&\n css`\n flex: 1;\n `}\n }\n`;\n\nexport const ButtonGroup = ({\n children,\n fullWidth,\n ...props\n}: (ToggleGroupSingleProps \| ToggleGroupMultipleProps) & ButtonGroupProps) => {\n const { disabled } = props;\n const field = useFormField({ inputId: props.id, disabled });\n\n return (\n <ToggleGroupPrimitive.Root\n {...props}\n disabled={field.disabled}\n aria-describedby={field.helperTextId}\n aria-errormessage={field.hasError ? field.helperTextId : undefined}\n aria-invalid={field.hasError}\n >\n <ButtonGroupContainer fullWidth={fullWidth} {...props}>\n {children}\n </ButtonGroupContainer>\n </ToggleGroupPrimitive.Root>\n );\n};\n\nexport default ButtonGroup;\n\nconst ButtonItem = forwardRef<HTMLButtonElement, ToggleGroupPrimitive.ToggleGroupItemProps>(\n function ButtonItem(props: ToggleGroupPrimitive.ToggleGroupItemProps, forwardedRef) {\n return <OptionItem ref={forwardedRef} {...props} />;\n },\n);\n\nexport const ButtonGroupItem = forwardRef<\n HTMLButtonElement,\n ToggleGroupPrimitive.ToggleGroupItemProps\n>(function ButtonGroupItem({ children, ...props }, forwardedRef) {\n return (\n <ToggleGroupPrimitive.Item {...props} ref={forwardedRef} asChild>\n <ButtonItem {...props}>{children}</ButtonItem>\n </ToggleGroupPrimitive.Item>\n );\n});\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,aAAa,OAAO,WAAW;;;;;;mBAMlB,aAAa,GAAG;;;uBAGZ,EAAE,YAAY,cAAc,OAAO,QAAQ,CAAC,QAAQ;;;;;;;;;;;;yBAYlD,EAAE,YAAY,cAAc,OAAO,QAAQ,CAAC,OAAO;;;IAGxE,cACC,WAAW,GAAG;;4BAES,UAAU,OAAO,eAAe,OAAO,UAAU,CAAC;;MAG3E,CAAC;;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,uBAAuB,OAAO,GAA4B;;;;YAIpD,EAAE,gBAAiB,YAAY,SAAS,cAAe;;;;OAI5D,EAAE,gBACH,aACA,GAAG;;QAED;;;AAIR,MAAa,eAAe,EAC1B,UACA,WACA,GAAG,YACyE;CAC5E,MAAM,EAAE,aAAa;CACrB,MAAM,QAAQ,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU,CAAC;AAE3D,QACE,oBAAC,qBAAqB,MAAtB;EACE,GAAI;EACJ,UAAU,MAAM;EAChB,oBAAkB,MAAM;EACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;EACzD,gBAAc,MAAM;YAEpB,oBAAC,sBAAD;GAAiC;GAAW,GAAI;GAC7C;GACoB,CAAA;EACG,CAAA;;AAMhC,MAAM,aAAa,WACjB,SAAS,WAAW,OAAkD,cAAc;AAClF,QAAO,oBAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EAEtD;AAED,MAAa,kBAAkB,WAG7B,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS,cAAc;AAC/D,QACE,oBAAC,qBAAqB,MAAtB;EAA2B,GAAI;EAAO,KAAK;EAAc,SAAA;YACvD,oBAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpB,CAAA;EAE9B"}

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

@@ -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-fwlbzxYx.mjs";
-import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CfECLwQ6.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-C9oYPBLv.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-DOIqF954.mjs";
 export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

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

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-Bmo8B-Q3.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-BLMJwLBV.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 };

package/dist/components/Checkbox/index.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-ZywrdT_h.mjs";
+import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-EgYclGfH.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };