@persona/design-system 0.1.5-pre.4 → 0.1.6

package/dist/components/Pagination/index.cjs

@@ -2,210 +2,9 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
-const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
-require("../Stack/index.cjs");
-const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
-require("../Button/index.cjs");
-const require_Input = require("../../Input-DHOsR4cl.cjs");
-require("../Input/index.cjs");
-const require_Select = require("../../Select-CVB-Q1g1.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-let lodash_fp_js = require("lodash/fp.js");
-//#region components/Pagination/constants.ts
-const DEFAULT_PAGE_SIZE_OPTIONS = [
-	10,
-	25,
-	50,
-	100,
-	300
-];
-//#endregion
-//#region components/Pagination/PageSelector.tsx
-const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
-const PageSelectorStack = (0, styled_components.default)(require_Stack.HStack).attrs({ justify: "flex-end" })`
-  padding: ${_persona_design_tokens.Spacing[2]};
-`;
-const PageInput = (0, styled_components.default)(require_Stack.HStack).attrs({ align: "center" })`
-  white-space: nowrap;
-`;
-function PageSelector({ paginationParams, handlePageLinkClick, isLoading, onPageChange }) {
-	const { "current-page": currentPage, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams ?? {};
-	const [selectedPage, setSelectedPage] = (0, react.useState)(currentPage);
-	const handlePageLinkClickDebounced = (0, react.useMemo)(() => (0, lodash_fp_js.debounce)(500, handlePageLinkClick), [handlePageLinkClick]);
-	(0, react.useEffect)(() => {
-		if (currentPage != null) setSelectedPage(currentPage);
-	}, [currentPage]);
-	if (!paginationParams) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageSelectorStack, {
-		"data-test": "pagination__page-selector",
-		id: "pagination__page-selector",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageInput, { children: [
-				totalPages < 100 && !lowerBound ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
-					"aria-label": "Go to page number",
-					size: "sm",
-					inputSize: 2,
-					onChange: (e) => {
-						const value = e.target.valueAsNumber;
-						if (Number.isNaN(value)) setSelectedPage(void 0);
-						else {
-							setSelectedPage(value);
-							const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);
-							handlePageLinkClickDebounced(boundedValue);
-							onPageChange?.(boundedValue);
-						}
-					},
-					onBlur: (e) => {
-						if (Number.isNaN(e.target.valueAsNumber)) setSelectedPage(currentPage);
-					},
-					min: 1,
-					max: totalPages,
-					type: "number",
-					disabled: isLoading,
-					value: selectedPage ?? ""
-				}) : currentPage + " ",
-				"of ",
-				lowerBound ? "many" : totalPages,
-				" pages"
-			] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-				id: "pagination__page-selector--left",
-				disabled: currentPage === 1 || isLoading,
-				onClick: () => {
-					if (currentPage !== 1) {
-						const prevPageNum = currentPage - 1;
-						setSelectedPage(prevPageNum);
-						handlePageLinkClick(prevPageNum);
-						onPageChange?.(prevPageNum);
-					}
-				},
-				"data-test": "pagination__page-selector-paddle-left",
-				variant: "inverse",
-				size: "sm",
-				width: "auto",
-				"aria-label": "Previous page",
-				children: "Prev"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-				id: "pagination__page-selector--right",
-				disabled: currentPage === totalPages && !lowerBound || isLoading,
-				onClick: () => {
-					if (currentPage !== totalPages || lowerBound) {
-						const nextPageNum = currentPage + 1;
-						setSelectedPage(nextPageNum);
-						handlePageLinkClick(nextPageNum);
-						onPageChange?.(nextPageNum);
-					}
-				},
-				"data-test": "pagination__page-selector-paddle-right",
-				variant: "inverse",
-				size: "sm",
-				width: "auto",
-				"aria-label": "Next page",
-				children: "Next"
-			})
-		]
-	});
-}
-//#endregion
-//#region components/Pagination/PageSizeSelector.tsx
-const Selector = (0, styled_components.default)("div")`
-  padding: ${_persona_design_tokens.Spacing[2]};
-  display: flex;
-  justify-content: flex-end;
-`;
-const Label = styled_components.default.label`
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  gap: ${_persona_design_tokens.Spacing[2]};
-  padding: ${_persona_design_tokens.Spacing[2]};
-`;
-(0, styled_components.default)("div")`
-  padding: 0 ${_persona_design_tokens.Spacing[1]};
-  color: ${_persona_design_tokens.Color.PrimaryPurple};
-  cursor: pointer;
-
-  ${({ currentPageSize, pageSizeOption }) => {
-	if (currentPageSize === pageSizeOption) return `
-        ${_persona_design_tokens.Typography.TextMediumBold};
-        text-decoration: underline;
-      `;
-}};
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) => {
-	const pageSizes = [...pageSizeOptions, ...pageSizeOptions.includes(pageSize) ? [] : [pageSize]].sort((a, b) => a - b);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Selector, {
-		"data-test": "pagination__page-size-selector",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Label, { children: ["Items per page:", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Select, {
-			value: pageSize.toString(),
-			onValueChange: (val) => handlePageSizeClick(Number(val)),
-			size: "sm",
-			children: pageSizes.map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Option, {
-				value: size.toString(),
-				children: size
-			}, size))
-		})] })
-	});
-};
-//#endregion
-//#region components/Pagination/Pagination.tsx
-const MAX_PAGES = 100;
-const Container = (0, styled_components.default)("nav")`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-const PaginationInfo = (0, styled_components.default)("div")`
-  display: flex;
-  align-items: center;
-
-  color: ${_persona_design_tokens.Color.TextPrimary};
-`;
-const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
-	if (!paginationParams || !pageSize) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
-	const { "current-page": currentPage, "total-count": totalCount, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams;
-	const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? "many" : totalCount;
-	const lastItemIndex = lowerBound ? currentPage * pageSize : Math.min(currentPage * pageSize, totalCount);
-	const firstItemIndex = pageSize * (currentPage - 1) + 1;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-		role: "navigation",
-		"aria-label": "pagination",
-		children: [showPageSizeSelector && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSizeSelector, {
-			pageSize,
-			pageSizeOptions,
-			handlePageSizeClick
-		}), totalCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-			"Showing ",
-			firstItemIndex,
-			"-",
-			lastItemIndex,
-			" of ",
-			totalCountDisplay,
-			" items"
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationInfo, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSelector, {
-			paginationParams,
-			handlePageLinkClick,
-			isLoading,
-			onPageChange
-		}) })] })]
-	});
-};
-//#endregion
-//#region components/Pagination/index.ts
-var Pagination_default = Pagination;
-//#endregion
-exports.PAGE_LIMIT_BEFORE_SCROLL_MODE = PAGE_LIMIT_BEFORE_SCROLL_MODE;
-exports.PageSelector = PageSelector;
-exports.default = Pagination_default;
-
-//# sourceMappingURL=index.cjs.map
+const require_Pagination = require("../../Pagination-DEZFb552.cjs");
+exports.DEFAULT_PAGE_SIZE_OPTIONS = require_Pagination.DEFAULT_PAGE_SIZE_OPTIONS;
+exports.MIN_PAGE_SIZE = require_Pagination.MIN_PAGE_SIZE;
+exports.PAGE_LIMIT_BEFORE_SCROLL_MODE = require_Pagination.PAGE_LIMIT_BEFORE_SCROLL_MODE;
+exports.PageSelector = require_Pagination.PageSelector;
+exports.default = require_Pagination.Pagination_default;

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

