@persona/design-system 0.3.1 → 0.4.0

package/dist/components/Grid/index.mjs

@@ -0,0 +1,85 @@
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { Spacing } from "@persona/design-tokens";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region components/Grid/Grid.tsx
+const GRID_BREAKPOINTS = {
+	sm: 768,
+	md: 1024,
+	lg: 1408
+};
+const getBreakpoint = (width) => {
+	if (width >= GRID_BREAKPOINTS.lg) return "lg";
+	if (width >= GRID_BREAKPOINTS.md) return "md";
+	if (width >= GRID_BREAKPOINTS.sm) return "sm";
+	return "xs";
+};
+const useGridBreakpoint = (ref) => {
+	const [breakpoint, setBreakpoint] = useState("md");
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [ref]);
+	return breakpoint;
+};
+const Root = styled.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  box-sizing: border-box;
+
+  ${({ $breakpoint }) => $breakpoint === "xs" && css`
+      min-width: ${GRID_BREAKPOINTS.sm - 1}px;
+    `}
+
+  ${({ $breakpoint }) => $breakpoint === "xs" || $breakpoint === "sm" ? css`
+          gap: ${Spacing[3]};
+          padding-inline: ${Spacing[5]};
+        ` : css`
+          gap: ${Spacing[4]};
+          padding-inline: ${Spacing[6]};
+        `}
+
+  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'
+  ${({ $mode, $breakpoint }) => $mode === "fixed" && $breakpoint === "lg" && css`
+      max-width: ${GRID_BREAKPOINTS.lg}px;
+      margin-inline: auto;
+    `}
+`;
+/**
+* Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive
+* horizontal margins and gutters. Vertical spacing is left to the consumer.
+*
+* The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to
+* center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.
+*/
+const Grid = ({ mode, children, ...rest }) => {
+	const ref = useRef(null);
+	return /* @__PURE__ */ jsx(Root, {
+		ref,
+		$mode: mode,
+		$breakpoint: useGridBreakpoint(ref),
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region components/Grid/GridItem.tsx
+const Item = styled.div`
+  grid-column: span ${({ $span }) => $span};
+  min-width: 0;
+`;
+const GridItem = ({ span, children, ...rest }) => /* @__PURE__ */ jsx(Item, {
+	$span: span,
+	...rest,
+	children
+});
+//#endregion
+export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Grid/Grid.tsx","../../../components/Grid/GridItem.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  type RefObject,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const GRID_BREAKPOINTS = { sm: 768, md: 1024, lg: 1408 } as const;\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg';\n\nconst getBreakpoint = (width: number): Breakpoint => {\n  if (width >= GRID_BREAKPOINTS.lg) {\n    return 'lg';\n  }\n  if (width >= GRID_BREAKPOINTS.md) {\n    return 'md';\n  }\n  if (width >= GRID_BREAKPOINTS.sm) {\n    return 'sm';\n  }\n  return 'xs';\n};\n\nconst useGridBreakpoint = (ref: RefObject<HTMLDivElement>) => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>('md');\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [ref]);\n  return breakpoint;\n};\n\nconst Root = styled.div<{ $mode: GridProps['mode']; $breakpoint: Breakpoint }>`\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  box-sizing: border-box;\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' &&\n    css`\n      min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n    `}\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' || $breakpoint === 'sm'\n      ? css`\n          gap: ${Spacing[3]};\n          padding-inline: ${Spacing[5]};\n        `\n      : css`\n          gap: ${Spacing[4]};\n          padding-inline: ${Spacing[6]};\n        `}\n\n  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'\n  ${({ $mode, $breakpoint }) =>\n    $mode === 'fixed' &&\n    $breakpoint === 'lg' &&\n    css`\n      max-width: ${GRID_BREAKPOINTS.lg}px;\n      margin-inline: auto;\n    `}\n`;\n\nexport interface GridProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Selects the grid width behavior at the large breakpoint. `fixed` centers the grid at a\n   * maximum width of 1408px, while `fluid` fills the available width.\n   *\n   * Breakpoints:\n   * - ≤767px: 12 columns, 24px margins, 12px gutters, and a 767px minimum width.\n   * - 768–1023px: 12 columns, 24px margins, 12px gutters, and 100% width.\n   * - 1024–1407px: 12 columns, 32px margins, 16px gutters, and 100% width.\n   * - ≥1408px: 12 columns, 32px margins, 16px gutters, and either fixed or fluid width.\n   */\n  mode: 'fixed' | 'fluid';\n  children: ReactNode;\n}\n\n/**\n * Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive\n * horizontal margins and gutters. Vertical spacing is left to the consumer.\n *\n * The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to\n * center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.\n */\nexport const Grid = ({ mode, children, ...rest }: GridProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const breakpoint = useGridBreakpoint(ref);\n  return (\n    <Root ref={ref} $mode={mode} $breakpoint={breakpoint} {...rest}>\n      {children}\n    </Root>\n  );\n};\n\nexport default Grid;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport interface GridItemProps extends ComponentPropsWithoutRef<'div'> {\n  span: GridSpan;\n  children: ReactNode;\n}\n\nconst Item = styled.div<{ $span: GridSpan }>`\n  grid-column: span ${({ $span }) => $span};\n  min-width: 0;\n`;\n\nexport const GridItem = ({ span, children, ...rest }: GridItemProps) => (\n  <Item $span={span} {...rest}>\n    {children}\n  </Item>\n);\n\nexport default GridItem;\n"],"mappings":";;;;;AAYA,MAAa,mBAAmB;CAAE,IAAI;CAAK,IAAI;CAAM,IAAI;CAAM;AAI/D,MAAM,iBAAiB,UAA8B;AACnD,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,QAAO;;AAGT,MAAM,qBAAqB,QAAmC;CAC5D,MAAM,CAAC,YAAY,iBAAiB,SAAqB,KAAK;AAC9D,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,cAAc,cAAc,KAAK,YAAY,CAAC;AACnE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,CAAC,IAAI,CAAC;AACT,QAAO;;AAGT,MAAM,OAAO,OAAO,GAA0D;;;;;;KAMzE,EAAE,kBACH,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,KAAK,EAAE;MACrC;;KAED,EAAE,kBACH,gBAAgB,QAAQ,gBAAgB,OACpC,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;YAE/B,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;UAC7B;;;KAGL,EAAE,OAAO,kBACV,UAAU,WACV,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,GAAG;;MAEjC;;;;;;;;;AAyBN,MAAa,QAAQ,EAAE,MAAM,UAAU,GAAG,WAAsB;CAC9D,MAAM,MAAM,OAAuB,KAAK;AAExC,QACE,oBAAC,MAAD;EAAW;EAAK,OAAO;EAAM,aAFZ,kBAAkB,IAEiB;EAAE,GAAI;EACvD;EACI,CAAA;;;;AChGX,MAAM,OAAO,OAAO,GAAwB;uBACrB,EAAE,YAAY,MAAM;;;AAI3C,MAAa,YAAY,EAAE,MAAM,UAAU,GAAG,WAC5C,oBAAC,MAAD;CAAM,OAAO;CAAM,GAAI;CACpB;CACI,CAAA"}

