npm - @persona/design-system - Versions diffs - 0.5.1 → 0.6.0 - Mend

@persona/design-system 0.5.1 → 0.6.0

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

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,9 @@
+## 0.6.0 (2026-09-23)
+### Features
+- **design-system:** prerequisites for persona-web to drop its local design-system copy ([#317](https://github.com/persona-id/persona-design-system/pull/317))
 ## 0.5.1 (2026-09-23)
 This was a version bump only for design-system to align it with other projects, there were no code changes.

package/dist/{Breadcrumbs-ClKHNIr-.mjs → Breadcrumbs-CR-xdruP.mjs} RENAMED Viewed

@@ -7,9 +7,9 @@ import { a as Tooltip } from "./Tooltip-BsuYG0fw.mjs";
 import { focusOutline } from "./mixins/focus.mjs";
 import { t as HStack } from "./Stack-BqQndGI9.mjs";
 import { t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
-import { t as intersperse } from "./intersperse-CRUnXmnu.mjs";
+import { t as intersperse } from "./intersperse-vOYvFOfF.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as TechnicalSticker } from "./TechnicalSticker-D6MO_IfT.mjs";
+import { t as TechnicalSticker } from "./TechnicalSticker-CLbNA0kp.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-ClKHNIr-.mjs.map
+//# sourceMappingURL=Breadcrumbs-CR-xdruP.mjs.map

package/dist/{Breadcrumbs-ClKHNIr-.mjs.map → Breadcrumbs-CR-xdruP.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumbs-ClKHNIr-.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 { 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 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 }) => 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(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 }) => 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-CR-xdruP.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 { 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 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 }) => 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(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 }) => 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/Card2.d.mts CHANGED Viewed

@@ -63,7 +63,7 @@ declare const _default: FC<{
   fullHeight?: boolean;
 } & {
   children?: ReactNode | undefined;
-}, "children" | "collapsible" | "defaultCollapsed" | "heading" | "loading" | "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" | "collapsible" | "defaultCollapsed" | "heading" | "loading" | "loadingProps" | "empty" | "emptyProps">>;
+  }, "children" | "heading" | "loading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
   Stacked: FC<{
     children: ReactNode[];
   }>;

