npm - @persona/design-system - Versions diffs - 0.2.1 → 0.3.1 - Mend

@persona/design-system 0.2.1 → 0.3.1

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

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,33 @@ Summary of changes to the @persona/design-system package.
 > entry alongside a feature PR only creates conflicts and duplicates — ship the change and let the
 > release regenerate the entry.
+## [0.3.1] - 2026-09-09
+- **2026-09-09**: Added an optional `onCopySuccess` callback to `HoverCopyableField`. When passed, the Copied popover is skipped and the host receives the copied text plus click origin (pointer X + control top; keyboard `0,0` uses the button center)
+- **2026-09-08**: Fixed `LayoutLoadingSpinner` to announce via visually hidden text
+- **2026-09-05**: Normalized the styled-components default export under Node ESM so consumers no longer hit a missing-export interop failure
+- **2026-09-03**: Synchronized embedded modal overlays on open so the host shell can dim and inert the rest of the page when a PDS Modal opens in an iframe
+- **2026-09-02**: Added a reusable `LayoutLoadingSpinner` pattern
+- **2026-08-27**: Sorted DataTable column-picker attributes alphabetically (capitalized labels first, numeric-aware) and added a `sortByRelevance` option that ranks search matches with Fuse
+## [0.3.0] - 2026-09-03
+- **2026-09-02**: Fixed DataTable rendering by passing the row `key` as a JSX attribute instead of inside a spread props object, so React keys rows correctly
+- **2026-09-02**: Fixed `useTableColumns` column visibility options to key on `column.id` (falling back to `accessor`) so columns sharing an accessor no longer collide
+- **2026-09-01**: Added `FloatingPanel` as a new `./components/FloatingPanel` entry point (moved from the dashboard), exporting `FloatingPanel`, `FloatingPanelRenderer`, `PanelProvider`, `usePersistentFloatingPanels`, `usePersistentFloatingPanel`, the `Panel` type and `FLOATING_PANEL_PADDING`. The panel no longer depends on dashboard agents-panel state; hosts set the fullscreen right inset via the new `floatingPanel.fullscreenRightInset` option on `ConfigContext`
+- **2026-09-01**: **Breaking**: removed the `portalContainer` prop from FiltersV2 `FilterBar` and `FilterPopover`; the popover always portals to `document.body` with collision avoidance and layers at `Z_INDICES.floatingBar`. Added the `CARD_HEADING_STICKY_OFFSET` export from CardV2 for callers that stack sticky toolbars under a sticky section heading
+- **2026-08-31**: Added an `addDisabled` prop to `ListBoxField` that disables the add button
+- **2026-08-31**: Fixed FiltersV2 `DateRangeValueControl` to keep the written calendar day when parsing timestamp-shaped ISO values (instead of shifting by zone) and to clear the picker when a range loses an endpoint
+- **2026-08-29**: Fixed Modal so clicks left or right of the card dismiss it: the modal now sizes to its content instead of stretching to full width
+- **2026-08-28**: Added a `between` operator for FiltersV2 `date` fields, whose value is a `DateRangeFilterValue`. Exports `isRangeOperator`, `isCompleteDateRange`, `emptyValueForRule` and `reconcileValueForOperator` from FiltersV2
+- **2026-08-27**: Added the FiltersV2 `DateRangeValueControl` value control, rendering a `DateRangePicker` for ISO date-range filter values
+- **2026-08-27**: Fixed `DateRangePicker` syncing its controlled `dateRange` on instants (millis) rather than `DateTime` identities, so callers that parse the range during render no longer trigger an infinite `onChange` loop
+- **2026-08-27**: Fixed `ListBox` rows that cannot be selected (no selection mode or action) so they no longer show a pointer cursor and hover background; hover/focus styling now follows react-aria's `data-hovered`/`data-focus-visible`
+- **2026-08-25**: Added Storybook usage guidelines for `Sticker`
+- **2026-08-24**: Added Storybook usage guidelines for `StatusIndicator`
+- **2026-08-23**: Replaced the `lodash` dependency with `lodash-es` across the package
+- **2026-08-18**: Changed the `ProgressBar` exception state icon to `CircleWarningFillIcon`
 ## [0.2.1] - 2026-08-28
 - **2026-08-27**: Made Modal register itself as an embedded UI surface when it renders inside a Persona dashboard iframe, so the host shell can dim, inert and scroll-lock everything outside the iframe while the modal is open. In a host that speaks the protocol the modal keeps rendering exactly as it does today and gains the shell-level overlay; with no host transport present the registration is a no-op and top-level modal behaviour is unchanged. Adds the `./lib/useEmbeddedSurface` and `./lib/embeddedSurfaceRegistry` entry points, and reserves `Z_INDICES.embeddedSurfaceBackdrop` (9998) and `Z_INDICES.embeddedSurface` (9999) below `modal`

