npm - @persona/design-system - Versions diffs - 0.3.0 → 0.4.0 - Mend

@persona/design-system 0.3.0 → 0.4.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 (507) hide show

package/dist/components/Modal/index.mjs CHANGED Viewed

@@ -1,14 +1,14 @@
-import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
-import { t as Card_default } from "../../Card-BMCB9eFC.mjs";
-import { n as Heading$1 } from "../../Text-RcEfNFLx.mjs";
-import useEmbeddedSurface from "../../lib/useEmbeddedSurface.mjs";
-import { n as Button$1 } from "../../IconButton-BfDlic2K.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-D6UocZXi.mjs";
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { t as Card_default } from "../../Card-CKrJtn1f.mjs";
+import { n as Heading$1 } from "../../Text-B0orb-cZ.mjs";
+import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "../../lib/useEmbeddedSurface.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
+import { n as Button$1 } from "../../IconButton-BgL3QUVO.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-B5NtgtgC.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
+import { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, Pressable } from "react-aria-components";
-import { forwardRef, useEffect, useRef, useState } from "react";
 import { XIcon } from "@persona/icons";
 //#region lib/useModalInsetRight.ts
 const CSS_VAR = "--modal-inset-right";
@@ -91,6 +91,16 @@ const StyledModalOverlay = styled(ModalOverlay)`
   right: ${({ $insetRight }) => $insetRight};
   transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;
   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;
+  animation-fill-mode: both;
+  ${({ $hostPending }) => $hostPending && `
+    animation-play-state: paused;
+  `}
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0ms;
+    animation-delay: 0ms;
+    animation-play-state: running;
+  }
   z-index: 10000;
   display: flex;
   align-items: center;
@@ -102,13 +112,30 @@ const StyledModal = styled(Modal)`
   width: fit-content;
   max-width: 100%;
 `;
-const EmbeddedSurfaceModal = forwardRef(function EmbeddedSurfaceModal({ children }, ref) {
-	useEmbeddedSurface();
+/**
+* React Aria keeps the overlay mounted through the exit animation, so announcing the surface from
+* here — rather than from the persistent gate below — releases the host's backdrop exactly when the
+* modal stops being painted.
+*/
+const EmbeddedSurfaceModal = forwardRef(function EmbeddedSurfaceModal({ children, surfaceId }, ref) {
+	useEmbeddedSurface(surfaceId);
 	return /* @__PURE__ */ jsx(StyledModal, {
 		ref,
 		children
 	});
 });
+const EmbeddedSurfaceOverlay = ({ surfaceId, ...props }) => {
+	const isOpen = useContext(OverlayTriggerStateContext)?.isOpen ?? false;
+	const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);
+	const { $insetRight, $transitionMs, ...overlayProps } = props;
+	return /* @__PURE__ */ jsx(StyledModalOverlay, {
+		...overlayProps,
+		$insetRight,
+		$transitionMs,
+		$animationDelayMs: animationDelayMs,
+		$hostPending: isOpen && !ready
+	});
+};
 const ModalCloseButton = styled(Button$1)`
   display: inline-flex;
   padding: ${Spacing[2]};
@@ -252,6 +279,7 @@ const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButt
 });
 const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size = "md", title, footer, tabs, defaultOpen, onOpenChange, isDismissable = false, isKeyboardDismissDisabled = false, open }) => {
 	const [portalContainer, setPortalContainer] = useState(null);
+	const surfaceId = useEmbeddedSurfaceId();
 	const { insetRight: modalInsetRight, panelState } = useModalInsetRight();
 	const transitionMs = panelState === "opening" ? 425 : panelState === "closing" ? 200 : 0;
 	const content = /* @__PURE__ */ jsx(ModalCard, {
@@ -268,7 +296,8 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 		isOpen: open,
 		defaultOpen,
 		onOpenChange,
-		children: [trigger ? /* @__PURE__ */ jsx(Pressable, { children: trigger }) : null, /* @__PURE__ */ jsx(StyledModalOverlay, {
+		children: [trigger ? /* @__PURE__ */ jsx(Pressable, { children: trigger }) : null, /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
+			surfaceId,
 			$insetRight: modalInsetRight,
 			$transitionMs: transitionMs,
 			isDismissable,
@@ -276,6 +305,7 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 			shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
 			children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
 				ref: setPortalContainer,
+				surfaceId,
 				children: content
 			})
 		})]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() \|\| '0px';\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport interface ModalInsetRight {\n /** Animated inset value — starts at 0px on panel open so CSS transition fires /\n insetRight: string;\n panelState: PanelInsetState;\n}\n\n/\n Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n \n panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n /\nconst useModalInsetRight = (): ModalInsetRight => {\n const [insetRight, setInsetRight] = useState(getModalInsetRight);\n const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n getModalInsetRight() !== '0px' ? 'open' : 'closed',\n );\n const prevInsetRight = useRef(getModalInsetRight());\n const transitionTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const rafRef = useRef<number \| null>(null);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const prev = prevInsetRight.current;\n const next = getModalInsetRight();\n prevInsetRight.current = next;\n\n if (prev === '0px' && next !== '0px') {\n if (prefersReducedMotion()) {\n setInsetRight(next);\n setPanelState('open');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight('0px');\n setPanelState('opening');\n rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('open'),\n SIDEBAR_OPEN_TRANSITION_MS,\n );\n }\n } else if (prev !== '0px' && next === '0px') {\n if (prefersReducedMotion()) {\n setInsetRight('0px');\n setPanelState('closed');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight(prev);\n setPanelState('closing');\n rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('closed'),\n SIDEBAR_CLOSE_TRANSITION_MS,\n );\n }\n } else {\n setInsetRight(next);\n }\n });\n\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['style'],\n });\n\n return () => {\n observer.disconnect();\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n };\n }, []);\n\n return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, useEffect, useState } from 'react';\nimport {\n Button as AriaButton,\n Dialog,\n DialogTrigger,\n Heading as AriaHeading,\n Modal as AriaModal,\n ModalOverlay,\n Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport useEmbeddedSurface from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n SIDEBAR_CLOSE_TRANSITION_MS,\n SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{ $insetRight: string; $transitionMs: number }>`\n @keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: ${({ $insetRight }) => $insetRight};\n transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n z-index: 10001;\n outline: none;\n width: fit-content;\n max-width: 100%;\n`;\n\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode }>(\n function EmbeddedSurfaceModal({ children }, ref) {\n useEmbeddedSurface();\n return <StyledModal ref={ref}>{children}</StyledModal>;\n },\n);\n\nconst ModalCloseButton = styled(Button)`\n display: inline-flex;\n padding: ${Spacing[2]};\n border-radius: ${Spacing[1]};\n width: fit-content;\n min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n justify: 'flex-end',\n align: 'center',\n spacing: Spacing[2],\n})`\n padding: ${Spacing[3]} ${Spacing[4]};\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\nconst ModalHeaderTitle = styled.div`\n flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n return (\n <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n <XIcon />\n </ModalCloseButton>\n </AriaButton>\n );\n};\n\nexport interface ModalTitleProps {\n children: ReactNode;\n className?: string;\n}\n\n/* Props passed to modal content render functions. /\nexport interface ModalRenderProps {\n /* Element that floating content should use as its portal container. /\n portalContainer: HTMLDivElement \| null;\n}\n\ntype ModalRenderable = ReactNode \| ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n return (\n <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n {children}\n </Heading>\n );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n border-bottom: ${({ $hasTabs }) => ($hasTabs ? 'none' : `1px solid ${Color.BorderDivider}`)};\n padding: ${({ $hasTabs }) =>\n $hasTabs\n ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full' }>`\n position: relative;\n width: ${({ $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return '90vw';\n }\n }};\n max-width: ${({ theme, $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return theme.modal.width[$size];\n }\n }};\n / TODO: Use breakpoints to make this responsive /\n max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n ${({ $size }) =>\n $size === 'full' &&\n `\n height: calc(100vh - 160px);\n `}\n margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n /\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer content\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n * Tab contents can be render functions that receive the modal portal container.\n /\n tabs?: TabView[];\n\n /\n Title of the modal\n /\n title?: ReactNode;\n\n /\n Children content\n /\n children?: ReactNode;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n /\n noBodyPadding?: boolean;\n\n /\n Additional props for the Dialog element\n /\n className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n portalContainer: HTMLDivElement \| null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n $noPadding?: boolean;\n $hidden?: boolean;\n}>`\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n ${({ $noPadding }) =>\n $noPadding\n ? 'padding: 0;'\n : `\n padding-left: ${Spacing[4]};\n padding-right: ${Spacing[4]};\n `}\n ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/\n Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n /\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n {\n title,\n children,\n showCloseButton = true,\n size,\n footer,\n tabs,\n noBodyPadding = false,\n portalContainer,\n ...props\n },\n ref,\n) {\n const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n const tabCount = tabs?.length ?? 0;\n\n useEffect(() => {\n setSelectedTabIdx(0);\n }, [tabCount]);\n\n const titleAndClose = (\n <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n {showCloseButton && <ModalClose aria-label='Close' />}\n </ModalHeader>\n );\n\n const modalHeader = tabs ? (\n <Stack>\n {titleAndClose}\n <ModalTabBar>\n {tabs.map((tab, idx) => (\n <Tab\n key={tab.name}\n selected={selectedTabIdx === idx}\n id={`pds-modal_tab-${idx}`}\n onClick={() => setSelectedTabIdx(idx)}\n aria-controls={`pds-modal_tab-panel-${idx}`}\n >\n {tab.name}\n </Tab>\n ))}\n </ModalTabBar>\n </Stack>\n ) : (\n titleAndClose\n );\n\n return (\n <StyledDialog {...props} ref={ref}>\n <StyledCard elevated $size={size}>\n {(showCloseButton \|\| title) && modalHeader}\n {tabs ? (\n tabs.map((tab, idx) => (\n <StyledModalCardBody\n key={tab.name}\n $noPadding={noBodyPadding}\n $hidden={selectedTabIdx !== idx}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${tab.name}`}\n aria-labelledby={`pds-modal_tab-${tab.name}`}\n >\n {typeof tab.contents === 'function'\n ? tab.contents({ portalContainer })\n : tab.contents}\n </StyledModalCardBody>\n ))\n ) : (\n <StyledModalCardBody\n $noPadding={noBodyPadding}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${selectedTabIdx}`}\n aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n >\n {children}\n </StyledModalCardBody>\n )}\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </StyledCard>\n </StyledDialog>\n );\n});\n\ninterface TabView {\n name: string;\n contents: ModalRenderable;\n badge?: React.ReactElement;\n disabled?: boolean;\n 'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n /\n Title of the Card\n /\n title?: string;\n\n /\n Component to use as trigger. React Aria trigger props will be merged with this element.\n /\n trigger?: ComponentProps<typeof Pressable>['children'];\n\n /\n Props to apply to Modal.Card within\n /\n contentProps?: ModalCardProps;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer section intended for actions.\n * You can pass in Buttons directly and they will render in a HStack.\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n /\n tabs?: TabView[];\n\n /\n Children content\n /\n children?: ModalRenderable;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n * Can also be set via contentProps.noBodyPadding.\n /\n noBodyPadding?: boolean;\n\n /\n Controls whether the modal is open (controlled)\n /\n open?: boolean;\n\n /\n Default open state (uncontrolled)\n /\n defaultOpen?: boolean;\n\n /\n Handler called when open state changes\n /\n onOpenChange?: (isOpen: boolean) => void;\n\n /\n Whether the modal can be dismissed by clicking outside or pressing escape\n /\n isDismissable?: boolean;\n\n /\n Whether pressing the escape key closes the modal\n */\n isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n children,\n trigger,\n contentProps,\n noBodyPadding = false,\n size = 'md',\n title,\n footer,\n tabs,\n defaultOpen,\n onOpenChange,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n open,\n}: ModalProps) => {\n const [portalContainer, setPortalContainer] = useState<HTMLDivElement \| null>(null);\n const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n const transitionMs =\n panelState === 'opening'\n ? SIDEBAR_OPEN_TRANSITION_MS\n : panelState === 'closing'\n ? SIDEBAR_CLOSE_TRANSITION_MS\n : 0;\n\n const content = (\n <ModalCard\n size={size}\n title={title}\n footer={footer}\n tabs={tabs}\n noBodyPadding={noBodyPadding}\n {...contentProps}\n portalContainer={portalContainer}\n >\n {typeof children === 'function' ? children({ portalContainer }) : children}\n </ModalCard>\n );\n\n // Wrap trigger element to ensure it works with react-aria-components\n const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n return (\n <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n {wrappedTrigger}\n <StyledModalOverlay\n $insetRight={modalInsetRight}\n $transitionMs={transitionMs}\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n >\n <EmbeddedSurfaceModal ref={setPortalContainer}>{content}</EmbeddedSurfaceModal>\n </StyledModalOverlay>\n </DialogTrigger>\n );\n};\n\nexport default Object.assign(Modal, {\n Title: ModalTitle,\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() \|\| '0px';\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport interface ModalInsetRight {\n /** Animated inset value — starts at 0px on panel open so CSS transition fires /\n insetRight: string;\n panelState: PanelInsetState;\n}\n\n/\n Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n \n panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n /\nconst useModalInsetRight = (): ModalInsetRight => {\n const [insetRight, setInsetRight] = useState(getModalInsetRight);\n const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n getModalInsetRight() !== '0px' ? 'open' : 'closed',\n );\n const prevInsetRight = useRef(getModalInsetRight());\n const transitionTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const rafRef = useRef<number \| null>(null);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const prev = prevInsetRight.current;\n const next = getModalInsetRight();\n prevInsetRight.current = next;\n\n if (prev === '0px' && next !== '0px') {\n if (prefersReducedMotion()) {\n setInsetRight(next);\n setPanelState('open');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight('0px');\n setPanelState('opening');\n rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('open'),\n SIDEBAR_OPEN_TRANSITION_MS,\n );\n }\n } else if (prev !== '0px' && next === '0px') {\n if (prefersReducedMotion()) {\n setInsetRight('0px');\n setPanelState('closed');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight(prev);\n setPanelState('closing');\n rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('closed'),\n SIDEBAR_CLOSE_TRANSITION_MS,\n );\n }\n } else {\n setInsetRight(next);\n }\n });\n\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['style'],\n });\n\n return () => {\n observer.disconnect();\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n };\n }, []);\n\n return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, useContext, useEffect, useState } from 'react';\nimport {\n Button as AriaButton,\n Dialog,\n DialogTrigger,\n Heading as AriaHeading,\n Modal as AriaModal,\n ModalOverlay,\n type ModalOverlayProps,\n OverlayTriggerStateContext,\n Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport useEmbeddedSurface, {\n useEmbeddedSurfaceGate,\n useEmbeddedSurfaceId,\n} from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n SIDEBAR_CLOSE_TRANSITION_MS,\n SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n $hostPending: boolean;\n $animationDelayMs: number;\n $insetRight: string;\n $transitionMs: number;\n}>`\n @keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: ${({ $insetRight }) => $insetRight};\n transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n animation-fill-mode: both;\n ${({ $hostPending }) =>\n $hostPending &&\n `\n animation-play-state: paused;\n `}\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 0ms;\n animation-delay: 0ms;\n animation-play-state: running;\n }\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n z-index: 10001;\n outline: none;\n width: fit-content;\n max-width: 100%;\n`;\n\n/\n React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n /\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n useEmbeddedSurface(surfaceId);\n return <StyledModal ref={ref}>{children}</StyledModal>;\n },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n $insetRight: string;\n $transitionMs: number;\n surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n const state = useContext(OverlayTriggerStateContext);\n const isOpen = state?.isOpen ?? false;\n const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n const { $insetRight, $transitionMs, ...overlayProps } = props;\n return (\n <StyledModalOverlay\n {...overlayProps}\n $insetRight={$insetRight}\n $transitionMs={$transitionMs}\n $animationDelayMs={animationDelayMs}\n $hostPending={isOpen && !ready}\n />\n );\n};\n\nconst ModalCloseButton = styled(Button)`\n display: inline-flex;\n padding: ${Spacing[2]};\n border-radius: ${Spacing[1]};\n width: fit-content;\n min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n justify: 'flex-end',\n align: 'center',\n spacing: Spacing[2],\n})`\n padding: ${Spacing[3]} ${Spacing[4]};\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\nconst ModalHeaderTitle = styled.div`\n flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n return (\n <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n <XIcon />\n </ModalCloseButton>\n </AriaButton>\n );\n};\n\nexport interface ModalTitleProps {\n children: ReactNode;\n className?: string;\n}\n\n/* Props passed to modal content render functions. /\nexport interface ModalRenderProps {\n /* Element that floating content should use as its portal container. /\n portalContainer: HTMLDivElement \| null;\n}\n\ntype ModalRenderable = ReactNode \| ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n return (\n <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n {children}\n </Heading>\n );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n border-bottom: ${({ $hasTabs }) => ($hasTabs ? 'none' : `1px solid ${Color.BorderDivider}`)};\n padding: ${({ $hasTabs }) =>\n $hasTabs\n ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full' }>`\n position: relative;\n width: ${({ $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return '90vw';\n }\n }};\n max-width: ${({ theme, $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return theme.modal.width[$size];\n }\n }};\n / TODO: Use breakpoints to make this responsive /\n max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n ${({ $size }) =>\n $size === 'full' &&\n `\n height: calc(100vh - 160px);\n `}\n margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n /\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer content\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n * Tab contents can be render functions that receive the modal portal container.\n /\n tabs?: TabView[];\n\n /\n Title of the modal\n /\n title?: ReactNode;\n\n /\n Children content\n /\n children?: ReactNode;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n /\n noBodyPadding?: boolean;\n\n /\n Additional props for the Dialog element\n /\n className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n portalContainer: HTMLDivElement \| null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n $noPadding?: boolean;\n $hidden?: boolean;\n}>`\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n ${({ $noPadding }) =>\n $noPadding\n ? 'padding: 0;'\n : `\n padding-left: ${Spacing[4]};\n padding-right: ${Spacing[4]};\n `}\n ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/\n Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n /\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n {\n title,\n children,\n showCloseButton = true,\n size,\n footer,\n tabs,\n noBodyPadding = false,\n portalContainer,\n ...props\n },\n ref,\n) {\n const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n const tabCount = tabs?.length ?? 0;\n\n useEffect(() => {\n setSelectedTabIdx(0);\n }, [tabCount]);\n\n const titleAndClose = (\n <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n {showCloseButton && <ModalClose aria-label='Close' />}\n </ModalHeader>\n );\n\n const modalHeader = tabs ? (\n <Stack>\n {titleAndClose}\n <ModalTabBar>\n {tabs.map((tab, idx) => (\n <Tab\n key={tab.name}\n selected={selectedTabIdx === idx}\n id={`pds-modal_tab-${idx}`}\n onClick={() => setSelectedTabIdx(idx)}\n aria-controls={`pds-modal_tab-panel-${idx}`}\n >\n {tab.name}\n </Tab>\n ))}\n </ModalTabBar>\n </Stack>\n ) : (\n titleAndClose\n );\n\n return (\n <StyledDialog {...props} ref={ref}>\n <StyledCard elevated $size={size}>\n {(showCloseButton \|\| title) && modalHeader}\n {tabs ? (\n tabs.map((tab, idx) => (\n <StyledModalCardBody\n key={tab.name}\n $noPadding={noBodyPadding}\n $hidden={selectedTabIdx !== idx}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${tab.name}`}\n aria-labelledby={`pds-modal_tab-${tab.name}`}\n >\n {typeof tab.contents === 'function'\n ? tab.contents({ portalContainer })\n : tab.contents}\n </StyledModalCardBody>\n ))\n ) : (\n <StyledModalCardBody\n $noPadding={noBodyPadding}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${selectedTabIdx}`}\n aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n >\n {children}\n </StyledModalCardBody>\n )}\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </StyledCard>\n </StyledDialog>\n );\n});\n\ninterface TabView {\n name: string;\n contents: ModalRenderable;\n badge?: React.ReactElement;\n disabled?: boolean;\n 'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n /\n Title of the Card\n /\n title?: string;\n\n /\n Component to use as trigger. React Aria trigger props will be merged with this element.\n /\n trigger?: ComponentProps<typeof Pressable>['children'];\n\n /\n Props to apply to Modal.Card within\n /\n contentProps?: ModalCardProps;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer section intended for actions.\n * You can pass in Buttons directly and they will render in a HStack.\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n /\n tabs?: TabView[];\n\n /\n Children content\n /\n children?: ModalRenderable;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n * Can also be set via contentProps.noBodyPadding.\n /\n noBodyPadding?: boolean;\n\n /\n Controls whether the modal is open (controlled)\n /\n open?: boolean;\n\n /\n Default open state (uncontrolled)\n /\n defaultOpen?: boolean;\n\n /\n Handler called when open state changes\n /\n onOpenChange?: (isOpen: boolean) => void;\n\n /\n Whether the modal can be dismissed by clicking outside or pressing escape\n /\n isDismissable?: boolean;\n\n /\n Whether pressing the escape key closes the modal\n */\n isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n children,\n trigger,\n contentProps,\n noBodyPadding = false,\n size = 'md',\n title,\n footer,\n tabs,\n defaultOpen,\n onOpenChange,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n open,\n}: ModalProps) => {\n const [portalContainer, setPortalContainer] = useState<HTMLDivElement \| null>(null);\n const surfaceId = useEmbeddedSurfaceId();\n const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n const transitionMs =\n panelState === 'opening'\n ? SIDEBAR_OPEN_TRANSITION_MS\n : panelState === 'closing'\n ? SIDEBAR_CLOSE_TRANSITION_MS\n : 0;\n\n const content = (\n <ModalCard\n size={size}\n title={title}\n footer={footer}\n tabs={tabs}\n noBodyPadding={noBodyPadding}\n {...contentProps}\n portalContainer={portalContainer}\n >\n {typeof children === 'function' ? children({ portalContainer }) : children}\n </ModalCard>\n );\n\n // Wrap trigger element to ensure it works with react-aria-components\n const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n return (\n <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n {wrappedTrigger}\n <EmbeddedSurfaceOverlay\n surfaceId={surfaceId}\n $insetRight={modalInsetRight}\n $transitionMs={transitionMs}\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n >\n <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n {content}\n </EmbeddedSurfaceModal>\n </EmbeddedSurfaceOverlay>\n </DialogTrigger>\n );\n};\n\nexport default Object.assign(Modal, {\n Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/components/PageHeader/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-C2IUKhCg.mjs";
+import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-B2-Slzhl.mjs";
 export { PageHeaderContainer, PageHeader as default };

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

@@ -1,4 +1,4 @@
-import { t as Pagination } from "../../Pagination-ygLutOst.mjs";
-import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-vay4jpMp.mjs";
-import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-BASogfT_.mjs";
+import { t as Pagination } from "../../Pagination-j4hF7GOk.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-BcZx4nqe.mjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-DcJ3tnwY.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-0VhVdXv0.mjs";
+import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-CtUz0gdA.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };

package/dist/components/Pii/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Pii_default } from "../../Pii-C7pA72Bh.mjs";
+import { t as Pii_default } from "../../Pii-RwKn-K84.mjs";
 export { Pii_default as default };

package/dist/components/Popover/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-BkDpDdaO.mjs";
+import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-DlXyKYL5.mjs";
 export { PopoverAnchor, PopoverCard, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Popover_default as default };

package/dist/components/ProgressBar/index.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
+import { a as styled, i as keyframes } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { a as Tooltip } from "../../Tooltip-BvDbmXak.mjs";
+import { a as Tooltip } from "../../Tooltip-iJcfJqxn.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { keyframes } from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react-aria";
 import CircleCheckFillIcon from "@persona/icons/CircleCheckFillIcon";

package/dist/components/ProgressIndicator/index.mjs CHANGED Viewed

@@ -1,30 +1,32 @@
-import { focusOutline } from "../../mixins/focus.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlertIcon, CircleCheckFillIcon, CircleFillIcon, CircleNullIcon } from "@persona/icons";
+import { CircleCheckFillIcon, CircleFillIcon, CircleNullIcon, CircleWarningFillIcon, WarningFillIcon } from "@persona/icons";
 //#region components/ProgressIndicator/ProgressIndicator.tsx
 /**
-* Completed and error steps can be navigated back to.
-* The current step (first uncompleted) is also clickable so the user can
+* Completed, warning, and error steps can be navigated back to.
+* The current step (first uncompleted or error) is also clickable so the user can
 * return to it after navigating back to an earlier step.
 * Active and upcoming steps (beyond the current) are not clickable.
 */
 function resolveClickable(status, isActive, isDisabled, isCurrent) {
 	if (isDisabled || isActive) return false;
-	return status === "completed" || status === "error" || isCurrent;
+	return status === "completed" || status === "warning" || status === "error" || isCurrent;
 }
 function resolveIcon(status, isCurrent) {
 	if (status === "completed") return CircleCheckFillIcon;
-	if (status === "error") return CircleAlertIcon;
+	if (status === "warning") return WarningFillIcon;
+	if (status === "error") return CircleWarningFillIcon;
 	if (isCurrent) return CircleFillIcon;
 	return CircleNullIcon;
 }
 function resolveIconColor(status, isActive, isDisabled) {
 	if (isDisabled) return Color.BorderIconDisabled;
 	if (status === "completed") return Color.BorderIconSuccess;
-	if (status === "error") return Color.BorderIconWarning;
+	if (status === "warning") return Color.BorderIconWarning;
+	if (status === "error") return Color.BorderIconDanger;
 	return isActive ? Color.BorderIconActive : Color.BorderIconSecondary;
 }
 function resolveTextColor(status, isActive, isDisabled) {
@@ -135,7 +137,9 @@ const Step = ({ step, isActive, isCurrent, layout, onStepClick }) => {
 * ProgressIndicator guides users through a sequence of steps.
 *
 * Interaction rules:
-* - **Completed / error** steps are clickable — navigate back to review or fix.
+* - **Completed / warning / error** steps are clickable — navigate back to review or fix.
+* - **Warning** does not block forward progression; later uncompleted steps remain reachable.
+* - **Error** blocks forward progression — treat it as the terminal step in the sequence.
 * - **Active** step is not clickable — the user is already there.
 * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
 *
@@ -157,7 +161,7 @@ const Step = ({ step, isActive, isCurrent, layout, onStepClick }) => {
 * ```
 */
 const ProgressIndicator = ({ steps, activeStepId, layout = "vertical", onStepClick, "aria-label": ariaLabel = "Progress", ...rest }) => {
-	const currentStepId = steps.find(({ status = "uncompleted" }) => status !== "completed")?.id;
+	const currentStepId = steps.find(({ status = "uncompleted" }) => status === "uncompleted" || status === "error")?.id;
 	return /* @__PURE__ */ jsx(StepList, {
 		$layout: layout,
 		role: "list",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressIndicator/ProgressIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n CircleAlertIcon,\n CircleCheckFillIcon,\n CircleFillIcon,\n CircleNullIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\n\nexport type StepStatus = 'uncompleted' \| 'completed' \| 'error';\n\nexport interface ProgressIndicatorStep {\n id: string;\n label: string;\n /** @default 'uncompleted' /\n status?: StepStatus;\n disabled?: boolean;\n}\n\nexport interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {\n steps: ProgressIndicatorStep[];\n /* id of the step that should receive the active visual state /\n activeStepId?: string;\n /* @default 'vertical' /\n layout?: 'vertical' \| 'horizontal';\n /\n Called when a clickable step is activated via click or keyboard.\n \n Clickability rules:\n * - `completed` and `error` steps are clickable (navigate back to review/edit)\n * - The active step is not clickable (user is already there)\n * - Upcoming `uncompleted` steps are not clickable (sequential progression required)\n /\n onStepClick?: (stepId: string) => void;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/\n Completed and error steps can be navigated back to.\n * The current step (first uncompleted) is also clickable so the user can\n * return to it after navigating back to an earlier step.\n * Active and upcoming steps (beyond the current) are not clickable.\n /\nfunction resolveClickable(\n status: StepStatus,\n isActive: boolean,\n isDisabled: boolean,\n isCurrent: boolean,\n): boolean {\n if (isDisabled \|\| isActive) {\n return false;\n }\n return status === 'completed' \|\| status === 'error' \|\| isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n if (status === 'completed') {\n return CircleCheckFillIcon;\n }\n if (status === 'error') {\n return CircleAlertIcon;\n }\n if (isCurrent) {\n return CircleFillIcon;\n }\n return CircleNullIcon;\n}\n\nfunction resolveIconColor(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n if (isDisabled) {\n return Color.BorderIconDisabled;\n }\n if (status === 'completed') {\n return Color.BorderIconSuccess;\n }\n if (status === 'error') {\n return Color.BorderIconWarning;\n }\n return isActive ? Color.BorderIconActive : Color.BorderIconSecondary;\n}\n\nfunction resolveTextColor(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n if (isDisabled) {\n return Color.TextDisabled;\n }\n if (isActive) {\n return Color.TextActive;\n }\n if (status === 'uncompleted') {\n return Color.TextSecondary;\n }\n return Color.TextPrimary;\n}\n\n// ─── Styled components ────────────────────────────────────────────────────────\n\nconst StepList = styled.ol<{ $layout: 'vertical' \| 'horizontal' }>`\n display: flex;\n flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};\n gap: ${({ $layout }) => ($layout === 'horizontal' ? Spacing[2] : '0px')};\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nconst StepItem = styled.li<{ $layout: 'vertical' \| 'horizontal' }>`\n display: flex;\n align-items: center;\n\n ${({ $layout }) =>\n $layout === 'horizontal' &&\n css`\n width: fit-content;\n white-space: nowrap;\n `}\n`;\n\nconst StepContent = styled.button<{\n $isActive: boolean;\n $isClickable: boolean;\n $interactive: boolean;\n}>`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n width: 100%;\n padding: ${Spacing[2]};\n border-radius: ${BorderRadius.Md};\n border: none;\n margin: 0;\n font: inherit;\n color: inherit;\n text-align: left;\n outline: none;\n cursor: ${({ $isClickable, $interactive }) => ($interactive && $isClickable ? 'pointer' : 'default')};\n\n ${({ $isActive, $isClickable, $interactive }) => {\n if ($isActive) {\n return css`background-color: ${Color.BackgroundInteractiveActive};`;\n }\n if ($interactive && $isClickable) {\n return css`\n background-color: ${Color.BackgroundInteractiveDefault};\n &:hover {\n background-color: ${Color.BackgroundInteractiveHover};\n }\n `;\n }\n return css`\n background-color: transparent;\n `;\n }}\n\n ${focusOutline}\n\n &:focus-visible {\n position: relative;\n z-index: 1;\n }\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n display: inline-flex;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: ${({ $color }) => $color};\n line-height: 0;\n`;\n\nconst StepLabel = styled.span<{ $isActive: boolean; $color: Color }>`\n ${({ $isActive }) => ($isActive ? paragraphMixins.mdBold : paragraphMixins.md)};\n color: ${({ $color }) => $color};\n`;\n\n// ─── Step ─────────────────────────────────────────────────────────────────────\n\ninterface StepProps {\n step: ProgressIndicatorStep;\n isActive: boolean;\n isCurrent: boolean;\n layout: 'vertical' \| 'horizontal';\n onStepClick?: (stepId: string) => void;\n}\n\nconst Step = ({ step, isActive, isCurrent, layout, onStepClick }: StepProps) => {\n const { id, label, status = 'uncompleted', disabled = false } = step;\n\n const interactive = Boolean(onStepClick);\n const isClickable = resolveClickable(status, isActive, disabled, isCurrent);\n const isInteractionDisabled = disabled \|\| (!isActive && !isCurrent && status === 'uncompleted');\n const iconColor = resolveIconColor(status, isActive, disabled);\n const textColor = resolveTextColor(status, isActive, disabled);\n\n const Icon = resolveIcon(status, isCurrent);\n\n return (\n <StepItem\n $layout={layout}\n aria-current={!interactive && isActive ? 'step' : undefined}\n aria-disabled={!interactive && isInteractionDisabled ? true : undefined}\n >\n <StepContent\n {...(interactive && isClickable\n ? { type: 'button' as const, onClick: () => onStepClick?.(id) }\n : { as: 'div' as const })}\n aria-current={interactive && isActive ? 'step' : undefined}\n aria-disabled={interactive && isInteractionDisabled ? true : undefined}\n $isActive={isActive}\n $isClickable={isClickable}\n $interactive={interactive}\n >\n <IconWrapper $color={iconColor} aria-hidden='true'>\n <Icon />\n </IconWrapper>\n <StepLabel $isActive={isActive} $color={textColor}>\n {label}\n </StepLabel>\n </StepContent>\n </StepItem>\n );\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/\n ProgressIndicator guides users through a sequence of steps.\n \n Interaction rules:\n * - Completed / error steps are clickable — navigate back to review or fix.\n * - Active step is not clickable — the user is already there.\n * - Upcoming (uncompleted) steps are not clickable — sequential progression required.\n \n Navigation does not clear later steps. If a change on an earlier step\n * invalidates later data, the affected steps should be flagged and require\n * re-confirmation before submission — this logic lives in the consuming component.\n \n @example\n * ```tsx\n * <ProgressIndicator\n * steps={[\n * { id: 'identity', label: 'Identity', status: 'completed' },\n * { id: 'address', label: 'Address', status: 'uncompleted' },\n * { id: 'review', label: 'Review', status: 'uncompleted' },\n * ]}\n * activeStepId=\"address\"\n * onStepClick={(id) => navigate(id)}\n * />\n * ```\n */\nexport const ProgressIndicator = ({\n steps,\n activeStepId,\n layout = 'vertical',\n onStepClick,\n 'aria-label': ariaLabel = 'Progress',\n ...rest\n}: ProgressIndicatorProps) => {\n // The \"current\" step is the first uncompleted step — where the user should work next.\n // This is independent of activeStepId, which only controls the visual highlight.\n const currentStepId = steps.find(({ status = 'uncompleted' }) => status !== 'completed')?.id;\n\n return (\n <StepList $layout={layout} role='list' aria-label={ariaLabel} {...rest}>\n {steps.map((step) => (\n <Step\n key={step.id}\n step={step}\n isActive={step.id === activeStepId}\n isCurrent={step.id === currentStepId}\n layout={layout}\n onStepClick={onStepClick}\n />\n ))}\n </StepList>\n );\n};\n\nexport default ProgressIndicator;\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressIndicator/ProgressIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n CircleCheckFillIcon,\n CircleFillIcon,\n CircleNullIcon,\n CircleWarningFillIcon,\n WarningFillIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\n\nexport type StepStatus = 'uncompleted' \| 'completed' \| 'warning' \| 'error';\n\nexport interface ProgressIndicatorStep {\n id: string;\n label: string;\n /** @default 'uncompleted' /\n status?: StepStatus;\n disabled?: boolean;\n}\n\nexport interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {\n steps: ProgressIndicatorStep[];\n /* id of the step that should receive the active visual state /\n activeStepId?: string;\n /* @default 'vertical' /\n layout?: 'vertical' \| 'horizontal';\n /\n Called when a clickable step is activated via click or keyboard.\n \n Clickability rules:\n * - `completed`, `warning`, and `error` steps are clickable (navigate back to review/edit)\n * - The active step is not clickable (user is already there)\n * - Upcoming `uncompleted` steps are not clickable (sequential progression required)\n /\n onStepClick?: (stepId: string) => void;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/\n Completed, warning, and error steps can be navigated back to.\n * The current step (first uncompleted or error) is also clickable so the user can\n * return to it after navigating back to an earlier step.\n * Active and upcoming steps (beyond the current) are not clickable.\n /\nfunction resolveClickable(\n status: StepStatus,\n isActive: boolean,\n isDisabled: boolean,\n isCurrent: boolean,\n): boolean {\n if (isDisabled \|\| isActive) {\n return false;\n }\n return status === 'completed' \|\| status === 'warning' \|\| status === 'error' \|\| isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n if (status === 'completed') {\n return CircleCheckFillIcon;\n }\n if (status === 'warning') {\n return WarningFillIcon;\n }\n if (status === 'error') {\n return CircleWarningFillIcon;\n }\n if (isCurrent) {\n return CircleFillIcon;\n }\n return CircleNullIcon;\n}\n\nfunction resolveIconColor(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n if (isDisabled) {\n return Color.BorderIconDisabled;\n }\n if (status === 'completed') {\n return Color.BorderIconSuccess;\n }\n if (status === 'warning') {\n return Color.BorderIconWarning;\n }\n if (status === 'error') {\n return Color.BorderIconDanger;\n }\n return isActive ? Color.BorderIconActive : Color.BorderIconSecondary;\n}\n\nfunction resolveTextColor(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n if (isDisabled) {\n return Color.TextDisabled;\n }\n if (isActive) {\n return Color.TextActive;\n }\n if (status === 'uncompleted') {\n return Color.TextSecondary;\n }\n return Color.TextPrimary;\n}\n\n// ─── Styled components ────────────────────────────────────────────────────────\n\nconst StepList = styled.ol<{ $layout: 'vertical' \| 'horizontal' }>`\n display: flex;\n flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};\n gap: ${({ $layout }) => ($layout === 'horizontal' ? Spacing[2] : '0px')};\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nconst StepItem = styled.li<{ $layout: 'vertical' \| 'horizontal' }>`\n display: flex;\n align-items: center;\n\n ${({ $layout }) =>\n $layout === 'horizontal' &&\n css`\n width: fit-content;\n white-space: nowrap;\n `}\n`;\n\nconst StepContent = styled.button<{\n $isActive: boolean;\n $isClickable: boolean;\n $interactive: boolean;\n}>`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n width: 100%;\n padding: ${Spacing[2]};\n border-radius: ${BorderRadius.Md};\n border: none;\n margin: 0;\n font: inherit;\n color: inherit;\n text-align: left;\n outline: none;\n cursor: ${({ $isClickable, $interactive }) => ($interactive && $isClickable ? 'pointer' : 'default')};\n\n ${({ $isActive, $isClickable, $interactive }) => {\n if ($isActive) {\n return css`background-color: ${Color.BackgroundInteractiveActive};`;\n }\n if ($interactive && $isClickable) {\n return css`\n background-color: ${Color.BackgroundInteractiveDefault};\n &:hover {\n background-color: ${Color.BackgroundInteractiveHover};\n }\n `;\n }\n return css`\n background-color: transparent;\n `;\n }}\n\n ${focusOutline}\n\n &:focus-visible {\n position: relative;\n z-index: 1;\n }\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n display: inline-flex;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: ${({ $color }) => $color};\n line-height: 0;\n`;\n\nconst StepLabel = styled.span<{ $isActive: boolean; $color: Color }>`\n ${({ $isActive }) => ($isActive ? paragraphMixins.mdBold : paragraphMixins.md)};\n color: ${({ $color }) => $color};\n`;\n\n// ─── Step ─────────────────────────────────────────────────────────────────────\n\ninterface StepProps {\n step: ProgressIndicatorStep;\n isActive: boolean;\n isCurrent: boolean;\n layout: 'vertical' \| 'horizontal';\n onStepClick?: (stepId: string) => void;\n}\n\nconst Step = ({ step, isActive, isCurrent, layout, onStepClick }: StepProps) => {\n const { id, label, status = 'uncompleted', disabled = false } = step;\n\n const interactive = Boolean(onStepClick);\n const isClickable = resolveClickable(status, isActive, disabled, isCurrent);\n const isInteractionDisabled = disabled \|\| (!isActive && !isCurrent && status === 'uncompleted');\n const iconColor = resolveIconColor(status, isActive, disabled);\n const textColor = resolveTextColor(status, isActive, disabled);\n\n const Icon = resolveIcon(status, isCurrent);\n\n return (\n <StepItem\n $layout={layout}\n aria-current={!interactive && isActive ? 'step' : undefined}\n aria-disabled={!interactive && isInteractionDisabled ? true : undefined}\n >\n <StepContent\n {...(interactive && isClickable\n ? { type: 'button' as const, onClick: () => onStepClick?.(id) }\n : { as: 'div' as const })}\n aria-current={interactive && isActive ? 'step' : undefined}\n aria-disabled={interactive && isInteractionDisabled ? true : undefined}\n $isActive={isActive}\n $isClickable={isClickable}\n $interactive={interactive}\n >\n <IconWrapper $color={iconColor} aria-hidden='true'>\n <Icon />\n </IconWrapper>\n <StepLabel $isActive={isActive} $color={textColor}>\n {label}\n </StepLabel>\n </StepContent>\n </StepItem>\n );\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/\n ProgressIndicator guides users through a sequence of steps.\n \n Interaction rules:\n * - Completed / warning / error steps are clickable — navigate back to review or fix.\n * - Warning does not block forward progression; later uncompleted steps remain reachable.\n * - Error blocks forward progression — treat it as the terminal step in the sequence.\n * - Active step is not clickable — the user is already there.\n * - Upcoming (uncompleted) steps are not clickable — sequential progression required.\n \n Navigation does not clear later steps. If a change on an earlier step\n * invalidates later data, the affected steps should be flagged and require\n * re-confirmation before submission — this logic lives in the consuming component.\n \n @example\n * ```tsx\n * <ProgressIndicator\n * steps={[\n * { id: 'identity', label: 'Identity', status: 'completed' },\n * { id: 'address', label: 'Address', status: 'uncompleted' },\n * { id: 'review', label: 'Review', status: 'uncompleted' },\n * ]}\n * activeStepId=\"address\"\n * onStepClick={(id) => navigate(id)}\n * />\n * ```\n */\nexport const ProgressIndicator = ({\n steps,\n activeStepId,\n layout = 'vertical',\n onStepClick,\n 'aria-label': ariaLabel = 'Progress',\n ...rest\n}: ProgressIndicatorProps) => {\n // The \"current\" step is the first uncompleted or error step — where the user should work next.\n // Warning steps are skipped so forward progression is not blocked.\n // This is independent of activeStepId, which only controls the visual highlight.\n const currentStepId = steps.find(\n ({ status = 'uncompleted' }) => status === 'uncompleted' \|\| status === 'error',\n )?.id;\n\n return (\n <StepList $layout={layout} role='list' aria-label={ariaLabel} {...rest}>\n {steps.map((step) => (\n <Step\n key={step.id}\n step={step}\n isActive={step.id === activeStepId}\n isCurrent={step.id === currentStepId}\n layout={layout}\n onStepClick={onStepClick}\n />\n ))}\n </StepList>\n );\n};\n\nexport default ProgressIndicator;\n"],"mappings":"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"}

package/dist/components/Radio/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Radio } from "../../Radio-BaFutxgV.mjs";
+import { t as Radio } from "../../Radio-cLL9oatf.mjs";
 export { Radio, Radio as default };

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

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-BuJaitgG.mjs";
+import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-BqULCH-D.mjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

package/dist/components/RadioGroup/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as RadioGroup } from "../../RadioGroup-ClMzOZl0.mjs";
+import { t as RadioGroup } from "../../RadioGroup-BGo_kXKh.mjs";
 export { RadioGroup, RadioGroup as default };

package/dist/components/RightPanel/index.d.mts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { RightPanel, RightPanelProps } from "../../RightPanel.mjs";
2	+ export { RightPanel, RightPanel as default, type RightPanelProps };