@persona/design-system 0.3.0 → 0.4.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/RightPanel/RightPanelLoadingContent.tsx","../../../components/RightPanel/RightPanelResizeHandle.tsx","../../../components/RightPanel/RightPanel.tsx"],"sourcesContent":["import { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nconst RightPanelLoadingContent = () => (\n  <Stack spacing={Spacing[5]} aria-label='Loading panel content'>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='30%' height='16px' />\n      <LoadingShimmer width='100%' height='40px' />\n    </Stack>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='35%' height='16px' />\n      <LoadingShimmer width='100%' height='200px' />\n    </Stack>\n    <HStack justify='flex-end'>\n      <LoadingShimmer width='80px' height='32px' />\n    </HStack>\n  </Stack>\n);\n\nexport default RightPanelLoadingContent;\n","import { type FC, type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react';\nimport { mergeProps, useMove } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nconst DRAGGING_CLASSNAME = 'dragging';\nconst KEYBOARD_RESIZE_STEP = 10;\nconst KEYBOARD_RESIZE_STEP_LARGE = 40;\n\nexport interface RightPanelResizeHandleProps {\n  onMove: (deltaX: number) => void;\n  onMoveTo?: (clientX: number) => void;\n  onMoveStart?: () => void;\n  onMoveEnd?: () => void;\n  onDoubleClick?: () => void;\n}\n\nconst Handle = styled.div`\n  touch-action: none;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 1;\n  width: ${Spacing[2]};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &${`.${DRAGGING_CLASSNAME}`}::after {\n    background-color: ${({ theme }) => theme.color.border.active};\n  }\n`;\n\nconst RightPanelResizeHandle: FC<RightPanelResizeHandleProps> = ({\n  onMove,\n  onMoveTo,\n  onMoveStart,\n  onMoveEnd,\n  onDoubleClick,\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const isDraggingRef = useRef(false);\n  const capturedPointerIdRef = useRef<number | null>(null);\n  const onMoveEndRef = useRef(onMoveEnd);\n  onMoveEndRef.current = onMoveEnd;\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = true;\n        setIsDragging(true);\n      }\n      onMoveStart?.();\n    },\n    onMove(e) {\n      if (e.pointerType !== 'keyboard') {\n        return;\n      }\n      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;\n      onMove(e.deltaX * step);\n    },\n    onMoveEnd(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        capturedPointerIdRef.current = null;\n      }\n      onMoveEnd?.();\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (isDraggingRef.current) {\n        onMoveEndRef.current?.();\n      }\n    };\n  }, []);\n\n  return (\n    <Handle\n      {...mergeProps(moveProps, {\n        onDoubleClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onDoubleClick?.();\n            e.preventDefault();\n          }\n        },\n        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          capturedPointerIdRef.current = null;\n          window.dispatchEvent(\n            new PointerEvent('pointerup', {\n              bubbles: true,\n              pointerId: e.pointerId,\n              pointerType: e.pointerType || 'mouse',\n            }),\n          );\n        },\n        onPointerDown: (e: PointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || capturedPointerIdRef.current != null) {\n            return;\n          }\n          capturedPointerIdRef.current = e.pointerId;\n          try {\n            e.currentTarget.setPointerCapture(e.pointerId);\n          } catch {\n            // Pointer capture unsupported.\n          }\n        },\n        onPointerMove: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          onMoveTo?.(e.clientX);\n        },\n      })}\n      aria-label='Resize right panel'\n      aria-orientation='vertical'\n      role='separator'\n      tabIndex={0}\n      className={isDragging ? DRAGGING_CLASSNAME : undefined}\n    />\n  );\n};\n\nexport default RightPanelResizeHandle;\n","import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport RightPanelLoadingContent from './RightPanelLoadingContent';\nimport RightPanelResizeHandle from './RightPanelResizeHandle';\n\nconst OPEN_DURATION = 0.4;\nconst CLOSE_DURATION = 0.3;\nconst DEFAULT_MIN_WIDTH = 450;\nconst MAX_WIDTH_RATIO = 0.5;\n// Reserves scroll-area space so form submit buttons don't collide with the\n// floating Copilot button (anchored at bottom: Spacing[5], 48px hit target).\nconst BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;\n\nconst PanelOuter = styled(motion.div)`\n  flex-shrink: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst PanelInner = styled.div<{ $width: number; $useMinWidth: boolean }>`\n  position: relative;\n  ${({ $width, $useMinWidth }) => ($useMinWidth ? `min-width: ${$width}px;` : '')}\n  height: 100%;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  background: ${Color.BackgroundPrimary};\n  border-left: 1px solid ${Color.BorderDivider};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  padding: ${Spacing[4]};\n  padding-bottom: ${BODY_BOTTOM_PADDING};\n`;\n\nexport interface RightPanelProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Panel id */\n  id?: string;\n  /** Called when open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Panel title rendered in header */\n  title: string;\n  /** Optional description below title */\n  description?: string;\n  /** Panel content */\n  children: ReactNode;\n  /** Panel width in pixels */\n  width?: number;\n  /** Minimum width when resizable. Defaults to 450px. */\n  minWidth?: number;\n  /** When true, the panel is drag-resizable via its left edge. */\n  resizable?: boolean;\n  /** When true, render a shimmer placeholder in the body instead of children. */\n  loading?: boolean;\n}\n\nconst RightPanel = ({\n  id,\n  open = false,\n  onOpenChange,\n  title,\n  description,\n  children,\n  width = DEFAULT_MIN_WIDTH,\n  minWidth = DEFAULT_MIN_WIDTH,\n  resizable = false,\n  loading = false,\n}: RightPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  const defaultWidth = resizable ? Math.max(minWidth, width) : width;\n  const [currentWidth, setCurrentWidth] = useState(defaultWidth);\n  const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);\n\n  const effectiveWidth = resizable ? currentWidth : width;\n\n  const handleClose = useCallback(() => {\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement | null;\n      panelRef.current?.focus();\n    } else if (\n      previousActiveElementRef.current &&\n      document.contains(previousActiveElementRef.current)\n    ) {\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [open]);\n\n  const clampWidth = useCallback(\n    (nextWidth: number) =>\n      Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)),\n    [minWidth],\n  );\n\n  const handleMove = useCallback(\n    (deltaX: number) => {\n      setCurrentWidth((current) => clampWidth(current - deltaX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveTo = useCallback(\n    (clientX: number) => {\n      const rightEdge = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;\n      setCurrentWidth(clampWidth(rightEdge - clientX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveStart = useCallback(() => {\n    setShouldAnimateWidth(false);\n  }, []);\n\n  const handleMoveEnd = useCallback(() => {\n    setShouldAnimateWidth(true);\n  }, []);\n\n  const handleDoubleClick = useCallback(() => {\n    setShouldAnimateWidth(true);\n    setCurrentWidth(defaultWidth);\n  }, [defaultWidth]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PanelOuter\n          initial={{\n            width: prefersReducedMotion ? effectiveWidth : 0,\n            minWidth: prefersReducedMotion ? effectiveWidth : 0,\n          }}\n          animate={{\n            width: effectiveWidth,\n            minWidth: effectiveWidth,\n            transition: {\n              duration: prefersReducedMotion ? 0 : OPEN_DURATION,\n              ease: 'circOut',\n              width: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n              minWidth: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n            },\n          }}\n          exit={{\n            width: 0,\n            minWidth: 0,\n            transition: {\n              duration: prefersReducedMotion ? 0 : CLOSE_DURATION,\n              ease: 'circOut',\n            },\n          }}\n        >\n          <PanelInner\n            ref={panelRef}\n            id={id}\n            $width={effectiveWidth}\n            $useMinWidth={shouldAnimateWidth}\n            role='complementary'\n            aria-label={title}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n          >\n            {resizable && (\n              <RightPanelResizeHandle\n                onMove={handleMove}\n                onMoveTo={handleMoveTo}\n                onMoveStart={handleMoveStart}\n                onMoveEnd={handleMoveEnd}\n                onDoubleClick={handleDoubleClick}\n              />\n            )}\n            <PanelHeader>\n              <Stack spacing={Spacing[2]}>\n                <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n                  <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n                    {title}\n                  </Paragraph>\n                  <IconButton size='md' aria-label='Close' onClick={handleClose}>\n                    <XIcon />\n                  </IconButton>\n                </HStack>\n                {description && (\n                  <Paragraph size='md' color='secondary'>\n                    {description}\n                  </Paragraph>\n                )}\n              </Stack>\n            </PanelHeader>\n            <PanelBody>{loading ? <RightPanelLoadingContent /> : children}</PanelBody>\n          </PanelInner>\n        </PanelOuter>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport { RightPanel };\nexport default RightPanel;\n"],"mappings":";;;;;;;;;;;;AAIA,MAAM,iCACJ,qBAAC,OAAD;CAAO,SAAS,QAAQ;CAAI,cAAW;WAAvC;EACE,qBAAC,OAAD;GAAO,SAAS,QAAQ;aAAxB,CACE,oBAAC,gBAAD;IAAgB,OAAM;IAAM,QAAO;IAAS,CAAA,EAC5C,oBAAC,gBAAD;IAAgB,OAAM;IAAO,QAAO;IAAS,CAAA,CACvC;;EACR,qBAAC,OAAD;GAAO,SAAS,QAAQ;aAAxB,CACE,oBAAC,gBAAD;IAAgB,OAAM;IAAM,QAAO;IAAS,CAAA,EAC5C,oBAAC,gBAAD;IAAgB,OAAM;IAAO,QAAO;IAAU,CAAA,CACxC;;EACR,oBAAC,QAAD;GAAQ,SAAQ;aACd,oBAAC,gBAAD;IAAgB,OAAM;IAAO,QAAO;IAAS,CAAA;GACtC,CAAA;EACH;;;;ACXV,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,6BAA6B;AAUnC,MAAM,SAAS,OAAO,GAAG;;;;;WAKd,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;KAmBjB,IAAI,qBAAqB;yBACL,EAAE,YAAY,MAAM,MAAM,OAAO,OAAO;;;AAIjE,MAAM,0BAA2D,EAC/D,QACA,UACA,aACA,WACA,oBACI;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,gBAAgB,OAAO,MAAM;CACnC,MAAM,uBAAuB,OAAsB,KAAK;CACxD,MAAM,eAAe,OAAO,UAAU;AACtC,cAAa,UAAU;CAEvB,MAAM,EAAE,cAAc,QAAQ;EAC5B,YAAY,GAAG;AACb,OAAI,EAAE,gBAAgB,YAAY;AAChC,kBAAc,UAAU;AACxB,kBAAc,KAAK;;AAErB,kBAAe;;EAEjB,OAAO,GAAG;AACR,OAAI,EAAE,gBAAgB,WACpB;GAEF,MAAM,OAAO,EAAE,WAAW,6BAA6B;AACvD,UAAO,EAAE,SAAS,KAAK;;EAEzB,UAAU,GAAG;AACX,OAAI,EAAE,gBAAgB,YAAY;AAChC,kBAAc,UAAU;AACxB,kBAAc,MAAM;AACpB,yBAAqB,UAAU;;AAEjC,gBAAa;;EAEhB,CAAC;AAEF,iBAAgB;AACd,eAAa;AACX,OAAI,cAAc,QAChB,cAAa,WAAW;;IAG3B,EAAE,CAAC;AAEN,QACE,oBAAC,QAAD;EACE,GAAI,WAAW,WAAW;GACxB;GACA,YAAY,MAAqB;AAC/B,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,sBAAiB;AACjB,OAAE,gBAAgB;;;GAGtB,uBAAuB,MAAoC;AACzD,QAAI,qBAAqB,YAAY,EAAE,UACrC;AAEF,yBAAqB,UAAU;AAC/B,WAAO,cACL,IAAI,aAAa,aAAa;KAC5B,SAAS;KACT,WAAW,EAAE;KACb,aAAa,EAAE,eAAe;KAC/B,CAAC,CACH;;GAEH,gBAAgB,MAAoC;AAClD,QAAI,EAAE,WAAW,KAAK,qBAAqB,WAAW,KACpD;AAEF,yBAAqB,UAAU,EAAE;AACjC,QAAI;AACF,OAAE,cAAc,kBAAkB,EAAE,UAAU;YACxC;;GAIV,gBAAgB,MAAoC;AAClD,QAAI,qBAAqB,YAAY,EAAE,UACrC;AAEF,eAAW,EAAE,QAAQ;;GAExB,CAAC;EACF,cAAW;EACX,oBAAiB;EACjB,MAAK;EACL,UAAU;EACV,WAAW,aAAa,qBAAqB,KAAA;EAC7C,CAAA;;;;ACvHN,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,oBAAoB;AAC1B,MAAM,kBAAkB;AAGxB,MAAM,sBAAsB,QAAQ,QAAQ,GAAG,YAAY,QAAQ,GAAG;AAEtE,MAAM,aAAa,OAAO,OAAO,IAAI;;;;;AAMrC,MAAM,aAAa,OAAO,GAA8C;;KAEnE,EAAE,QAAQ,mBAAoB,eAAe,cAAc,OAAO,OAAO,GAAI;;;;;gBAKlE,MAAM,kBAAkB;2BACb,MAAM,cAAc;;AAG/C,MAAM,cAAc,OAAO,GAAG;aACjB,QAAQ,GAAG;8BACM,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;;;AAIvE,MAAM,YAAY,OAAO,GAAG;;;aAGf,QAAQ,GAAG;oBACJ,oBAAoB;;AA0BxC,MAAM,cAAc,EAClB,IACA,OAAO,OACP,cACA,OACA,aACA,UACA,QAAQ,mBACR,WAAW,mBACX,YAAY,OACZ,UAAU,YACW;CACrB,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,2BAA2B,OAA2B,KAAK;CACjE,MAAM,uBAAuB,kBAAkB;CAE/C,MAAM,eAAe,YAAY,KAAK,IAAI,UAAU,MAAM,GAAG;CAC7D,MAAM,CAAC,cAAc,mBAAmB,SAAS,aAAa;CAC9D,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAElE,MAAM,iBAAiB,YAAY,eAAe;CAElD,MAAM,cAAc,kBAAkB;AACpC,iBAAe,MAAM;IACpB,CAAC,aAAa,CAAC;CAElB,MAAM,gBAAgB,aACnB,MAAqB;AACpB,MAAI,EAAE,QAAQ,SACZ,cAAa;IAGjB,CAAC,YAAY,CACd;AAED,iBAAgB;AACd,MAAI,MAAM;AACR,4BAAyB,UAAU,SAAS;AAC5C,YAAS,SAAS,OAAO;aAEzB,yBAAyB,WACzB,SAAS,SAAS,yBAAyB,QAAQ,EACnD;AACA,4BAAyB,QAAQ,OAAO;AACxC,4BAAyB,UAAU;;IAEpC,CAAC,KAAK,CAAC;CAEV,MAAM,aAAa,aAChB,cACC,KAAK,IAAI,kBAAkB,OAAO,YAAY,KAAK,IAAI,UAAU,UAAU,CAAC,EAC9E,CAAC,SAAS,CACX;CAED,MAAM,aAAa,aAChB,WAAmB;AAClB,mBAAiB,YAAY,WAAW,UAAU,OAAO,CAAC;IAE5D,CAAC,WAAW,CACb;CAED,MAAM,eAAe,aAClB,YAAoB;AAEnB,kBAAgB,YADE,SAAS,SAAS,uBAAuB,CAAC,SAAS,OAAO,cACrC,QAAQ,CAAC;IAElD,CAAC,WAAW,CACb;CAED,MAAM,kBAAkB,kBAAkB;AACxC,wBAAsB,MAAM;IAC3B,EAAE,CAAC;CAEN,MAAM,gBAAgB,kBAAkB;AACtC,wBAAsB,KAAK;IAC1B,EAAE,CAAC;CAEN,MAAM,oBAAoB,kBAAkB;AAC1C,wBAAsB,KAAK;AAC3B,kBAAgB,aAAa;IAC5B,CAAC,aAAa,CAAC;AAElB,QACE,oBAAC,iBAAD,EAAA,UACG,QACC,oBAAC,YAAD;EACE,SAAS;GACP,OAAO,uBAAuB,iBAAiB;GAC/C,UAAU,uBAAuB,iBAAiB;GACnD;EACD,SAAS;GACP,OAAO;GACP,UAAU;GACV,YAAY;IACV,UAAU,uBAAuB,IAAI;IACrC,MAAM;IACN,OAAO,sBAAsB,CAAC,uBAAuB,KAAA,IAAY,EAAE,UAAU,GAAG;IAChF,UAAU,sBAAsB,CAAC,uBAAuB,KAAA,IAAY,EAAE,UAAU,GAAG;IACpF;GACF;EACD,MAAM;GACJ,OAAO;GACP,UAAU;GACV,YAAY;IACV,UAAU,uBAAuB,IAAI;IACrC,MAAM;IACP;GACF;YAED,qBAAC,YAAD;GACE,KAAK;GACD;GACJ,QAAQ;GACR,cAAc;GACd,MAAK;GACL,cAAY;GACZ,UAAU;GACV,WAAW;aARb;IAUG,aACC,oBAAC,wBAAD;KACE,QAAQ;KACR,UAAU;KACV,aAAa;KACb,WAAW;KACX,eAAe;KACf,CAAA;IAEJ,oBAAC,aAAD,EAAA,UACE,qBAAC,OAAD;KAAO,SAAS,QAAQ;eAAxB,CACE,qBAAC,QAAD;MAAQ,SAAQ;MAAgB,OAAM;MAAS,SAAS,QAAQ;gBAAhE,CACE,oBAAC,WAAD;OAAW,IAAG;OAAK,MAAK;OAAK,QAAO;OAAO,OAAM;iBAC9C;OACS,CAAA,EACZ,oBAAC,YAAD;OAAY,MAAK;OAAK,cAAW;OAAQ,SAAS;iBAChD,oBAAC,OAAD,EAAS,CAAA;OACE,CAAA,CACN;SACR,eACC,oBAAC,WAAD;MAAW,MAAK;MAAK,OAAM;gBACxB;MACS,CAAA,CAER;QACI,CAAA;IACd,oBAAC,WAAD,EAAA,UAAY,UAAU,oBAAC,0BAAD,EAA4B,CAAA,GAAG,UAAqB,CAAA;IAC/D;;EACF,CAAA,EAEC,CAAA"}

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

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-_I4sWeD7.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-Db78Pzo_.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlProps };

package/dist/components/SegmentedControl/index.mjs

@@ -1,2 +1,2 @@
-import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-DgyJL4uN.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-CvWJGhwy.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem };

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

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-vwXGlHuW.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-bafAe2wd.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/components/Select/index.mjs

