@sproutsocial/seeds-react-peek-in 0.5.0 → 0.6.0

package/dist/esm/index.js

@@ -2,8 +2,8 @@
 import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
 
 // src/PeekInStyled.tsx
-import * as React24 from "react";
-import Box4 from "@sproutsocial/seeds-react-box";
+import * as React8 from "react";
+import Box3 from "@sproutsocial/seeds-react-box";
 import Button2 from "@sproutsocial/seeds-react-button";
 import Drawer2 from "@sproutsocial/seeds-react-drawer";
 import Icon2 from "@sproutsocial/seeds-react-icon";
@@ -26,32 +26,24 @@ function usePeekInContext() {
 
 // src/components/PeekInHeader.tsx
 import "react";
-import Box from "@sproutsocial/seeds-react-box";
 import Button from "@sproutsocial/seeds-react-button";
 import Text from "@sproutsocial/seeds-react-text";
 import Icon from "@sproutsocial/seeds-react-icon";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PeekInHeader = ({
   title,
+  subtitle,
   onBack,
   children
 }) => {
   return /* @__PURE__ */ jsxs(
-    Box,
+    "div",
     {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      py: 400,
-      px: 400,
-      borderBottom: "1px solid",
-      borderColor: "container.border.base",
-      flexShrink: 0,
-      width: "100%",
+      className: "seeds-peek-in-header",
       "data-slot": "peek-in-header",
       "data-qa-peek-in-header": true,
       children: [
-        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ jsxs("div", { className: "seeds-peek-in-titlegroup", children: [
           onBack && /* @__PURE__ */ jsx(
             Button,
             {
@@ -62,9 +54,20 @@ var PeekInHeader = ({
               children: /* @__PURE__ */ jsx(Icon, { name: "arrow-left-outline", size: "small" })
             }
           ),
-          /* @__PURE__ */ jsx(Text.SubHeadline, { as: "h2", "data-qa-peek-in-title": true, children: title })
+          /* @__PURE__ */ jsxs("div", { className: "seeds-peek-in-titlestack", children: [
+            /* @__PURE__ */ jsx(Text.SubHeadline, { as: "h2", "data-qa-peek-in-title": true, children: title }),
+            subtitle && /* @__PURE__ */ jsx(
+              Text.SmallBodyCopy,
+              {
+                as: "div",
+                color: "text.body",
+                "data-qa-peek-in-subtitle": true,
+                children: subtitle
+              }
+            )
+          ] })
         ] }),
-        children && /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", gap: 200, ml: "auto", children })
+        children && /* @__PURE__ */ jsx("div", { className: "seeds-peek-in-header-actions", children })
       ]
     }
   );
@@ -73,13 +76,13 @@ PeekInHeader.displayName = "PeekInHeader";
 
 // src/components/PeekInContent.tsx
 import "react";
-import Box2 from "@sproutsocial/seeds-react-box";
+import Box from "@sproutsocial/seeds-react-box";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var PeekInContent = ({
   children
 }) => {
   return /* @__PURE__ */ jsx2(
-    Box2,
+    Box,
     {
       flex: "1 1 auto",
       overflow: "auto",
@@ -93,9 +96,50 @@ var PeekInContent = ({
 };
 PeekInContent.displayName = "PeekInContent";
 
-// src/components/PeekInPanel.tsx
+// src/components/PeekInFooter.tsx
 import * as React4 from "react";
-import Box3 from "@sproutsocial/seeds-react-box";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CloseOnClick = ({ children }) => {
+  const { onClose } = usePeekInContext();
+  if (!React4.isValidElement(children)) {
+    return /* @__PURE__ */ jsx3(Fragment, { children });
+  }
+  const child = children;
+  return React4.cloneElement(child, {
+    onClick: (e) => {
+      child.props.onClick?.(e);
+      if (!e.defaultPrevented) onClose();
+    }
+  });
+};
+var PeekInFooter = (props) => {
+  const { primaryButton, cancelButton, leftAction } = props;
+  const closeOnPrimaryAction = props.closeOnPrimaryAction ?? true;
+  if (!primaryButton && !cancelButton && !leftAction) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "seeds-peek-in-footer",
+      style: { marginBottom: "var(--bleed, 0px)" },
+      "data-slot": "peek-in-footer",
+      "data-qa-peek-in-footer": true,
+      children: [
+        leftAction ?? null,
+        /* @__PURE__ */ jsxs2("div", { className: "seeds-peek-in-footer-actions", children: [
+          cancelButton && /* @__PURE__ */ jsx3(CloseOnClick, { children: cancelButton }),
+          primaryButton && closeOnPrimaryAction ? /* @__PURE__ */ jsx3(CloseOnClick, { children: primaryButton }) : primaryButton ?? null
+        ] })
+      ]
+    }
+  );
+};
+PeekInFooter.displayName = "PeekInFooter";
+
+// src/components/PeekInPanel.tsx
+import * as React5 from "react";
+import Box2 from "@sproutsocial/seeds-react-box";
 import Drawer, { DrawerContext } from "@sproutsocial/seeds-react-drawer";
 import { useIsMobile } from "@sproutsocial/seeds-react-hooks";
 import { Panel, PanelProvider } from "@sproutsocial/seeds-react-panel";
@@ -110,7 +154,7 @@ var RAIL_DEFAULT_WIDTH = 360;
 var RAIL_GAP = 4;
 
 // src/components/PeekInPanel.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var PeekInPanel = ({
   title,
   children,
@@ -125,12 +169,12 @@ var PeekInPanel = ({
 }) => {
   const { panelOpen, setPanelOpen, panelId } = usePeekInContext();
   const isMobile = useIsMobile();
-  const parentDrawer = React4.useContext(DrawerContext);
-  React4.useEffect(() => {
+  const parentDrawer = React5.useContext(DrawerContext);
+  React5.useEffect(() => {
     if (isMobile) parentDrawer.setIsLocked(panelOpen);
   }, [isMobile, panelOpen, parentDrawer]);
   if (isMobile) {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       Drawer,
       {
         open: panelOpen,
@@ -146,9 +190,9 @@ var PeekInPanel = ({
         actionsInHeader,
         "aria-label": title ?? "Panel",
         children: [
-          !headerless && /* @__PURE__ */ jsx3(Drawer.Header, { title }),
-          /* @__PURE__ */ jsx3(Drawer.Content, { children: /* @__PURE__ */ jsx3(
-            Box3,
+          !headerless && /* @__PURE__ */ jsx4(Drawer.Header, { title }),
+          /* @__PURE__ */ jsx4(Drawer.Content, { children: /* @__PURE__ */ jsx4(
+            Box2,
             {
               id: panelId,
               role: "region",
@@ -162,7 +206,7 @@ var PeekInPanel = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(PanelProvider, { open: panelOpen, onOpenChange: setPanelOpen, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(PanelProvider, { open: panelOpen, onOpenChange: setPanelOpen, children: /* @__PURE__ */ jsx4(
     Panel,
     {
       closeButtonLabel: "Close",
@@ -173,8 +217,8 @@ var PeekInPanel = ({
       title,
       headerless,
       "aria-label": title ?? "Panel",
-      children: /* @__PURE__ */ jsx3(
-        Box3,
+      children: /* @__PURE__ */ jsx4(
+        Box2,
         {
           id: panelId,
           role: "region",
@@ -193,1397 +237,23 @@ PeekInPanel.displayName = "PeekInPanel";
 
 // src/components/PeekInTrigger.tsx
 import "react";
-
-// ../../node_modules/@radix-ui/react-dialog/dist/index.mjs
-import * as React19 from "react";
-
-// ../../node_modules/@radix-ui/primitive/dist/index.mjs
-var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return function handleEvent(event) {
-    originalEventHandler?.(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  };
-}
-
-// ../../node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import * as React5 from "react";
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-function useComposedRefs(...refs) {
-  return React5.useCallback(composeRefs(...refs), refs);
-}
-
-// ../../node_modules/@radix-ui/react-context/dist/index.mjs
-import * as React6 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function createContext22(rootComponentName, defaultContext) {
-  const Context = React6.createContext(defaultContext);
-  const Provider = (props) => {
-    const { children, ...context } = props;
-    const value = React6.useMemo(() => context, Object.values(context));
-    return /* @__PURE__ */ jsx4(Context.Provider, { value, children });
-  };
-  Provider.displayName = rootComponentName + "Provider";
-  function useContext22(consumerName) {
-    const context = React6.useContext(Context);
-    if (context) return context;
-    if (defaultContext !== void 0) return defaultContext;
-    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-  }
-  return [Provider, useContext22];
-}
-function createContextScope(scopeName, createContextScopeDeps = []) {
-  let defaultContexts = [];
-  function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React6.createContext(defaultContext);
-    const index = defaultContexts.length;
-    defaultContexts = [...defaultContexts, defaultContext];
-    const Provider = (props) => {
-      const { scope, children, ...context } = props;
-      const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const value = React6.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx4(Context.Provider, { value, children });
-    };
-    Provider.displayName = rootComponentName + "Provider";
-    function useContext22(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const context = React6.useContext(Context);
-      if (context) return context;
-      if (defaultContext !== void 0) return defaultContext;
-      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-    }
-    return [Provider, useContext22];
-  }
-  const createScope = () => {
-    const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React6.createContext(defaultContext);
-    });
-    return function useScope(scope) {
-      const contexts = scope?.[scopeName] || scopeContexts;
-      return React6.useMemo(
-        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
-        [scope, contexts]
-      );
-    };
-  };
-  createScope.scopeName = scopeName;
-  return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
-}
-function composeContextScopes(...scopes) {
-  const baseScope = scopes[0];
-  if (scopes.length === 1) return baseScope;
-  const createScope = () => {
-    const scopeHooks = scopes.map((createScope2) => ({
-      useScope: createScope2(),
-      scopeName: createScope2.scopeName
-    }));
-    return function useComposedScopes(overrideScopes) {
-      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-        const scopeProps = useScope(overrideScopes);
-        const currentScope = scopeProps[`__scope${scopeName}`];
-        return { ...nextScopes2, ...currentScope };
-      }, {});
-      return React6.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-    };
-  };
-  createScope.scopeName = baseScope.scopeName;
-  return createScope;
-}
-
-// ../../node_modules/@radix-ui/react-id/dist/index.mjs
-import * as React8 from "react";
-
-// ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-import * as React7 from "react";
-var useLayoutEffect2 = globalThis?.document ? React7.useLayoutEffect : () => {
-};
-
-// ../../node_modules/@radix-ui/react-id/dist/index.mjs
-var useReactId = React8[" useId ".trim().toString()] || (() => void 0);
-var count = 0;
-function useId(deterministicId) {
-  const [id, setId] = React8.useState(useReactId());
-  useLayoutEffect2(() => {
-    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
-  }, [deterministicId]);
-  return deterministicId || (id ? `radix-${id}` : "");
-}
-
-// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React9 from "react";
-import * as React22 from "react";
-var useInsertionEffect = React9[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
-function useControllableState({
-  prop,
-  defaultProp,
-  onChange = () => {
-  },
-  caller
-}) {
-  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
-    defaultProp,
-    onChange
-  });
-  const isControlled = prop !== void 0;
-  const value = isControlled ? prop : uncontrolledProp;
-  if (true) {
-    const isControlledRef = React9.useRef(prop !== void 0);
-    React9.useEffect(() => {
-      const wasControlled = isControlledRef.current;
-      if (wasControlled !== isControlled) {
-        const from = wasControlled ? "controlled" : "uncontrolled";
-        const to = isControlled ? "controlled" : "uncontrolled";
-        console.warn(
-          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
-        );
-      }
-      isControlledRef.current = isControlled;
-    }, [isControlled, caller]);
-  }
-  const setValue = React9.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
-        if (value2 !== prop) {
-          onChangeRef.current?.(value2);
-        }
-      } else {
-        setUncontrolledProp(nextValue);
-      }
-    },
-    [isControlled, prop, setUncontrolledProp, onChangeRef]
-  );
-  return [value, setValue];
-}
-function useUncontrolledState({
-  defaultProp,
-  onChange
-}) {
-  const [value, setValue] = React9.useState(defaultProp);
-  const prevValueRef = React9.useRef(value);
-  const onChangeRef = React9.useRef(onChange);
-  useInsertionEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-  React9.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      onChangeRef.current?.(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef]);
-  return [value, setValue, onChangeRef];
-}
-function isFunction(value) {
-  return typeof value === "function";
-}
-
-// ../../node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import * as React14 from "react";
-
-// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React11 from "react";
-import * as ReactDOM from "react-dom";
-
-// ../../node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React10 from "react";
 import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React10.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    const childrenArray = React10.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React10.Children.count(newElement) > 1) return React10.Children.only(null);
-          return React10.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ jsx5(SlotClone, { ...slotProps, ref: forwardedRef, children: React10.isValidElement(newElement) ? React10.cloneElement(newElement, void 0, newChildren) : null });
-    }
-    return /* @__PURE__ */ jsx5(SlotClone, { ...slotProps, ref: forwardedRef, children });
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
-}
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React10.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    if (React10.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React10.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React10.cloneElement(children, props2);
-    }
-    return React10.Children.count(children) > 1 ? React10.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
-function isSlottable(child) {
-  return React10.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { jsx as jsx6 } from "react/jsx-runtime";
-var NODES = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "select",
-  "span",
-  "svg",
-  "ul"
-];
-var Primitive = NODES.reduce((primitive, node) => {
-  const Slot2 = createSlot(`Primitive.${node}`);
-  const Node = React11.forwardRef((props, forwardedRef) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot2 : node;
-    if (typeof window !== "undefined") {
-      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
-    }
-    return /* @__PURE__ */ jsx6(Comp, { ...primitiveProps, ref: forwardedRef });
-  });
-  Node.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node };
-}, {});
-function dispatchDiscreteCustomEvent(target, event) {
-  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
-}
-
-// ../../node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-import * as React12 from "react";
-function useCallbackRef(callback) {
-  const callbackRef = React12.useRef(callback);
-  React12.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React12.useMemo(() => (...args) => callbackRef.current?.(...args), []);
-}
-
-// ../../node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs
-import * as React13 from "react";
-function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
-  const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React13.useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onEscapeKeyDown(event);
-      }
-    };
-    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
-  }, [onEscapeKeyDown, ownerDocument]);
-}
-
-// ../../node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import { jsx as jsx7 } from "react/jsx-runtime";
-var DISMISSABLE_LAYER_NAME = "DismissableLayer";
-var CONTEXT_UPDATE = "dismissableLayer.update";
-var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
-var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
-var originalBodyPointerEvents;
-var DismissableLayerContext = React14.createContext({
-  layers: /* @__PURE__ */ new Set(),
-  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
-  branches: /* @__PURE__ */ new Set()
-});
-var DismissableLayer = React14.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      disableOutsidePointerEvents = false,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss,
-      ...layerProps
-    } = props;
-    const context = React14.useContext(DismissableLayerContext);
-    const [node, setNode] = React14.useState(null);
-    const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-    const [, force] = React14.useState({});
-    const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
-    const layers = Array.from(context.layers);
-    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
-    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
-    const index = node ? layers.indexOf(node) : -1;
-    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
-    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const pointerDownOutside = usePointerDownOutside((event) => {
-      const target = event.target;
-      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
-      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
-      onPointerDownOutside?.(event);
-      onInteractOutside?.(event);
-      if (!event.defaultPrevented) onDismiss?.();
-    }, ownerDocument);
-    const focusOutside = useFocusOutside((event) => {
-      const target = event.target;
-      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
-      if (isFocusInBranch) return;
-      onFocusOutside?.(event);
-      onInteractOutside?.(event);
-      if (!event.defaultPrevented) onDismiss?.();
-    }, ownerDocument);
-    useEscapeKeydown((event) => {
-      const isHighestLayer = index === context.layers.size - 1;
-      if (!isHighestLayer) return;
-      onEscapeKeyDown?.(event);
-      if (!event.defaultPrevented && onDismiss) {
-        event.preventDefault();
-        onDismiss();
-      }
-    }, ownerDocument);
-    React14.useEffect(() => {
-      if (!node) return;
-      if (disableOutsidePointerEvents) {
-        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-          ownerDocument.body.style.pointerEvents = "none";
-        }
-        context.layersWithOutsidePointerEventsDisabled.add(node);
-      }
-      context.layers.add(node);
-      dispatchUpdate();
-      return () => {
-        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
-          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
-        }
-      };
-    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-    React14.useEffect(() => {
-      return () => {
-        if (!node) return;
-        context.layers.delete(node);
-        context.layersWithOutsidePointerEventsDisabled.delete(node);
-        dispatchUpdate();
-      };
-    }, [node, context]);
-    React14.useEffect(() => {
-      const handleUpdate = () => force({});
-      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
-      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
-    }, []);
-    return /* @__PURE__ */ jsx7(
-      Primitive.div,
-      {
-        ...layerProps,
-        ref: composedRefs,
-        style: {
-          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
-          ...props.style
-        },
-        onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
-        onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
-        onPointerDownCapture: composeEventHandlers(
-          props.onPointerDownCapture,
-          pointerDownOutside.onPointerDownCapture
-        )
-      }
-    );
-  }
-);
-DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
-var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React14.forwardRef((props, forwardedRef) => {
-  const context = React14.useContext(DismissableLayerContext);
-  const ref = React14.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  React14.useEffect(() => {
-    const node = ref.current;
-    if (node) {
-      context.branches.add(node);
-      return () => {
-        context.branches.delete(node);
-      };
-    }
-  }, [context.branches]);
-  return /* @__PURE__ */ jsx7(Primitive.div, { ...props, ref: composedRefs });
-});
-DismissableLayerBranch.displayName = BRANCH_NAME;
-function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
-  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React14.useRef(false);
-  const handleClickRef = React14.useRef(() => {
-  });
-  React14.useEffect(() => {
-    const handlePointerDown = (event) => {
-      if (event.target && !isPointerInsideReactTreeRef.current) {
-        let handleAndDispatchPointerDownOutsideEvent2 = function() {
-          handleAndDispatchCustomEvent(
-            POINTER_DOWN_OUTSIDE,
-            handlePointerDownOutside,
-            eventDetail,
-            { discrete: true }
-          );
-        };
-        var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
-        const eventDetail = { originalEvent: event };
-        if (event.pointerType === "touch") {
-          ownerDocument.removeEventListener("click", handleClickRef.current);
-          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
-          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
-        } else {
-          handleAndDispatchPointerDownOutsideEvent2();
-        }
-      } else {
-        ownerDocument.removeEventListener("click", handleClickRef.current);
-      }
-      isPointerInsideReactTreeRef.current = false;
-    };
-    const timerId = window.setTimeout(() => {
-      ownerDocument.addEventListener("pointerdown", handlePointerDown);
-    }, 0);
-    return () => {
-      window.clearTimeout(timerId);
-      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
-      ownerDocument.removeEventListener("click", handleClickRef.current);
-    };
-  }, [ownerDocument, handlePointerDownOutside]);
-  return {
-    // ensures we check React component tree (not just DOM tree)
-    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
-  };
-}
-function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
-  const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React14.useRef(false);
-  React14.useEffect(() => {
-    const handleFocus = (event) => {
-      if (event.target && !isFocusInsideReactTreeRef.current) {
-        const eventDetail = { originalEvent: event };
-        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
-          discrete: false
-        });
-      }
-    };
-    ownerDocument.addEventListener("focusin", handleFocus);
-    return () => ownerDocument.removeEventListener("focusin", handleFocus);
-  }, [ownerDocument, handleFocusOutside]);
-  return {
-    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
-    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
-  };
-}
-function dispatchUpdate() {
-  const event = new CustomEvent(CONTEXT_UPDATE);
-  document.dispatchEvent(event);
-}
-function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
-  const target = detail.originalEvent.target;
-  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
-  if (handler) target.addEventListener(name, handler, { once: true });
-  if (discrete) {
-    dispatchDiscreteCustomEvent(target, event);
-  } else {
-    target.dispatchEvent(event);
-  }
-}
-
-// ../../node_modules/@radix-ui/react-focus-scope/dist/index.mjs
-import * as React15 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
-var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
-var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React15.forwardRef((props, forwardedRef) => {
-  const {
-    loop = false,
-    trapped = false,
-    onMountAutoFocus: onMountAutoFocusProp,
-    onUnmountAutoFocus: onUnmountAutoFocusProp,
-    ...scopeProps
-  } = props;
-  const [container, setContainer] = React15.useState(null);
-  const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
-  const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React15.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
-  const focusScope = React15.useRef({
-    paused: false,
-    pause() {
-      this.paused = true;
-    },
-    resume() {
-      this.paused = false;
-    }
-  }).current;
-  React15.useEffect(() => {
-    if (trapped) {
-      let handleFocusIn2 = function(event) {
-        if (focusScope.paused || !container) return;
-        const target = event.target;
-        if (container.contains(target)) {
-          lastFocusedElementRef.current = target;
-        } else {
-          focus(lastFocusedElementRef.current, { select: true });
-        }
-      }, handleFocusOut2 = function(event) {
-        if (focusScope.paused || !container) return;
-        const relatedTarget = event.relatedTarget;
-        if (relatedTarget === null) return;
-        if (!container.contains(relatedTarget)) {
-          focus(lastFocusedElementRef.current, { select: true });
-        }
-      }, handleMutations2 = function(mutations) {
-        const focusedElement = document.activeElement;
-        if (focusedElement !== document.body) return;
-        for (const mutation of mutations) {
-          if (mutation.removedNodes.length > 0) focus(container);
-        }
-      };
-      var handleFocusIn = handleFocusIn2, handleFocusOut = handleFocusOut2, handleMutations = handleMutations2;
-      document.addEventListener("focusin", handleFocusIn2);
-      document.addEventListener("focusout", handleFocusOut2);
-      const mutationObserver = new MutationObserver(handleMutations2);
-      if (container) mutationObserver.observe(container, { childList: true, subtree: true });
-      return () => {
-        document.removeEventListener("focusin", handleFocusIn2);
-        document.removeEventListener("focusout", handleFocusOut2);
-        mutationObserver.disconnect();
-      };
-    }
-  }, [trapped, container, focusScope.paused]);
-  React15.useEffect(() => {
-    if (container) {
-      focusScopesStack.add(focusScope);
-      const previouslyFocusedElement = document.activeElement;
-      const hasFocusedCandidate = container.contains(previouslyFocusedElement);
-      if (!hasFocusedCandidate) {
-        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
-        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
-        container.dispatchEvent(mountEvent);
-        if (!mountEvent.defaultPrevented) {
-          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
-          if (document.activeElement === previouslyFocusedElement) {
-            focus(container);
-          }
-        }
-      }
-      return () => {
-        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
-        setTimeout(() => {
-          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
-          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-          container.dispatchEvent(unmountEvent);
-          if (!unmountEvent.defaultPrevented) {
-            focus(previouslyFocusedElement ?? document.body, { select: true });
-          }
-          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-          focusScopesStack.remove(focusScope);
-        }, 0);
-      };
-    }
-  }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React15.useCallback(
-    (event) => {
-      if (!loop && !trapped) return;
-      if (focusScope.paused) return;
-      const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
-      const focusedElement = document.activeElement;
-      if (isTabKey && focusedElement) {
-        const container2 = event.currentTarget;
-        const [first, last] = getTabbableEdges(container2);
-        const hasTabbableElementsInside = first && last;
-        if (!hasTabbableElementsInside) {
-          if (focusedElement === container2) event.preventDefault();
-        } else {
-          if (!event.shiftKey && focusedElement === last) {
-            event.preventDefault();
-            if (loop) focus(first, { select: true });
-          } else if (event.shiftKey && focusedElement === first) {
-            event.preventDefault();
-            if (loop) focus(last, { select: true });
-          }
-        }
-      }
-    },
-    [loop, trapped, focusScope.paused]
-  );
-  return /* @__PURE__ */ jsx8(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
-});
-FocusScope.displayName = FOCUS_SCOPE_NAME;
-function focusFirst(candidates, { select = false } = {}) {
-  const previouslyFocusedElement = document.activeElement;
-  for (const candidate of candidates) {
-    focus(candidate, { select });
-    if (document.activeElement !== previouslyFocusedElement) return;
-  }
-}
-function getTabbableEdges(container) {
-  const candidates = getTabbableCandidates(container);
-  const first = findVisible(candidates, container);
-  const last = findVisible(candidates.reverse(), container);
-  return [first, last];
-}
-function getTabbableCandidates(container) {
-  const nodes = [];
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (node) => {
-      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
-      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
-      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-    }
-  });
-  while (walker.nextNode()) nodes.push(walker.currentNode);
-  return nodes;
-}
-function findVisible(elements, container) {
-  for (const element of elements) {
-    if (!isHidden(element, { upTo: container })) return element;
-  }
-}
-function isHidden(node, { upTo }) {
-  if (getComputedStyle(node).visibility === "hidden") return true;
-  while (node) {
-    if (upTo !== void 0 && node === upTo) return false;
-    if (getComputedStyle(node).display === "none") return true;
-    node = node.parentElement;
-  }
-  return false;
-}
-function isSelectableInput(element) {
-  return element instanceof HTMLInputElement && "select" in element;
-}
-function focus(element, { select = false } = {}) {
-  if (element && element.focus) {
-    const previouslyFocusedElement = document.activeElement;
-    element.focus({ preventScroll: true });
-    if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
-      element.select();
-  }
-}
-var focusScopesStack = createFocusScopesStack();
-function createFocusScopesStack() {
-  let stack = [];
-  return {
-    add(focusScope) {
-      const activeFocusScope = stack[0];
-      if (focusScope !== activeFocusScope) {
-        activeFocusScope?.pause();
-      }
-      stack = arrayRemove(stack, focusScope);
-      stack.unshift(focusScope);
-    },
-    remove(focusScope) {
-      stack = arrayRemove(stack, focusScope);
-      stack[0]?.resume();
-    }
-  };
-}
-function arrayRemove(array, item) {
-  const updatedArray = [...array];
-  const index = updatedArray.indexOf(item);
-  if (index !== -1) {
-    updatedArray.splice(index, 1);
-  }
-  return updatedArray;
-}
-function removeLinks(items) {
-  return items.filter((item) => item.tagName !== "A");
-}
-
-// ../../node_modules/@radix-ui/react-portal/dist/index.mjs
-import * as React16 from "react";
-import ReactDOM2 from "react-dom";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var PORTAL_NAME = "Portal";
-var Portal = React16.forwardRef((props, forwardedRef) => {
-  const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React16.useState(false);
-  useLayoutEffect2(() => setMounted(true), []);
-  const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? ReactDOM2.createPortal(/* @__PURE__ */ jsx9(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
-});
-Portal.displayName = PORTAL_NAME;
-
-// ../../node_modules/@radix-ui/react-presence/dist/index.mjs
-import * as React23 from "react";
-import * as React17 from "react";
-function useStateMachine(initialState, machine) {
-  return React17.useReducer((state, event) => {
-    const nextState = machine[state][event];
-    return nextState ?? state;
-  }, initialState);
-}
-var Presence = (props) => {
-  const { present, children } = props;
-  const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React23.Children.only(children);
-  const ref = useComposedRefs(presence.ref, getElementRef2(child));
-  const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React23.cloneElement(child, { ref }) : null;
-};
-Presence.displayName = "Presence";
-function usePresence(present) {
-  const [node, setNode] = React23.useState();
-  const stylesRef = React23.useRef(null);
-  const prevPresentRef = React23.useRef(present);
-  const prevAnimationNameRef = React23.useRef("none");
-  const initialState = present ? "mounted" : "unmounted";
-  const [state, send] = useStateMachine(initialState, {
-    mounted: {
-      UNMOUNT: "unmounted",
-      ANIMATION_OUT: "unmountSuspended"
-    },
-    unmountSuspended: {
-      MOUNT: "mounted",
-      ANIMATION_END: "unmounted"
-    },
-    unmounted: {
-      MOUNT: "mounted"
-    }
-  });
-  React23.useEffect(() => {
-    const currentAnimationName = getAnimationName(stylesRef.current);
-    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
-  }, [state]);
-  useLayoutEffect2(() => {
-    const styles = stylesRef.current;
-    const wasPresent = prevPresentRef.current;
-    const hasPresentChanged = wasPresent !== present;
-    if (hasPresentChanged) {
-      const prevAnimationName = prevAnimationNameRef.current;
-      const currentAnimationName = getAnimationName(styles);
-      if (present) {
-        send("MOUNT");
-      } else if (currentAnimationName === "none" || styles?.display === "none") {
-        send("UNMOUNT");
-      } else {
-        const isAnimating = prevAnimationName !== currentAnimationName;
-        if (wasPresent && isAnimating) {
-          send("ANIMATION_OUT");
-        } else {
-          send("UNMOUNT");
-        }
-      }
-      prevPresentRef.current = present;
-    }
-  }, [present, send]);
-  useLayoutEffect2(() => {
-    if (node) {
-      let timeoutId;
-      const ownerWindow = node.ownerDocument.defaultView ?? window;
-      const handleAnimationEnd = (event) => {
-        const currentAnimationName = getAnimationName(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
-        if (event.target === node && isCurrentAnimation) {
-          send("ANIMATION_END");
-          if (!prevPresentRef.current) {
-            const currentFillMode = node.style.animationFillMode;
-            node.style.animationFillMode = "forwards";
-            timeoutId = ownerWindow.setTimeout(() => {
-              if (node.style.animationFillMode === "forwards") {
-                node.style.animationFillMode = currentFillMode;
-              }
-            });
-          }
-        }
-      };
-      const handleAnimationStart = (event) => {
-        if (event.target === node) {
-          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
-        }
-      };
-      node.addEventListener("animationstart", handleAnimationStart);
-      node.addEventListener("animationcancel", handleAnimationEnd);
-      node.addEventListener("animationend", handleAnimationEnd);
-      return () => {
-        ownerWindow.clearTimeout(timeoutId);
-        node.removeEventListener("animationstart", handleAnimationStart);
-        node.removeEventListener("animationcancel", handleAnimationEnd);
-        node.removeEventListener("animationend", handleAnimationEnd);
-      };
-    } else {
-      send("ANIMATION_END");
-    }
-  }, [node, send]);
-  return {
-    isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React23.useCallback((node2) => {
-      stylesRef.current = node2 ? getComputedStyle(node2) : null;
-      setNode(node2);
-    }, [])
-  };
-}
-function getAnimationName(styles) {
-  return styles?.animationName || "none";
-}
-function getElementRef2(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-// ../../node_modules/@radix-ui/react-focus-guards/dist/index.mjs
-import * as React18 from "react";
-var count2 = 0;
-function useFocusGuards() {
-  React18.useEffect(() => {
-    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
-    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
-    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
-    count2++;
-    return () => {
-      if (count2 === 1) {
-        document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
-      }
-      count2--;
-    };
-  }, []);
-}
-function createFocusGuard() {
-  const element = document.createElement("span");
-  element.setAttribute("data-radix-focus-guard", "");
-  element.tabIndex = 0;
-  element.style.outline = "none";
-  element.style.opacity = "0";
-  element.style.position = "fixed";
-  element.style.pointerEvents = "none";
-  return element;
-}
-
-// ../../node_modules/@radix-ui/react-dialog/dist/index.mjs
-import { RemoveScroll } from "react-remove-scroll";
-
-// ../../node_modules/aria-hidden/dist/es2015/index.js
-var getDefaultParent = function(originalTarget) {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
-  return sampleTarget.ownerDocument.body;
-};
-var counterMap = /* @__PURE__ */ new WeakMap();
-var uncontrolledNodes = /* @__PURE__ */ new WeakMap();
-var markerMap = {};
-var lockCount = 0;
-var unwrapHost = function(node) {
-  return node && (node.host || unwrapHost(node.parentNode));
-};
-var correctTargets = function(parent, targets) {
-  return targets.map(function(target) {
-    if (parent.contains(target)) {
-      return target;
-    }
-    var correctedTarget = unwrapHost(target);
-    if (correctedTarget && parent.contains(correctedTarget)) {
-      return correctedTarget;
-    }
-    console.error("aria-hidden", target, "in not contained inside", parent, ". Doing nothing");
-    return null;
-  }).filter(function(x) {
-    return Boolean(x);
-  });
-};
-var applyAttributeToOthers = function(originalTarget, parentNode, markerName, controlAttribute) {
-  var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
-  if (!markerMap[markerName]) {
-    markerMap[markerName] = /* @__PURE__ */ new WeakMap();
-  }
-  var markerCounter = markerMap[markerName];
-  var hiddenNodes = [];
-  var elementsToKeep = /* @__PURE__ */ new Set();
-  var elementsToStop = new Set(targets);
-  var keep = function(el) {
-    if (!el || elementsToKeep.has(el)) {
-      return;
-    }
-    elementsToKeep.add(el);
-    keep(el.parentNode);
-  };
-  targets.forEach(keep);
-  var deep = function(parent) {
-    if (!parent || elementsToStop.has(parent)) {
-      return;
-    }
-    Array.prototype.forEach.call(parent.children, function(node) {
-      if (elementsToKeep.has(node)) {
-        deep(node);
-      } else {
-        try {
-          var attr = node.getAttribute(controlAttribute);
-          var alreadyHidden = attr !== null && attr !== "false";
-          var counterValue = (counterMap.get(node) || 0) + 1;
-          var markerValue = (markerCounter.get(node) || 0) + 1;
-          counterMap.set(node, counterValue);
-          markerCounter.set(node, markerValue);
-          hiddenNodes.push(node);
-          if (counterValue === 1 && alreadyHidden) {
-            uncontrolledNodes.set(node, true);
-          }
-          if (markerValue === 1) {
-            node.setAttribute(markerName, "true");
-          }
-          if (!alreadyHidden) {
-            node.setAttribute(controlAttribute, "true");
-          }
-        } catch (e) {
-          console.error("aria-hidden: cannot operate on ", node, e);
-        }
-      }
-    });
-  };
-  deep(parentNode);
-  elementsToKeep.clear();
-  lockCount++;
-  return function() {
-    hiddenNodes.forEach(function(node) {
-      var counterValue = counterMap.get(node) - 1;
-      var markerValue = markerCounter.get(node) - 1;
-      counterMap.set(node, counterValue);
-      markerCounter.set(node, markerValue);
-      if (!counterValue) {
-        if (!uncontrolledNodes.has(node)) {
-          node.removeAttribute(controlAttribute);
-        }
-        uncontrolledNodes.delete(node);
-      }
-      if (!markerValue) {
-        node.removeAttribute(markerName);
-      }
-    });
-    lockCount--;
-    if (!lockCount) {
-      counterMap = /* @__PURE__ */ new WeakMap();
-      counterMap = /* @__PURE__ */ new WeakMap();
-      uncontrolledNodes = /* @__PURE__ */ new WeakMap();
-      markerMap = {};
-    }
-  };
-};
-var hideOthers = function(originalTarget, parentNode, markerName) {
-  if (markerName === void 0) {
-    markerName = "data-aria-hidden";
-  }
-  var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
-  var activeParentNode = parentNode || getDefaultParent(originalTarget);
-  if (!activeParentNode) {
-    return function() {
-      return null;
-    };
-  }
-  targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll("[aria-live], script")));
-  return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
-};
-
-// ../../node_modules/@radix-ui/react-dialog/dist/index.mjs
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-var DIALOG_NAME = "Dialog";
-var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
-var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
-var Dialog = (props) => {
-  const {
-    __scopeDialog,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    modal = true
-  } = props;
-  const triggerRef = React19.useRef(null);
-  const contentRef = React19.useRef(null);
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen ?? false,
-    onChange: onOpenChange,
-    caller: DIALOG_NAME
-  });
-  return /* @__PURE__ */ jsx10(
-    DialogProvider,
-    {
-      scope: __scopeDialog,
-      triggerRef,
-      contentRef,
-      contentId: useId(),
-      titleId: useId(),
-      descriptionId: useId(),
-      open,
-      onOpenChange: setOpen,
-      onOpenToggle: React19.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-      modal,
-      children
-    }
-  );
-};
-Dialog.displayName = DIALOG_NAME;
-var TRIGGER_NAME = "DialogTrigger";
-var DialogTrigger = React19.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...triggerProps } = props;
-    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
-    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-    return /* @__PURE__ */ jsx10(
-      Primitive.button,
-      {
-        type: "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": context.open,
-        "aria-controls": context.contentId,
-        "data-state": getState(context.open),
-        ...triggerProps,
-        ref: composedTriggerRef,
-        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
-      }
-    );
-  }
-);
-DialogTrigger.displayName = TRIGGER_NAME;
-var PORTAL_NAME2 = "DialogPortal";
-var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME2, {
-  forceMount: void 0
-});
-var DialogPortal = (props) => {
-  const { __scopeDialog, forceMount, children, container } = props;
-  const context = useDialogContext(PORTAL_NAME2, __scopeDialog);
-  return /* @__PURE__ */ jsx10(PortalProvider, { scope: __scopeDialog, forceMount, children: React19.Children.map(children, (child) => /* @__PURE__ */ jsx10(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx10(Portal, { asChild: true, container, children: child }) })) });
-};
-DialogPortal.displayName = PORTAL_NAME2;
-var OVERLAY_NAME = "DialogOverlay";
-var DialogOverlay = React19.forwardRef(
-  (props, forwardedRef) => {
-    const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
-    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
-    const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
-    return context.modal ? /* @__PURE__ */ jsx10(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx10(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
-  }
-);
-DialogOverlay.displayName = OVERLAY_NAME;
-var Slot = createSlot("DialogOverlay.RemoveScroll");
-var DialogOverlayImpl = React19.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...overlayProps } = props;
-    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
-    return (
-      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
-      // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ jsx10(RemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx10(
-        Primitive.div,
-        {
-          "data-state": getState(context.open),
-          ...overlayProps,
-          ref: forwardedRef,
-          style: { pointerEvents: "auto", ...overlayProps.style }
-        }
-      ) })
-    );
-  }
-);
-var CONTENT_NAME = "DialogContent";
-var DialogContent = React19.forwardRef(
-  (props, forwardedRef) => {
-    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
-    const { forceMount = portalContext.forceMount, ...contentProps } = props;
-    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
-    return /* @__PURE__ */ jsx10(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx10(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx10(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
-  }
-);
-DialogContent.displayName = CONTENT_NAME;
-var DialogContentModal = React19.forwardRef(
-  (props, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
-    const contentRef = React19.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
-    React19.useEffect(() => {
-      const content = contentRef.current;
-      if (content) return hideOthers(content);
-    }, []);
-    return /* @__PURE__ */ jsx10(
-      DialogContentImpl,
-      {
-        ...props,
-        ref: composedRefs,
-        trapFocus: context.open,
-        disableOutsidePointerEvents: true,
-        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
-          event.preventDefault();
-          context.triggerRef.current?.focus();
-        }),
-        onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
-          const originalEvent = event.detail.originalEvent;
-          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-          if (isRightClick) event.preventDefault();
-        }),
-        onFocusOutside: composeEventHandlers(
-          props.onFocusOutside,
-          (event) => event.preventDefault()
-        )
-      }
-    );
-  }
-);
-var DialogContentNonModal = React19.forwardRef(
-  (props, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
-    const hasInteractedOutsideRef = React19.useRef(false);
-    const hasPointerDownOutsideRef = React19.useRef(false);
-    return /* @__PURE__ */ jsx10(
-      DialogContentImpl,
-      {
-        ...props,
-        ref: forwardedRef,
-        trapFocus: false,
-        disableOutsidePointerEvents: false,
-        onCloseAutoFocus: (event) => {
-          props.onCloseAutoFocus?.(event);
-          if (!event.defaultPrevented) {
-            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
-            event.preventDefault();
-          }
-          hasInteractedOutsideRef.current = false;
-          hasPointerDownOutsideRef.current = false;
-        },
-        onInteractOutside: (event) => {
-          props.onInteractOutside?.(event);
-          if (!event.defaultPrevented) {
-            hasInteractedOutsideRef.current = true;
-            if (event.detail.originalEvent.type === "pointerdown") {
-              hasPointerDownOutsideRef.current = true;
-            }
-          }
-          const target = event.target;
-          const targetIsTrigger = context.triggerRef.current?.contains(target);
-          if (targetIsTrigger) event.preventDefault();
-          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
-            event.preventDefault();
-          }
-        }
-      }
-    );
-  }
-);
-var DialogContentImpl = React19.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
-    const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-    const contentRef = React19.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, contentRef);
-    useFocusGuards();
-    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-      /* @__PURE__ */ jsx10(
-        FocusScope,
-        {
-          asChild: true,
-          loop: true,
-          trapped: trapFocus,
-          onMountAutoFocus: onOpenAutoFocus,
-          onUnmountAutoFocus: onCloseAutoFocus,
-          children: /* @__PURE__ */ jsx10(
-            DismissableLayer,
-            {
-              role: "dialog",
-              id: context.contentId,
-              "aria-describedby": context.descriptionId,
-              "aria-labelledby": context.titleId,
-              "data-state": getState(context.open),
-              ...contentProps,
-              ref: composedRefs,
-              onDismiss: () => context.onOpenChange(false)
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs3(Fragment3, { children: [
-        /* @__PURE__ */ jsx10(TitleWarning, { titleId: context.titleId }),
-        /* @__PURE__ */ jsx10(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
-      ] })
-    ] });
-  }
-);
-var TITLE_NAME = "DialogTitle";
-var DialogTitle = React19.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...titleProps } = props;
-    const context = useDialogContext(TITLE_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx10(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
-  }
-);
-DialogTitle.displayName = TITLE_NAME;
-var DESCRIPTION_NAME = "DialogDescription";
-var DialogDescription = React19.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...descriptionProps } = props;
-    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx10(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
-  }
-);
-DialogDescription.displayName = DESCRIPTION_NAME;
-var CLOSE_NAME = "DialogClose";
-var DialogClose = React19.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...closeProps } = props;
-    const context = useDialogContext(CLOSE_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx10(
-      Primitive.button,
-      {
-        type: "button",
-        ...closeProps,
-        ref: forwardedRef,
-        onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
-      }
-    );
-  }
-);
-DialogClose.displayName = CLOSE_NAME;
-function getState(open) {
-  return open ? "open" : "closed";
-}
-var TITLE_WARNING_NAME = "DialogTitleWarning";
-var [WarningProvider, useWarningContext] = createContext22(TITLE_WARNING_NAME, {
-  contentName: CONTENT_NAME,
-  titleName: TITLE_NAME,
-  docsSlug: "dialog"
-});
-var TitleWarning = ({ titleId }) => {
-  const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
-  const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
-
-If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
-
-For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
-  React19.useEffect(() => {
-    if (titleId) {
-      const hasTitle = document.getElementById(titleId);
-      if (!hasTitle) console.error(MESSAGE);
-    }
-  }, [MESSAGE, titleId]);
-  return null;
-};
-var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
-var DescriptionWarning = ({ contentRef, descriptionId }) => {
-  const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
-  const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
-  React19.useEffect(() => {
-    const describedById = contentRef.current?.getAttribute("aria-describedby");
-    if (descriptionId && describedById) {
-      const hasDescription = document.getElementById(descriptionId);
-      if (!hasDescription) console.warn(MESSAGE);
-    }
-  }, [MESSAGE, contentRef, descriptionId]);
-  return null;
-};
-var Trigger = DialogTrigger;
-
-// src/components/PeekInTrigger.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
 var PeekInTrigger = ({
   children
-}) => {
-  return /* @__PURE__ */ jsx11(Trigger, { asChild: true, children });
-};
+}) => /* @__PURE__ */ jsx5(Fragment2, { children });
 PeekInTrigger.displayName = "PeekInTrigger";
 
 // src/usePeekInPanelState.ts
