@persona/design-system 0.7.1 → 0.8.0

package/dist/components/Link/index.mjs

@@ -1,79 +1,2 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { n as RouterLink } from "../../router-7FYDW80v.mjs";
-import { semanticColor } from "../../lib/semanticColor.mjs";
-import { paragraphMixins } from "../../mixins/text.mjs";
-import "../../variables/transitions.mjs";
-import { focusOutline } from "../../mixins/focus.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { LinkExternalIcon } from "@persona/icons";
-//#region components/Link/Link.tsx
-const IconContainer = styled.span`
-  display: inline-block;
-  vertical-align: middle;
-  /* Uses padding here since we can't define flex on the element for multiline support */
-  padding-left: 2px;
-  /* Needed to reset the height of the container for SVG */
-  line-height: 0;
-  position: relative;
-  /* Optical alignment adjustments */
-  bottom: 1px;
-`;
-const baseLinkStyles = css`
-  ${paragraphMixins.md};
-  color: ${({ theme }) => semanticColor(theme, "FgAccent", Color.CorePurple600)};
-  width: fit-content;
-  position: relative;
-  overflow: hidden;
-  text-decoration: underline;
-
-  transition:
-    color ${"100ms"} ease-out,
-    text-underline-offset ${"100ms"} ease-out;
-  text-underline-offset: 2px;
-
-  &:hover {
-    color: ${({ theme }) => semanticColor(theme, "FgAccentHover", Color.CorePurple800)};
-    text-underline-offset: ${Spacing[1]};
-  }
-
-  border-radius: ${({ theme }) => theme.button.borderRadius};
-  ${focusOutline}
-
-  &:active {
-    color: ${({ theme }) => semanticColor(theme, "FgAccentActive", Color.CorePurple900)};
-  }
-`;
-const StyledAnchor = styled.a`
-  ${baseLinkStyles}
-`;
-const StyledRouterLink = styled(RouterLink)`
-  ${baseLinkStyles}
-`;
-const Link = ({ children, url, ...props }) => {
-	const isAbsoluteUrl = /^https?:\/\//.test(url);
-	const hasBlankTarget = props.target === "_blank";
-	if (isAbsoluteUrl || hasBlankTarget) {
-		const { "aria-label": ariaLabel, ...anchorProps } = props;
-		return /* @__PURE__ */ jsxs(StyledAnchor, {
-			href: url,
-			target: "_blank",
-			rel: "noopener noreferrer",
-			"aria-label": ariaLabel,
-			title: ariaLabel ? void 0 : "Opens in new window",
-			...anchorProps,
-			children: [children, /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(LinkExternalIcon, { size: 12 }) })]
-		});
-	}
-	const { "aria-label": ariaLabel, ...routerProps } = props;
-	return /* @__PURE__ */ jsx(StyledRouterLink, {
-		to: url,
-		"aria-label": ariaLabel,
-		...routerProps,
-		children
-	});
-};
-//#endregion
+import { t as Link } from "../../Link-I9Bklen-.mjs";
 export { Link, Link as default };
-
-//# sourceMappingURL=index.mjs.map

package/dist/components/ListBox/index.d.mts

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-D-8iwYVj.mjs";
-import { n as LogicRowProps } from "../../LogicRow-CgPds2tq.mjs";
-import { t as ListBox } from "../../index-BZmGEbsA.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-BcoXOt73.mjs";
+import { n as LogicRowProps } from "../../LogicRow-DXywXdYt.mjs";
+import { t as ListBox } from "../../index-wKK9f9La.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, LogicRowProps, useListBoxContext };

package/dist/components/ListBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as useListBoxContext, t as ListBox } from "../../ListBox-CFBhILRy.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-sqeLBiKS.mjs";
 export { ListBox, ListBox as default, useListBoxContext };

package/dist/components/LoadingShimmer/index.mjs

@@ -1,2 +1,2 @@
-import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-Dizk2sZu.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-dRSkdlqD.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