package/README.md CHANGED Viewed

@@ -20,9 +20,9 @@ versioned alongside the components it documents:
 | File            | Contents                                                                                |
 | --------------- | --------------------------------------------------------------------------------------- |
 | `SKILL.md`      | Design tokens, component-first guidance, and the rules that matter most when writing UI |
-| `COMPONENTS.md` | Deeper usage notes for the components that are easy to get wrong                        |
-| `EXAMPLES.md`   | End-to-end examples (forms, tables, loading and empty states)                           |
-| `REFERENCE.md`  | Full `Color` / `Spacing` / `Typography` catalog                                         |
+| `TOKENS.md`     | `Color` / `Spacing` / `Typography` selection and catalog                                |
+| `PATTERNS.md`   | Forms, layout, indicators, feedback, empty states                                       |
+| `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
 directory into wherever your agent reads skills from (for example `.claude/skills/`).

package/dist/{Action-DnR0YTxO.d.mts → Action-DL3kHI9Z.d.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { n as Tooltip } from "./Tooltip-0iXDCV2O.mjs";
-import { t as RequireOneOf } from "./utilities-DnSIlR1i.mjs";
+import { n as Tooltip } from "./Tooltip-DX-N-szt.mjs";
+import { t as RequireOneOf } from "./utilities-Bmwk_DRn.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-DnR0YTxO.d.mts.map
+//# sourceMappingURL=Action-DL3kHI9Z.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-DnR0YTxO.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-DL3kHI9Z.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 FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-mb3woqzE.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-D55MZSyx.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D1vghSC_.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 FilterSize, n as CompoundExpression, u as FilterRuleValue } from "./types-mb3woqzE.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterSize, n as CompoundExpression, u as FilterRuleValue } from "./types-D55MZSyx.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D1vghSC_.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-BKEwt0uq.mjs";
+import { t as ValueControlProps } from "./types-BrNreYUU.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,9 +1,9 @@
-import { n as IconButtonProps } from "./IconButton-Dc17jZPG.mjs";
-import { i as ParagraphSize } from "./text-BaQdW8qa.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-CfIFUyHt.mjs";
-import * as _$styled_components0 from "styled-components";
+import { n as IconButtonProps } from "./IconButton-CLsHdYm7.mjs";
+import { i as ParagraphSize } from "./text-xwtyWIbE.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-BIgrwIdS.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/Attribute/Attribute.d.ts

package/dist/{Badge-DRn_r6is.mjs → Badge-BL0J5oMa.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { n as Sticker } from "./Sticker-B0TbkV4o.mjs";
-import styled, { css } from "styled-components";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { n as Sticker } from "./Sticker-CQ6sOKUj.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region components/Badge/Badge.tsx
 const Badge = styled(({ variant, ...rest }) => {
@@ -28,4 +28,4 @@ const Badge = styled(({ variant, ...rest }) => {
 //#endregion
 export { Badge as t };
-//# sourceMappingURL=Badge-DRn_r6is.mjs.map
+//# sourceMappingURL=Badge-BL0J5oMa.mjs.map

package/dist/{Badge-DRn_r6is.mjs.map → Badge-BL0J5oMa.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge-~~DRn_r6is~~.mjs","names":[],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n /*\n When rendered on a secondary background (e.g. inside a panel or card with\n * a grey fill), set this to true so the component adjusts its colours\n * appropriately for certain variants.\n /\n onSecondaryBackground?: boolean;\n /\n Semantic colour variant for the badge.\n \n - `basic` – neutral grey, for informational counts or labels (default).\n * - `active` – purple, to highlight an active or selected state.\n * - `alert` – red/danger, to draw attention to errors or urgent counts.\n \n @defaultValue 'basic'\n /\n variant?: 'alert' \| 'active' \| 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n let variantProp: StickerProps['variant'];\n switch (variant) {\n case 'alert':\n variantProp = 'danger';\n break;\n case 'active':\n variantProp = 'purple';\n break;\n case 'basic':\n default:\n variantProp = 'grey';\n }\n\n return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n () => css`\n min-width: 16px;\n text-align: center;\n border-radius: 100px;\n span {\n font-size: 10px;\n }\n `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/\n The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n \n We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;AAuBA,MAAa,QAAQ,QAAQ,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,oBAAC,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,GAAG;;;;;;;IAQV"}
1	+ {"version":3,"file":"Badge-BL0J5oMa.mjs","names":[],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n /*\n When rendered on a secondary background (e.g. inside a panel or card with\n * a grey fill), set this to true so the component adjusts its colours\n * appropriately for certain variants.\n /\n onSecondaryBackground?: boolean;\n /\n Semantic colour variant for the badge.\n \n - `basic` – neutral grey, for informational counts or labels (default).\n * - `active` – purple, to highlight an active or selected state.\n * - `alert` – red/danger, to draw attention to errors or urgent counts.\n \n @defaultValue 'basic'\n /\n variant?: 'alert' \| 'active' \| 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n let variantProp: StickerProps['variant'];\n switch (variant) {\n case 'alert':\n variantProp = 'danger';\n break;\n case 'active':\n variantProp = 'purple';\n break;\n case 'basic':\n default:\n variantProp = 'grey';\n }\n\n return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n () => css`\n min-width: 16px;\n text-align: center;\n border-radius: 100px;\n span {\n font-size: 10px;\n }\n `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/\n The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n \n We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;AAuBA,MAAa,QAAQ,QAAQ,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,oBAAC,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,GAAG;;;;;;;IAQV"}

package/dist/BooleanValueControl.d.mts CHANGED Viewed

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

package/dist/{Breadcrumb-DEwZFJHF.d.mts → Breadcrumb-Czgdi0xf.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-DEwZFJHF.d.mts.map
+//# sourceMappingURL=Breadcrumb-Czgdi0xf.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-DEwZFJHF.mjs";
+import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps, t as Breadcrumb } from "./Breadcrumb-Czgdi0xf.mjs";
 export { BreadcrumbHeadingAs, BreadcrumbProps, BreadcrumbSize, Breadcrumb as default };

package/dist/{Breadcrumbs-Byf2ye6H.mjs → Breadcrumbs-ed4wRDS7.mjs} RENAMED Viewed

@@ -1,15 +1,15 @@
-import { focusOutline } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
-import { a as Tooltip } from "./Tooltip-CDvOu1UN.mjs";
-import { t as HStack } from "./Stack-ckRN7LrP.mjs";
-import { t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { t as intersperse } from "./intersperse-yd3oMrQl.mjs";
+import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
+import "./variables/transitions.mjs";
+import { a as Tooltip } from "./Tooltip-iJcfJqxn.mjs";
+import { focusOutline } from "./mixins/focus.mjs";
+import { t as HStack } from "./Stack-Bre2oiov.mjs";
+import { t as IconButton } from "./IconButton-BgL3QUVO.mjs";
+import { t as intersperse } from "./intersperse-CLkblj9A.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as TechnicalSticker } from "./TechnicalSticker-BrvR0zhC.mjs";
+import { t as TechnicalSticker } from "./TechnicalSticker-D3eeGMDR.mjs";
 import { Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CopyIcon, EditIcon } from "@persona/icons";
@@ -302,4 +302,4 @@ const Breadcrumbs = ({ items, size = "md", headingAs = "h1", "aria-label": ariaL
 //#endregion
 export { Breadcrumbs as t };
-//# sourceMappingURL=Breadcrumbs-Byf2ye6H.mjs.map
+//# sourceMappingURL=Breadcrumbs-ed4wRDS7.mjs.map

package/dist/{Breadcrumbs-Byf2ye6H.mjs.map → Breadcrumbs-ed4wRDS7.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumbs-Byf2ye6H.mjs","names":["Input"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\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 { 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 dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. /\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 }) => 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 }) => theme.color.text.primary};\n }\n`;\n\nconst AncestorNavLink = styled(Link)<{ $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 }) => theme.color.background.primary};\n color: ${({ theme }) => 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 { 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 }) => 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-ed4wRDS7.mjs","names":["Input"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\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 { 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 dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. /\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 }) => 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 }) => theme.color.text.primary};\n }\n`;\n\nconst AncestorNavLink = styled(Link)<{ $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 }) => theme.color.background.primary};\n color: ${({ theme }) => 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 { 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 }) => 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-0e_3v9FF.d.mts → Breadcrumbs-zei-cpdU.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-DEwZFJHF.mjs";
+import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-Czgdi0xf.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-0e_3v9FF.d.mts.map
+//# sourceMappingURL=Breadcrumbs-zei-cpdU.d.mts.map