-import * as React21 from "react";
+import * as React7 from "react";
 function usePeekInPanelState(panel) {
   const panelProps = panel?.props;
   const isControlled = panelProps?.open !== void 0;
   const onOpenChange = panelProps?.onOpenChange;
-  const [internalOpen, setInternalOpen] = React21.useState(
+  const [internalOpen, setInternalOpen] = React7.useState(
     panelProps?.defaultOpen ?? true
   );
   const panelOpen = isControlled ? panelProps.open : internalOpen;
-  const setPanelOpen = React21.useCallback(
+  const setPanelOpen = React7.useCallback(
     (next) => {
       const value = typeof next === "function" ? next(panelOpen) : next;
       if (!isControlled) setInternalOpen(value);
@@ -1595,17 +265,18 @@ function usePeekInPanelState(panel) {
 }
 
 // src/PeekInStyled.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function getChildByType(children, type) {
-  const childArray = React24.Children.toArray(children);
+  const childArray = React8.Children.toArray(children);
   return childArray.find(
-    (child) => React24.isValidElement(child) && child.type === type
+    (child) => React8.isValidElement(child) && child.type === type
   ) || null;
 }
 var PeekInStyled = ({
   open,
   defaultOpen,
   onOpenChange,
+  "aria-label": ariaLabelProp,
   closeButtonAriaLabel = "Close",
   actions,
   panelToggle,
@@ -1620,20 +291,41 @@ var PeekInStyled = ({
 }) => {
   const header = getChildByType(children, PeekInHeader);
   const content = getChildByType(children, PeekInContent);
+  const footer = getChildByType(children, PeekInFooter);
   const panel = getChildByType(children, PeekInPanel);
   const trigger = getChildByType(children, PeekInTrigger);
   const { panelOpen, setPanelOpen } = usePeekInPanelState(panel);
-  const panelId = React24.useId();
-  const handleClose = React24.useCallback(() => {
-    onOpenChange?.(false);
-  }, [onOpenChange]);
-  const contextValue = React24.useMemo(
+  const panelId = React8.useId();
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = React8.useState(defaultOpen ?? false);
+  const effectiveOpen = isControlled ? open ?? false : internalOpen;
+  const handleOpenChange = React8.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleClose = React8.useCallback(
+    () => handleOpenChange(false),
+    [handleOpenChange]
+  );
+  const contextValue = React8.useMemo(
     () => ({ onClose: handleClose, panelOpen, setPanelOpen, panelId }),
     [handleClose, panelOpen, setPanelOpen, panelId]
   );
-  const ariaLabel = typeof header?.props?.title === "string" ? header.props.title : "Dialog";
+  const headerTitle = header?.props?.title;
+  const headerSubtitle = header?.props?.subtitle;
+  const ariaLabel = ariaLabelProp ?? (typeof headerTitle === "string" ? headerTitle : void 0) ?? (typeof headerSubtitle === "string" ? headerSubtitle : void 0);
+  React8.useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && !ariaLabel) {
+      console.warn(
+        "PeekIn: no accessible name was resolved. Pass `aria-label`, or give PeekInHeader a string `title`."
+      );
+    }
+  }, [ariaLabel]);
   const triggerElement = trigger ? trigger.props.children : void 0;
-  const modalActions = React24.useMemo(() => {
+  const modalActions = React8.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1649,7 +341,7 @@ var PeekInStyled = ({
     }
     return result.length > 0 ? result : void 0;
   }, [panelToggle, panel, actions, panelOpen, panelId]);
-  const drawerActions = React24.useMemo(() => {
+  const drawerActions = React8.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1666,19 +358,8 @@ var PeekInStyled = ({
     return result.length > 0 ? result : void 0;
   }, [panelToggle, panel, actions, panelOpen, panelId]);
   const isMobile = useIsMobile2();
-  const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React24.useState(defaultOpen ?? false);
-  const effectiveMobileOpen = isControlled ? open ?? false : internalOpen;
-  const handleMobileOpen = React24.useCallback(() => {
-    if (!isControlled) setInternalOpen(true);
-    onOpenChange?.(true);
-  }, [isControlled, onOpenChange]);
-  const handleMobileClose = React24.useCallback(() => {
-    if (!isControlled) setInternalOpen(false);
-    onOpenChange?.(false);
-  }, [isControlled, onOpenChange]);
-  const mobileTrigger = trigger ? React24.cloneElement(trigger.props.children, {
-    onClick: handleMobileOpen
+  const mobileTrigger = trigger ? React8.cloneElement(trigger.props.children, {
+    onClick: () => handleOpenChange(true)
   }) : void 0;
   if (isMobile) {
     return /* @__PURE__ */ jsxs4(PeekInContext.Provider, { value: contextValue, children: [
@@ -1686,8 +367,8 @@ var PeekInStyled = ({
       /* @__PURE__ */ jsxs4(
         Drawer2,
         {
-          open: effectiveMobileOpen,
-          onClose: handleMobileClose,
+          open: effectiveOpen,
+          onClose: handleClose,
           direction: "bottom",
           closeButtonLabel: closeButtonAriaLabel,
           snapPoints,
@@ -1700,11 +381,11 @@ var PeekInStyled = ({
           actionsInHeader,
           "aria-label": ariaLabel,
           children: [
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx6(
               Drawer2.Header,
               {
                 render: (ctx) => /* @__PURE__ */ jsxs4(
-                  Box4,
+                  Box3,
                   {
                     display: "flex",
                     alignItems: "center",
@@ -1713,58 +394,70 @@ var PeekInStyled = ({
                     px: 450,
                     flex: "0 0 auto",
                     children: [
-                      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", gap: 300, children: [
-                        header?.props?.onBack && /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsxs4(Box3, { display: "flex", alignItems: "center", gap: 300, children: [
+                        header?.props?.onBack && /* @__PURE__ */ jsx6(
                           Button2,
                           {
                             appearance: "unstyled",
                             onClick: header.props.onBack,
                             "aria-label": "Back",
                             "data-qa-peek-in-back": true,
-                            children: /* @__PURE__ */ jsx12(Icon2, { name: "arrow-left-outline", size: "small" })
+                            children: /* @__PURE__ */ jsx6(Icon2, { name: "arrow-left-outline", size: "small" })
                           }
                         ),
-                        /* @__PURE__ */ jsx12(
-                          Text2,
-                          {
-                            as: "h2",
-                            fontSize: 400,
-                            fontWeight: "semibold",
-                            color: "text.headline",
-                            "data-qa-peek-in-title": true,
-                            children: header?.props?.title
-                          }
-                        )
+                        /* @__PURE__ */ jsxs4(Box3, { display: "flex", flexDirection: "column", children: [
+                          /* @__PURE__ */ jsx6(
+                            Text2,
+                            {
+                              as: "h2",
+                              fontSize: 400,
+                              fontWeight: "semibold",
+                              color: "text.headline",
+                              "data-qa-peek-in-title": true,
+                              children: header?.props?.title
+                            }
+                          ),
+                          header?.props?.subtitle && /* @__PURE__ */ jsx6(
+                            Text2,
+                            {
+                              as: "div",
+                              fontSize: 200,
+                              color: "text.body",
+                              "data-qa-peek-in-subtitle": true,
+                              children: header.props.subtitle
+                            }
+                          )
+                        ] })
                       ] }),
-                      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", gap: 200, children: [
+                      /* @__PURE__ */ jsxs4(Box3, { display: "flex", alignItems: "center", gap: 200, children: [
                         header?.props?.children,
-                        actionsInHeader && panelToggle && panel && /* @__PURE__ */ jsx12(
+                        actionsInHeader && panelToggle && panel && /* @__PURE__ */ jsx6(
                           Button2,
                           {
                             appearance: "pill",
                             "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
                             onClick: () => setPanelOpen((p) => !p),
-                            children: /* @__PURE__ */ jsx12(Icon2, { "aria-hidden": true, name: panelToggle.iconName })
+                            children: /* @__PURE__ */ jsx6(Icon2, { "aria-hidden": true, name: panelToggle.iconName })
                           }
                         ),
-                        actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ jsx12(
+                        actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ jsx6(
                           Button2,
                           {
                             appearance: "pill",
                             "aria-label": action["aria-label"],
                             onClick: action.onClick,
                             disabled: action.disabled,
-                            children: action.iconName && /* @__PURE__ */ jsx12(Icon2, { "aria-hidden": true, name: action.iconName })
+                            children: action.iconName && /* @__PURE__ */ jsx6(Icon2, { "aria-hidden": true, name: action.iconName })
                           },
                           i
                         )),
-                        (actionsInHeader || !drawerActions) && /* @__PURE__ */ jsx12(
+                        (actionsInHeader || !drawerActions) && /* @__PURE__ */ jsx6(
                           Button2,
                           {
                             appearance: "pill",
                             "aria-label": ctx.closeButtonLabel,
                             onClick: ctx.onClose,
-                            children: /* @__PURE__ */ jsx12(Icon2, { "aria-hidden": true, name: "x-outline" })
+                            children: /* @__PURE__ */ jsx6(Icon2, { "aria-hidden": true, name: "x-outline" })
                           }
                         )
                       ] })
@@ -1774,18 +467,18 @@ var PeekInStyled = ({
               }
             ),
             content,
+            footer,
             panel
           ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsx12(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx6(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6(
     Modal,
     {
-      open,
-      defaultOpen,
-      onOpenChange,
+      open: effectiveOpen,
+      onOpenChange: handleOpenChange,
       width: PEEK_IN_WIDTH,
       height: PEEK_IN_HEIGHT,
       closeButtonAriaLabel,
@@ -1795,7 +488,7 @@ var PeekInStyled = ({
       bg: "transparent",
       children: /* @__PURE__ */ jsxs4(ModalBody, { padding: 0, display: "flex", overflow: "hidden", children: [
         /* @__PURE__ */ jsxs4(
-          Box4,
+          Box3,
           {
             display: "flex",
             flexDirection: "column",
@@ -1805,7 +498,8 @@ var PeekInStyled = ({
             borderRadius: 800,
             children: [
               header,
-              content
+              content,
+              footer
             ]
           }
         ),
@@ -1817,24 +511,25 @@ var PeekInStyled = ({
 PeekInStyled.displayName = "PeekIn";
 
 // src/PeekInTailwind.tsx
-import * as React25 from "react";
+import * as React9 from "react";
 import Button3 from "@sproutsocial/seeds-react-button";
 import Drawer3 from "@sproutsocial/seeds-react-drawer";
 import Icon3 from "@sproutsocial/seeds-react-icon";
 import Text3 from "@sproutsocial/seeds-react-text";
 import { useIsMobile as useIsMobile3 } from "@sproutsocial/seeds-react-hooks";
 import { Modal as Modal2, ModalBody as ModalBody2 } from "@sproutsocial/seeds-react-modal/v2";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function getChildByType2(children, type) {
-  const childArray = React25.Children.toArray(children);
+  const childArray = React9.Children.toArray(children);
   return childArray.find(
-    (child) => React25.isValidElement(child) && child.type === type
+    (child) => React9.isValidElement(child) && child.type === type
   ) || null;
 }
 var PeekInTailwind = ({
   open,
   defaultOpen,
   onOpenChange,
+  "aria-label": ariaLabelProp,
   closeButtonAriaLabel = "Close",
   actions,
   panelToggle,
@@ -1849,20 +544,41 @@ var PeekInTailwind = ({
 }) => {
   const header = getChildByType2(children, PeekInHeader);
   const content = getChildByType2(children, PeekInContent);
+  const footer = getChildByType2(children, PeekInFooter);
   const panel = getChildByType2(children, PeekInPanel);
   const trigger = getChildByType2(children, PeekInTrigger);
   const { panelOpen, setPanelOpen } = usePeekInPanelState(panel);
-  const panelId = React25.useId();
-  const handleClose = React25.useCallback(() => {
-    onOpenChange?.(false);
-  }, [onOpenChange]);
-  const contextValue = React25.useMemo(
+  const panelId = React9.useId();
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = React9.useState(defaultOpen ?? false);
+  const effectiveOpen = isControlled ? open ?? false : internalOpen;
+  const handleOpenChange = React9.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleClose = React9.useCallback(
+    () => handleOpenChange(false),
+    [handleOpenChange]
+  );
+  const contextValue = React9.useMemo(
     () => ({ onClose: handleClose, panelOpen, setPanelOpen, panelId }),
     [handleClose, panelOpen, setPanelOpen, panelId]
   );
-  const ariaLabel = typeof header?.props?.title === "string" ? header.props.title : "Dialog";
+  const headerTitle = header?.props?.title;
+  const headerSubtitle = header?.props?.subtitle;
+  const ariaLabel = ariaLabelProp ?? (typeof headerTitle === "string" ? headerTitle : void 0) ?? (typeof headerSubtitle === "string" ? headerSubtitle : void 0);
+  React9.useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && !ariaLabel) {
+      console.warn(
+        "PeekIn: no accessible name was resolved. Pass `aria-label`, or give PeekInHeader a string `title`."
+      );
+    }
+  }, [ariaLabel]);
   const triggerElement = trigger ? trigger.props.children : void 0;
-  const modalActions = React25.useMemo(() => {
+  const modalActions = React9.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1878,7 +594,7 @@ var PeekInTailwind = ({
     }
     return result.length > 0 ? result : void 0;
   }, [panelToggle, panel, actions, panelOpen, panelId]);
-  const drawerActions = React25.useMemo(() => {
+  const drawerActions = React9.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1895,19 +611,8 @@ var PeekInTailwind = ({
     return result.length > 0 ? result : void 0;
   }, [panelToggle, panel, actions, panelOpen, panelId]);
   const isMobile = useIsMobile3();
-  const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React25.useState(defaultOpen ?? false);
-  const effectiveMobileOpen = isControlled ? open ?? false : internalOpen;
-  const handleMobileOpen = React25.useCallback(() => {
-    if (!isControlled) setInternalOpen(true);
-    onOpenChange?.(true);
-  }, [isControlled, onOpenChange]);
-  const handleMobileClose = React25.useCallback(() => {
-    if (!isControlled) setInternalOpen(false);
-    onOpenChange?.(false);
-  }, [isControlled, onOpenChange]);
-  const mobileTrigger = trigger ? React25.cloneElement(trigger.props.children, {
-    onClick: handleMobileOpen
+  const mobileTrigger = trigger ? React9.cloneElement(trigger.props.children, {
+    onClick: () => handleOpenChange(true)
   }) : void 0;
   if (isMobile) {
     return /* @__PURE__ */ jsxs5(PeekInContext.Provider, { value: contextValue, children: [
@@ -1915,8 +620,8 @@ var PeekInTailwind = ({
       /* @__PURE__ */ jsxs5(
         Drawer3,
         {
-          open: effectiveMobileOpen,
-          onClose: handleMobileClose,
+          open: effectiveOpen,
+          onClose: handleClose,
           direction: "bottom",
           closeButtonLabel: closeButtonAriaLabel,
           snapPoints,
@@ -1929,62 +634,74 @@ var PeekInTailwind = ({
           actionsInHeader,
           "aria-label": ariaLabel,
           children: [
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx7(
               Drawer3.Header,
               {
                 render: (ctx) => /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-drawer-header", children: [
                   /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-titlegroup", children: [
-                    header?.props?.onBack && /* @__PURE__ */ jsx13(
+                    header?.props?.onBack && /* @__PURE__ */ jsx7(
                       Button3,
                       {
                         appearance: "unstyled",
                         onClick: header.props.onBack,
                         "aria-label": "Back",
                         "data-qa-peek-in-back": true,
-                        children: /* @__PURE__ */ jsx13(Icon3, { name: "arrow-left-outline", size: "small" })
+                        children: /* @__PURE__ */ jsx7(Icon3, { name: "arrow-left-outline", size: "small" })
                       }
                     ),
-                    /* @__PURE__ */ jsx13(
-                      Text3,
-                      {
-                        as: "h2",
-                        fontSize: 400,
-                        fontWeight: "semibold",
-                        color: "text.headline",
-                        "data-qa-peek-in-title": true,
-                        children: header?.props?.title
-                      }
-                    )
+                    /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-titlestack", children: [
+                      /* @__PURE__ */ jsx7(
+                        Text3,
+                        {
+                          as: "h2",
+                          fontSize: 400,
+                          fontWeight: "semibold",
+                          color: "text.headline",
+                          "data-qa-peek-in-title": true,
+                          children: header?.props?.title
+                        }
+                      ),
+                      header?.props?.subtitle && /* @__PURE__ */ jsx7(
+                        Text3,
+                        {
+                          as: "div",
+                          fontSize: 200,
+                          color: "text.body",
+                          "data-qa-peek-in-subtitle": true,
+                          children: header.props.subtitle
+                        }
+                      )
+                    ] })
                   ] }),
                   /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-header-actions", children: [
                     header?.props?.children,
-                    actionsInHeader && panelToggle && panel && /* @__PURE__ */ jsx13(
+                    actionsInHeader && panelToggle && panel && /* @__PURE__ */ jsx7(
                       Button3,
                       {
                         appearance: "pill",
                         "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
                         onClick: () => setPanelOpen((p) => !p),
-                        children: /* @__PURE__ */ jsx13(Icon3, { "aria-hidden": true, name: panelToggle.iconName })
+                        children: /* @__PURE__ */ jsx7(Icon3, { "aria-hidden": true, name: panelToggle.iconName })
                       }
                     ),
-                    actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ jsx13(
+                    actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ jsx7(
                       Button3,
                       {
                         appearance: "pill",
                         "aria-label": action["aria-label"],
                         onClick: action.onClick,
                         disabled: action.disabled,
-                        children: action.iconName && /* @__PURE__ */ jsx13(Icon3, { "aria-hidden": true, name: action.iconName })
+                        children: action.iconName && /* @__PURE__ */ jsx7(Icon3, { "aria-hidden": true, name: action.iconName })
                       },
                       i
                     )),
-                    (actionsInHeader || !drawerActions) && /* @__PURE__ */ jsx13(
+                    (actionsInHeader || !drawerActions) && /* @__PURE__ */ jsx7(
                       Button3,
                       {
                         appearance: "pill",
                         "aria-label": ctx.closeButtonLabel,
                         onClick: ctx.onClose,
-                        children: /* @__PURE__ */ jsx13(Icon3, { "aria-hidden": true, name: "x-outline" })
+                        children: /* @__PURE__ */ jsx7(Icon3, { "aria-hidden": true, name: "x-outline" })
                       }
                     )
                   ] })
@@ -1992,18 +709,18 @@ var PeekInTailwind = ({
               }
             ),
             content,
+            footer,
             panel
           ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsx13(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx7(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(
     Modal2,
     {
-      open,
-      defaultOpen,
-      onOpenChange,
+      open: effectiveOpen,
+      onOpenChange: handleOpenChange,
       width: PEEK_IN_WIDTH,
       height: PEEK_IN_HEIGHT,
       closeButtonAriaLabel,
@@ -2014,7 +731,8 @@ var PeekInTailwind = ({
       children: /* @__PURE__ */ jsxs5(ModalBody2, { padding: 0, display: "flex", overflow: "hidden", children: [
         /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-main", children: [
           header,
-          content
+          content,
+          footer
         ] }),
         panel
       ] })
@@ -2024,22 +742,23 @@ var PeekInTailwind = ({
 PeekInTailwind.displayName = "PeekIn";
 
 // src/PeekInHybrid.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var PeekInHybrid = (props) => {
   if (hasStyledProps(props)) {
-    return /* @__PURE__ */ jsx14(PeekInStyled, { ...props });
+    return /* @__PURE__ */ jsx8(PeekInStyled, { ...props });
   }
-  return /* @__PURE__ */ jsx14(PeekInTailwind, { ...props });
+  return /* @__PURE__ */ jsx8(PeekInTailwind, { ...props });
 };
 PeekInHybrid.displayName = "PeekIn";
 
 // src/PeekIn.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var PeekIn = (props) => /* @__PURE__ */ jsx15(PeekInHybrid, { ...props });
+import { jsx as jsx9 } from "react/jsx-runtime";
+var PeekIn = (props) => /* @__PURE__ */ jsx9(PeekInHybrid, { ...props });
 PeekIn.displayName = "PeekIn";
 export {
   PeekIn,
   PeekInContent,
+  PeekInFooter,
   PeekInHeader,
   PeekInPanel,
   PeekInTrigger