package/dist/components/HoverCopyableField/index.mjs

@@ -1,2 +1,2 @@
-import { t as HoverCopyableField } from "../../HoverCopyableField-HWshrU_1.mjs";
+import { t as HoverCopyableField } from "../../HoverCopyableField-GMXeF-3J.mjs";
 export { HoverCopyableField as default };

package/dist/components/ImageTile/index.mjs

@@ -5,9 +5,9 @@ import { a as Tooltip } from "../../Tooltip-iJcfJqxn.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
 import { n as Stack } from "../../Stack-Bre2oiov.mjs";
 import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-82xH1AZr.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-dsBWRdTU.mjs";
-import { t as Checkbox } from "../../Checkbox-Ccuicmlo.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-CUnf420M.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-a2Hv0kAq.mjs";
+import { t as Checkbox } from "../../Checkbox-DxNHp59y.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-BHHWpSKN.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-qlQVD5h0.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/components/Input/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-DoB8YswA.mjs";
+import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-BWlvBYB3.mjs";
 //#region components/Input/index.ts
 var Input_default = Input;
 //#endregion

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

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-BrY1bQ5-.mjs";
-import { n as LogicRowProps } from "../../LogicRow-9a_klV2v.mjs";
-import { t as ListBox } from "../../index-BxBsQi2S.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-ZE3MYMt6.mjs";
+import { n as LogicRowProps } from "../../LogicRow-CbMmaWXU.mjs";
+import { t as ListBox } from "../../index-Dpo-RP6S.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, LogicRowProps, useListBoxContext };