package/dist/{CardV2-CFTjYWoO.mjs → CardV2-CBjhsfrn.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-BqQndGI9.mjs";
 import { n as Button$1, t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
-import { t as intersperse } from "./intersperse-CRUnXmnu.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-DovtBJBs.mjs";
-import { t as DropdownButton } from "./DropdownButton-DV5if_uG.mjs";
-import { t as LoadingShimmer } from "./LoadingShimmer-DeVCDCjT.mjs";
+import { t as intersperse } from "./intersperse-vOYvFOfF.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-C0WK4bM0.mjs";
+import { t as DropdownButton } from "./DropdownButton-l-fzkb5_.mjs";
+import { t as LoadingShimmer } from "./LoadingShimmer-ZyzJs5Vi.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-CFTjYWoO.mjs.map
+//# sourceMappingURL=CardV2-CBjhsfrn.mjs.map

package/dist/{CardV2-CFTjYWoO.mjs.map → CardV2-CBjhsfrn.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardV2-CFTjYWoO.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-CBjhsfrn.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-CyeitZ5q.mjs → Checkbox-BHZ7c7_6.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-BqQndGI9.mjs";
-import { n as useFormField } from "./useFormField-C-K1lgmv.mjs";
+import { n as useFormField } from "./useFormField-DhYd6bNn.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-CyeitZ5q.mjs.map
+//# sourceMappingURL=Checkbox-BHZ7c7_6.mjs.map

package/dist/{Checkbox-CyeitZ5q.mjs.map → Checkbox-BHZ7c7_6.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox-CyeitZ5q.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isIndeterminate,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' \| 'sm'; disabled?: boolean }>`\n position: relative;\n cursor: pointer;\n\n flex-wrap: nowrap;\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n height: 16px;\n `}\n\n &${isDisabled} {\n cursor: default;\n }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n cursor: pointer;\n display: flex;\n flex: 0 0 16px;\n justify-content: center;\n align-items: center;\n transition:\n box-shadow ${TransitionDuration.Fast},\n background-color ${TransitionDuration.Fast},\n border-color ${TransitionDuration.Fast};\n border-radius: 3px;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n box-sizing: border-box;\n border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n svg {\n color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n }\n\n &${isDisabled} {\n cursor: default;\n background: ${({ theme }) =>\n semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n border-color: ${({ theme }) =>\n semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n }\n\n ${({ checked, theme }) =>\n checked &&\n css`\n border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n &${isDisabled} {\n border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n }\n `}\n`;\n\nconst CheckboxInput = styled.input`\n cursor: inherit;\n height: 16px;\n width: 16px;\n margin: 0;\n border: 0;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n\n &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n border-color: ${({ theme }) =>\n semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n }\n\n &${isChecked}, &${isIndeterminate} {\n &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n }\n }\n\n &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n ${focusStyle}\n }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' \| 'sm' }>`\n cursor: inherit;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n ${({ size }) =>\n size === 'sm'\n ? css`\n ${Typography.TextSmall};\n line-height: 16px;\n `\n : css`\n ${Typography.TextMedium};\n\n /** Nudge text for visual alignment /\n position: relative;\n bottom: -1px;\n `}\n\n ${({ theme, disabled }) =>\n disabled &&\n css`\n cursor: default;\n color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' \| 'size'> {\n /\n `id` for the underlying `<input>`. If not provided a unique ID is generated\n * automatically and linked to the label.\n /\n id?: string;\n /* Called whenever the checked state changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Visible label rendered to the right of the checkbox box. /\n label?: ReactNode;\n /* Disables interaction and renders the checkbox in a muted style. /\n disabled?: boolean;\n /\n When true the checkbox displays a dash (−) instead of a tick, indicating a\n * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n /\n indeterminate?: boolean;\n /\n Controlled checked state. Omit (or pass `undefined`) to let the component\n * manage state internally via `defaultChecked`.\n /\n checked?: boolean;\n /* Value submitted with a form. /\n value?: unknown;\n 'data-test'?: string;\n /* Additional props forwarded to the outer container `<div>`. /\n containerProps?: ComponentPropsWithoutRef<'div'>;\n /\n Size of the checkbox and its label text.\n * @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n /\n Tooltip content to display when hovering over the label.\n * When provided, the label will be wrapped in a tooltip.\n /\n tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n {\n className,\n disabled,\n indeterminate,\n onChange,\n checked: checkedProp,\n defaultChecked,\n id,\n label,\n 'data-test': dataTest,\n containerProps,\n value,\n size = 'md',\n tooltip,\n ...elemProps\n },\n ref,\n) {\n const field = useFormField({ disabled });\n const [checked, setChecked] = useControlled({\n controlledValue: checkedProp,\n default: defaultChecked,\n });\n const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n const inputRef = useRef<HTMLInputElement>();\n\n // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n const inputId = field.inputId \|\| id \|\| generatedId;\n\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n useEffect(() => {\n if (inputRef.current) {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n inputRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, inputRef]);\n\n return (\n <Container\n direction='horizontal'\n className={className}\n data-test={dataTest}\n disabled={field.disabled}\n align='center'\n size={size}\n {...containerProps}\n >\n <CheckboxInput\n id={inputId}\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={inputRef}\n data-test={dataTest && `${dataTest}-input`}\n disabled={field.disabled}\n type='checkbox'\n checked={checkedProp == null ? undefined : checked}\n defaultChecked={defaultChecked}\n onChange={(e) => {\n setChecked(e.target.checked);\n if (onChange) {\n onChange(e);\n }\n }}\n aria-checked={indeterminate ? 'mixed' : undefined}\n value={value as unknown as string}\n {...elemProps}\n />\n <CheckboxBox\n aria-hidden='true'\n disabled={field.disabled}\n checked={(checked != null && checked) \|\| indeterminate}\n >\n {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n </CheckboxBox>\n {label &&\n (tooltip ? (\n <Tooltip\n size={size}\n trigger={\n <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n </Label>\n }\n >\n {tooltip}\n </Tooltip>\n ) : (\n <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n {label}\n </Label>\n ))}\n </Container>\n );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox-BHZ7c7_6.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isIndeterminate,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' \| 'sm'; disabled?: boolean }>`\n position: relative;\n cursor: pointer;\n\n flex-wrap: nowrap;\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n height: 16px;\n `}\n\n &${isDisabled} {\n cursor: default;\n }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n cursor: pointer;\n display: flex;\n flex: 0 0 16px;\n justify-content: center;\n align-items: center;\n transition:\n box-shadow ${TransitionDuration.Fast},\n background-color ${TransitionDuration.Fast},\n border-color ${TransitionDuration.Fast};\n border-radius: 3px;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n box-sizing: border-box;\n border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n svg {\n color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n }\n\n &${isDisabled} {\n cursor: default;\n background: ${({ theme }) =>\n semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n border-color: ${({ theme }) =>\n semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n }\n\n ${({ checked, theme }) =>\n checked &&\n css`\n border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n &${isDisabled} {\n border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n }\n `}\n`;\n\nconst CheckboxInput = styled.input`\n cursor: inherit;\n height: 16px;\n width: 16px;\n margin: 0;\n border: 0;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n\n &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n border-color: ${({ theme }) =>\n semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n }\n\n &${isChecked}, &${isIndeterminate} {\n &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n }\n }\n\n &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n ${focusStyle}\n }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' \| 'sm' }>`\n cursor: inherit;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n ${({ size }) =>\n size === 'sm'\n ? css`\n ${Typography.TextSmall};\n line-height: 16px;\n `\n : css`\n ${Typography.TextMedium};\n\n /** Nudge text for visual alignment /\n position: relative;\n bottom: -1px;\n `}\n\n ${({ theme, disabled }) =>\n disabled &&\n css`\n cursor: default;\n color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' \| 'size'> {\n /\n `id` for the underlying `<input>`. If not provided a unique ID is generated\n * automatically and linked to the label.\n /\n id?: string;\n /* Called whenever the checked state changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Visible label rendered to the right of the checkbox box. /\n label?: ReactNode;\n /* Disables interaction and renders the checkbox in a muted style. /\n disabled?: boolean;\n /\n When true the checkbox displays a dash (−) instead of a tick, indicating a\n * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n /\n indeterminate?: boolean;\n /\n Controlled checked state. Omit (or pass `undefined`) to let the component\n * manage state internally via `defaultChecked`.\n /\n checked?: boolean;\n /* Value submitted with a form. /\n value?: unknown;\n 'data-test'?: string;\n /* Additional props forwarded to the outer container `<div>`. /\n containerProps?: ComponentPropsWithoutRef<'div'>;\n /\n Size of the checkbox and its label text.\n * @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n /\n Tooltip content to display when hovering over the label.\n * When provided, the label will be wrapped in a tooltip.\n /\n tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n {\n className,\n disabled,\n indeterminate,\n onChange,\n checked: checkedProp,\n defaultChecked,\n id,\n label,\n 'data-test': dataTest,\n containerProps,\n value,\n size = 'md',\n tooltip,\n ...elemProps\n },\n ref,\n) {\n const field = useFormField({ disabled });\n const [checked, setChecked] = useControlled({\n controlledValue: checkedProp,\n default: defaultChecked,\n });\n const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n const inputRef = useRef<HTMLInputElement>();\n\n // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n const inputId = field.inputId \|\| id \|\| generatedId;\n\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n useEffect(() => {\n if (inputRef.current) {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n inputRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, inputRef]);\n\n return (\n <Container\n direction='horizontal'\n className={className}\n data-test={dataTest}\n disabled={field.disabled}\n align='center'\n size={size}\n {...containerProps}\n >\n <CheckboxInput\n id={inputId}\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={inputRef}\n data-test={dataTest && `${dataTest}-input`}\n disabled={field.disabled}\n type='checkbox'\n checked={checkedProp == null ? undefined : checked}\n defaultChecked={defaultChecked}\n onChange={(e) => {\n setChecked(e.target.checked);\n if (onChange) {\n onChange(e);\n }\n }}\n aria-checked={indeterminate ? 'mixed' : undefined}\n value={value as unknown as string}\n {...elemProps}\n />\n <CheckboxBox\n aria-hidden='true'\n disabled={field.disabled}\n checked={(checked != null && checked) \|\| indeterminate}\n >\n {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n </CheckboxBox>\n {label &&\n (tooltip ? (\n <Tooltip\n size={size}\n trigger={\n <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n </Label>\n }\n >\n {tooltip}\n </Tooltip>\n ) : (\n <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n {label}\n </Label>\n ))}\n </Container>\n );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAM,YAAY,OAAO,MAAM;;;;;;KAM1B,EAAE,WACH,SAAS,QACT,GAAG;;MAED;;KAED,WAAW;;;;AAKhB,MAAM,cAAc,OAAO,GAA8C;;;;;;;yBAOhC;+BACM;2BACJ;;YAE/B,QAAQ,GAAG;WACZ,QAAQ,GAAG;;uBAEC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,uBAAuB,CAAC;;;cAG3F,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;;KAGxF,WAAW;;mBAEG,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;KAGtE,EAAE,SAAS,YACZ,WACA,GAAG;sBACe,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;oBACzE,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;SAEnF,WAAW;wBACI,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;sBAC1F,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;MAExG;;AAGN,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;KAU7B,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU,KAAK,gBAAgB;OAC7B,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;AAIjB,MAAM,QAAQ,OAAO,KAA+C;;YAExD,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;KAE1E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;;;;;UAKxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AA0CN,MAAa,WAAW,WAA4C,SAAS,SAC3E,EACE,WACA,UACA,eACA,UACA,SAAS,aACT,gBACA,IACA,OACA,aAAa,UACb,gBACA,OACA,OAAO,MACP,SACA,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,CAAC,SAAS,cAAc,cAAc;EAC1C,iBAAiB;EACjB,SAAS;EACV,CAAC;CACF,MAAM,cAAc,cAAc,SAAS,iBAAiB,EAAE,EAAE,CAAC;CACjE,MAAM,WAAW,QAA0B;CAG3C,MAAM,UAAU,MAAM,WAAW,MAAM;AAGvC,qBAAoB,WAAW,SAAS,SAAS,CAAC,SAAS,CAAC;AAE5D,iBAAgB;AACd,MAAI,SAAS,QAEX,UAAS,QAAQ,gBAAgB;IAElC,CAAC,eAAe,SAAS,CAAC;AAE7B,QACE,qBAAC,WAAD;EACE,WAAU;EACC;EACX,aAAW;EACX,UAAU,MAAM;EAChB,OAAM;EACA;EACN,GAAI;YAPN;GASE,oBAAC,eAAD;IACE,IAAI;IAEJ,KAAK;IACL,aAAW,YAAY,GAAG,SAAS;IACnC,UAAU,MAAM;IAChB,MAAK;IACL,SAAS,eAAe,OAAO,KAAA,IAAY;IAC3B;IAChB,WAAW,MAAM;AACf,gBAAW,EAAE,OAAO,QAAQ;AAC5B,SAAI,SACF,UAAS,EAAE;;IAGf,gBAAc,gBAAgB,UAAU,KAAA;IACjC;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD;IACE,eAAY;IACZ,UAAU,MAAM;IAChB,SAAU,WAAW,QAAQ,WAAY;cAExC,gBAAgB,oBAAC,eAAD,EAAiB,CAAA,GAAG,UAAU,oBAAC,gBAAD,EAAkB,CAAA,GAAG;IACxD,CAAA;GACb,UACE,UACC,oBAAC,SAAD;IACQ;IACN,SACE,oBAAC,OAAD;KAAO,SAAS;KAAS,UAAU,CAAC,CAAC,MAAM;KAAgB;eACzD,oBAAC,yBAAD,EAAA,UAA0B,OAAgC,CAAA;KACpD,CAAA;cAGT;IACO,CAAA,GAEV,oBAAC,OAAD;IAAO,SAAS;IAAS,UAAU,CAAC,CAAC,MAAM;IAAgB;cACxD;IACK,CAAA;GAEF;;EAEd"}

package/dist/{Combobox-Ddas5FN-.mjs → Combobox-BCYLeZDP.mjs} RENAMED Viewed

@@ -7,12 +7,12 @@ import { focusStyle } from "./mixins/focus.mjs";
 import { n as Stack } from "./Stack-BqQndGI9.mjs";
 import { n as Button } from "./IconButton-CnJNIJVQ.mjs";
 import { n as Sticker } from "./Sticker-BDyejPZa.mjs";
-import { n as useFormField } from "./useFormField-C-K1lgmv.mjs";
-import { r as InputGroup } from "./Input-DbfwNzS_.mjs";
+import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
+import { r as InputGroup } from "./Input-DGWThZlt.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-CAGTCBqj.mjs";
-import { t as Checkbox } from "./Checkbox-CyeitZ5q.mjs";
-import { t as Spinner } from "./Spinner-gBNWIwOn.mjs";
+import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-CeV3lL2g.mjs";
+import { t as Checkbox } from "./Checkbox-BHZ7c7_6.mjs";
+import { t as Spinner } from "./Spinner-Dpw3-3JS.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -1885,4 +1885,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
-//# sourceMappingURL=Combobox-Ddas5FN-.mjs.map
+//# sourceMappingURL=Combobox-BCYLeZDP.mjs.map