package/dist/Breadcrumbs.d.mts CHANGED Viewed

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

package/dist/{Button-DkjwN_Op.d.mts → Button-CKzNTpPL.d.mts} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-CcSlKNev.mjs";
-import * as _$styled_components0 from "styled-components";
+import { t as PseudoClassProps } from "./PseudoClassProps-DgT5G_z5.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
+import * as _$styled_components0 from "styled-components";
 import { LinkProps } from "react-router-dom";
 //#region components/Button/Button.d.ts
@@ -98,4 +98,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-DkjwN_Op.d.mts.map
+//# sourceMappingURL=Button-CKzNTpPL.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-DkjwN_Op.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-CKzNTpPL.mjs";
 export { ButtonChildren, ButtonProps, StyledButton, SuffixIconContainer, Button as default };

package/dist/Calendar-CcxN7y3e.d.mts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { AriaCalendarProps, DateValue } from "react-aria";
+//#region components/DatePicker/Calendar/Calendar.d.ts
+interface CalendarProps extends AriaCalendarProps<DateValue> {
+  calendarRef?: Ref<HTMLDivElement>;
+}
+declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Calendar as t };
+//# sourceMappingURL=Calendar-CcxN7y3e.d.mts.map

package/dist/Calendar.d.mts CHANGED Viewed