package/dist/components/ListBox/index.mjs

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

package/dist/components/LoadingShimmer/index.mjs

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

package/dist/components/MaskedInput/index.mjs

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

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

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

package/dist/components/Menu/index.mjs

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

package/dist/components/Modal/index.mjs

@@ -4,7 +4,7 @@ import { n as Heading$1 } from "../../Text-B0orb-cZ.mjs";
 import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "../../lib/useEmbeddedSurface.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
 import { n as Button$1 } from "../../IconButton-BgL3QUVO.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-sYllYizt.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-B5NtgtgC.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";

package/dist/components/PageHeader/index.mjs

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

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

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

package/dist/components/Pagination/index.mjs

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

package/dist/components/Pii/index.mjs

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

package/dist/components/Popover/index.mjs

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

package/dist/components/ProgressIndicator/index.mjs

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

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

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

package/dist/components/Radio/index.mjs

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

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

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

package/dist/components/RadioGroup/index.mjs

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

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

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

package/dist/components/RightPanel/index.mjs

@@ -0,0 +1,294 @@
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { i as Paragraph } from "../../Text-B0orb-cZ.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
+import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-a2Hv0kAq.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "@persona/icons";
+import { mergeProps, useMove } from "react-aria";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+//#region components/RightPanel/RightPanelLoadingContent.tsx
+const RightPanelLoadingContent = () => /* @__PURE__ */ jsxs(Stack, {
+	spacing: Spacing[5],
+	"aria-label": "Loading panel content",
+	children: [
+		/* @__PURE__ */ jsxs(Stack, {
+			spacing: Spacing[2],
+			children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+				width: "30%",
+				height: "16px"
+			}), /* @__PURE__ */ jsx(LoadingShimmer, {
+				width: "100%",
+				height: "40px"
+			})]
+		}),
+		/* @__PURE__ */ jsxs(Stack, {
+			spacing: Spacing[2],
+			children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+				width: "35%",
+				height: "16px"
+			}), /* @__PURE__ */ jsx(LoadingShimmer, {
+				width: "100%",
+				height: "200px"
+			})]
+		}),
+		/* @__PURE__ */ jsx(HStack, {
+			justify: "flex-end",
+			children: /* @__PURE__ */ jsx(LoadingShimmer, {
+				width: "80px",
+				height: "32px"
+			})
+		})
+	]
+});
+//#endregion
+//#region components/RightPanel/RightPanelResizeHandle.tsx
+const DRAGGING_CLASSNAME = "dragging";
+const KEYBOARD_RESIZE_STEP = 10;
+const KEYBOARD_RESIZE_STEP_LARGE = 40;
+const Handle = styled.div`
+  touch-action: none;
+  cursor: col-resize;
+  position: absolute;
+  z-index: 1;
+  width: ${Spacing[2]};
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    background-color: transparent;
+    transition: background-color 0.15s ease-in;
+    transition-delay: 0.025s;
+  }
+
+  &:hover::after,
+  &${`.${DRAGGING_CLASSNAME}`}::after {
+    background-color: ${({ theme }) => theme.color.border.active};
+  }
+`;
+const RightPanelResizeHandle = ({ onMove, onMoveTo, onMoveStart, onMoveEnd, onDoubleClick }) => {
+	const [isDragging, setIsDragging] = useState(false);
+	const isDraggingRef = useRef(false);
+	const capturedPointerIdRef = useRef(null);
+	const onMoveEndRef = useRef(onMoveEnd);
+	onMoveEndRef.current = onMoveEnd;
+	const { moveProps } = useMove({
+		onMoveStart(e) {
+			if (e.pointerType !== "keyboard") {
+				isDraggingRef.current = true;
+				setIsDragging(true);
+			}
+			onMoveStart?.();
+		},
+		onMove(e) {
+			if (e.pointerType !== "keyboard") return;
+			const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;
+			onMove(e.deltaX * step);
+		},
+		onMoveEnd(e) {
+			if (e.pointerType !== "keyboard") {
+				isDraggingRef.current = false;
+				setIsDragging(false);
+				capturedPointerIdRef.current = null;
+			}
+			onMoveEnd?.();
+		}
+	});
+	useEffect(() => {
+		return () => {
+			if (isDraggingRef.current) onMoveEndRef.current?.();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(Handle, {
+		...mergeProps(moveProps, {
+			onDoubleClick,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					onDoubleClick?.();
+					e.preventDefault();
+				}
+			},
+			onLostPointerCapture: (e) => {
+				if (capturedPointerIdRef.current !== e.pointerId) return;
+				capturedPointerIdRef.current = null;
+				window.dispatchEvent(new PointerEvent("pointerup", {
+					bubbles: true,
+					pointerId: e.pointerId,
+					pointerType: e.pointerType || "mouse"
+				}));
+			},
+			onPointerDown: (e) => {
+				if (e.button !== 0 || capturedPointerIdRef.current != null) return;
+				capturedPointerIdRef.current = e.pointerId;
+				try {
+					e.currentTarget.setPointerCapture(e.pointerId);
+				} catch {}
+			},
+			onPointerMove: (e) => {
+				if (capturedPointerIdRef.current !== e.pointerId) return;
+				onMoveTo?.(e.clientX);
+			}
+		}),
+		"aria-label": "Resize right panel",
+		"aria-orientation": "vertical",
+		role: "separator",
+		tabIndex: 0,
+		className: isDragging ? DRAGGING_CLASSNAME : void 0
+	});
+};
+//#endregion
+//#region components/RightPanel/RightPanel.tsx
+const OPEN_DURATION = .4;
+const CLOSE_DURATION = .3;
+const DEFAULT_MIN_WIDTH = 450;
+const MAX_WIDTH_RATIO = .5;
+const BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;
+const PanelOuter = styled(motion.div)`
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+`;
+const PanelInner = styled.div`
+  position: relative;
+  ${({ $width, $useMinWidth }) => $useMinWidth ? `min-width: ${$width}px;` : ""}
+  height: 100%;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  background: ${Color.BackgroundPrimary};
+  border-left: 1px solid ${Color.BorderDivider};
+`;
+const PanelHeader = styled.div`
+  padding: ${Spacing[4]};
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+  flex-shrink: 0;
+`;
+const PanelBody = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${Spacing[4]};
+  padding-bottom: ${BODY_BOTTOM_PADDING};
+`;
+const RightPanel = ({ id, open = false, onOpenChange, title, description, children, width = DEFAULT_MIN_WIDTH, minWidth = DEFAULT_MIN_WIDTH, resizable = false, loading = false }) => {
+	const panelRef = useRef(null);
+	const previousActiveElementRef = useRef(null);
+	const prefersReducedMotion = useReducedMotion();
+	const defaultWidth = resizable ? Math.max(minWidth, width) : width;
+	const [currentWidth, setCurrentWidth] = useState(defaultWidth);
+	const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);
+	const effectiveWidth = resizable ? currentWidth : width;
+	const handleClose = useCallback(() => {
+		onOpenChange?.(false);
+	}, [onOpenChange]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Escape") handleClose();
+	}, [handleClose]);
+	useEffect(() => {
+		if (open) {
+			previousActiveElementRef.current = document.activeElement;
+			panelRef.current?.focus();
+		} else if (previousActiveElementRef.current && document.contains(previousActiveElementRef.current)) {
+			previousActiveElementRef.current.focus();
+			previousActiveElementRef.current = null;
+		}
+	}, [open]);
+	const clampWidth = useCallback((nextWidth) => Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)), [minWidth]);
+	const handleMove = useCallback((deltaX) => {
+		setCurrentWidth((current) => clampWidth(current - deltaX));
+	}, [clampWidth]);
+	const handleMoveTo = useCallback((clientX) => {
+		setCurrentWidth(clampWidth((panelRef.current?.getBoundingClientRect().right ?? window.innerWidth) - clientX));
+	}, [clampWidth]);
+	const handleMoveStart = useCallback(() => {
+		setShouldAnimateWidth(false);
+	}, []);
+	const handleMoveEnd = useCallback(() => {
+		setShouldAnimateWidth(true);
+	}, []);
+	const handleDoubleClick = useCallback(() => {
+		setShouldAnimateWidth(true);
+		setCurrentWidth(defaultWidth);
+	}, [defaultWidth]);
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(PanelOuter, {
+		initial: {
+			width: prefersReducedMotion ? effectiveWidth : 0,
+			minWidth: prefersReducedMotion ? effectiveWidth : 0
+		},
+		animate: {
+			width: effectiveWidth,
+			minWidth: effectiveWidth,
+			transition: {
+				duration: prefersReducedMotion ? 0 : OPEN_DURATION,
+				ease: "circOut",
+				width: shouldAnimateWidth && !prefersReducedMotion ? void 0 : { duration: 0 },
+				minWidth: shouldAnimateWidth && !prefersReducedMotion ? void 0 : { duration: 0 }
+			}
+		},
+		exit: {
+			width: 0,
+			minWidth: 0,
+			transition: {
+				duration: prefersReducedMotion ? 0 : CLOSE_DURATION,
+				ease: "circOut"
+			}
+		},
+		children: /* @__PURE__ */ jsxs(PanelInner, {
+			ref: panelRef,
+			id,
+			$width: effectiveWidth,
+			$useMinWidth: shouldAnimateWidth,
+			role: "complementary",
+			"aria-label": title,
+			tabIndex: -1,
+			onKeyDown: handleKeyDown,
+			children: [
+				resizable && /* @__PURE__ */ jsx(RightPanelResizeHandle, {
+					onMove: handleMove,
+					onMoveTo: handleMoveTo,
+					onMoveStart: handleMoveStart,
+					onMoveEnd: handleMoveEnd,
+					onDoubleClick: handleDoubleClick
+				}),
+				/* @__PURE__ */ jsx(PanelHeader, { children: /* @__PURE__ */ jsxs(Stack, {
+					spacing: Spacing[2],
+					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: title
+						}), /* @__PURE__ */ jsx(IconButton, {
+							size: "md",
+							"aria-label": "Close",
+							onClick: handleClose,
+							children: /* @__PURE__ */ jsx(XIcon, {})
+						})]
+					}), description && /* @__PURE__ */ jsx(Paragraph, {
+						size: "md",
+						color: "secondary",
+						children: description
+					})]
+				}) }),
+				/* @__PURE__ */ jsx(PanelBody, { children: loading ? /* @__PURE__ */ jsx(RightPanelLoadingContent, {}) : children })
+			]
+		})
+	}) });
+};
+//#endregion
+export { RightPanel, RightPanel as default };
+
+//# sourceMappingURL=index.mjs.map