@@ -1,3 +1,4 @@
-import PageSelector, { PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector.cjs";
-import Pagination from "../../Pagination.cjs";
-export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };
+import { t as Pagination } from "../../Pagination-CeoHVtYD.cjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-COqR1tdA.cjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-D5CkrHza.cjs";
+export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

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

@@ -1,3 +1,4 @@
-import PageSelector, { PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector.mjs";
-import Pagination from "../../Pagination.mjs";
-export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };
+import { t as Pagination } from "../../Pagination-BUjpYIwq.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-mn6q4SKY.mjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-CnkpDWTv.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,203 +1,2 @@
-import { t as HStack } from "../../Stack-hwgS2FU1.mjs";
-import "../Stack/index.mjs";
-import { n as Button } from "../../IconButton-C28qxOdi.mjs";
-import "../Button/index.mjs";
-import { n as Input } from "../../Input-eoFk39bE.mjs";
-import "../Input/index.mjs";
-import { n as Select, t as Option } from "../../Select-Cl3AOq0-.mjs";
-import { Color, Spacing, Typography } from "@persona/design-tokens";
-import styled from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import { debounce } from "lodash/fp.js";
-//#region components/Pagination/constants.ts
-const DEFAULT_PAGE_SIZE_OPTIONS = [
-	10,
-	25,
-	50,
-	100,
-	300
-];
-//#endregion
-//#region components/Pagination/PageSelector.tsx
-const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
-const PageSelectorStack = styled(HStack).attrs({ justify: "flex-end" })`
-  padding: ${Spacing[2]};
-`;
-const PageInput = styled(HStack).attrs({ align: "center" })`
-  white-space: nowrap;
-`;
-function PageSelector({ paginationParams, handlePageLinkClick, isLoading, onPageChange }) {
-	const { "current-page": currentPage, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams ?? {};
-	const [selectedPage, setSelectedPage] = useState(currentPage);
-	const handlePageLinkClickDebounced = useMemo(() => debounce(500, handlePageLinkClick), [handlePageLinkClick]);
-	useEffect(() => {
-		if (currentPage != null) setSelectedPage(currentPage);
-	}, [currentPage]);
-	if (!paginationParams) return /* @__PURE__ */ jsx("div", {});
-	return /* @__PURE__ */ jsxs(PageSelectorStack, {
-		"data-test": "pagination__page-selector",
-		id: "pagination__page-selector",
-		children: [
-			/* @__PURE__ */ jsxs(PageInput, { children: [
-				totalPages < 100 && !lowerBound ? /* @__PURE__ */ jsx(Input, {
-					"aria-label": "Go to page number",
-					size: "sm",
-					inputSize: 2,
-					onChange: (e) => {
-						const value = e.target.valueAsNumber;
-						if (Number.isNaN(value)) setSelectedPage(void 0);
-						else {
-							setSelectedPage(value);
-							const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);
-							handlePageLinkClickDebounced(boundedValue);
-							onPageChange?.(boundedValue);
-						}
-					},
-					onBlur: (e) => {
-						if (Number.isNaN(e.target.valueAsNumber)) setSelectedPage(currentPage);
-					},
-					min: 1,
-					max: totalPages,
-					type: "number",
-					disabled: isLoading,
-					value: selectedPage ?? ""
-				}) : currentPage + " ",
-				"of ",
-				lowerBound ? "many" : totalPages,
-				" pages"
-			] }),
-			/* @__PURE__ */ jsx(Button, {
-				id: "pagination__page-selector--left",
-				disabled: currentPage === 1 || isLoading,
-				onClick: () => {
-					if (currentPage !== 1) {
-						const prevPageNum = currentPage - 1;
-						setSelectedPage(prevPageNum);
-						handlePageLinkClick(prevPageNum);
-						onPageChange?.(prevPageNum);
-					}
-				},
-				"data-test": "pagination__page-selector-paddle-left",
-				variant: "inverse",
-				size: "sm",
-				width: "auto",
-				"aria-label": "Previous page",
-				children: "Prev"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				id: "pagination__page-selector--right",
-				disabled: currentPage === totalPages && !lowerBound || isLoading,
-				onClick: () => {
-					if (currentPage !== totalPages || lowerBound) {
-						const nextPageNum = currentPage + 1;
-						setSelectedPage(nextPageNum);
-						handlePageLinkClick(nextPageNum);
-						onPageChange?.(nextPageNum);
-					}
-				},
-				"data-test": "pagination__page-selector-paddle-right",
-				variant: "inverse",
-				size: "sm",
-				width: "auto",
-				"aria-label": "Next page",
-				children: "Next"
-			})
-		]
-	});
-}
-//#endregion
-//#region components/Pagination/PageSizeSelector.tsx
-const Selector = styled("div")`
-  padding: ${Spacing[2]};
-  display: flex;
-  justify-content: flex-end;
-`;
-const Label = styled.label`
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  gap: ${Spacing[2]};
-  padding: ${Spacing[2]};
-`;
-styled("div")`
-  padding: 0 ${Spacing[1]};
-  color: ${Color.PrimaryPurple};
-  cursor: pointer;
-
-  ${({ currentPageSize, pageSizeOption }) => {
-	if (currentPageSize === pageSizeOption) return `
-        ${Typography.TextMediumBold};
-        text-decoration: underline;
-      `;
-}};
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) => {
-	const pageSizes = [...pageSizeOptions, ...pageSizeOptions.includes(pageSize) ? [] : [pageSize]].sort((a, b) => a - b);
-	return /* @__PURE__ */ jsx(Selector, {
-		"data-test": "pagination__page-size-selector",
-		children: /* @__PURE__ */ jsxs(Label, { children: ["Items per page:", /* @__PURE__ */ jsx(Select, {
-			value: pageSize.toString(),
-			onValueChange: (val) => handlePageSizeClick(Number(val)),
-			size: "sm",
-			children: pageSizes.map((size) => /* @__PURE__ */ jsx(Option, {
-				value: size.toString(),
-				children: size
-			}, size))
-		})] })
-	});
-};
-//#endregion
-//#region components/Pagination/Pagination.tsx
-const MAX_PAGES = 100;
-const Container = styled("nav")`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-const PaginationInfo = styled("div")`
-  display: flex;
-  align-items: center;
-
-  color: ${Color.TextPrimary};
-`;
-const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
-	if (!paginationParams || !pageSize) return /* @__PURE__ */ jsx("div", {});
-	const { "current-page": currentPage, "total-count": totalCount, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams;
-	const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? "many" : totalCount;
-	const lastItemIndex = lowerBound ? currentPage * pageSize : Math.min(currentPage * pageSize, totalCount);
-	const firstItemIndex = pageSize * (currentPage - 1) + 1;
-	return /* @__PURE__ */ jsxs(Container, {
-		role: "navigation",
-		"aria-label": "pagination",
-		children: [showPageSizeSelector && /* @__PURE__ */ jsx(PageSizeSelector, {
-			pageSize,
-			pageSizeOptions,
-			handlePageSizeClick
-		}), totalCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [
-			"Showing ",
-			firstItemIndex,
-			"-",
-			lastItemIndex,
-			" of ",
-			totalCountDisplay,
-			" items"
-		] }), /* @__PURE__ */ jsx(PaginationInfo, { children: /* @__PURE__ */ jsx(PageSelector, {
-			paginationParams,
-			handlePageLinkClick,
-			isLoading,
-			onPageChange
-		}) })] })]
-	});
-};
-//#endregion
-//#region components/Pagination/index.ts
-var Pagination_default = Pagination;
-//#endregion
-export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };
-
-//# sourceMappingURL=index.mjs.map
+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-F8ofIWnG.mjs";
+export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };

package/dist/components/Pii/index.cjs

@@ -1,20 +1,2 @@
-require("../../chunk-CoPdw6nB.cjs");
-const require_Sticker = require("../../Sticker-D_dutvp_.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Pii/Pii.tsx
-const Pii = ({ children, isRedacted, hideOnRedacted }) => {
-	if (isRedacted) return hideOnRedacted ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-		"data-test": "pii__redacted",
-		children: "Redacted"
-	});
-	if (children == null || children === "") return null;
-	if (["string", "number"].includes(typeof children)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-};
-//#endregion
-//#region components/Pii/index.ts
-var Pii_default = Pii;
-//#endregion
-module.exports = Pii_default;
-
-//# sourceMappingURL=index.cjs.map
+const require_Pii = require("../../Pii--c8IxKI0.cjs");
+module.exports = require_Pii.Pii_default;

package/dist/components/Pii/index.mjs

@@ -1,19 +1,2 @@
-import { n as Sticker } from "../../Sticker-D6bwBTGr.mjs";
-import { Fragment, jsx } from "react/jsx-runtime";
-//#region components/Pii/Pii.tsx
-const Pii = ({ children, isRedacted, hideOnRedacted }) => {
-	if (isRedacted) return hideOnRedacted ? null : /* @__PURE__ */ jsx(Sticker, {
-		"data-test": "pii__redacted",
-		children: "Redacted"
-	});
-	if (children == null || children === "") return null;
-	if (["string", "number"].includes(typeof children)) return /* @__PURE__ */ jsx("span", { children });
-	return /* @__PURE__ */ jsx(Fragment, { children });
-};
-//#endregion
-//#region components/Pii/index.ts
-var Pii_default = Pii;
-//#endregion
+import { t as Pii_default } from "../../Pii-B_gBVAak.mjs";
 export { Pii_default as default };