@@ -1,12 +1,2 @@
-import { Ref } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { AriaCalendarProps, DateValue } from "react-aria";
-//#region components/DatePicker/Calendar/Calendar.d.ts
-interface CalendarProps extends AriaCalendarProps<DateValue> {
-  calendarRef?: Ref<HTMLDivElement>;
-}
-declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { Calendar as default };
-//# sourceMappingURL=Calendar.d.mts.map
+import { t as Calendar } from "./Calendar-CcxN7y3e.mjs";
+export { Calendar as default };

package/dist/CalendarBase.d.mts CHANGED Viewed

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

package/dist/{Card-CLTkZLKr.mjs → Card-CKrJtn1f.mjs} RENAMED Viewed

@@ -1,10 +1,10 @@
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { headingMixins, paragraphMixins } from "./mixins/text.mjs";
 import "./variables/spacing.mjs";
-import { t as Spacer_default } from "./Spacer-Ln3KChb5.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
-import { t as useToggle } from "./useToggle-3k3EkV8V.mjs";
+import { t as Spacer_default } from "./Spacer-BsK8tTwA.mjs";
+import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronUpIcon } from "@persona/icons";
 //#region components/Card/Header/Header.tsx
@@ -202,4 +202,4 @@ var Card_default = Object.assign(Card, {
 //#endregion
 export { Root as a, HeaderContainer as i, ActionsContainer as n, Title$1 as o, Header as r, TitleContainer as s, Card_default as t };
-//# sourceMappingURL=Card-CLTkZLKr.mjs.map
+//# sourceMappingURL=Card-CKrJtn1f.mjs.map

package/dist/{Card-CLTkZLKr.mjs.map → Card-CKrJtn1f.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card-CLTkZLKr.mjs","names":["Title","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n children: ReactNode;\n subtitle?: ReactNode;\n variant?: 'title' \| 'section';\n actions?: ReactNode;\n $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' \| '$matchCardV2'>>`\n ${paragraphMixins.md};\n display: flex;\n align-items: center;\n justify-content: space-between;\n &:not(:only-child) {\n margin: 0px 0px ${Spacing[4]} 0px;\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n margin-bottom: ${Spacing[1]};\n `}\n }\n ${({ variant }) =>\n variant === 'section' &&\n css`\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n `}\n`;\n\nexport const TitleContainer = styled.div`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' \| '$matchCardV2'>>`\n display: flex;\n align-items: center;\n margin: 0px;\n gap: ${Spacing[2]};\n ${({ variant }) => {\n switch (variant) {\n case 'section':\n return paragraphMixins.lgBold;\n case 'title':\n default:\n return headingMixins.sm;\n }\n }}\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n ${headingMixins.xsm};\n `}\n`;\n\nexport const ActionsContainer = styled.div`\n color: ${({ theme }) => theme.color.text.secondary};\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n border-top: 1px solid ${Color.BorderDivider};\n margin: 0;\n\n /* Use negative margin to bleed the divider out of the grid. /\n margin-left: -${Spacing[5]};\n margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n children,\n variant,\n actions,\n subtitle,\n $matchCardV2,\n ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n return (\n <>\n <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n <TitleContainer>\n <Title variant={variant} $matchCardV2={$matchCardV2}>\n {children}\n </Title>\n {subtitle}\n </TitleContainer>\n <ActionsContainer>{actions}</ActionsContainer>\n </HeaderContainer>\n {$matchCardV2 && <FullDivider />}\n </>\n );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import type {\n ComponentPropsWithoutRef,\n FC,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n elevated?: boolean;\n $matchCardV2?: boolean;\n}\n\n/\n @deprecated Use CardV2 instead\n /\nconst Card = styled('div')<CardProps>`\n border-radius: ${({ theme }) => {\n return theme.card.borderRadius;\n }};\n display: flex;\n flex-direction: column;\n margin-bottom: ${Spacing[4]};\n background-color: ${({ theme }) => theme.color.background.primary};\n font-family: ${({ theme }) => theme.text.fontFamily.base};\n ${({ elevated }) =>\n elevated &&\n css`\n box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n `}\n\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n margin-bottom: 0;\n `}\n`;\n\n/\n To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n /\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n margin: 0;\n padding: ${({ padding }) => padding ?? Spacing[5]};\n display: grid;\n grid-auto-flow: row;\n grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n /\n Prevent grid blowout\n * https://css-tricks.com/preventing-a-grid-blowout/\n /\n grid-template-columns: minmax(0, 1fr);\n\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n padding: ${Spacing[4]} ${Spacing[5]};\n grid-gap: ${Spacing[3]};\n `}\n`;\n\nconst IconContainer = styled('div')`\n margin-right: ${Spacing[3]};\n display: flex;\n align-items: center;\n\n > svg {\n height: 24px;\n width: 24px;\n }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n width: 100%;\n overflow: hidden;\n border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n 0px 0px;\n\n ${({ height }) => {\n return css`\n height: ${height}px;\n `;\n }};\n\n > img,\n svg {\n width: 100%;\n border-radius: ${({ theme }) => theme.card.borderRadius}\n ${({ theme }) => theme.card.borderRadius} 0px 0px;\n }\n`;\n\ninterface TitleBaseProps {\n icon?: ReactElement;\n}\n\ninterface TitleProps\n extends\n TitleBaseProps,\n Pick<HeaderProps, 'actions' \| 'subtitle'>,\n Omit<ComponentPropsWithoutRef<'h3'>, 'color' \| 'size'> {\n $matchCardV2?: boolean;\n}\n\n/\n Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n /\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n <Header variant='title' {...elemProps}>\n {icon != null && <IconContainer>{icon}</IconContainer>}\n {children}\n </Header>\n);\n\n/\n Smaller label to be used within cards.\n /\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n extends\n Pick<HeaderProps, 'subtitle' \| 'actions'>,\n Omit<ComponentPropsWithoutRef<'h3'>, 'color' \| 'size'> {}\n\n/\n Header for section headers within a Card\n /\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n <Header variant='section' {...elemProps}>\n {children}\n </Header>\n);\n\n/\n Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n height: number;\n children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n <ImageWrapper {...elemProps} height={height}>\n {children}\n </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n id?: string;\n defaultExpanded?: boolean;\n title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n id,\n defaultExpanded,\n title,\n children,\n}) => {\n const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n return (\n <section>\n <div id={id} onClick={toggle}>\n <Header variant='section'>\n <HeaderIcon>\n {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n <Spacer width={0.5} height={0} />\n </HeaderIcon>\n {title}\n </Header>\n </div>\n <div>\n {isOpen && (\n <>\n <Spacer height={1} />\n {children}\n </>\n )}\n </div>\n <Spacer height={1} />\n </section>\n );\n};\n\nconst HeaderIcon = styled.div`\n display: flex;\n`;\n\nexport default Object.assign(Card, {\n Title,\n SectionHeader,\n Subtitle,\n Body,\n Image,\n CollapsibleSection,\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"Card-CKrJtn1f.mjs","names":["Title","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n children: ReactNode;\n subtitle?: ReactNode;\n variant?: 'title' \| 'section';\n actions?: ReactNode;\n $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' \| '$matchCardV2'>>`\n ${paragraphMixins.md};\n display: flex;\n align-items: center;\n justify-content: space-between;\n &:not(:only-child) {\n margin: 0px 0px ${Spacing[4]} 0px;\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n margin-bottom: ${Spacing[1]};\n `}\n }\n ${({ variant }) =>\n variant === 'section' &&\n css`\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n `}\n`;\n\nexport const TitleContainer = styled.div`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' \| '$matchCardV2'>>`\n display: flex;\n align-items: center;\n margin: 0px;\n gap: ${Spacing[2]};\n ${({ variant }) => {\n switch (variant) {\n case 'section':\n return paragraphMixins.lgBold;\n case 'title':\n default:\n return headingMixins.sm;\n }\n }}\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n ${headingMixins.xsm};\n `}\n`;\n\nexport const ActionsContainer = styled.div`\n color: ${({ theme }) => theme.color.text.secondary};\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n border-top: 1px solid ${Color.BorderDivider};\n margin: 0;\n\n /* Use negative margin to bleed the divider out of the grid. /\n margin-left: -${Spacing[5]};\n margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n children,\n variant,\n actions,\n subtitle,\n $matchCardV2,\n ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n return (\n <>\n <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n <TitleContainer>\n <Title variant={variant} $matchCardV2={$matchCardV2}>\n {children}\n </Title>\n {subtitle}\n </TitleContainer>\n <ActionsContainer>{actions}</ActionsContainer>\n </HeaderContainer>\n {$matchCardV2 && <FullDivider />}\n </>\n );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import type {\n ComponentPropsWithoutRef,\n FC,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n elevated?: boolean;\n $matchCardV2?: boolean;\n}\n\n/\n @deprecated Use CardV2 instead\n /\nconst Card = styled('div')<CardProps>`\n border-radius: ${({ theme }) => {\n return theme.card.borderRadius;\n }};\n display: flex;\n flex-direction: column;\n margin-bottom: ${Spacing[4]};\n background-color: ${({ theme }) => theme.color.background.primary};\n font-family: ${({ theme }) => theme.text.fontFamily.base};\n ${({ elevated }) =>\n elevated &&\n css`\n box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n `}\n\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n margin-bottom: 0;\n `}\n`;\n\n/\n To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n /\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n margin: 0;\n padding: ${({ padding }) => padding ?? Spacing[5]};\n display: grid;\n grid-auto-flow: row;\n grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n /\n Prevent grid blowout\n * https://css-tricks.com/preventing-a-grid-blowout/\n /\n grid-template-columns: minmax(0, 1fr);\n\n ${({ $matchCardV2 }) =>\n $matchCardV2 &&\n css`\n padding: ${Spacing[4]} ${Spacing[5]};\n grid-gap: ${Spacing[3]};\n `}\n`;\n\nconst IconContainer = styled('div')`\n margin-right: ${Spacing[3]};\n display: flex;\n align-items: center;\n\n > svg {\n height: 24px;\n width: 24px;\n }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n width: 100%;\n overflow: hidden;\n border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n 0px 0px;\n\n ${({ height }) => {\n return css`\n height: ${height}px;\n `;\n }};\n\n > img,\n svg {\n width: 100%;\n border-radius: ${({ theme }) => theme.card.borderRadius}\n ${({ theme }) => theme.card.borderRadius} 0px 0px;\n }\n`;\n\ninterface TitleBaseProps {\n icon?: ReactElement;\n}\n\ninterface TitleProps\n extends\n TitleBaseProps,\n Pick<HeaderProps, 'actions' \| 'subtitle'>,\n Omit<ComponentPropsWithoutRef<'h3'>, 'color' \| 'size'> {\n $matchCardV2?: boolean;\n}\n\n/\n Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n /\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n <Header variant='title' {...elemProps}>\n {icon != null && <IconContainer>{icon}</IconContainer>}\n {children}\n </Header>\n);\n\n/\n Smaller label to be used within cards.\n /\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n extends\n Pick<HeaderProps, 'subtitle' \| 'actions'>,\n Omit<ComponentPropsWithoutRef<'h3'>, 'color' \| 'size'> {}\n\n/\n Header for section headers within a Card\n /\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n <Header variant='section' {...elemProps}>\n {children}\n </Header>\n);\n\n/\n Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n height: number;\n children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n <ImageWrapper {...elemProps} height={height}>\n {children}\n </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n id?: string;\n defaultExpanded?: boolean;\n title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n id,\n defaultExpanded,\n title,\n children,\n}) => {\n const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n return (\n <section>\n <div id={id} onClick={toggle}>\n <Header variant='section'>\n <HeaderIcon>\n {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n <Spacer width={0.5} height={0} />\n </HeaderIcon>\n {title}\n </Header>\n </div>\n <div>\n {isOpen && (\n <>\n <Spacer height={1} />\n {children}\n </>\n )}\n </div>\n <Spacer height={1} />\n </section>\n );\n};\n\nconst HeaderIcon = styled.div`\n display: flex;\n`;\n\nexport default Object.assign(Card, {\n Title,\n SectionHeader,\n Subtitle,\n Body,\n Image,\n CollapsibleSection,\n});\n"],"mappings":"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"}

package/dist/{Card-DxFajLnx.d.mts → Card-pr4FQWjn.d.mts} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-CfIFUyHt.mjs";
-import { i as HeaderProps } from "./Header-OLZuv8fF.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-BIgrwIdS.mjs";
+import { i as HeaderProps } from "./Header-gDUTQgWj.mjs";
 import { Spacing } from "@persona/design-tokens";
-import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$hoist_non_react_statics0 from "hoist-non-react-statics";
@@ -49,4 +49,4 @@ declare const _default: string & _$styled_components0.StyledComponentBase<"div",
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-DxFajLnx.d.mts.map
+//# sourceMappingURL=Card-pr4FQWjn.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-DxFajLnx.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "./Card-pr4FQWjn.mjs";
 export { CardProps, SectionProps, _default as default };

package/dist/Card2.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { t as SectionHeading } from "./SectionHeading-DvP9NEgN.mjs";
-import * as _$styled_components0 from "styled-components";
+import { SectionHeading } from "./SectionHeading.mjs";
 import { ComponentProps, FC, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 //#region components/CardV2/Card.d.ts
 declare const CardContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
@@ -63,7 +63,7 @@ declare const _default: FC<{
   fullHeight?: boolean;
 } & {
   children?: ReactNode | undefined;
-}, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps"> & {
+}, "children" | "heading" | "loading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps"> & {
   children?: ReactNode | undefined;
 }> & {
   Section: FC<Pick<{
@@ -86,7 +86,7 @@ declare const _default: FC<{
     fullHeight?: boolean;
   } & {
     children?: ReactNode | undefined;
-  }, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
+  }, "children" | "heading" | "loading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
   Stacked: FC<{
     children: ReactNode[];
   }>;

package/dist/{CardV2-m9yOInMU.mjs → CardV2-D3m5EKlp.mjs} RENAMED Viewed

@@ -1,25 +1,31 @@
-import { focusStyle } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
 import ConfigContext from "./lib/ConfigContext.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { HeadlessAriaButton } from "./lib/HeadlessAriaButton.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { i as Paragraph, n as Heading$1 } from "./Text-hEoPeOc9.mjs";
-import { a as Tooltip } from "./Tooltip-CDvOu1UN.mjs";
+import { i as Paragraph, n as Heading$1 } from "./Text-B0orb-cZ.mjs";
+import "./variables/transitions.mjs";
+import { a as Tooltip } from "./Tooltip-iJcfJqxn.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as HStack } from "./Stack-ckRN7LrP.mjs";
-import { n as Button$1, t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { t as intersperse } from "./intersperse-yd3oMrQl.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-DZIFSJXD.mjs";
-import { t as DropdownButton } from "./DropdownButton-DGgfGW_o.mjs";
-import { t as LoadingShimmer } from "./LoadingShimmer-BPYPtFE1.mjs";
+import { focusStyle } from "./mixins/focus.mjs";
+import { t as HStack } from "./Stack-Bre2oiov.mjs";
+import { n as Button$1, t as IconButton } from "./IconButton-BgL3QUVO.mjs";
+import { t as intersperse } from "./intersperse-CLkblj9A.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-82xH1AZr.mjs";
+import { t as DropdownButton } from "./DropdownButton-BlVeFbJ0.mjs";
+import { t as LoadingShimmer } from "./LoadingShimmer-dsBWRdTU.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { createContext, useContext } from "react";
 import { Disclosure, DisclosurePanel } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, MoreIcon } from "@persona/icons";
 import { ErrorBoundary } from "react-error-boundary";
 //#region components/CardV2/SectionHeading.tsx
+/**
+* Distance from the top of a card to the underside of an expanded top-section heading: the
+* `Spacing[4]` padding above and below a 24px title line, plus the divider. Sticky content inside
+* the card pins here so the heading's divider stays the only line between them.
+*/
+const CARD_HEADING_STICKY_OFFSET = `calc(${Spacing[9]} + 1px)`;
 const CardLoadingShimmer$1 = styled(LoadingShimmer)`
   border-radius: ${({ theme }) => theme.card.borderRadius};
 `;
@@ -406,6 +412,6 @@ var Card_default = Object.assign(Card, {
 	Stacked
 });
 //#endregion
-export { Card_default as t };
+export { CARD_HEADING_STICKY_OFFSET as n, Card_default as t };
-//# sourceMappingURL=CardV2-m9yOInMU.mjs.map
+//# sourceMappingURL=CardV2-D3m5EKlp.mjs.map