npm - @persona/design-system - Versions diffs - 0.7.0 → 0.7.2 - Mend

@persona/design-system 0.7.0 → 0.7.2

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 (468) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,26 @@
+## 0.7.2 (2026-09-29)
+### Features
+- **design-system:** add WizardModal with progress and step chrome
+- **design-system:** add Accordion component
+- **design-system:** render a required asterisk on FormLabel from the required prop
+- **design-system:** add single and split page layouts
+### Bug Fixes
+- **design-system:** send a saved-view rename once instead of up to three times
+- **design-system:** stop ControlBar saved-view tabs oscillating at some widths
+- **design-system:** drive WizardModal confirm pending state from submit lock
+- **design-system:** read Accordion colors through semanticColor
+- **design-system:** use FgDanger1 semantic token for required asterisk
+## 0.7.1 (2026-09-24)
+### Bug Fixes
+- **filters:** add a signals field type to Filter V2 ([#103828](https://github.com/persona-id/persona-design-system/issues/103828))
 ## 0.7.0 (2026-09-24)
 ### Features

package/README.md CHANGED Viewed

@@ -8,20 +8,20 @@ This project contains everything related to the Persona Design System.
 yarn add @persona/design-system @persona/design-tokens @persona/icons 'styled-components@^5.3.5'
 ```
-`@persona/design-tokens`, `@persona/icons`, and `styled-components` are peer dependencies, so
-they must be installed alongside the design system — Yarn does not add them for you. PDS requires
+`@persona/design-tokens`, `@persona/icons`, and `styled-components` are peer dependencies, so they
+must be installed alongside the design system — Yarn does not add them for you. PDS requires
 `styled-components` v5; v6 is a breaking major.
 ## Skills for AI coding agents
-The package bundles an [Agent Skill](https://agentskills.io) under `skills/ui-authoring/`,
-versioned alongside the components it documents:
+The package bundles an [Agent Skill](https://agentskills.io) under `skills/ui-authoring/`, versioned
+alongside the components it documents:
-| File            | Contents                                                                                |
-| --------------- | --------------------------------------------------------------------------------------- |
-| `SKILL.md`      | Design tokens, component-first guidance, and the rules that matter most when writing UI |
-| `TOKENS.md`     | `Color` / `Spacing` / `Typography` selection and catalog                                |
-| `PATTERNS.md`   | Forms, layout, indicators, feedback, empty states, panels                                |
+| File            | Contents                                                                                                                                 |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `SKILL.md`      | Design tokens, component-first guidance, and the rules that matter most when writing UI                                                  |
+| `TOKENS.md`     | `Color` / `Spacing` / `Typography` selection and catalog                                                                                 |
+| `PATTERNS.md`   | Forms, layout, indicators, feedback, empty states, panels                                                                                |
 | `COMPONENTS.md` | Which PDS component to use (and its import path); APIs live in each component's `.mdx` when one exists, otherwise in the published types |
 Point your agent at `node_modules/@persona/design-system/skills/ui-authoring/SKILL.md`, or copy the

package/dist/Accordion.d.mts ADDED Viewed

@@ -0,0 +1,38 @@
+import { n as AccordionTitleTypography, t as AccordionSize } from "./accordionTitleTypography-BYhjSN9t.mjs";
+import { AccordionTitleHeadingAs } from "./AccordionItem.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+//#region components/Accordion/Accordion.d.ts
+type AccordionItemProps = {
+  id?: string;
+  title: string;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  disabled?: boolean;
+};
+type AccordionProps = {
+  items: AccordionItemProps[];
+  size?: AccordionSize;
+  dividers?: boolean;
+  titleTypography?: AccordionTitleTypography;
+  /**
+   * Heading element for each item title (inside the trigger), matching Card section headings.
+   * Defaults to `h3`; use a lower level when the page already uses higher headings.
+   */
+  titleHeadingAs?: AccordionTitleHeadingAs;
+  'aria-label'?: string;
+  className?: string;
+};
+declare const Accordion: ({
+  items,
+  size,
+  dividers,
+  titleTypography,
+  titleHeadingAs,
+  "aria-label": ariaLabel,
+  className
+}: AccordionProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Accordion, Accordion as default, AccordionItemProps, AccordionProps };
+//# sourceMappingURL=Accordion.d.mts.map

package/dist/AccordionItem.d.mts ADDED Viewed

@@ -0,0 +1,31 @@
+import { n as AccordionTitleTypography, t as AccordionSize } from "./accordionTitleTypography-BYhjSN9t.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+//#region components/Accordion/AccordionItem.d.ts
+type AccordionTitleHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type AccordionItemComponentProps = {
+  title: string;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  disabled?: boolean;
+  showDivider?: boolean;
+  size: AccordionSize;
+  titleTypography: AccordionTitleTypography;
+  usesTitleTypographyOverride: boolean;
+  titleHeadingAs: AccordionTitleHeadingAs;
+};
+declare const AccordionItem: ({
+  title,
+  children,
+  defaultExpanded,
+  disabled,
+  showDivider,
+  size,
+  titleTypography,
+  usesTitleTypographyOverride,
+  titleHeadingAs
+}: AccordionItemComponentProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AccordionItemComponentProps, type AccordionSize, AccordionTitleHeadingAs, type AccordionTitleTypography, AccordionItem as default };
+//# sourceMappingURL=AccordionItem.d.mts.map

package/dist/{Action-C7INft7X.d.mts → Action-Cyo6KCsS.d.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { n as Tooltip } from "./Tooltip-Cnqf1-tx.mjs";
-import { t as RequireOneOf } from "./utilities-D0EhDri-.mjs";
+import { n as Tooltip } from "./Tooltip-x1pFf-Mj.mjs";
+import { t as RequireOneOf } from "./utilities-BcGuP8Fd.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, ReactElement } from "react";
 //#region types/Action.d.ts
@@ -32,4 +32,4 @@ type MenuAction = Action & {
 };
 //#endregion
 export { TextAction as i, IconAction as n, MenuAction as r, Action as t };
-//# sourceMappingURL=Action-C7INft7X.d.mts.map
+//# sourceMappingURL=Action-Cyo6KCsS.d.mts.map

package/dist/Action.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-C7INft7X.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-Cyo6KCsS.mjs";
 export { Action, IconAction, MenuAction, TextAction };

package/dist/AdvancedFilterRuleRow.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-I9z-0m7q.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BtdqMYUD.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-BEjWTkZV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-bKxrF1gC.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/AdvancedFilterRulesPopover.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, n as CompoundExpression, u as FilterRuleValue } from "./types-I9z-0m7q.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BtdqMYUD.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, n as CompoundExpression, u as FilterRuleValue } from "./types-BEjWTkZV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-bKxrF1gC.mjs";
 import { ReactElement, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/ArrayValueControl.d.mts CHANGED Viewed

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

package/dist/Attribute.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { i as ParagraphSize } from "./text-DjTGRUM1.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-DD_W_ixb.mjs";
-import { t as MaybeSemanticTheme } from "./semanticColor-IAhXS17y.mjs";
+import { i as ParagraphSize } from "./text-CxIup7HJ.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-B69gp3X_.mjs";
+import { t as MaybeSemanticTheme } from "./semanticColor-Cru2gSys.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";

package/dist/BooleanValueControl.d.mts CHANGED Viewed

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

package/dist/{Breadcrumb-DtW1R9xW.d.mts → Breadcrumb-CYXkrKXl.d.mts} RENAMED Viewed

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

package/dist/Breadcrumb.d.mts CHANGED Viewed

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

package/dist/{Breadcrumbs-B6JyoS8n.d.mts → Breadcrumbs-CP7eUYUy.d.mts} RENAMED Viewed

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

package/dist/{Breadcrumbs-CCmf8oZ4.mjs → Breadcrumbs-CrXfUK1V.mjs} RENAMED Viewed

@@ -8,9 +8,9 @@ import { a as Tooltip } from "./Tooltip-C0FuZS1C.mjs";
 import { focusOutline } from "./mixins/focus.mjs";
 import { t as HStack } from "./Stack-ChsImaEY.mjs";
 import { t as IconButton } from "./IconButton-CqTPMhjV.mjs";
-import { t as intersperse } from "./intersperse-DQAyfeEw.mjs";
+import { t as intersperse } from "./intersperse-Bxcrxj2Q.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as TechnicalSticker } from "./TechnicalSticker-D1PqG_yT.mjs";
+import { t as TechnicalSticker } from "./TechnicalSticker-_LtE-PRY.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -303,4 +303,4 @@ const Breadcrumbs = ({ items, size = "md", headingAs = "h1", "aria-label": ariaL
 //#endregion
 export { Breadcrumbs as t };
-//# sourceMappingURL=Breadcrumbs-CCmf8oZ4.mjs.map
+//# sourceMappingURL=Breadcrumbs-CrXfUK1V.mjs.map

package/dist/{Breadcrumbs-CCmf8oZ4.mjs.map → Breadcrumbs-CrXfUK1V.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumbs-CCmf8oZ4.mjs","names":["Input"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon, EditIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport Input from 'design-system/components/Input';\nimport { HStack } from 'design-system/components/Stack';\nimport TechnicalSticker from 'design-system/components/TechnicalSticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { RouterLink } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type BreadcrumbSize = 'md' \| 'lg';\n\nexport type BreadcrumbHeadingAs = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n\nconst COPY_TOOLTIP_LABEL = 'Copy ID';\nconst COPIED_TOOLTIP_LABEL = 'Copied!';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\nconst COPY_TOOLTIP_STICKER_MAX_WIDTH = '96px';\nconst COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH = '250px';\n\nexport type BreadcrumbProps = {\n label: string;\n size?: BreadcrumbSize;\n current?: boolean;\n /*\n Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n * lower when the page already has an `h1`.\n /\n headingAs?: BreadcrumbHeadingAs;\n showCopyAction?: boolean;\n copyValue?: string;\n copyTooltipLabel?: string;\n /* Copy tooltip text shown after a successful copy. Defaults to `Copied!`. /\n copiedTooltipLabel?: string;\n /\n Appends `copyValue` to both copy tooltip texts as a `TechnicalSticker`, so the tooltip shows\n * which token is being copied.\n /\n showCopyValueInTooltip?: boolean;\n /* Internal path (e.g. `/cases`), rendered as a router-aware link. /\n href?: string;\n /\n Activates a non-current crumb without a route change, for trails that navigate in-place (e.g.\n * a control panel drilling into a sub-panel). Ignored when `href` is set.\n /\n onClick?: () => void;\n onEdit?: (newLabel: string) => void;\n editMaxLength?: number;\n onCopy?: () => void;\n};\n\nconst LABEL_ACTION_GAP = Spacing[2];\nconst ACTION_BUTTON_GAP = Spacing[1];\n\nconst CrumbRow = styled(HStack)`\n align-items: center;\n min-width: 0;\n`;\n\nconst crumbLayoutStyles = (size: BreadcrumbSize) => css`\n display: inline-flex;\n align-items: center;\n min-width: 0;\n min-height: ${({ theme }) => theme.element.height.xs};\n ${\n size === 'lg'\n ? css`\n font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};\n line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};\n `\n : css``\n };\n`;\n\nconst editInputTextStyles = (size: BreadcrumbSize, current: boolean) => {\n if (current) {\n return size === 'lg' ? paragraphMixins.lgBold : paragraphMixins.mdBold;\n }\n return size === 'lg' ? paragraphMixins.lg : paragraphMixins.md;\n};\n\nconst ancestorCrumbStyles = css<{ $size: BreadcrumbSize }>`\n ${paragraphMixins.md};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n text-decoration: none;\n transition: color ${TransitionDuration.ExtraFast} ease-out;\n ${focusOutline}\n ${({ $size }) => crumbLayoutStyles($size)}\n\n &:hover {\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n }\n`;\n\nconst AncestorNavLink = styled(RouterLink)<{ $size: BreadcrumbSize }>`\n ${ancestorCrumbStyles}\n`;\n\nconst AncestorNavButton = styled.button<{ $size: BreadcrumbSize }>`\n ${ancestorCrumbStyles}\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n`;\n\nconst InlineEditInput = styled(Input)<{\n $size: BreadcrumbSize;\n $current: boolean;\n $editMinWidth?: number;\n}>`\n margin: 0;\n padding: 2px 10px;\n width: auto;\n max-width: 100%;\n min-width: ${({ $editMinWidth }) => ($editMinWidth != null ? `${$editMinWidth}px` : '0')};\n field-sizing: content;\n display: inline-block;\n ${({ $size, $current }) => editInputTextStyles($size, $current)};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n &:not(:focus) {\n border-color: transparent;\n }\n\n &:hover:not(:disabled) {\n border-style: solid;\n }\n`;\n\nconst CurrentLabel = styled(Paragraph)<{ $size: BreadcrumbSize }>`\n margin: 0;\n ${({ $size }) => crumbLayoutStyles($size)}\n`;\n\nconst copyToClipboard = async (value: string): Promise<boolean> => {\n try {\n if (navigator.clipboard?.writeText == null) {\n return false;\n }\n\n await navigator.clipboard.writeText(value);\n return true;\n } catch {\n return false;\n }\n};\n\nconst BreadcrumbCopyButton = ({\n copyValue,\n copyTooltipLabel = COPY_TOOLTIP_LABEL,\n copiedTooltipLabel = COPIED_TOOLTIP_LABEL,\n showCopyValueInTooltip = false,\n onCopy,\n}: {\n copyValue: string;\n copyTooltipLabel?: string;\n copiedTooltipLabel?: string;\n showCopyValueInTooltip?: boolean;\n onCopy?: () => void;\n}) => {\n const [tooltipOpen, setTooltipOpen] = useState(false);\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n const success = await copyToClipboard(copyValue);\n if (!success) {\n return;\n }\n\n setCopied(true);\n setTooltipOpen(true);\n onCopy?.();\n\n window.setTimeout(() => {\n setTooltipOpen(false);\n window.setTimeout(() => setCopied(false), 200);\n }, 1000);\n };\n\n const handleMouseEnter = () => {\n if (!copied) {\n setTooltipOpen(true);\n }\n };\n\n const handleMouseLeave = () => {\n if (!copied) {\n setTooltipOpen(false);\n }\n };\n\n const trigger = (\n <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n <IconButton\n type='button'\n size='sm'\n aria-label={`Copy ${copyValue}`}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n void handleCopy();\n }}\n >\n <CopyIcon />\n </IconButton>\n </span>\n );\n\n const tooltipLabel = copied ? copiedTooltipLabel : copyTooltipLabel;\n\n return (\n <Tooltip\n trigger={trigger}\n open={tooltipOpen}\n side='top'\n sideOffset={4}\n size='sm'\n contentAlignment='center'\n interactive={false}\n hideArrow\n portal={false}\n maxWidth={showCopyValueInTooltip ? COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH : undefined}\n >\n {showCopyValueInTooltip ? (\n <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n <span>{tooltipLabel}</span>\n <TechnicalSticker copyable={false} maxWidth={COPY_TOOLTIP_STICKER_MAX_WIDTH}>\n {copyValue}\n </TechnicalSticker>\n </HStack>\n ) : (\n tooltipLabel\n )}\n </Tooltip>\n );\n};\n\nconst Breadcrumb = ({\n label,\n size = 'md',\n current = false,\n headingAs = 'h1',\n showCopyAction = false,\n copyValue,\n copyTooltipLabel,\n copiedTooltipLabel,\n showCopyValueInTooltip,\n href,\n onClick,\n onEdit,\n editMaxLength = DEFAULT_EDIT_MAX_LENGTH,\n onCopy,\n}: BreadcrumbProps) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState(label);\n const [editMinWidth, setEditMinWidth] = useState<number \| undefined>();\n const editInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!isEditing) {\n setEditValue(label);\n }\n }, [isEditing, label]);\n\n useEffect(() => {\n if (!isEditing) {\n setEditMinWidth(undefined);\n return;\n }\n\n const input = editInputRef.current;\n if (input == null) {\n return;\n }\n\n setEditMinWidth(input.offsetWidth);\n input.focus();\n input.select();\n }, [isEditing]);\n\n const commitEdit = () => {\n if (!isEditing) {\n return;\n }\n\n setIsEditing(false);\n if (editValue !== label) {\n onEdit?.(editValue);\n }\n };\n\n const inlineActions = !isEditing && (showCopyAction \|\| onEdit) && (\n <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n {onEdit && (\n <IconButton\n type='button'\n size='sm'\n aria-label={`Edit ${label}`}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsEditing(true);\n }}\n >\n <EditIcon />\n </IconButton>\n )}\n {showCopyAction && copyValue != null && (\n <BreadcrumbCopyButton\n copyValue={copyValue}\n copyTooltipLabel={copyTooltipLabel}\n copiedTooltipLabel={copiedTooltipLabel}\n showCopyValueInTooltip={showCopyValueInTooltip}\n onCopy={onCopy}\n />\n )}\n </HStack>\n );\n\n if (isEditing) {\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <InlineEditInput\n ref={editInputRef}\n $size={size}\n $current={current}\n $editMinWidth={editMinWidth}\n size='md'\n aria-label={`Edit ${label}`}\n maxLength={editMaxLength}\n value={editValue}\n onChange={(event: ChangeEvent<HTMLInputElement>) => setEditValue(event.target.value)}\n onBlur={commitEdit}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n commitEdit();\n }\n if (event.key === 'Escape') {\n setEditValue(label);\n setIsEditing(false);\n }\n }}\n />\n </CrumbRow>\n );\n }\n\n if (current) {\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <CurrentLabel\n $size={size}\n size={size === 'lg' ? 'lg' : 'md'}\n weight='bold'\n color='primary'\n as={headingAs}\n >\n {label}\n </CurrentLabel>\n {inlineActions}\n </CrumbRow>\n );\n }\n\n if (href == null && onClick != null) {\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <AncestorNavButton type='button' onClick={onClick} $size={size}>\n {label}\n </AncestorNavButton>\n {inlineActions}\n </CrumbRow>\n );\n }\n\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <AncestorNavLink to={href ?? ''} $size={size}>\n {label}\n </AncestorNavLink>\n {inlineActions}\n </CrumbRow>\n );\n};\n\nexport default Breadcrumb;\n","import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nimport Breadcrumb, {\n type BreadcrumbHeadingAs,\n type BreadcrumbProps,\n type BreadcrumbSize,\n} from './Breadcrumb';\n\nexport type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' \| 'current' \| 'headingAs'>;\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbsItemProps[];\n size?: BreadcrumbSize;\n /\n Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n * lower when the page already has an `h1`.\n */\n headingAs?: BreadcrumbHeadingAs;\n 'aria-label'?: string;\n className?: string;\n};\n\nconst BreadcrumbList = styled.ol`\n max-width: 100%;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n min-width: 0;\n`;\n\nconst BreadcrumbListItem = styled.li`\n display: flex;\n align-items: center;\n min-width: 0;\n`;\n\nconst Separator = styled.span<{ $size: BreadcrumbSize }>`\n padding: 0 ${Spacing[2]};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n user-select: none;\n ${({ $size }) => ($size === 'lg' ? paragraphMixins.lg : paragraphMixins.md)};\n`;\n\nexport const Breadcrumbs = ({\n items,\n size = 'md',\n headingAs = 'h1',\n 'aria-label': ariaLabel = 'Breadcrumbs',\n className,\n}: BreadcrumbsProps) => {\n if (items.length === 0) {\n return null;\n }\n\n const crumbNodes = items.map((item, index) => {\n const isCurrent = index === items.length - 1;\n\n return (\n <BreadcrumbListItem\n key={`${item.label}-${index}`}\n aria-current={isCurrent ? 'page' : undefined}\n >\n <Breadcrumb {...item} size={size} current={isCurrent} headingAs={headingAs} />\n </BreadcrumbListItem>\n );\n });\n\n const listItems = intersperse(crumbNodes, (separatorIndex: number) => (\n <BreadcrumbListItem key={`separator-${separatorIndex}`} aria-hidden='true'>\n <Separator $size={size}>/</Separator>\n </BreadcrumbListItem>\n ));\n\n return (\n <nav aria-label={ariaLabel} className={className}>\n <BreadcrumbList>{listItems}</BreadcrumbList>\n </nav>\n );\n};\n\nexport default Breadcrumbs;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Breadcrumbs-CrXfUK1V.mjs","names":["Input"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon, EditIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport Input from 'design-system/components/Input';\nimport { HStack } from 'design-system/components/Stack';\nimport TechnicalSticker from 'design-system/components/TechnicalSticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { RouterLink } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type BreadcrumbSize = 'md' \| 'lg';\n\nexport type BreadcrumbHeadingAs = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n\nconst COPY_TOOLTIP_LABEL = 'Copy ID';\nconst COPIED_TOOLTIP_LABEL = 'Copied!';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\nconst COPY_TOOLTIP_STICKER_MAX_WIDTH = '96px';\nconst COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH = '250px';\n\nexport type BreadcrumbProps = {\n label: string;\n size?: BreadcrumbSize;\n current?: boolean;\n /*\n Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n * lower when the page already has an `h1`.\n /\n headingAs?: BreadcrumbHeadingAs;\n showCopyAction?: boolean;\n copyValue?: string;\n copyTooltipLabel?: string;\n /* Copy tooltip text shown after a successful copy. Defaults to `Copied!`. /\n copiedTooltipLabel?: string;\n /\n Appends `copyValue` to both copy tooltip texts as a `TechnicalSticker`, so the tooltip shows\n * which token is being copied.\n /\n showCopyValueInTooltip?: boolean;\n /* Internal path (e.g. `/cases`), rendered as a router-aware link. /\n href?: string;\n /\n Activates a non-current crumb without a route change, for trails that navigate in-place (e.g.\n * a control panel drilling into a sub-panel). Ignored when `href` is set.\n /\n onClick?: () => void;\n onEdit?: (newLabel: string) => void;\n editMaxLength?: number;\n onCopy?: () => void;\n};\n\nconst LABEL_ACTION_GAP = Spacing[2];\nconst ACTION_BUTTON_GAP = Spacing[1];\n\nconst CrumbRow = styled(HStack)`\n align-items: center;\n min-width: 0;\n`;\n\nconst crumbLayoutStyles = (size: BreadcrumbSize) => css`\n display: inline-flex;\n align-items: center;\n min-width: 0;\n min-height: ${({ theme }) => theme.element.height.xs};\n ${\n size === 'lg'\n ? css`\n font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};\n line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};\n `\n : css``\n };\n`;\n\nconst editInputTextStyles = (size: BreadcrumbSize, current: boolean) => {\n if (current) {\n return size === 'lg' ? paragraphMixins.lgBold : paragraphMixins.mdBold;\n }\n return size === 'lg' ? paragraphMixins.lg : paragraphMixins.md;\n};\n\nconst ancestorCrumbStyles = css<{ $size: BreadcrumbSize }>`\n ${paragraphMixins.md};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n text-decoration: none;\n transition: color ${TransitionDuration.ExtraFast} ease-out;\n ${focusOutline}\n ${({ $size }) => crumbLayoutStyles($size)}\n\n &:hover {\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n }\n`;\n\nconst AncestorNavLink = styled(RouterLink)<{ $size: BreadcrumbSize }>`\n ${ancestorCrumbStyles}\n`;\n\nconst AncestorNavButton = styled.button<{ $size: BreadcrumbSize }>`\n ${ancestorCrumbStyles}\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n`;\n\nconst InlineEditInput = styled(Input)<{\n $size: BreadcrumbSize;\n $current: boolean;\n $editMinWidth?: number;\n}>`\n margin: 0;\n padding: 2px 10px;\n width: auto;\n max-width: 100%;\n min-width: ${({ $editMinWidth }) => ($editMinWidth != null ? `${$editMinWidth}px` : '0')};\n field-sizing: content;\n display: inline-block;\n ${({ $size, $current }) => editInputTextStyles($size, $current)};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n &:not(:focus) {\n border-color: transparent;\n }\n\n &:hover:not(:disabled) {\n border-style: solid;\n }\n`;\n\nconst CurrentLabel = styled(Paragraph)<{ $size: BreadcrumbSize }>`\n margin: 0;\n ${({ $size }) => crumbLayoutStyles($size)}\n`;\n\nconst copyToClipboard = async (value: string): Promise<boolean> => {\n try {\n if (navigator.clipboard?.writeText == null) {\n return false;\n }\n\n await navigator.clipboard.writeText(value);\n return true;\n } catch {\n return false;\n }\n};\n\nconst BreadcrumbCopyButton = ({\n copyValue,\n copyTooltipLabel = COPY_TOOLTIP_LABEL,\n copiedTooltipLabel = COPIED_TOOLTIP_LABEL,\n showCopyValueInTooltip = false,\n onCopy,\n}: {\n copyValue: string;\n copyTooltipLabel?: string;\n copiedTooltipLabel?: string;\n showCopyValueInTooltip?: boolean;\n onCopy?: () => void;\n}) => {\n const [tooltipOpen, setTooltipOpen] = useState(false);\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n const success = await copyToClipboard(copyValue);\n if (!success) {\n return;\n }\n\n setCopied(true);\n setTooltipOpen(true);\n onCopy?.();\n\n window.setTimeout(() => {\n setTooltipOpen(false);\n window.setTimeout(() => setCopied(false), 200);\n }, 1000);\n };\n\n const handleMouseEnter = () => {\n if (!copied) {\n setTooltipOpen(true);\n }\n };\n\n const handleMouseLeave = () => {\n if (!copied) {\n setTooltipOpen(false);\n }\n };\n\n const trigger = (\n <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n <IconButton\n type='button'\n size='sm'\n aria-label={`Copy ${copyValue}`}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n void handleCopy();\n }}\n >\n <CopyIcon />\n </IconButton>\n </span>\n );\n\n const tooltipLabel = copied ? copiedTooltipLabel : copyTooltipLabel;\n\n return (\n <Tooltip\n trigger={trigger}\n open={tooltipOpen}\n side='top'\n sideOffset={4}\n size='sm'\n contentAlignment='center'\n interactive={false}\n hideArrow\n portal={false}\n maxWidth={showCopyValueInTooltip ? COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH : undefined}\n >\n {showCopyValueInTooltip ? (\n <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n <span>{tooltipLabel}</span>\n <TechnicalSticker copyable={false} maxWidth={COPY_TOOLTIP_STICKER_MAX_WIDTH}>\n {copyValue}\n </TechnicalSticker>\n </HStack>\n ) : (\n tooltipLabel\n )}\n </Tooltip>\n );\n};\n\nconst Breadcrumb = ({\n label,\n size = 'md',\n current = false,\n headingAs = 'h1',\n showCopyAction = false,\n copyValue,\n copyTooltipLabel,\n copiedTooltipLabel,\n showCopyValueInTooltip,\n href,\n onClick,\n onEdit,\n editMaxLength = DEFAULT_EDIT_MAX_LENGTH,\n onCopy,\n}: BreadcrumbProps) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState(label);\n const [editMinWidth, setEditMinWidth] = useState<number \| undefined>();\n const editInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!isEditing) {\n setEditValue(label);\n }\n }, [isEditing, label]);\n\n useEffect(() => {\n if (!isEditing) {\n setEditMinWidth(undefined);\n return;\n }\n\n const input = editInputRef.current;\n if (input == null) {\n return;\n }\n\n setEditMinWidth(input.offsetWidth);\n input.focus();\n input.select();\n }, [isEditing]);\n\n const commitEdit = () => {\n if (!isEditing) {\n return;\n }\n\n setIsEditing(false);\n if (editValue !== label) {\n onEdit?.(editValue);\n }\n };\n\n const inlineActions = !isEditing && (showCopyAction \|\| onEdit) && (\n <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n {onEdit && (\n <IconButton\n type='button'\n size='sm'\n aria-label={`Edit ${label}`}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsEditing(true);\n }}\n >\n <EditIcon />\n </IconButton>\n )}\n {showCopyAction && copyValue != null && (\n <BreadcrumbCopyButton\n copyValue={copyValue}\n copyTooltipLabel={copyTooltipLabel}\n copiedTooltipLabel={copiedTooltipLabel}\n showCopyValueInTooltip={showCopyValueInTooltip}\n onCopy={onCopy}\n />\n )}\n </HStack>\n );\n\n if (isEditing) {\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <InlineEditInput\n ref={editInputRef}\n $size={size}\n $current={current}\n $editMinWidth={editMinWidth}\n size='md'\n aria-label={`Edit ${label}`}\n maxLength={editMaxLength}\n value={editValue}\n onChange={(event: ChangeEvent<HTMLInputElement>) => setEditValue(event.target.value)}\n onBlur={commitEdit}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n commitEdit();\n }\n if (event.key === 'Escape') {\n setEditValue(label);\n setIsEditing(false);\n }\n }}\n />\n </CrumbRow>\n );\n }\n\n if (current) {\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <CurrentLabel\n $size={size}\n size={size === 'lg' ? 'lg' : 'md'}\n weight='bold'\n color='primary'\n as={headingAs}\n >\n {label}\n </CurrentLabel>\n {inlineActions}\n </CrumbRow>\n );\n }\n\n if (href == null && onClick != null) {\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <AncestorNavButton type='button' onClick={onClick} $size={size}>\n {label}\n </AncestorNavButton>\n {inlineActions}\n </CrumbRow>\n );\n }\n\n return (\n <CrumbRow spacing={LABEL_ACTION_GAP}>\n <AncestorNavLink to={href ?? ''} $size={size}>\n {label}\n </AncestorNavLink>\n {inlineActions}\n </CrumbRow>\n );\n};\n\nexport default Breadcrumb;\n","import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nimport Breadcrumb, {\n type BreadcrumbHeadingAs,\n type BreadcrumbProps,\n type BreadcrumbSize,\n} from './Breadcrumb';\n\nexport type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' \| 'current' \| 'headingAs'>;\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbsItemProps[];\n size?: BreadcrumbSize;\n /\n Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n * lower when the page already has an `h1`.\n */\n headingAs?: BreadcrumbHeadingAs;\n 'aria-label'?: string;\n className?: string;\n};\n\nconst BreadcrumbList = styled.ol`\n max-width: 100%;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n min-width: 0;\n`;\n\nconst BreadcrumbListItem = styled.li`\n display: flex;\n align-items: center;\n min-width: 0;\n`;\n\nconst Separator = styled.span<{ $size: BreadcrumbSize }>`\n padding: 0 ${Spacing[2]};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n user-select: none;\n ${({ $size }) => ($size === 'lg' ? paragraphMixins.lg : paragraphMixins.md)};\n`;\n\nexport const Breadcrumbs = ({\n items,\n size = 'md',\n headingAs = 'h1',\n 'aria-label': ariaLabel = 'Breadcrumbs',\n className,\n}: BreadcrumbsProps) => {\n if (items.length === 0) {\n return null;\n }\n\n const crumbNodes = items.map((item, index) => {\n const isCurrent = index === items.length - 1;\n\n return (\n <BreadcrumbListItem\n key={`${item.label}-${index}`}\n aria-current={isCurrent ? 'page' : undefined}\n >\n <Breadcrumb {...item} size={size} current={isCurrent} headingAs={headingAs} />\n </BreadcrumbListItem>\n );\n });\n\n const listItems = intersperse(crumbNodes, (separatorIndex: number) => (\n <BreadcrumbListItem key={`separator-${separatorIndex}`} aria-hidden='true'>\n <Separator $size={size}>/</Separator>\n </BreadcrumbListItem>\n ));\n\n return (\n <nav aria-label={ariaLabel} className={className}>\n <BreadcrumbList>{listItems}</BreadcrumbList>\n </nav>\n );\n};\n\nexport default Breadcrumbs;\n"],"mappings":"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"}

package/dist/Breadcrumbs.d.mts CHANGED Viewed

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

package/dist/{Button-HodDf_bB.d.mts → Button-Dhiund3f.d.mts} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { i as To } from "./types-CuQSgl1F.mjs";
-import { t as PseudoClassProps } from "./PseudoClassProps-CdRF3QNn.mjs";
-import { n as ButtonVariant } from "./palette-qgPRWgUN.mjs";
+import { i as To } from "./types-B-stjYNc.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-CHtBNv8B.mjs";
+import { n as ButtonVariant } from "./palette-CMOEyNPH.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, HTMLAttributeAnchorTarget, MouseEvent, ReactNode, Ref } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -108,4 +108,4 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'>, Omit<PseudoCla
 declare const Button: _$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SuffixIconContainer as a, StyledButton as i, ButtonChildren as n, ButtonProps as r, Button as t };
-//# sourceMappingURL=Button-HodDf_bB.d.mts.map
+//# sourceMappingURL=Button-Dhiund3f.d.mts.map

package/dist/Button.d.mts CHANGED Viewed

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

package/dist/{Calendar-DrdTvzAa.d.mts → Calendar-CMeIZ0BO.d.mts} RENAMED Viewed

@@ -9,4 +9,4 @@ interface CalendarProps extends AriaCalendarProps<DateValue> {
 declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Calendar as t };
-//# sourceMappingURL=Calendar-DrdTvzAa.d.mts.map
+//# sourceMappingURL=Calendar-CMeIZ0BO.d.mts.map

package/dist/Calendar.d.mts CHANGED Viewed

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

package/dist/CalendarBase.d.mts CHANGED Viewed

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

package/dist/{Card-CpDwATnX.d.mts → Card-DCYB_mtR.d.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-DD_W_ixb.mjs";
-import { i as HeaderProps } from "./Header-ZnHGm8fs.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-B69gp3X_.mjs";
+import { i as HeaderProps } from "./Header-BqEKkEp5.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -72,4 +72,4 @@ declare const _default: typeof Card & {
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-CpDwATnX.d.mts.map
+//# sourceMappingURL=Card-DCYB_mtR.d.mts.map

package/dist/Card.d.mts CHANGED Viewed

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

package/dist/{CardV2-Y_kRfd-R.mjs → CardV2-M3o4BELp.mjs} RENAMED Viewed

@@ -10,10 +10,10 @@ import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
 import { t as HStack } from "./Stack-ChsImaEY.mjs";
 import { n as Button$1, t as IconButton } from "./IconButton-CqTPMhjV.mjs";
-import { t as intersperse } from "./intersperse-DQAyfeEw.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-I5WDO-q5.mjs";
-import { t as DropdownButton } from "./DropdownButton-gmGRrD1z.mjs";
-import { t as LoadingShimmer } from "./LoadingShimmer-JyGh7M7V.mjs";
+import { t as intersperse } from "./intersperse-Bxcrxj2Q.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CuKSNxc9.mjs";
+import { t as DropdownButton } from "./DropdownButton-BWiXLMfD.mjs";
+import { t as LoadingShimmer } from "./LoadingShimmer-Dizk2sZu.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { createContext, useContext } from "react";
 import { Disclosure, DisclosurePanel } from "react-aria-components";
@@ -415,4 +415,4 @@ var Card_default = Object.assign(Card, {
 //#endregion
 export { CARD_HEADING_STICKY_OFFSET as n, Card_default as t };
-//# sourceMappingURL=CardV2-Y_kRfd-R.mjs.map
+//# sourceMappingURL=CardV2-M3o4BELp.mjs.map

package/dist/{CardV2-Y_kRfd-R.mjs.map → CardV2-M3o4BELp.mjs.map} RENAMED Viewed

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

package/dist/{Checkbox-DBAXDIQf.mjs → Checkbox-AjL7ucoR.mjs} RENAMED Viewed

@@ -7,7 +7,7 @@ import { isChecked, isDisabled, isFocusedVisible, isHovered, isIndeterminate, is
 import useControlled from "./lib/useControlled.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
 import { n as Stack } from "./Stack-ChsImaEY.mjs";
-import { n as useFormField } from "./useFormField-C61u9KvG.mjs";
+import { n as useFormField } from "./useFormField-BzhMbl5P.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -177,4 +177,4 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 //#endregion
 export { Checkbox as t };
-//# sourceMappingURL=Checkbox-DBAXDIQf.mjs.map
+//# sourceMappingURL=Checkbox-AjL7ucoR.mjs.map