-
-//# sourceMappingURL=index.mjs.map

package/dist/components/Popover/index.cjs

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_Popover = require("../../Popover-C2dBSwiU.cjs");
+const require_Popover = require("../../Popover-jHZICnQt.cjs");
 exports.PopoverAnchor = require_Popover.PopoverAnchor;
 exports.PopoverCard = require_Popover.PopoverCard;
 exports.PopoverClose = require_Popover.PopoverClose;

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

package/dist/components/ProgressBar/index.cjs

@@ -2,9 +2,9 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
-const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
+const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Color","paragraphMixins","Spacing","Tooltip","CircleAlertIcon","CircleCheckFillIcon"],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../components/ProgressBar/index.ts"],"sourcesContent":["import { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleAlertIcon from '@persona/icons/CircleAlertIcon';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst STATUS_FILL_COLORS: Record<ProgressBarStatus, Color> = {\n  default: Color.BorderInputActive,\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst STATUS_ICON_COLORS: Record<'exception' | 'success', Color> = {\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\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: ${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: ${({ $railColor }) => $railColor ?? 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: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$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: ${STATUS_FILL_COLORS.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  /* Same neutral as Spinner (Color.BorderIconPrimary) */\n  background-color: ${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: ${Color.TextPrimary};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ $color }) => $color};\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 $color={STATUS_ICON_COLORS[effectiveStatus]}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleAlertIcon 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.cjs","names":["Color","paragraphMixins","Spacing","Tooltip","CircleAlertIcon","CircleCheckFillIcon"],"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 CircleAlertIcon from '@persona/icons/CircleAlertIcon';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst STATUS_FILL_COLORS: Record<ProgressBarStatus, Color> = {\n  default: Color.BorderInputActive,\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst STATUS_ICON_COLORS: Record<'exception' | 'success', Color> = {\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\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: ${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: ${({ $railColor }) => $railColor ?? 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: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$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: ${STATUS_FILL_COLORS.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  /* Same neutral as Spinner (Color.BorderIconPrimary) */\n  background-color: ${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: ${Color.TextPrimary};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ $color }) => $color};\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 $color={STATUS_ICON_COLORS[effectiveStatus]}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleAlertIcon 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/ProgressBar/index.mjs

@@ -1,5 +1,5 @@
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { a as Tooltip } from "../../Tooltip-T7RQpy_a.mjs";
+import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { keyframes } from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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 { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleAlertIcon from '@persona/icons/CircleAlertIcon';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst STATUS_FILL_COLORS: Record<ProgressBarStatus, Color> = {\n  default: Color.BorderInputActive,\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst STATUS_ICON_COLORS: Record<'exception' | 'success', Color> = {\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\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: ${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: ${({ $railColor }) => $railColor ?? 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: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$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: ${STATUS_FILL_COLORS.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  /* Same neutral as Spinner (Color.BorderIconPrimary) */\n  background-color: ${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: ${Color.TextPrimary};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ $color }) => $color};\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 $color={STATUS_ICON_COLORS[effectiveStatus]}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleAlertIcon 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 CircleAlertIcon from '@persona/icons/CircleAlertIcon';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst STATUS_FILL_COLORS: Record<ProgressBarStatus, Color> = {\n  default: Color.BorderInputActive,\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst STATUS_ICON_COLORS: Record<'exception' | 'success', Color> = {\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\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: ${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: ${({ $railColor }) => $railColor ?? 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: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$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: ${STATUS_FILL_COLORS.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  /* Same neutral as Spinner (Color.BorderIconPrimary) */\n  background-color: ${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: ${Color.TextPrimary};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ $color }) => $color};\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 $color={STATUS_ICON_COLORS[effectiveStatus]}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleAlertIcon 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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"}