package/dist/components/MaskedInput/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input } from "../../Input-Bc2yWH3j.mjs";
+import { n as Input } from "../../Input-Cl4o41k4.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";

package/dist/components/Menu/index.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-CSwzFqdv.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-BekLwm8w.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/components/Menu/index.mjs

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-Cd6oxjAe.mjs";
+import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-CwlI7BMN.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

package/dist/components/Modal/index.d.mts

@@ -1,2 +1,2 @@
-import _default, { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger } from "../../Modal.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-ymxlGYKt.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/components/Modal/index.mjs

@@ -1,258 +1,2 @@
-import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
-import { t as Card_default } from "../../Card-Dz6jqJuJ.mjs";
-import { n as Heading$1 } from "../../Text-BdluS7Fy.mjs";
-import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "../../lib/useEmbeddedSurface.mjs";
-import useModalInsetRight from "../../lib/useModalInsetRight.mjs";
-import { n as Stack, t as HStack } from "../../Stack-ChsImaEY.mjs";
-import { n as Button$1 } from "../../IconButton-CqTPMhjV.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-BepWbJHz.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
-import { forwardRef, useContext, useEffect, useState } from "react";
-import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { XIcon } from "@persona/icons";
-//#region components/Modal/Modal.tsx
-const StyledModalOverlay = styled(ModalOverlay)`
-  @keyframes overlayShow {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  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;
-  justify-content: center;
-`;
-const StyledModal = styled(Modal)`
-  z-index: 10001;
-  outline: none;
-  width: fit-content;
-  max-width: 100%;
-  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
-`;
-/**
-* 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]};
-  border-radius: ${Spacing[1]};
-  width: fit-content;
-  min-width: unset;
-`;
-const ModalFooter = styled(HStack).attrs({
-	justify: "flex-end",
-	align: "center",
-	spacing: Spacing[2]
-})`
-  padding: ${Spacing[3]} ${Spacing[4]};
-  border-top: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
-`;
-const ModalHeaderTitle = styled.div`
-  flex: 1;
-`;
-const ModalTrigger = DialogTrigger;
-const ModalContent = StyledModal;
-const ModalClose = (props) => {
-	return /* @__PURE__ */ jsx(Button, {
-		slot: "close",
-		style: {
-			all: "unset",
-			display: "contents"
-		},
-		children: /* @__PURE__ */ jsx(ModalCloseButton, {
-			variant: "text",
-			width: "icon",
-			size: "md",
-			...props,
-			children: /* @__PURE__ */ jsx(XIcon, {})
-		})
-	});
-};
-const ModalTitle = ({ children, ...props }) => {
-	return /* @__PURE__ */ jsx(Heading$1, {
-		size: "sm",
-		color: "primary",
-		as: Heading,
-		slot: "title",
-		...props,
-		children
-	});
-};
-const ModalHeader = styled(HStack)`
-  border-bottom: ${({ $hasTabs, theme }) => $hasTabs ? "none" : `1px solid ${semanticColor(theme, "BorderSubtle", Color.BorderDivider)}`};
-  padding: ${({ $hasTabs }) => $hasTabs ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}` : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};
-`;
-const ModalTabBar = styled(TabBar)`
-  padding-left: ${Spacing[4]};
-`;
-const StyledDialog = styled(Dialog)`
-  outline: none;
-`;
-const StyledCard = styled(Card_default)`
-  position: relative;
-  width: ${({ $size }) => {
-	switch ($size) {
-		case "auto": return "auto";
-		case "full": return "calc(100vw - 160px)";
-		default: return "90vw";
-	}
-}};
-  max-width: ${({ theme, $size }) => {
-	switch ($size) {
-		case "auto": return "auto";
-		case "full": return "calc(100vw - 160px)";
-		default: return theme.modal.width[$size];
-	}
-}};
-  /* TODO: Use breakpoints to make this responsive */
-  max-height: ${({ $size }) => $size === "full" ? "calc(100vh - 160px)" : "85vh"};
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  ${({ $size }) => $size === "full" && `
-    height: calc(100vh - 160px);
-  `}
-  margin-bottom: 0;
-`;
-const StyledModalCardBody = styled(Card_default.Body)`
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-  ${({ $noPadding }) => $noPadding ? "padding: 0;" : `
-    padding-left: ${Spacing[4]};
-    padding-right: ${Spacing[4]};
-  `}
-  ${({ $hidden }) => $hidden && "display: none;"}
-`;
-/**
-* Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.
-*/
-const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, portalContainer, ...props }, ref) {
-	const [selectedTabIdx, setSelectedTabIdx] = useState(0);
-	useEffect(() => {
-		setSelectedTabIdx(0);
-	}, [tabs?.length ?? 0]);
-	const titleAndClose = /* @__PURE__ */ jsxs(ModalHeader, {
-		justify: "flex-start",
-		align: "center",
-		spacing: Spacing[2],
-		$hasTabs: Boolean(tabs),
-		children: [/* @__PURE__ */ jsx(ModalHeaderTitle, { children: title ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null }), showCloseButton && /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close" })]
-	});
-	const modalHeader = tabs ? /* @__PURE__ */ jsxs(Stack, { children: [titleAndClose, /* @__PURE__ */ jsx(ModalTabBar, { children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(Tab, {
-		selected: selectedTabIdx === idx,
-		id: `pds-modal_tab-${idx}`,
-		onClick: () => setSelectedTabIdx(idx),
-		"aria-controls": `pds-modal_tab-panel-${idx}`,
-		children: tab.name
-	}, tab.name)) })] }) : titleAndClose;
-	return /* @__PURE__ */ jsx(StyledDialog, {
-		...props,
-		ref,
-		children: /* @__PURE__ */ jsxs(StyledCard, {
-			elevated: true,
-			$size: size,
-			children: [
-				(showCloseButton || title) && modalHeader,
-				tabs ? tabs.map((tab, idx) => /* @__PURE__ */ jsx(StyledModalCardBody, {
-					$noPadding: noBodyPadding,
-					$hidden: selectedTabIdx !== idx,
-					role: tabs ? "tabpanel" : void 0,
-					id: `pds-modal_tab-panel-${tab.name}`,
-					"aria-labelledby": `pds-modal_tab-${tab.name}`,
-					children: typeof tab.contents === "function" ? tab.contents({ portalContainer }) : tab.contents
-				}, tab.name)) : /* @__PURE__ */ jsx(StyledModalCardBody, {
-					$noPadding: noBodyPadding,
-					role: tabs ? "tabpanel" : void 0,
-					id: `pds-modal_tab-panel-${selectedTabIdx}`,
-					"aria-labelledby": `pds-modal_tab-${selectedTabIdx}`,
-					children
-				}),
-				footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
-			]
-		})
-	});
-});
-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, {
-		size,
-		title,
-		footer,
-		tabs,
-		noBodyPadding,
-		...contentProps,
-		portalContainer,
-		children: typeof children === "function" ? children({ portalContainer }) : children
-	});
-	return /* @__PURE__ */ jsxs(DialogTrigger, {
-		isOpen: open,
-		defaultOpen,
-		onOpenChange,
-		children: [trigger ? /* @__PURE__ */ jsx(Pressable, { children: trigger }) : null, /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
-			surfaceId,
-			$insetRight: modalInsetRight,
-			$transitionMs: transitionMs,
-			isDismissable,
-			isKeyboardDismissDisabled,
-			shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
-			children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
-				ref: setPortalContainer,
-				surfaceId,
-				children: content
-			})
-		})]
-	});
-};
-var Modal_default = Object.assign(Modal$1, { Title: ModalTitle });
-//#endregion
+import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-CMiFcXC9.mjs";
 export { ModalClose, ModalContent, ModalTrigger, Modal_default as default };
-
-//# sourceMappingURL=index.mjs.map

package/dist/components/PageHeader/index.mjs

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

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

@@ -1,4 +1,4 @@
-import { t as Pagination } from "../../Pagination-ne9hnVoe.mjs";
-import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-BMz2Q4P6.mjs";
-import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-D8bzZ-7B.mjs";
+import { t as Pagination } from "../../Pagination-Dg-4O7F7.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-Bxulu6vU.mjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-BOxzLX-O.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.mjs

@@ -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-B1u203DE.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-Co9CfyFQ.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

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

package/dist/components/Popover/index.mjs

@@ -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-opVa9Xhc.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-ZAj03lws.mjs";
 export { PopoverAnchor, PopoverCard, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Popover_default as default };

package/dist/components/ProgressBar/index.mjs

@@ -13,7 +13,6 @@ const statusFill = (theme, status) => {
 	if (status === "success") return semanticColor(theme, "StatusSuccess3", Color.BorderIconSuccess);
 	return semanticColor(theme, "StatusInfo3", Color.BorderInputActive);
 };
-const statusIconColor = (theme, status) => status === "exception" ? semanticColor(theme, "FgDanger1", Color.BorderInputDanger) : semanticColor(theme, "FgSuccess", Color.BorderIconSuccess);
 const TRACK_HEIGHT = {
 	sm: "4px",
 	md: "8px"
@@ -91,7 +90,7 @@ const IconWrapper = styled.span`
   display: flex;
   flex-shrink: 0;
   line-height: 0;
