@persona/design-system 0.7.1 → 0.8.0

package/dist/components/VersionHistory/index.mjs

@@ -0,0 +1,389 @@
+import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
+import { i as Paragraph } from "../../Text-BdluS7Fy.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
+import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bkn0TUDe.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-rm9Nnxn7.mjs";
+import { t as Spinner } from "../../Spinner-BlAg8_OX.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-CfZr5Sk4.mjs";
+import { i as Modal_default } from "../../Modal-CMiFcXC9.mjs";
+import { n as StatusIndicator } from "../../StatusIndicator-DT2zNbkp.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MoreIcon, XIcon } from "@persona/icons";
+//#region components/VersionHistory/VersionHistoryItem.tsx
+const DEFAULT_COMPARE_LABEL = "Compare to latest version";
+const DEFAULT_RESTORE_LABEL = "Restore";
+const DEFAULT_DISCARD_LABEL = "Discard";
+const DEFAULT_EDIT_DESCRIPTION_LABEL = "Edit description";
+const hasVersionHistoryItemActions = (item) => item.onCompare != null || item.onRestore != null || item.onDiscard != null || item.onEditDescription != null;
+/** Timeline stroke; 3px is the rail weight from the source panel. */
+const RAIL_THICKNESS = "3px";
+const ACTION_SLOT_WIDTH = `calc(${Spacing[8]} + ${Spacing[4]})`;
+const Row = styled.div`
+  display: grid;
+  grid-template-columns: ${({ $withActionSlot }) => $withActionSlot ? `${Spacing[7]} minmax(0, 1fr) ${ACTION_SLOT_WIDTH}` : `${Spacing[7]} minmax(0, 1fr)`};
+  cursor: pointer;
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", Color.BackgroundPrimary)};
+  ${focusOutline}
+
+  &:hover:not([aria-current='true']) {
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceHover", Color.BackgroundSecondary)};
+  }
+
+  &[aria-current='true'] {
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceAccent", theme.color.background.highlight)};
+  }
+`;
+const RailColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const RailSegment = styled.div`
+  width: 0;
+  border-left: ${RAIL_THICKNESS} solid
+    ${({ theme, $selected }) => $selected ? semanticColor(theme, "FgAccent", Color.TextActive) : semanticColor(theme, "BorderDefault", Color.BorderDivider)};
+  flex: 1;
+`;
+const RailStart = styled.div`
+  height: ${Spacing[5]};
+  flex-shrink: 0;
+`;
+const TimelineDot = styled.span`
+  width: ${Spacing[2]};
+  height: ${Spacing[2]};
+  border-radius: 50%;
+  flex-shrink: 0;
+  background-color: ${({ theme, $selected }) => $selected ? semanticColor(theme, "FgAccent", Color.TextActive) : semanticColor(theme, "BorderDefault", Color.BorderDivider)};
+`;
+const BodyColumn = styled.div`
+  min-width: 0;
+  padding: ${Spacing[4]} 0;
+`;
+const ActionsColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: ${ACTION_SLOT_WIDTH};
+  padding: ${Spacing[4]} ${Spacing[4]} ${Spacing[4]} ${Spacing[2]};
+  box-sizing: border-box;
+
+  > * {
+    visibility: ${({ $revealed }) => $revealed ? "visible" : "hidden"};
+  }
+
+  ${Row}:hover &,
+  ${Row}:focus-within & {
+    > * {
+      visibility: visible;
+    }
+  }
+`;
+const StatusChip = ({ status }) => {
+	const chip = useMemo(() => {
+		switch (status) {
+			case "live": return {
+				label: "Deployed",
+				type: "success"
+			};
+			case "unsaved": return {
+				label: "Unsaved",
+				type: "critical"
+			};
+			case "saved": return {
+				label: "Saved",
+				type: "feature"
+			};
+			default: return null;
+		}
+	}, [status]);
+	if (chip == null) return null;
+	return /* @__PURE__ */ jsx(StatusIndicator, {
+		type: chip.type,
+		showIcon: false,
+		children: chip.label
+	});
+};
+const VersionHistoryItem = ({ id, title, status, timestamp, lastUpdater, description, compareLabel = DEFAULT_COMPARE_LABEL, restoreLabel = DEFAULT_RESTORE_LABEL, discardLabel = DEFAULT_DISCARD_LABEL, editDescriptionLabel = DEFAULT_EDIT_DESCRIPTION_LABEL, onRestore, onDiscard, onCompare, onEditDescription, isFirst, isLast, isSelected, isLoadingVersion, onSelect, showActionSlot }) => {
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const [isDiscardOpen, setIsDiscardOpen] = useState(false);
+	const [isDiscarding, setIsDiscarding] = useState(false);
+	const [isEditOpen, setIsEditOpen] = useState(false);
+	const [draftDescription, setDraftDescription] = useState(description ?? "");
+	const menuItems = [
+		onCompare != null && {
+			id: `${id}__compare`,
+			label: compareLabel,
+			variant: "basic",
+			onClick: onCompare
+		},
+		onRestore != null && {
+			id: `${id}__restore`,
+			label: restoreLabel,
+			variant: "basic",
+			onClick: onRestore
+		},
+		onDiscard != null && {
+			id: `${id}__discard`,
+			label: discardLabel,
+			variant: "basic",
+			onClick: () => setIsDiscardOpen(true)
+		},
+		onEditDescription != null && {
+			id: `${id}__edit-description`,
+			label: editDescriptionLabel,
+			variant: "basic",
+			onClick: () => {
+				setDraftDescription(description ?? "");
+				setIsEditOpen(true);
+			}
+		}
+	].filter((item) => Boolean(item));
+	const stopRowClick = (event) => {
+		event.stopPropagation();
+	};
+	const confirmDiscard = async () => {
+		setIsDiscarding(true);
+		try {
+			await onDiscard?.();
+			setIsDiscardOpen(false);
+		} catch {} finally {
+			setIsDiscarding(false);
+		}
+	};
+	const confirmEdit = () => {
+		onEditDescription?.(draftDescription);
+		setIsEditOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Modal_default, {
+			open: isDiscardOpen,
+			onOpenChange: setIsDiscardOpen,
+			isKeyboardDismissDisabled: isDiscarding,
+			contentProps: isDiscarding ? { showCloseButton: false } : void 0,
+			title: "Discard draft?",
+			footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "basic",
+				width: "auto",
+				disabled: isDiscarding,
+				onClick: () => setIsDiscardOpen(false),
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "danger",
+				width: "auto",
+				isPending: isDiscarding,
+				onClick: confirmDiscard,
+				children: "Discard"
+			})] }),
+			children: /* @__PURE__ */ jsx(Paragraph, {
+				color: "primary",
+				children: "All unpublished changes in this draft will be discarded. This action is permanent and cannot be undone."
+			})
+		}),
+		/* @__PURE__ */ jsx(Modal_default, {
+			open: isEditOpen,
+			onOpenChange: (open) => {
+				setIsEditOpen(open);
+				if (open) setDraftDescription(description ?? "");
+			},
+			title: "Edit description",
+			footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "basic",
+				width: "auto",
+				onClick: () => setIsEditOpen(false),
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				width: "auto",
+				onClick: confirmEdit,
+				children: "Confirm"
+			})] }),
+			children: /* @__PURE__ */ jsx(TextAreaWithStyle, {
+				autoFocus: true,
+				value: draftDescription,
+				onChange: (event) => setDraftDescription(event.target.value),
+				placeholder: "No description"
+			})
+		}),
+		/* @__PURE__ */ jsxs(Row, {
+			role: "listitem",
+			$withActionSlot: showActionSlot,
+			"aria-current": isSelected || void 0,
+			"aria-busy": isLoadingVersion || void 0,
+			tabIndex: 0,
+			onClick: () => {
+				if (!isSelected) onSelect();
+			},
+			onKeyDown: (event) => {
+				if (isSelected) return;
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onSelect();
+				}
+			},
+			children: [
+				/* @__PURE__ */ jsxs(RailColumn, { children: [
+					isFirst ? /* @__PURE__ */ jsx(RailStart, {}) : /* @__PURE__ */ jsx(RailSegment, { $selected: isSelected }),
+					/* @__PURE__ */ jsx(TimelineDot, { $selected: isSelected }),
+					!isLast && /* @__PURE__ */ jsx(RailSegment, { $selected: isSelected })
+				] }),
+				/* @__PURE__ */ jsx(BodyColumn, { children: /* @__PURE__ */ jsxs(Stack, {
+					spacing: Spacing[1],
+					children: [
+						/* @__PURE__ */ jsxs(HStack, {
+							spacing: Spacing[2],
+							align: "center",
+							children: [
+								/* @__PURE__ */ jsx(Paragraph, {
+									color: "primary",
+									as: "span",
+									children: timestamp
+								}),
+								/* @__PURE__ */ jsx(StatusChip, { status }),
+								isLoadingVersion && !showActionSlot && /* @__PURE__ */ jsx(Spinner, { srText: "Version loading" })
+							]
+						}),
+						/* @__PURE__ */ jsxs(HStack, {
+							spacing: Spacing[1],
+							align: "center",
+							children: [/* @__PURE__ */ jsx(Paragraph, {
+								color: "secondary",
+								size: "sm",
+								children: title
+							}), lastUpdater && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Paragraph, {
+								color: "secondary",
+								size: "sm",
+								children: "·"
+							}), /* @__PURE__ */ jsx(Paragraph, {
+								color: "secondary",
+								size: "sm",
+								children: lastUpdater
+							})] })]
+						}),
+						description != null && description !== "" && /* @__PURE__ */ jsx(Paragraph, {
+							color: "secondary",
+							size: "sm",
+							children: description
+						})
+					]
+				}) }),
+				showActionSlot && /* @__PURE__ */ jsx(ActionsColumn, {
+					$revealed: isLoadingVersion || isMenuOpen,
+					onClick: isLoadingVersion ? void 0 : stopRowClick,
+					children: isLoadingVersion ? /* @__PURE__ */ jsx(Spinner, { srText: "Version loading" }) : menuItems.length > 0 && /* @__PURE__ */ jsx(DropdownMenu_default, {
+						portal: true,
+						onOpenChange: setIsMenuOpen,
+						trigger: /* @__PURE__ */ jsx(IconButton, {
+							size: "md",
+							"aria-label": "More",
+							children: /* @__PURE__ */ jsx(MoreIcon, {})
+						}),
+						children: menuItems.map((item) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+							variant: item.variant,
+							onClick: (event) => {
+								event.preventDefault();
+								event.stopPropagation();
+								item.onClick?.();
+							},
+							children: item.label
+						}, item.id))
+					})
+				})
+			]
+		})
+	] });
+};
+//#endregion
+//#region components/VersionHistory/VersionHistory.tsx
+const Panel = styled.nav`
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: ${"600px"};
+  height: 100%;
+  overflow: hidden;
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", Color.BackgroundPrimary)};
+  border-left: 1px solid
+    ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+`;
+const Header = styled.div`
+  flex-shrink: 0;
+  padding: ${Spacing[3]} ${Spacing[5]};
+  border-bottom: 1px solid
+    ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+`;
+const List = styled.div`
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  ${semanticScrollbar}
+`;
+const LoadingBody = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`;
+const VersionHistory = ({ items, selectedVersionId, onSelectVersion, onClose, loading = false, emptyText = "No versions yet. Save or publish your changes to create one." }) => {
+	const [pendingVersionId, setPendingVersionId] = useState(null);
+	const selectVersion = useCallback((versionId) => {
+		if (pendingVersionId != null) return;
+		const result = onSelectVersion(versionId);
+		if (result instanceof Promise) {
+			setPendingVersionId(versionId);
+			const clearPending = () => setPendingVersionId(null);
+			result.then(clearPending, clearPending);
+		}
+	}, [onSelectVersion, pendingVersionId]);
+	const showActionSlot = items.some(hasVersionHistoryItemActions);
+	return /* @__PURE__ */ jsxs(Panel, {
+		"aria-label": "Version History",
+		children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HStack, {
+			justify: "space-between",
+			align: "center",
+			spacing: Spacing[2],
+			children: [/* @__PURE__ */ jsx(Paragraph, {
+				as: "h3",
+				size: "lg",
+				weight: "bold",
+				color: "primary",
+				children: "Version History"
+			}), onClose != null && /* @__PURE__ */ jsx(IconButton, {
+				size: "md",
+				"aria-label": "Close",
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})]
+		}) }), loading ? /* @__PURE__ */ jsx(LoadingBody, { children: /* @__PURE__ */ jsx(Spinner, {
+			size: "md",
+			srText: "Loading versions..."
+		}) }) : items.length === 0 ? /* @__PURE__ */ jsx(Stack, {
+			spacing: Spacing[3],
+			style: { padding: Spacing[5] },
+			children: /* @__PURE__ */ jsx(Paragraph, {
+				color: "secondary",
+				children: emptyText
+			})
+		}) : /* @__PURE__ */ jsx(List, {
+			role: "list",
+			"aria-label": "Version history",
+			children: items.map((item, index) => /* @__PURE__ */ jsx(VersionHistoryItem, {
+				...item,
+				isFirst: index === 0,
+				isLast: index === items.length - 1,
+				isSelected: item.id === (pendingVersionId ?? selectedVersionId),
+				isLoadingVersion: item.id === pendingVersionId,
+				showActionSlot,
+				onSelect: () => selectVersion(item.id)
+			}, item.id))
+		})]
+	});
+};
+//#endregion
+export { VersionHistory, VersionHistory as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Modal","TextArea","DropdownMenu"],"sources":["../../../components/VersionHistory/VersionHistoryItem.tsx","../../../components/VersionHistory/VersionHistory.tsx"],"sourcesContent":["import { type MouseEvent, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { MoreIcon } from '@persona/icons';\nimport Button, { IconButton } from 'design-system/components/Button';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport Modal from 'design-system/components/Modal';\nimport Spinner from 'design-system/components/Spinner';\nimport { HStack, Stack } from 'design-system/components/Stack';\nimport StatusIndicator from 'design-system/components/StatusIndicator';\nimport { Paragraph } from 'design-system/components/Text';\nimport TextArea from 'design-system/components/TextArea';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\n\nexport type VersionHistoryStatus = 'live' | 'saved' | 'unsaved' | 'published';\n\nexport type VersionHistoryItemProps = {\n  id: string;\n  title: string;\n  status: VersionHistoryStatus;\n  timestamp: string;\n  lastUpdater?: string;\n  description?: string;\n  compareLabel?: string;\n  restoreLabel?: string;\n  discardLabel?: string;\n  editDescriptionLabel?: string;\n  onRestore?: () => void;\n  onDiscard?: () => void | Promise<void>;\n  onCompare?: () => void;\n  onEditDescription?: (description: string) => void;\n};\n\nconst DEFAULT_COMPARE_LABEL = 'Compare to latest version';\nconst DEFAULT_RESTORE_LABEL = 'Restore';\nconst DEFAULT_DISCARD_LABEL = 'Discard';\nconst DEFAULT_EDIT_DESCRIPTION_LABEL = 'Edit description';\n\nexport const hasVersionHistoryItemActions = (item: VersionHistoryItemProps) =>\n  item.onCompare != null ||\n  item.onRestore != null ||\n  item.onDiscard != null ||\n  item.onEditDescription != null;\n\ntype VersionHistoryItemViewProps = VersionHistoryItemProps & {\n  isFirst: boolean;\n  isLast: boolean;\n  isSelected: boolean;\n  isLoadingVersion: boolean;\n  onSelect: () => void;\n  showActionSlot: boolean;\n};\n\n/** Timeline stroke; 3px is the rail weight from the source panel. */\nconst RAIL_THICKNESS = '3px';\n\nconst ACTION_SLOT_WIDTH = `calc(${Spacing[8]} + ${Spacing[4]})`;\n\nconst Row = styled.div<{ $withActionSlot: boolean }>`\n  display: grid;\n  grid-template-columns: ${({ $withActionSlot }) =>\n    $withActionSlot\n      ? `${Spacing[7]} minmax(0, 1fr) ${ACTION_SLOT_WIDTH}`\n      : `${Spacing[7]} minmax(0, 1fr)`};\n  cursor: pointer;\n  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  ${focusOutline}\n\n  &:hover:not([aria-current='true']) {\n    background-color: ${({ theme }) =>\n      semanticColor(theme, 'SurfaceHover', Color.BackgroundSecondary)};\n  }\n\n  &[aria-current='true'] {\n    background-color: ${({ theme }) =>\n      semanticColor(theme, 'SurfaceAccent', theme.color.background.highlight)};\n  }\n`;\n\nconst RailColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nconst RailSegment = styled.div<{ $selected: boolean }>`\n  width: 0;\n  border-left: ${RAIL_THICKNESS} solid\n    ${({ theme, $selected }) =>\n      $selected\n        ? semanticColor(theme, 'FgAccent', Color.TextActive)\n        : semanticColor(theme, 'BorderDefault', Color.BorderDivider)};\n  flex: 1;\n`;\n\nconst RailStart = styled.div`\n  height: ${Spacing[5]};\n  flex-shrink: 0;\n`;\n\nconst TimelineDot = styled.span<{ $selected: boolean }>`\n  width: ${Spacing[2]};\n  height: ${Spacing[2]};\n  border-radius: 50%;\n  flex-shrink: 0;\n  background-color: ${({ theme, $selected }) =>\n    $selected\n      ? semanticColor(theme, 'FgAccent', Color.TextActive)\n      : semanticColor(theme, 'BorderDefault', Color.BorderDivider)};\n`;\n\nconst BodyColumn = styled.div`\n  min-width: 0;\n  padding: ${Spacing[4]} 0;\n`;\n\nconst ActionsColumn = styled.div<{ $revealed: boolean }>`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  width: ${ACTION_SLOT_WIDTH};\n  padding: ${Spacing[4]} ${Spacing[4]} ${Spacing[4]} ${Spacing[2]};\n  box-sizing: border-box;\n\n  > * {\n    visibility: ${({ $revealed }) => ($revealed ? 'visible' : 'hidden')};\n  }\n\n  ${Row}:hover &,\n  ${Row}:focus-within & {\n    > * {\n      visibility: visible;\n    }\n  }\n`;\n\nconst StatusChip = ({ status }: { status: VersionHistoryStatus }) => {\n  const chip = useMemo(() => {\n    switch (status) {\n      case 'live':\n        return { label: 'Deployed', type: 'success' as const };\n      case 'unsaved':\n        return { label: 'Unsaved', type: 'critical' as const };\n      case 'saved':\n        return { label: 'Saved', type: 'feature' as const };\n      default:\n        return null;\n    }\n  }, [status]);\n\n  if (chip == null) {\n    return null;\n  }\n\n  return (\n    <StatusIndicator type={chip.type} showIcon={false}>\n      {chip.label}\n    </StatusIndicator>\n  );\n};\n\nconst VersionHistoryItem = ({\n  id,\n  title,\n  status,\n  timestamp,\n  lastUpdater,\n  description,\n  compareLabel = DEFAULT_COMPARE_LABEL,\n  restoreLabel = DEFAULT_RESTORE_LABEL,\n  discardLabel = DEFAULT_DISCARD_LABEL,\n  editDescriptionLabel = DEFAULT_EDIT_DESCRIPTION_LABEL,\n  onRestore,\n  onDiscard,\n  onCompare,\n  onEditDescription,\n  isFirst,\n  isLast,\n  isSelected,\n  isLoadingVersion,\n  onSelect,\n  showActionSlot,\n}: VersionHistoryItemViewProps) => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const [isDiscardOpen, setIsDiscardOpen] = useState(false);\n  const [isDiscarding, setIsDiscarding] = useState(false);\n  const [isEditOpen, setIsEditOpen] = useState(false);\n  const [draftDescription, setDraftDescription] = useState(description ?? '');\n\n  const menuItems = [\n    onCompare != null && {\n      id: `${id}__compare`,\n      label: compareLabel,\n      variant: 'basic' as const,\n      onClick: onCompare,\n    },\n    onRestore != null && {\n      id: `${id}__restore`,\n      label: restoreLabel,\n      variant: 'basic' as const,\n      onClick: onRestore,\n    },\n    onDiscard != null && {\n      id: `${id}__discard`,\n      label: discardLabel,\n      variant: 'basic' as const,\n      onClick: () => setIsDiscardOpen(true),\n    },\n    onEditDescription != null && {\n      id: `${id}__edit-description`,\n      label: editDescriptionLabel,\n      variant: 'basic' as const,\n      onClick: () => {\n        setDraftDescription(description ?? '');\n        setIsEditOpen(true);\n      },\n    },\n  ].filter((item): item is Exclude<typeof item, false> => Boolean(item));\n\n  const stopRowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  const confirmDiscard = async () => {\n    setIsDiscarding(true);\n    try {\n      await onDiscard?.();\n      setIsDiscardOpen(false);\n    } catch {\n      // Keep the dialog open so the user can retry.\n    } finally {\n      setIsDiscarding(false);\n    }\n  };\n\n  const confirmEdit = () => {\n    onEditDescription?.(draftDescription);\n    setIsEditOpen(false);\n  };\n\n  return (\n    <>\n      <Modal\n        open={isDiscardOpen}\n        onOpenChange={setIsDiscardOpen}\n        isKeyboardDismissDisabled={isDiscarding}\n        contentProps={isDiscarding ? { showCloseButton: false } : undefined}\n        title='Discard draft?'\n        footer={\n          <>\n            <Button\n              variant='basic'\n              width='auto'\n              disabled={isDiscarding}\n              onClick={() => setIsDiscardOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button variant='danger' width='auto' isPending={isDiscarding} onClick={confirmDiscard}>\n              Discard\n            </Button>\n          </>\n        }\n      >\n        <Paragraph color='primary'>\n          All unpublished changes in this draft will be discarded. This action is permanent and\n          cannot be undone.\n        </Paragraph>\n      </Modal>\n      <Modal\n        open={isEditOpen}\n        onOpenChange={(open) => {\n          setIsEditOpen(open);\n          if (open) {\n            setDraftDescription(description ?? '');\n          }\n        }}\n        title='Edit description'\n        footer={\n          <>\n            <Button variant='basic' width='auto' onClick={() => setIsEditOpen(false)}>\n              Cancel\n            </Button>\n            <Button variant='primary' width='auto' onClick={confirmEdit}>\n              Confirm\n            </Button>\n          </>\n        }\n      >\n        <TextArea\n          autoFocus\n          value={draftDescription}\n          onChange={(event) => setDraftDescription(event.target.value)}\n          placeholder='No description'\n        />\n      </Modal>\n      <Row\n        role='listitem'\n        $withActionSlot={showActionSlot}\n        aria-current={isSelected || undefined}\n        aria-busy={isLoadingVersion || undefined}\n        tabIndex={0}\n        onClick={() => {\n          if (!isSelected) {\n            onSelect();\n          }\n        }}\n        onKeyDown={(event) => {\n          if (isSelected) {\n            return;\n          }\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            onSelect();\n          }\n        }}\n      >\n        <RailColumn>\n          {isFirst ? <RailStart /> : <RailSegment $selected={isSelected} />}\n          <TimelineDot $selected={isSelected} />\n          {!isLast && <RailSegment $selected={isSelected} />}\n        </RailColumn>\n        <BodyColumn>\n          <Stack spacing={Spacing[1]}>\n            <HStack spacing={Spacing[2]} align='center'>\n              <Paragraph color='primary' as='span'>\n                {timestamp}\n              </Paragraph>\n              <StatusChip status={status} />\n              {isLoadingVersion && !showActionSlot && <Spinner srText='Version loading' />}\n            </HStack>\n            <HStack spacing={Spacing[1]} align='center'>\n              <Paragraph color='secondary' size='sm'>\n                {title}\n              </Paragraph>\n              {lastUpdater && (\n                <>\n                  <Paragraph color='secondary' size='sm'>\n                    &middot;\n                  </Paragraph>\n                  <Paragraph color='secondary' size='sm'>\n                    {lastUpdater}\n                  </Paragraph>\n                </>\n              )}\n            </HStack>\n            {description != null && description !== '' && (\n              <Paragraph color='secondary' size='sm'>\n                {description}\n              </Paragraph>\n            )}\n          </Stack>\n        </BodyColumn>\n        {showActionSlot && (\n          <ActionsColumn\n            $revealed={isLoadingVersion || isMenuOpen}\n            onClick={isLoadingVersion ? undefined : stopRowClick}\n          >\n            {isLoadingVersion ? (\n              <Spinner srText='Version loading' />\n            ) : (\n              menuItems.length > 0 && (\n                <DropdownMenu\n                  portal\n                  onOpenChange={setIsMenuOpen}\n                  trigger={\n                    <IconButton size='md' aria-label='More'>\n                      <MoreIcon />\n                    </IconButton>\n                  }\n                >\n                  {menuItems.map((item) => (\n                    <DropdownMenu.Item\n                      key={item.id}\n                      variant={item.variant}\n                      onClick={(event) => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        item.onClick?.();\n                      }}\n                    >\n                      {item.label}\n                    </DropdownMenu.Item>\n                  ))}\n                </DropdownMenu>\n              )\n            )}\n          </ActionsColumn>\n        )}\n      </Row>\n    </>\n  );\n};\n\nexport default VersionHistoryItem;\n","import { useCallback, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport Spinner from 'design-system/components/Spinner';\nimport { HStack, Stack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nimport VersionHistoryItem, {\n  hasVersionHistoryItemActions,\n  type VersionHistoryItemProps,\n} from './VersionHistoryItem';\n\nexport type { VersionHistoryItemProps, VersionHistoryStatus } from './VersionHistoryItem';\n\n/** Matches the redesigned dashboard panel width. */\nconst PANEL_WIDTH = '600px';\n\nexport type VersionHistoryProps = {\n  items: VersionHistoryItemProps[];\n  selectedVersionId: string;\n  onSelectVersion: (id: string) => void | Promise<void>;\n  onClose?: () => void;\n  loading?: boolean;\n  emptyText?: string;\n};\n\nconst Panel = styled.nav`\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: ${PANEL_WIDTH};\n  height: 100%;\n  overflow: hidden;\n  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  border-left: 1px solid\n    ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  padding: ${Spacing[3]} ${Spacing[5]};\n  border-bottom: 1px solid\n    ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst List = styled.div`\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ${semanticScrollbar}\n`;\n\nconst LoadingBody = styled.div`\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst VersionHistory = ({\n  items,\n  selectedVersionId,\n  onSelectVersion,\n  onClose,\n  loading = false,\n  emptyText = 'No versions yet. Save or publish your changes to create one.',\n}: VersionHistoryProps) => {\n  const [pendingVersionId, setPendingVersionId] = useState<string | null>(null);\n\n  const selectVersion = useCallback(\n    (versionId: string) => {\n      if (pendingVersionId != null) {\n        return;\n      }\n      const result = onSelectVersion(versionId);\n      if (result instanceof Promise) {\n        setPendingVersionId(versionId);\n        const clearPending = () => setPendingVersionId(null);\n        result.then(clearPending, clearPending);\n      }\n    },\n    [onSelectVersion, pendingVersionId],\n  );\n\n  const showActionSlot = items.some(hasVersionHistoryItemActions);\n\n  return (\n    <Panel aria-label='Version History'>\n      <Header>\n        <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n          <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n            Version History\n          </Paragraph>\n          {onClose != null && (\n            <IconButton size='md' aria-label='Close' onClick={onClose}>\n              <XIcon />\n            </IconButton>\n          )}\n        </HStack>\n      </Header>\n      {loading ? (\n        <LoadingBody>\n          <Spinner size='md' srText='Loading versions...' />\n        </LoadingBody>\n      ) : items.length === 0 ? (\n        <Stack spacing={Spacing[3]} style={{ padding: Spacing[5] }}>\n          <Paragraph color='secondary'>{emptyText}</Paragraph>\n        </Stack>\n      ) : (\n        <List role='list' aria-label='Version history'>\n          {items.map((item, index) => (\n            <VersionHistoryItem\n              key={item.id}\n              {...item}\n              isFirst={index === 0}\n              isLast={index === items.length - 1}\n              isSelected={item.id === (pendingVersionId ?? selectedVersionId)}\n              isLoadingVersion={item.id === pendingVersionId}\n              showActionSlot={showActionSlot}\n              onSelect={() => selectVersion(item.id)}\n            />\n          ))}\n        </List>\n      )}\n    </Panel>\n  );\n};\n\nexport { VersionHistory };\nexport default VersionHistory;\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { WizardModal, WizardModalProps, WizardModalSteps, WizardProceedResult, statusFromProceed } from "../../WizardModal.mjs";
+export { WizardModal, WizardModal as default, type WizardModalProps, type WizardModalSteps, type WizardProceedResult, statusFromProceed };

package/dist/components/WizardModal/index.mjs

@@ -0,0 +1,106 @@
+import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
+import { t as HStack } from "../../Stack-Bkn0TUDe.mjs";
+import { n as Button } from "../../IconButton-CCLMYWVN.mjs";
+import { i as Modal_default } from "../../Modal-CMiFcXC9.mjs";
+import { t as ProgressIndicator } from "../../ProgressIndicator-CQg08vuA.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region components/WizardModal/WizardModal.tsx
+const statusFromProceed = (result) => result === "valid" ? "completed" : result;
+const VERTICAL_STEPPER_RAIL_WIDTH = "240px";
+const BodyShell = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+`;
+const VerticalBody = styled(HStack)`
+  flex: 1;
+  min-height: 0;
+  align-items: stretch;
+  width: 100%;
+`;
+const VerticalRail = styled.div`
+  flex: 0 0 ${VERTICAL_STEPPER_RAIL_WIDTH};
+  width: ${VERTICAL_STEPPER_RAIL_WIDTH};
+  padding: ${Spacing[4]};
+  overflow-y: auto;
+  border-right: 1px solid
+    ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+`;
+const HorizontalProgress = styled.div`
+  flex: 0 0 auto;
+  padding: ${Spacing[4]} ${Spacing[4]} 0;
+`;
+const StepBody = styled.div`
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: ${Spacing[5]} ${Spacing[4]};
+`;
+const WizardModal = ({ steps, activeStepId, onActiveStepChange, onProceed, onComplete, confirmLabel = "Confirm", layout = "vertical", children, title, open, defaultOpen, onOpenChange, size = "lg", trigger, isDismissable, isKeyboardDismissDisabled }) => {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const foundIndex = steps.findIndex((step) => step.id === activeStepId);
+	const activeIndex = foundIndex === -1 ? 0 : foundIndex;
+	const activeId = steps[activeIndex]?.id;
+	const previousStepId = activeIndex > 0 ? steps[activeIndex - 1]?.id : void 0;
+	const nextStepId = activeIndex < steps.length - 1 ? steps[activeIndex + 1]?.id : void 0;
+	const handlePrimary = () => {
+		if (steps.length < 2) return;
+		if ((onProceed?.() ?? "valid") === "error") return;
+		if (nextStepId) {
+			onActiveStepChange(nextStepId);
+			return;
+		}
+		setIsSubmitting(true);
+		return Promise.resolve().then(() => onComplete()).catch(() => void 0).finally(() => setIsSubmitting(false));
+	};
+	const progress = /* @__PURE__ */ jsx(ProgressIndicator, {
+		steps,
+		activeStepId: activeId,
+		layout,
+		onStepClick: isSubmitting ? void 0 : onActiveStepChange
+	});
+	const renderBody = (renderProps) => {
+		const stepBody = /* @__PURE__ */ jsx(StepBody, { children: typeof children === "function" ? children(renderProps) : children });
+		return /* @__PURE__ */ jsx(BodyShell, { children: layout === "horizontal" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HorizontalProgress, { children: progress }), stepBody] }) : /* @__PURE__ */ jsxs(VerticalBody, {
+			spacing: Spacing[0],
+			children: [/* @__PURE__ */ jsx(VerticalRail, { children: progress }), stepBody]
+		}) });
+	};
+	return /* @__PURE__ */ jsx(Modal_default, {
+		title,
+		open,
+		defaultOpen,
+		onOpenChange,
+		size,
+		trigger,
+		isDismissable: isSubmitting ? false : isDismissable,
+		isKeyboardDismissDisabled: isSubmitting || isKeyboardDismissDisabled,
+		contentProps: isSubmitting ? { showCloseButton: false } : void 0,
+		noBodyPadding: true,
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			width: "auto",
+			variant: "basic",
+			disabled: !previousStepId || isSubmitting,
+			onClick: () => previousStepId && onActiveStepChange(previousStepId),
+			children: "Previous"
+		}), /* @__PURE__ */ jsx(Button, {
+			width: "auto",
+			variant: "primary",
+			isPending: isSubmitting,
+			onClick: handlePrimary,
+			children: nextStepId ? "Next" : confirmLabel
+		})] }),
+		children: renderBody
+	});
+};
+//#endregion
+export { WizardModal, WizardModal as default, statusFromProceed };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Modal"],"sources":["../../../components/WizardModal/WizardModal.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport Modal, { type ModalRenderProps } from '@persona/design-system/components/Modal';\nimport ProgressIndicator, {\n  type ProgressIndicatorStep,\n  type StepStatus,\n} from '@persona/design-system/components/ProgressIndicator';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\ntype ModalChromeProps = Pick<\n  ComponentProps<typeof Modal>,\n  | 'title'\n  | 'open'\n  | 'defaultOpen'\n  | 'onOpenChange'\n  | 'size'\n  | 'trigger'\n  | 'isDismissable'\n  | 'isKeyboardDismissDisabled'\n>;\n\nexport type WizardProceedResult = 'valid' | Extract<StepStatus, 'warning' | 'error'>;\n\nexport const statusFromProceed = (result: WizardProceedResult): StepStatus =>\n  result === 'valid' ? 'completed' : result;\n\nexport type WizardModalSteps = [\n  ProgressIndicatorStep,\n  ProgressIndicatorStep,\n  ...ProgressIndicatorStep[],\n];\n\nexport interface WizardModalProps extends ModalChromeProps {\n  steps: WizardModalSteps;\n  activeStepId: string;\n  onActiveStepChange: (stepId: string) => void;\n  onProceed?: () => WizardProceedResult;\n  onComplete: () => void | Promise<void>;\n  confirmLabel?: string;\n  layout?: 'vertical' | 'horizontal';\n  children: ReactNode | ((props: ModalRenderProps) => ReactNode);\n}\n\nconst VERTICAL_STEPPER_RAIL_WIDTH = '240px';\n\nconst BodyShell = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst VerticalBody = styled(HStack)`\n  flex: 1;\n  min-height: 0;\n  align-items: stretch;\n  width: 100%;\n`;\n\nconst VerticalRail = styled.div`\n  flex: 0 0 ${VERTICAL_STEPPER_RAIL_WIDTH};\n  width: ${VERTICAL_STEPPER_RAIL_WIDTH};\n  padding: ${Spacing[4]};\n  overflow-y: auto;\n  border-right: 1px solid\n    ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst HorizontalProgress = styled.div`\n  flex: 0 0 auto;\n  padding: ${Spacing[4]} ${Spacing[4]} 0;\n`;\n\nconst StepBody = styled.div`\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  padding: ${Spacing[5]} ${Spacing[4]};\n`;\n\nexport const WizardModal = ({\n  steps,\n  activeStepId,\n  onActiveStepChange,\n  onProceed,\n  onComplete,\n  confirmLabel = 'Confirm',\n  layout = 'vertical',\n  children,\n  title,\n  open,\n  defaultOpen,\n  onOpenChange,\n  size = 'lg',\n  trigger,\n  isDismissable,\n  isKeyboardDismissDisabled,\n}: WizardModalProps) => {\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const foundIndex = steps.findIndex((step) => step.id === activeStepId);\n  const activeIndex = foundIndex === -1 ? 0 : foundIndex;\n  const activeId = steps[activeIndex]?.id;\n  const previousStepId = activeIndex > 0 ? steps[activeIndex - 1]?.id : undefined;\n  const nextStepId = activeIndex < steps.length - 1 ? steps[activeIndex + 1]?.id : undefined;\n\n  const handlePrimary = () => {\n    if (steps.length < 2) {\n      return;\n    }\n    const result = onProceed?.() ?? 'valid';\n    if (result === 'error') {\n      return;\n    }\n    if (nextStepId) {\n      onActiveStepChange(nextStepId);\n      return;\n    }\n    setIsSubmitting(true);\n    return Promise.resolve()\n      .then(() => onComplete())\n      .catch(() => undefined)\n      .finally(() => setIsSubmitting(false));\n  };\n\n  const progress = (\n    <ProgressIndicator\n      steps={steps}\n      activeStepId={activeId}\n      layout={layout}\n      onStepClick={isSubmitting ? undefined : onActiveStepChange}\n    />\n  );\n\n  const renderBody = (renderProps: ModalRenderProps) => {\n    const stepBody = (\n      <StepBody>{typeof children === 'function' ? children(renderProps) : children}</StepBody>\n    );\n\n    return (\n      <BodyShell>\n        {layout === 'horizontal' ? (\n          <>\n            <HorizontalProgress>{progress}</HorizontalProgress>\n            {stepBody}\n          </>\n        ) : (\n          <VerticalBody spacing={Spacing[0]}>\n            <VerticalRail>{progress}</VerticalRail>\n            {stepBody}\n          </VerticalBody>\n        )}\n      </BodyShell>\n    );\n  };\n\n  return (\n    <Modal\n      title={title}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      size={size}\n      trigger={trigger}\n      isDismissable={isSubmitting ? false : isDismissable}\n      isKeyboardDismissDisabled={isSubmitting || isKeyboardDismissDisabled}\n      contentProps={isSubmitting ? { showCloseButton: false } : undefined}\n      noBodyPadding\n      footer={\n        <>\n          <Button\n            width='auto'\n            variant='basic'\n            disabled={!previousStepId || isSubmitting}\n            onClick={() => previousStepId && onActiveStepChange(previousStepId)}\n          >\n            Previous\n          </Button>\n          <Button width='auto' variant='primary' isPending={isSubmitting} onClick={handlePrimary}>\n            {nextStepId ? 'Next' : confirmLabel}\n          </Button>\n        </>\n      }\n    >\n      {renderBody}\n    </Modal>\n  );\n};\n\nexport default WizardModal;\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,qBAAqB,WAChC,WAAW,UAAU,cAAc;AAmBrC,MAAM,8BAA8B;AAEpC,MAAM,YAAY,OAAO,GAAG;;;;;;;;AAS5B,MAAM,eAAe,OAAO,OAAO;;;;;;AAOnC,MAAM,eAAe,OAAO,GAAG;cACjB,4BAA4B;WAC/B,4BAA4B;aAC1B,QAAQ,GAAG;;;OAGjB,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;AAG/E,MAAM,qBAAqB,OAAO,GAAG;;aAExB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;AAGtC,MAAM,WAAW,OAAO,GAAG;;;;;aAKd,QAAQ,GAAG,GAAG,QAAQ,GAAG;;AAGtC,MAAa,eAAe,EAC1B,OACA,cACA,oBACA,WACA,YACA,eAAe,WACf,SAAS,YACT,UACA,OACA,MACA,aACA,cACA,OAAO,MACP,SACA,eACA,gCACsB;CACtB,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,aAAa,MAAM,WAAW,SAAS,KAAK,OAAO,aAAa;CACtE,MAAM,cAAc,eAAe,KAAK,IAAI;CAC5C,MAAM,WAAW,MAAM,cAAc;CACrC,MAAM,iBAAiB,cAAc,IAAI,MAAM,cAAc,IAAI,KAAK,KAAA;CACtE,MAAM,aAAa,cAAc,MAAM,SAAS,IAAI,MAAM,cAAc,IAAI,KAAK,KAAA;CAEjF,MAAM,sBAAsB;AAC1B,MAAI,MAAM,SAAS,EACjB;AAGF,OADe,aAAa,IAAI,aACjB,QACb;AAEF,MAAI,YAAY;AACd,sBAAmB,WAAW;AAC9B;;AAEF,kBAAgB,KAAK;AACrB,SAAO,QAAQ,SAAS,CACrB,WAAW,YAAY,CAAC,CACxB,YAAY,KAAA,EAAU,CACtB,cAAc,gBAAgB,MAAM,CAAC;;CAG1C,MAAM,WACJ,oBAAC,mBAAD;EACS;EACP,cAAc;EACN;EACR,aAAa,eAAe,KAAA,IAAY;EACxC,CAAA;CAGJ,MAAM,cAAc,gBAAkC;EACpD,MAAM,WACJ,oBAAC,UAAD,EAAA,UAAW,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG,UAAoB,CAAA;AAG1F,SACE,oBAAC,WAAD,EAAA,UACG,WAAW,eACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,oBAAD,EAAA,UAAqB,UAA8B,CAAA,EAClD,SACA,EAAA,CAAA,GAEH,qBAAC,cAAD;GAAc,SAAS,QAAQ;aAA/B,CACE,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,EACtC,SACY;MAEP,CAAA;;AAIhB,QACE,oBAACA,eAAD;EACS;EACD;EACO;EACC;EACR;EACG;EACT,eAAe,eAAe,QAAQ;EACtC,2BAA2B,gBAAgB;EAC3C,cAAc,eAAe,EAAE,iBAAiB,OAAO,GAAG,KAAA;EAC1D,eAAA;EACA,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GACE,OAAM;GACN,SAAQ;GACR,UAAU,CAAC,kBAAkB;GAC7B,eAAe,kBAAkB,mBAAmB,eAAe;aACpE;GAEQ,CAAA,EACT,oBAAC,QAAD;GAAQ,OAAM;GAAO,SAAQ;GAAU,WAAW;GAAc,SAAS;aACtE,aAAa,SAAS;GAChB,CAAA,CACR,EAAA,CAAA;YAGJ;EACK,CAAA"}

package/dist/compound-expression.d.mts

@@ -1,4 +1,4 @@
-import { l as FilterRule, n as CompoundExpression } from "./types-N8PYonjD.mjs";
+import { l as FilterRule, n as CompoundExpression } from "./types-C4WUSW3e.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/compound-expression.d.ts
 declare function addRuleToGroup(compound: CompoundExpression, groupIndex: number, rule: FilterRule): CompoundExpression;

package/dist/{constants-D8bzZ-7B.d.mts → constants-BOxzLX-O.d.mts}

@@ -3,4 +3,4 @@ declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
 declare const MIN_PAGE_SIZE = 10;
 //#endregion
 export { MIN_PAGE_SIZE as n, DEFAULT_PAGE_SIZE_OPTIONS as t };
-//# sourceMappingURL=constants-D8bzZ-7B.d.mts.map
+//# sourceMappingURL=constants-BOxzLX-O.d.mts.map

package/dist/constants.d.mts

@@ -1,2 +1,2 @@
-import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "./constants-D8bzZ-7B.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 };

package/dist/{createPath-BDYRvl57.d.mts → createPath-OeTC9kvS.d.mts}

@@ -1,7 +1,7 @@
-import { i as To } from "./types-CuQSgl1F.mjs";
+import { i as To } from "./types-CkpixGWr.mjs";
 
 //#region lib/router/createPath.d.ts
 declare function createPath(to: To): string;
 //#endregion
 export { createPath as t };
-//# sourceMappingURL=createPath-BDYRvl57.d.mts.map
+//# sourceMappingURL=createPath-OeTC9kvS.d.mts.map

package/dist/createPath.d.mts

@@ -1,2 +1,2 @@
-import { t as createPath } from "./createPath-BDYRvl57.mjs";
+import { t as createPath } from "./createPath-OeTC9kvS.mjs";
 export { createPath };

package/dist/{date-filter-CZeChs9T.mjs → date-filter-BnzR6NxT.mjs}

@@ -173,4 +173,4 @@ function formatDateFilterValue(value) {
 //#endregion
 export { selectedPresetFor as i, parseDateFilterValue as n, resolveDateFilterValue as r, formatDateFilterValue as t };
 
-//# sourceMappingURL=date-filter-CZeChs9T.mjs.map
+//# sourceMappingURL=date-filter-BnzR6NxT.mjs.map