@@ -1,2 +1,2 @@
-import { n as Select, r as SelectHeader, t as Option } from "../../Select-D6MqSYVa.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-U_vQhK1A.mjs";
 export { Option, Select, Select as default, SelectHeader };

package/dist/components/Slider/index.mjs

@@ -1,10 +1,10 @@
-import { focusStyle } from "../../mixins/focus.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { i as FloatingTooltip } from "../../Tooltip-BvDbmXak.mjs";
+import { i as FloatingTooltip } from "../../Tooltip-iJcfJqxn.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
 import { mergeProps } from "@react-aria/utils";
 import { useNumberFormatter } from "@react-aria/i18n";

package/dist/components/Spacer/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spacer_default } from "../../Spacer-CJp0lwkL.mjs";
+import { t as Spacer_default } from "../../Spacer-BsK8tTwA.mjs";
 export { Spacer_default as default };

package/dist/components/Spinner/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../Spinner-BgBCCHGo.mjs";
+import { t as Spinner } from "../../Spinner-BTyc6glU.mjs";
 export { Spinner, Spinner as default };

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

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-CkV7k7TE.mjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-_JcvIE31.mjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/components/Stack/index.mjs

@@ -1,2 +1,2 @@
-import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
 export { HStack, Stack, Stack as default };

package/dist/components/StatusIndicator/index.mjs

@@ -1,7 +1,7 @@
-import { paragraphMixins } from "../../mixins/text.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { TruncatedText } from "../../lib/TruncatedText.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleCheckFillIcon, CircleFillIcon, CircleHalfIcon, CircleNullIcon, CircleSlashIcon, WarningFillIcon } from "@persona/icons/12px";
 //#region components/StatusIndicator/StatusIndicator.tsx

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

@@ -1,2 +1,2 @@
-import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-Dhx2wqTL.mjs";
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-OKVOQt_C.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/components/Sticker/index.mjs

@@ -1,2 +1,2 @@
-import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer, t as STICKER_COLOR_CONFIG } from "../../Sticker-xtDMuOoN.mjs";
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer, t as STICKER_COLOR_CONFIG } from "../../Sticker-CQ6sOKUj.mjs";
 export { STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StyledTruncatedText };

package/dist/components/SwatchPicker/index.mjs

@@ -1,6 +1,6 @@
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import "../../variables/effect.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
 //#region components/SwatchPicker/SwatchPicker.tsx
 const SwatchGrid = styled.div`

package/dist/components/TabBar/index.mjs

@@ -1,2 +1,2 @@
-import { a as TabContainer, i as TabBar, n as StyledTab, r as Tab, t as TabBarIconButton_default } from "../../TabBar-D6UocZXi.mjs";
+import { a as TabContainer, i as TabBar, n as StyledTab, r as Tab, t as TabBarIconButton_default } from "../../TabBar-B5NtgtgC.mjs";
 export { StyledTab, Tab, TabBar, TabBar as default, TabBarIconButton_default as TabBarIconButton, TabContainer };

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

@@ -1,8 +1,8 @@
-import { t as Table } from "../../Table-cO7ZwGPM.mjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-C2pqXBYO.mjs";
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-C1bz13uw.mjs";
-import { t as TableRow } from "../../TableRow-CPqZ8DK3.mjs";
-import { t as TableHead } from "../../TableHead-DMq_q_W0.mjs";
-import { t as TableBody } from "../../TableBody-CirMgfAV.mjs";
-import { t as TableLayout } from "../../TableLayout-DQKu6Rcj.mjs";
+import { t as Table } from "../../Table-BcAgCIWq.mjs";
+import { t as TableHeaderCell } from "../../TableHeaderCell-K_avn-rR.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-Dc_BgmPv.mjs";
+import { t as TableRow } from "../../TableRow-BTWf9xVC.mjs";
+import { t as TableHead } from "../../TableHead-PPaqXC0K.mjs";
+import { t as TableBody } from "../../TableBody-D-RDBun9.mjs";
+import { t as TableLayout } from "../../TableLayout-_Hd-Tvto.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellProps, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

package/dist/components/Table/index.mjs

@@ -1,2 +1,2 @@
-import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-D1WyUQuv.mjs";
+import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-DfUD3I2s.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

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

@@ -1,3 +1,3 @@
-import { t as DragDirection } from "../../useTableBoxDragAndDrop-CpemHLhL.mjs";
-import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-DmVX_tgn.mjs";
+import { t as DragDirection } from "../../useTableBoxDragAndDrop-B-Dev5D6.mjs";
+import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-WXc57DwN.mjs";
 export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };

package/dist/components/TableBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as TableBoxContext, t as TableBox } from "../../TableBox-C5qWhr82.mjs";
+import { n as TableBoxContext, t as TableBox } from "../../TableBox-0GvWjRln.mjs";
 export { TableBoxContext, TableBox as default };

package/dist/components/TechnicalSticker/index.mjs

@@ -1,2 +1,2 @@
-import { t as TechnicalSticker } from "../../TechnicalSticker-DTjg6d2F.mjs";
+import { t as TechnicalSticker } from "../../TechnicalSticker-ClRR_6Ly.mjs";
 export { TechnicalSticker, TechnicalSticker as default };

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

@@ -1,2 +1,2 @@
-import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-CfIFUyHt.mjs";
+import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-CAKHcXSd.mjs";
 export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/components/Text/index.mjs

@@ -1,2 +1,2 @@
-import { a as Span, i as Paragraph, n as Heading, o as TabularNumber, r as Label, t as Display } from "../../Text-RcEfNFLx.mjs";
+import { a as Span, i as Paragraph, n as Heading, o as TabularNumber, r as Label, t as Display } from "../../Text-B0orb-cZ.mjs";
 export { Display, Heading, Label, Paragraph, Span, TabularNumber };

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

@@ -1,2 +1,2 @@
-import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-DhPBI_1-.mjs";
+import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-NjdArapc.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/components/TextArea/index.mjs

@@ -1,2 +1,2 @@
-import { t as TextAreaWithStyle } from "../../TextArea-ZMgbE_Lh.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-n4IKHJKo.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default };

package/dist/components/Tile/index.mjs

@@ -1,9 +1,9 @@
-import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
-import { i as Paragraph, n as Heading } from "../../Text-RcEfNFLx.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-BvDbmXak.mjs";
-import { n as Sticker } from "../../Sticker-xtDMuOoN.mjs";
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { i as Paragraph, n as Heading } from "../../Text-B0orb-cZ.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-iJcfJqxn.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
+import { n as Sticker } from "../../Sticker-CQ6sOKUj.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "@persona/icons/12px";
 import { ArrowRightIcon as ArrowRightIcon$1 } from "@persona/icons/16px";

package/dist/components/Toast/index.mjs

@@ -1,11 +1,11 @@
-import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
-import "../../variables/effect.mjs";
-import "../../variables/transitions.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
+import "../../variables/transitions.mjs";
 import "../../lib/message.mjs";
-import { t as IconButton } from "../../IconButton-BfDlic2K.mjs";
+import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import "../../variables/effect.mjs";
+import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from "@persona/icons";
 import { XIcon as XIcon$1 } from "@persona/icons/12px";

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

@@ -1,2 +1,2 @@
-import { n as ToggleProps, t as Toggle } from "../../Toggle-BGGQ4Ukl.mjs";
+import { n as ToggleProps, t as Toggle } from "../../Toggle-fh80PA8P.mjs";
 export { Toggle, Toggle as default, ToggleProps };

package/dist/components/Toggle/index.mjs

@@ -1,2 +1,2 @@
-import { t as Toggle } from "../../Toggle-BPgfSjuu.mjs";
+import { t as Toggle } from "../../Toggle-e8DCYa6i.mjs";
 export { Toggle, Toggle as default };

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

@@ -1,4 +1,4 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-D_a-RwAN.mjs";
-import { t as HelperTooltip } from "../../HelperTooltip-C28h1zFl.mjs";
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-BzmmiJlC.mjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-DabloV0o.mjs";
+import { t as HelperTooltip } from "../../HelperTooltip-S20wVFCS.mjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-Duzxfc_r.mjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/components/Tooltip/index.mjs

@@ -1,2 +1,2 @@
-import { a as Tooltip, i as FloatingTooltip, n as TextWithDashedUnderline, r as HelperTooltip, t as TextUnderlineTooltip } from "../../Tooltip-BvDbmXak.mjs";
+import { a as Tooltip, i as FloatingTooltip, n as TextWithDashedUnderline, r as HelperTooltip, t as TextUnderlineTooltip } from "../../Tooltip-iJcfJqxn.mjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default };

package/dist/compound-expression.d.mts

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

package/dist/{constants-BASogfT_.d.mts → constants-DcJ3tnwY.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-BASogfT_.d.mts.map
+//# sourceMappingURL=constants-DcJ3tnwY.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-BASogfT_.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 };