-  color: ${({ theme, $status }) => statusIconColor(theme, $status)};
+  color: ${({ theme, $status }) => statusFill(theme, $status)};
 `;
 /**
 * ProgressBar shows the completion status of an operation as a filled bar.

package/dist/components/ProgressBar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\nimport { type MaybeSemanticTheme, semanticColor } from 'design-system/lib/semanticColor';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst statusFill = (theme: MaybeSemanticTheme, status: ProgressBarStatus) => {\n  if (status === 'exception') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderInputDanger);\n  }\n  if (status === 'success') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  return semanticColor(theme, 'StatusInfo3', Color.BorderInputActive);\n};\n\nconst statusIconColor = (theme: MaybeSemanticTheme, status: 'exception' | 'success') =>\n  status === 'exception'\n    ? semanticColor(theme, 'FgDanger1', Color.BorderInputDanger)\n    : semanticColor(theme, 'FgSuccess', Color.BorderIconSuccess);\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ theme, $railColor }) =>\n    $railColor ?? semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme }) => statusFill(theme, 'success')};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  background-color: ${({ theme }) => semanticColor(theme, 'FeedbackNeutral5', Color.BorderIconPrimary)};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $status: 'exception' | 'success' }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ theme, $status }) => statusIconColor(theme, $status)};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $status={effectiveStatus}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\nimport { type MaybeSemanticTheme, semanticColor } from 'design-system/lib/semanticColor';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst statusFill = (theme: MaybeSemanticTheme, status: ProgressBarStatus) => {\n  if (status === 'exception') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderInputDanger);\n  }\n  if (status === 'success') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  return semanticColor(theme, 'StatusInfo3', Color.BorderInputActive);\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ theme, $railColor }) =>\n    $railColor ?? semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme }) => statusFill(theme, 'success')};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  background-color: ${({ theme }) => semanticColor(theme, 'FeedbackNeutral5', Color.BorderIconPrimary)};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $status: 'exception' | 'success' }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ theme, $status }) => statusFill(theme, $status)};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $status={effectiveStatus}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}

package/dist/components/ProgressIndicator/index.d.mts

@@ -1,2 +1,2 @@
-import { ProgressIndicator, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus } from "../../ProgressIndicator.mjs";
-export { ProgressIndicator, ProgressIndicator as default, type ProgressIndicatorProps, type ProgressIndicatorStep, type StepStatus };
+import { i as StepStatus, n as ProgressIndicatorProps, r as ProgressIndicatorStep, t as ProgressIndicator } from "../../ProgressIndicator-D85HQGSx.mjs";
+export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };