@sproutsocial/seeds-react-panel 0.3.7 → 1.0.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     13.98 KB
-CJS dist/index.js.map 25.98 KB
-CJS ⚡️ Build success in 63ms
-ESM dist/esm/index.js     10.33 KB
-ESM dist/esm/index.js.map 25.64 KB
-ESM ⚡️ Build success in 63ms
+CJS dist/index.js     15.02 KB
+CJS dist/index.js.map 28.30 KB
+CJS ⚡️ Build success in 85ms
+ESM dist/esm/index.js     11.33 KB
+ESM dist/esm/index.js.map 27.96 KB
+ESM ⚡️ Build success in 85ms
 DTS Build start
-DTS ⚡️ Build success in 3708ms
-DTS dist/index.d.ts  8.35 KB
-DTS dist/index.d.mts 8.35 KB
-Done in 5.00s.
+DTS ⚡️ Build success in 4107ms
+DTS dist/index.d.ts  9.03 KB
+DTS dist/index.d.mts 9.03 KB
+Done in 5.72s.

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @sproutsocial/seeds-react-panel
 
+## 1.0.0
+
+### Major Changes
+
+- 54918f6: Add a `headerless` prop to `Panel`. When set, the panel renders children flush —
+  no built-in header/close button or content padding — and lets the children own
+  overflow scrolling. Use it for content that brings its own chrome; provide
+  `aria-label` for an accessible name. Defaults to `false`.
+
+  **Breaking:** `Panel` now automatically wraps children in `PanelContent` (padding,
+  scroll, flex layout). Consumers that previously wrapped children in `Panel.Content`
+  explicitly must remove the wrapper to avoid double-nesting.
+
+### Patch Changes
+
+- 54918f6: Fix side `Panel` overflowing its parent when given a vertical margin. The
+  container previously hardcoded `height: 100%`, which fills the parent's content
+  box but ignores the element's own margin — so a `mb`/`mt` pushed the panel's
+  edge (and any gap) off-screen in a `100vh` layout. It now uses
+  `align-self: stretch`, filling the flex-row parent's height while honoring its
+  own top/bottom margins, so spacing overrides (`mt`, `mb`, `mr`, `ml`, …) behave
+  correctly.
+- 54918f6: Fix the mobile bottom-sheet footer falling below the fold. On mobile, `Panel` now
+  wraps children in `Panel.Content` (matching the desktop path) so the body scrolls
+  within the sheet, and the footer is lifted clear of the Drawer popup's 3rem
+  overscroll "bleed" so its actions stay fully visible above the fold.
+
 ## 0.3.7
 
 ### Patch Changes

package/dist/esm/index.js

@@ -103,7 +103,7 @@ var PanelContainer = styled.aside`
   ${(props) => props.$direction === "bottom" ? css`
           width: 100%;
         ` : css`
-          height: 100%;
+          align-self: stretch;
         `}
 
   ${COMMON}
@@ -121,27 +121,41 @@ var PanelInner = styled.div`
   overflow: hidden;
 `;
 var Content = styled(Box2)`
-  overflow-y: auto;
+  overflow-y: ${({ $scroll = true }) => $scroll ? "auto" : "hidden"};
 `;
 var Footer = styled(Box2)`
   flex: 0 0 auto;
   overflow: hidden;
+  /*
+   * On mobile the Panel renders inside the Drawer's bottom sheet, whose popup
+   * deliberately bleeds 3rem (--bleed) below the viewport for elastic
+   * overscroll (see seeds-react-drawer/src/styles.ts). A footer pinned to the
+   * end of that popup would land inside the bleed and clip below the fold, so
+   * we lift it by the inherited --bleed; the gap left behind shows the popup's
+   * own background, so there is no visible seam. On desktop --bleed is unset,
+   * so the 0px fallback leaves the footer untouched.
+   */
+  margin-bottom: var(--bleed, 0px);
 `;
 
 // src/PanelContent.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var PanelContent = ({ children, ...rest }) => /* @__PURE__ */ jsx3(
-  Content,
-  {
-    flex: "1 1 auto",
-    minHeight: "0",
-    p: 450,
-    color: "text.body",
-    "data-panel-content": "",
-    ...rest,
-    children
-  }
-);
+var PanelContent = ({ children, ...rest }) => {
+  const { headerless } = usePanelContext();
+  return /* @__PURE__ */ jsx3(
+    Content,
+    {
+      flex: "1 1 auto",
+      minHeight: "0",
+      p: headerless ? 0 : 450,
+      $scroll: !headerless,
+      color: "text.body",
+      "data-panel-content": "",
+      ...rest,
+      children
+    }
+  );
+};
 PanelContent.displayName = "Panel.Content";
 
 // src/PanelFooter.tsx
@@ -221,6 +235,7 @@ var PanelComponent = ({
   children,
   closeButtonLabel,
   header,
+  headerless = false,
   footer,
   title,
   titleId,
@@ -245,17 +260,28 @@ var PanelComponent = ({
   const { isPanelOpen, closePanel } = panelContext;
   const isMobile = useIsMobile(mobileBreakpoint);
   const enrichedValue = React6.useMemo(
-    () => ({ ...panelContext, closeButtonLabel }),
-    [panelContext, closeButtonLabel]
+    () => ({ ...panelContext, closeButtonLabel, headerless }),
+    [panelContext, closeButtonLabel, headerless]
   );
   const prevChildrenRef = React6.useRef(null);
   if (isPanelOpen) {
     prevChildrenRef.current = children;
   }
   const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
-  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (header == null ? titleId : void 0);
+  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (!headerless && header == null ? titleId : void 0);
   if (isMobile) {
-    const shouldRenderActionsHeader = header == null && actionsInHeader === true && !!actions && actions.length > 0;
+    const shouldRenderActionsHeader = !headerless && header == null && actionsInHeader === true && !!actions && actions.length > 0;
+    let defaultMobileHeader = null;
+    if (!headerless) {
+      defaultMobileHeader = shouldRenderActionsHeader ? /* @__PURE__ */ jsx6(
+        PanelMobileActionsHeader,
+        {
+          title,
+          titleId,
+          actions
+        }
+      ) : /* @__PURE__ */ jsx6(Drawer2.Header, { title, id: titleId });
+    }
     return /* @__PURE__ */ jsx6(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ jsxs3(
       Drawer2,
       {
@@ -275,15 +301,8 @@ var PanelComponent = ({
         "aria-labelledby": effectiveAriaLabelledBy,
         "aria-label": ariaLabel,
         children: [
-          header ?? (shouldRenderActionsHeader ? /* @__PURE__ */ jsx6(
-            PanelMobileActionsHeader,
-            {
-              title,
-              titleId,
-              actions
-            }
-          ) : /* @__PURE__ */ jsx6(Drawer2.Header, { title, id: titleId })),
-          children,
+          header ?? defaultMobileHeader,
+          /* @__PURE__ */ jsx6(PanelContent, { children }),
           footer
         ]
       }
@@ -302,8 +321,8 @@ var PanelComponent = ({
       "aria-labelledby": effectiveAriaLabelledBy,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsxs3(PanelInner, { $direction: direction, $width: width, children: [
-        header ?? /* @__PURE__ */ jsx6(PanelHeader, { title, id: titleId }),
-        renderedChildren,
+        header ?? (headerless ? null : /* @__PURE__ */ jsx6(PanelHeader, { title, id: titleId })),
+        /* @__PURE__ */ jsx6(PanelContent, { children: renderedChildren }),
         footer
       ] })
     }

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Panel.tsx","../../src/PanelContext.tsx","../../src/PanelHeader.tsx","../../src/PanelCloseButton.tsx","../../src/PanelContent.tsx","../../src/styles.ts","../../src/PanelFooter.tsx","../../src/PanelMobileActionsHeader.tsx","../../src/PanelProvider.tsx","../../src/PanelTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport { useIsMobile } from \"@sproutsocial/seeds-react-hooks\";\nimport { usePanelContext, PanelContext } from \"./PanelContext\";\nimport { PanelHeader } from \"./PanelHeader\";\nimport { PanelContent } from \"./PanelContent\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport { PanelFooter } from \"./PanelFooter\";\nimport { PanelMobileActionsHeader } from \"./PanelMobileActionsHeader\";\nimport { PanelContainer, PanelInner } from \"./styles\";\nimport type { TypePanelProps, TypePanelContext } from \"./PanelTypes\";\n\nconst PanelComponent = ({\n  children,\n  closeButtonLabel,\n  header,\n  footer,\n  title,\n  titleId,\n  direction = \"right\",\n  width = 384,\n  gap = 4,\n  mobileBreakpoint,\n  zIndex,\n  id,\n  snapPoints,\n  defaultSnapPoint,\n  snapPoint,\n  onSnapPointChange,\n  snapToSequentialPoints,\n  actions,\n  actionsInHeader,\n  \"aria-labelledby\": ariaLabelledByProp,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: TypePanelProps) => {\n  const panelContext = usePanelContext();\n  const { isPanelOpen, closePanel } = panelContext;\n  const isMobile = useIsMobile(mobileBreakpoint);\n\n  // Expose closeButtonLabel through context so PanelCloseButton can read it\n  // without prop drilling — same pattern as DrawerContext.\n  const enrichedValue = React.useMemo<TypePanelContext>(\n    () => ({ ...panelContext, closeButtonLabel }),\n    [panelContext, closeButtonLabel]\n  );\n\n  // Freeze the last-rendered children during the collapse so consumers that\n  // conditionally render content don't produce an empty panel shell while the\n  // flex-basis animation runs.\n  const prevChildrenRef = React.useRef<React.ReactNode>(null);\n  if (isPanelOpen) {\n    prevChildrenRef.current = children;\n  }\n  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;\n\n  // When the consumer relies on the default header, its title element renders\n  // with `id={titleId}`. Auto-wire `aria-labelledby` so the dialog/aside has an\n  // accessible name without forcing every caller to repeat the id.\n  const effectiveAriaLabelledBy =\n    ariaLabelledByProp ?? (header == null ? titleId : undefined);\n\n  if (isMobile) {\n    // With `actionsInHeader`, Drawer suppresses the floating rail and expects\n    // the consumer to render the actions inside a custom header. Auto-compose\n    // one (title + action pills + close pill) when the consumer hasn't\n    // supplied their own header; otherwise we'd drop `actions` on the floor.\n    const shouldRenderActionsHeader =\n      header == null &&\n      actionsInHeader === true &&\n      !!actions &&\n      actions.length > 0;\n\n    return (\n      <PanelContext.Provider value={enrichedValue}>\n        <Drawer\n          {...rest}\n          open={isPanelOpen}\n          onClose={closePanel}\n          direction=\"bottom\"\n          closeButtonLabel={closeButtonLabel}\n          zIndex={zIndex}\n          snapPoints={snapPoints}\n          defaultSnapPoint={defaultSnapPoint}\n          snapPoint={snapPoint}\n          onSnapPointChange={onSnapPointChange}\n          snapToSequentialPoints={snapToSequentialPoints}\n          actions={actions}\n          actionsInHeader={actionsInHeader}\n          aria-labelledby={effectiveAriaLabelledBy}\n          aria-label={ariaLabel}\n        >\n          {header ??\n            (shouldRenderActionsHeader ? (\n              <PanelMobileActionsHeader\n                title={title}\n                titleId={titleId}\n                actions={actions!}\n              />\n            ) : (\n              <Drawer.Header title={title} id={titleId} />\n            ))}\n          {children}\n          {footer}\n        </Drawer>\n      </PanelContext.Provider>\n    );\n  }\n\n  return (\n    <PanelContext.Provider value={enrichedValue}>\n      <PanelContainer\n        {...rest}\n        $isOpen={isPanelOpen}\n        $direction={direction}\n        $width={width}\n        $gap={gap}\n        data-qa-panel={id}\n        data-qa-panel-isopen={isPanelOpen}\n        aria-labelledby={effectiveAriaLabelledBy}\n        aria-label={ariaLabel}\n      >\n        <PanelInner $direction={direction} $width={width}>\n          {header ?? <PanelHeader title={title} id={titleId} />}\n          {renderedChildren}\n          {footer}\n        </PanelInner>\n      </PanelContainer>\n    </PanelContext.Provider>\n  );\n};\n\nPanelComponent.Header = PanelHeader;\nPanelComponent.Content = PanelContent;\nPanelComponent.CloseButton = PanelCloseButton;\nPanelComponent.Footer = PanelFooter;\n\nexport const Panel = PanelComponent;\nexport default PanelComponent;\n","import * as React from \"react\";\nimport type { TypePanelContext } from \"./PanelTypes\";\n\nexport const PanelContext = React.createContext<TypePanelContext | null>(null);\n\nexport const usePanelContext = (): TypePanelContext => {\n  const ctx = React.useContext(PanelContext);\n  if (!ctx) {\n    throw new Error(\n      \"usePanelContext must be used within a <PanelProvider>. Wrap the consuming tree in <PanelProvider> to provide isPanelOpen / togglePanel.\"\n    );\n  }\n  return ctx;\n};\n","import Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { usePanelContext } from \"./PanelContext\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport type { TypePanelHeaderProps } from \"./PanelTypes\";\n\nexport const PanelHeader = ({\n  title = \"\",\n  id = undefined,\n  children,\n  render,\n  ...rest\n}: TypePanelHeaderProps) => {\n  const panelContext = usePanelContext();\n\n  if (render) {\n    return render(panelContext);\n  }\n\n  return (\n    <Box\n      display=\"flex\"\n      flex=\"0 0 auto\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      p={400}\n      borderBottom=\"1px solid\"\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children || (\n        <>\n          <Text.Headline id={id}>{title}</Text.Headline>\n          <PanelCloseButton />\n        </>\n      )}\n    </Box>\n  );\n};\n\nPanelHeader.displayName = \"Panel.Header\";\n","import * as React from \"react\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { usePanelContext } from \"./PanelContext\";\nimport type { TypePanelCloseButtonProps } from \"./PanelTypes\";\n\nexport const PanelCloseButton = (props: TypePanelCloseButtonProps) => {\n  const panelContext = usePanelContext();\n\n  if (props.render) {\n    return props.render(panelContext) ?? null;\n  }\n\n  return (\n    <Button\n      appearance=\"pill\"\n      aria-label={panelContext.closeButtonLabel}\n      onClick={panelContext.closePanel}\n      {...props}\n    >\n      {props.children || <Icon aria-hidden name=\"x-outline\" />}\n    </Button>\n  );\n};\n\nPanelCloseButton.displayName = \"Panel.CloseButton\";\n","import * as React from \"react\";\nimport { Content } from \"./styles\";\nimport type { TypePanelContentProps } from \"./PanelTypes\";\n\nexport const PanelContent = ({ children, ...rest }: TypePanelContentProps) => (\n  <Content\n    flex=\"1 1 auto\"\n    minHeight=\"0\"\n    p={450}\n    color=\"text.body\"\n    data-panel-content=\"\"\n    {...rest}\n  >\n    {children}\n  </Content>\n);\n\nPanelContent.displayName = \"Panel.Content\";\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { MOTION_DURATION_MEDIUM } from \"@sproutsocial/seeds-motion/unitless\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { PanelDirection } from \"./PanelTypes\";\n\ninterface PanelContainerProps extends TypeSystemCommonProps {\n  $isOpen: boolean;\n  $direction: PanelDirection;\n  $width: number;\n  $gap: number;\n}\n\nconst gapSide = (direction: PanelDirection): \"left\" | \"right\" | \"top\" => {\n  if (direction === \"right\") return \"left\";\n  if (direction === \"left\") return \"right\";\n  return \"top\";\n};\n\nexport const PanelContainer = styled.aside<PanelContainerProps>`\n  background: ${(props) => props.theme.colors.container.background.base};\n  flex-grow: 0;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: flex-basis ${MOTION_DURATION_MEDIUM}s ease-in-out,\n    margin ${MOTION_DURATION_MEDIUM}s ease-in-out;\n  flex-basis: ${(props) => (props.$isOpen ? `${props.$width}px` : \"0px\")};\n  margin-${(props) => gapSide(props.$direction)}: ${(props) =>\n  props.$isOpen && props.$gap ? `${props.$gap}px` : \"0px\"};\n  border-radius: ${({ theme }) => theme.radii[800]};\n\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          width: 100%;\n        `\n      : css`\n          height: 100%;\n        `}\n\n  ${COMMON}\n`;\n\nexport const PanelInner = styled.div<{\n  $direction: PanelDirection;\n  $width: number;\n}>`\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          min-height: ${props.$width}px;\n          width: 100%;\n        `\n      : css`\n          min-width: ${props.$width}px;\n          height: 100%;\n        `}\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n\nexport const Content = styled(Box)`\n  overflow-y: auto;\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  overflow: hidden;\n`;\n","import * as React from \"react\";\nimport { Footer } from \"./styles\";\nimport type { TypePanelFooterProps } from \"./PanelTypes\";\n\nexport const PanelFooter = ({ children, ...rest }: TypePanelFooterProps) => (\n  <Footer p={450} data-panel-footer=\"\" {...rest}>\n    {children}\n  </Footer>\n);\n\nPanelFooter.displayName = \"Panel.Footer\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeDrawerActionProps } from \"@sproutsocial/seeds-react-drawer\";\n\ninterface TypePanelMobileActionsHeaderProps {\n  title?: string;\n  titleId?: string;\n  actions: TypeDrawerActionProps[];\n}\n\n/**\n * Mobile bottom-sheet header used by Panel when `actionsInHeader` is set and\n * no custom `header` is provided. Renders the title on the left and the\n * forwarded actions plus a close button as pills on the right — mirrors the\n * pattern in `seeds-react-peek-in/PeekIn.tsx`. The Drawer's floating rail is\n * suppressed in this combination (`actionsInHeader` opts out), so without this\n * header the actions would render nowhere.\n */\nexport const PanelMobileActionsHeader = ({\n  title,\n  titleId,\n  actions,\n}: TypePanelMobileActionsHeaderProps) => (\n  <Drawer.Header\n    render={(ctx) => (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        pt={400}\n        px={450}\n        flex=\"0 0 auto\"\n      >\n        <Text\n          as=\"h2\"\n          fontSize={400}\n          fontWeight=\"semibold\"\n          color=\"text.headline\"\n          id={titleId}\n        >\n          {title}\n        </Text>\n        <Box display=\"flex\" alignItems=\"center\" gap={200}>\n          {actions.map((action, i) => (\n            <Button\n              key={i}\n              appearance=\"pill\"\n              aria-label={action[\"aria-label\"]}\n              onClick={action.onClick}\n              disabled={action.disabled}\n            >\n              {action.iconName && <Icon aria-hidden name={action.iconName} />}\n            </Button>\n          ))}\n          <Button\n            appearance=\"pill\"\n            aria-label={ctx.closeButtonLabel}\n            onClick={ctx.onClose}\n          >\n            <Icon aria-hidden name=\"x-outline\" />\n          </Button>\n        </Box>\n      </Box>\n    )}\n  />\n);\n\nPanelMobileActionsHeader.displayName = \"PanelMobileActionsHeader\";\n","import * as React from \"react\";\nimport { PanelContext } from \"./PanelContext\";\nimport type { TypePanelContext, TypePanelProviderProps } from \"./PanelTypes\";\n\nexport const PanelProvider = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n}: TypePanelProviderProps) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isPanelOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const openPanel = React.useCallback(() => setOpen(true), [setOpen]);\n  const closePanel = React.useCallback(() => setOpen(false), [setOpen]);\n  const togglePanel = React.useCallback(\n    () => setOpen(!isPanelOpen),\n    [setOpen, isPanelOpen]\n  );\n\n  const value = React.useMemo<TypePanelContext>(\n    () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),\n    [isPanelOpen, openPanel, closePanel, togglePanel]\n  );\n\n  return (\n    <PanelContext.Provider value={value}>{children}</PanelContext.Provider>\n  );\n};\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport type {\n  TypeDrawerSnapPoint,\n  TypeDrawerActionProps,\n} from \"@sproutsocial/seeds-react-drawer\";\n\nexport type { TypeDrawerActionProps as TypePanelActionProps };\n\nexport type PanelDirection = \"left\" | \"right\" | \"bottom\";\n\nexport interface TypePanelContext {\n  isPanelOpen: boolean;\n  togglePanel: () => void;\n  openPanel: () => void;\n  closePanel: () => void;\n  closeButtonLabel?: string;\n}\n\nexport interface TypePanelProviderProps {\n  children: React.ReactNode;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. When provided, the provider becomes controlled. */\n  open?: boolean;\n  /** Called whenever the open state changes. Required for controlled usage. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TypePanelProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Label for the close button. Usually \"Close\". */\n  closeButtonLabel: string;\n\n  /**\n   * Custom header content. When provided, replaces the auto-rendered default\n   * header entirely — `title` and `titleId` are ignored.\n   */\n  header?: React.ReactNode;\n\n  /** Custom footer content. Not rendered when omitted. */\n  footer?: React.ReactNode;\n\n  /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */\n  title?: string;\n\n  /**\n   * Sets the `id` on the title element of the auto-rendered header. When the\n   * default header is used, Panel automatically wires `aria-labelledby` to this\n   * id so the dialog/aside has an accessible name. Pass an explicit\n   * `aria-labelledby` to override (e.g. when pointing at a different element).\n   * Ignored when `header` is provided — supply your own `aria-labelledby` in\n   * that case.\n   */\n  titleId?: string;\n\n  /** Side the panel anchors to on desktop. Defaults to \"right\". */\n  direction?: PanelDirection;\n\n  /**\n   * Width (px) when direction is \"left\" or \"right\", or height (px) when\n   * direction is \"bottom\". Defaults to 384 to match the existing web-app-core\n   * Panel.\n   */\n  width?: number;\n\n  /**\n   * Visual gap (px) between the panel and the adjacent content. Applied as\n   * margin on the side facing the content (left when direction=\"right\",\n   * right when direction=\"left\", top when direction=\"bottom\"). Animates with\n   * the panel's open/close transition and collapses to 0 when closed so the\n   * gap does not remain visible alongside a zero-width panel. Defaults to 0.\n   */\n  gap?: number;\n\n  /**\n   * Forwarded to `useIsMobile`. Accepts a px number or any CSS media-query\n   * length. Below this width, the panel renders as an overlay bottom sheet\n   * (via seeds-react-drawer). Defaults to the theme's `breakpoints.sm`.\n   */\n  mobileBreakpoint?: number | string;\n\n  /** Applies only to the mobile bottom-sheet rendering. */\n  zIndex?: number;\n\n  /** Optional id used for data-qa-panel attributes. */\n  id?: string;\n\n  /**\n   * Snap points the panel can rest at when rendered as a mobile bottom sheet.\n   * Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings\n   * accept `px`/`rem` (e.g. `\"480px\"`, `\"30rem\"`). Order matters — the last\n   * entry is the \"expanded\" state. Ignored on the desktop side-panel rendering.\n   */\n  snapPoints?: TypeDrawerSnapPoint[];\n\n  /** Initial snap point for uncontrolled use. Mobile only. */\n  defaultSnapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */\n  snapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Fires when the active snap point changes. Mobile only. */\n  onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;\n\n  /**\n   * When true, fast swipes can't skip past adjacent snap points. Mobile only.\n   */\n  snapToSequentialPoints?: boolean;\n\n  /**\n   * Action buttons shown in a floating rail above the panel on mobile (the\n   * bottom-sheet rendering). Ignored on desktop side-panel rendering — pass\n   * actions through `header`/`footer` slots there. The rail owns the close\n   * button so the default header omits its built-in close affordance.\n   */\n  actions?: TypeDrawerActionProps[];\n\n  /**\n   * Opt out of the floating mobile rail and render the `actions` inline in the\n   * header as pill buttons instead. Useful for nested bottom sheets and\n   * snap-point layouts where the floating rail would collide with surrounding\n   * UI. Defaults to `false`.\n   *\n   * When `header` is omitted, Panel auto-composes a mobile header that renders\n   * the title, the `actions` as pills, and a close-button pill. When `header`\n   * is provided, the consumer is responsible for rendering the actions inside\n   * their own header — `actions` is forwarded for context only.\n   */\n  actionsInHeader?: boolean;\n}\n\nexport interface TypePanelHeaderProps extends TypeBoxProps {\n  title?: string;\n  /**\n   * When children are provided, `<Panel.CloseButton />` is NOT rendered\n   * automatically. Include it yourself to preserve keyboard accessibility.\n   */\n  children?: React.ReactNode;\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n}\n\nexport interface TypePanelContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelFooterProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n  children?: React.ReactNode;\n}\n","import Panel from \"./Panel\";\n\nexport default Panel;\nexport { Panel };\nexport { PanelContext, usePanelContext } from \"./PanelContext\";\nexport { PanelProvider } from \"./PanelProvider\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport { PanelContent } from \"./PanelContent\";\nexport { PanelCloseButton } from \"./PanelCloseButton\";\nexport { PanelFooter } from \"./PanelFooter\";\nexport * from \"./PanelTypes\";\n"],"mappings":"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","names":["React","Drawer","jsx","Box","jsx","jsx","Box","Button","Icon","Text","jsx","jsxs","jsx","jsxs","Drawer","React","jsx"]}
+{"version":3,"sources":["../../src/Panel.tsx","../../src/PanelContext.tsx","../../src/PanelHeader.tsx","../../src/PanelCloseButton.tsx","../../src/PanelContent.tsx","../../src/styles.ts","../../src/PanelFooter.tsx","../../src/PanelMobileActionsHeader.tsx","../../src/PanelProvider.tsx","../../src/PanelTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport { useIsMobile } from \"@sproutsocial/seeds-react-hooks\";\nimport { usePanelContext, PanelContext } from \"./PanelContext\";\nimport { PanelHeader } from \"./PanelHeader\";\nimport { PanelContent } from \"./PanelContent\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport { PanelFooter } from \"./PanelFooter\";\nimport { PanelMobileActionsHeader } from \"./PanelMobileActionsHeader\";\nimport { PanelContainer, PanelInner } from \"./styles\";\nimport type { TypePanelProps, TypePanelContext } from \"./PanelTypes\";\n\nconst PanelComponent = ({\n  children,\n  closeButtonLabel,\n  header,\n  headerless = false,\n  footer,\n  title,\n  titleId,\n  direction = \"right\",\n  width = 384,\n  gap = 4,\n  mobileBreakpoint,\n  zIndex,\n  id,\n  snapPoints,\n  defaultSnapPoint,\n  snapPoint,\n  onSnapPointChange,\n  snapToSequentialPoints,\n  actions,\n  actionsInHeader,\n  \"aria-labelledby\": ariaLabelledByProp,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: TypePanelProps) => {\n  const panelContext = usePanelContext();\n  const { isPanelOpen, closePanel } = panelContext;\n  const isMobile = useIsMobile(mobileBreakpoint);\n\n  // Expose closeButtonLabel through context so PanelCloseButton can read it\n  // without prop drilling — same pattern as DrawerContext.\n  const enrichedValue = React.useMemo<TypePanelContext>(\n    () => ({ ...panelContext, closeButtonLabel, headerless }),\n    [panelContext, closeButtonLabel, headerless]\n  );\n\n  // Freeze the last-rendered children during the collapse so consumers that\n  // conditionally render content don't produce an empty panel shell while the\n  // flex-basis animation runs.\n  const prevChildrenRef = React.useRef<React.ReactNode>(null);\n  if (isPanelOpen) {\n    prevChildrenRef.current = children;\n  }\n  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;\n\n  // When the consumer relies on the default header, its title element renders\n  // with `id={titleId}`. Auto-wire `aria-labelledby` so the dialog/aside has an\n  // accessible name without forcing every caller to repeat the id.\n  const effectiveAriaLabelledBy =\n    ariaLabelledByProp ?? (!headerless && header == null ? titleId : undefined);\n\n  if (isMobile) {\n    // With `actionsInHeader`, Drawer suppresses the floating rail and expects\n    // the consumer to render the actions inside a custom header. Auto-compose\n    // one (title + action pills + close pill) when the consumer hasn't\n    // supplied their own header; otherwise we'd drop `actions` on the floor.\n    const shouldRenderActionsHeader =\n      !headerless &&\n      header == null &&\n      actionsInHeader === true &&\n      !!actions &&\n      actions.length > 0;\n\n    // Headerless suppresses the built-in header entirely; the children own all\n    // chrome in that mode.\n    let defaultMobileHeader: React.ReactNode = null;\n    if (!headerless) {\n      defaultMobileHeader = shouldRenderActionsHeader ? (\n        <PanelMobileActionsHeader\n          title={title}\n          titleId={titleId}\n          actions={actions!}\n        />\n      ) : (\n        <Drawer.Header title={title} id={titleId} />\n      );\n    }\n\n    return (\n      <PanelContext.Provider value={enrichedValue}>\n        <Drawer\n          {...rest}\n          open={isPanelOpen}\n          onClose={closePanel}\n          direction=\"bottom\"\n          closeButtonLabel={closeButtonLabel}\n          zIndex={zIndex}\n          snapPoints={snapPoints}\n          defaultSnapPoint={defaultSnapPoint}\n          snapPoint={snapPoint}\n          onSnapPointChange={onSnapPointChange}\n          snapToSequentialPoints={snapToSequentialPoints}\n          actions={actions}\n          actionsInHeader={actionsInHeader}\n          aria-labelledby={effectiveAriaLabelledBy}\n          aria-label={ariaLabel}\n        >\n          {header ?? defaultMobileHeader}\n          <PanelContent>{children}</PanelContent>\n          {footer}\n        </Drawer>\n      </PanelContext.Provider>\n    );\n  }\n\n  return (\n    <PanelContext.Provider value={enrichedValue}>\n      <PanelContainer\n        {...rest}\n        $isOpen={isPanelOpen}\n        $direction={direction}\n        $width={width}\n        $gap={gap}\n        data-qa-panel={id}\n        data-qa-panel-isopen={isPanelOpen}\n        aria-labelledby={effectiveAriaLabelledBy}\n        aria-label={ariaLabel}\n      >\n        <PanelInner $direction={direction} $width={width}>\n          {header ??\n            (headerless ? null : <PanelHeader title={title} id={titleId} />)}\n          <PanelContent>{renderedChildren}</PanelContent>\n          {footer}\n        </PanelInner>\n      </PanelContainer>\n    </PanelContext.Provider>\n  );\n};\n\nPanelComponent.Header = PanelHeader;\nPanelComponent.Content = PanelContent;\nPanelComponent.CloseButton = PanelCloseButton;\nPanelComponent.Footer = PanelFooter;\n\nexport const Panel = PanelComponent;\nexport default PanelComponent;\n","import * as React from \"react\";\nimport type { TypePanelContext } from \"./PanelTypes\";\n\nexport const PanelContext = React.createContext<TypePanelContext | null>(null);\n\nexport const usePanelContext = (): TypePanelContext => {\n  const ctx = React.useContext(PanelContext);\n  if (!ctx) {\n    throw new Error(\n      \"usePanelContext must be used within a <PanelProvider>. Wrap the consuming tree in <PanelProvider> to provide isPanelOpen / togglePanel.\"\n    );\n  }\n  return ctx;\n};\n","import Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { usePanelContext } from \"./PanelContext\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport type { TypePanelHeaderProps } from \"./PanelTypes\";\n\nexport const PanelHeader = ({\n  title = \"\",\n  id = undefined,\n  children,\n  render,\n  ...rest\n}: TypePanelHeaderProps) => {\n  const panelContext = usePanelContext();\n\n  if (render) {\n    return render(panelContext);\n  }\n\n  return (\n    <Box\n      display=\"flex\"\n      flex=\"0 0 auto\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      p={400}\n      borderBottom=\"1px solid\"\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children || (\n        <>\n          <Text.Headline id={id}>{title}</Text.Headline>\n          <PanelCloseButton />\n        </>\n      )}\n    </Box>\n  );\n};\n\nPanelHeader.displayName = \"Panel.Header\";\n","import * as React from \"react\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { usePanelContext } from \"./PanelContext\";\nimport type { TypePanelCloseButtonProps } from \"./PanelTypes\";\n\nexport const PanelCloseButton = (props: TypePanelCloseButtonProps) => {\n  const panelContext = usePanelContext();\n\n  if (props.render) {\n    return props.render(panelContext) ?? null;\n  }\n\n  return (\n    <Button\n      appearance=\"pill\"\n      aria-label={panelContext.closeButtonLabel}\n      onClick={panelContext.closePanel}\n      {...props}\n    >\n      {props.children || <Icon aria-hidden name=\"x-outline\" />}\n    </Button>\n  );\n};\n\nPanelCloseButton.displayName = \"Panel.CloseButton\";\n","import * as React from \"react\";\nimport { Content } from \"./styles\";\nimport { usePanelContext } from \"./PanelContext\";\nimport type { TypePanelContentProps } from \"./PanelTypes\";\n\nexport const PanelContent = ({ children, ...rest }: TypePanelContentProps) => {\n  // In headerless mode the content renders flush and defers overflow scrolling\n  // to its children, so the panel can host content that owns its own chrome.\n  const { headerless } = usePanelContext();\n\n  return (\n    <Content\n      flex=\"1 1 auto\"\n      minHeight=\"0\"\n      p={headerless ? 0 : 450}\n      $scroll={!headerless}\n      color=\"text.body\"\n      data-panel-content=\"\"\n      {...rest}\n    >\n      {children}\n    </Content>\n  );\n};\n\nPanelContent.displayName = \"Panel.Content\";\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { MOTION_DURATION_MEDIUM } from \"@sproutsocial/seeds-motion/unitless\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { PanelDirection } from \"./PanelTypes\";\n\ninterface PanelContainerProps extends TypeSystemCommonProps {\n  $isOpen: boolean;\n  $direction: PanelDirection;\n  $width: number;\n  $gap: number;\n}\n\nconst gapSide = (direction: PanelDirection): \"left\" | \"right\" | \"top\" => {\n  if (direction === \"right\") return \"left\";\n  if (direction === \"left\") return \"right\";\n  return \"top\";\n};\n\nexport const PanelContainer = styled.aside<PanelContainerProps>`\n  background: ${(props) => props.theme.colors.container.background.base};\n  flex-grow: 0;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: flex-basis ${MOTION_DURATION_MEDIUM}s ease-in-out,\n    margin ${MOTION_DURATION_MEDIUM}s ease-in-out;\n  flex-basis: ${(props) => (props.$isOpen ? `${props.$width}px` : \"0px\")};\n  margin-${(props) => gapSide(props.$direction)}: ${(props) =>\n  props.$isOpen && props.$gap ? `${props.$gap}px` : \"0px\"};\n  border-radius: ${({ theme }) => theme.radii[800]};\n\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          width: 100%;\n        `\n      : css`\n          align-self: stretch;\n        `}\n\n  ${COMMON}\n`;\n\nexport const PanelInner = styled.div<{\n  $direction: PanelDirection;\n  $width: number;\n}>`\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          min-height: ${props.$width}px;\n          width: 100%;\n        `\n      : css`\n          min-width: ${props.$width}px;\n          height: 100%;\n        `}\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n\nexport const Content = styled(Box)<{ $scroll?: boolean }>`\n  overflow-y: ${({ $scroll = true }) => ($scroll ? \"auto\" : \"hidden\")};\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  overflow: hidden;\n  /*\n   * On mobile the Panel renders inside the Drawer's bottom sheet, whose popup\n   * deliberately bleeds 3rem (--bleed) below the viewport for elastic\n   * overscroll (see seeds-react-drawer/src/styles.ts). A footer pinned to the\n   * end of that popup would land inside the bleed and clip below the fold, so\n   * we lift it by the inherited --bleed; the gap left behind shows the popup's\n   * own background, so there is no visible seam. On desktop --bleed is unset,\n   * so the 0px fallback leaves the footer untouched.\n   */\n  margin-bottom: var(--bleed, 0px);\n`;\n","import * as React from \"react\";\nimport { Footer } from \"./styles\";\nimport type { TypePanelFooterProps } from \"./PanelTypes\";\n\nexport const PanelFooter = ({ children, ...rest }: TypePanelFooterProps) => (\n  <Footer p={450} data-panel-footer=\"\" {...rest}>\n    {children}\n  </Footer>\n);\n\nPanelFooter.displayName = \"Panel.Footer\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeDrawerActionProps } from \"@sproutsocial/seeds-react-drawer\";\n\ninterface TypePanelMobileActionsHeaderProps {\n  title?: string;\n  titleId?: string;\n  actions: TypeDrawerActionProps[];\n}\n\n/**\n * Mobile bottom-sheet header used by Panel when `actionsInHeader` is set and\n * no custom `header` is provided. Renders the title on the left and the\n * forwarded actions plus a close button as pills on the right — mirrors the\n * pattern in `seeds-react-peek-in/PeekIn.tsx`. The Drawer's floating rail is\n * suppressed in this combination (`actionsInHeader` opts out), so without this\n * header the actions would render nowhere.\n */\nexport const PanelMobileActionsHeader = ({\n  title,\n  titleId,\n  actions,\n}: TypePanelMobileActionsHeaderProps) => (\n  <Drawer.Header\n    render={(ctx) => (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        pt={400}\n        px={450}\n        flex=\"0 0 auto\"\n      >\n        <Text\n          as=\"h2\"\n          fontSize={400}\n          fontWeight=\"semibold\"\n          color=\"text.headline\"\n          id={titleId}\n        >\n          {title}\n        </Text>\n        <Box display=\"flex\" alignItems=\"center\" gap={200}>\n          {actions.map((action, i) => (\n            <Button\n              key={i}\n              appearance=\"pill\"\n              aria-label={action[\"aria-label\"]}\n              onClick={action.onClick}\n              disabled={action.disabled}\n            >\n              {action.iconName && <Icon aria-hidden name={action.iconName} />}\n            </Button>\n          ))}\n          <Button\n            appearance=\"pill\"\n            aria-label={ctx.closeButtonLabel}\n            onClick={ctx.onClose}\n          >\n            <Icon aria-hidden name=\"x-outline\" />\n          </Button>\n        </Box>\n      </Box>\n    )}\n  />\n);\n\nPanelMobileActionsHeader.displayName = \"PanelMobileActionsHeader\";\n","import * as React from \"react\";\nimport { PanelContext } from \"./PanelContext\";\nimport type { TypePanelContext, TypePanelProviderProps } from \"./PanelTypes\";\n\nexport const PanelProvider = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n}: TypePanelProviderProps) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isPanelOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const openPanel = React.useCallback(() => setOpen(true), [setOpen]);\n  const closePanel = React.useCallback(() => setOpen(false), [setOpen]);\n  const togglePanel = React.useCallback(\n    () => setOpen(!isPanelOpen),\n    [setOpen, isPanelOpen]\n  );\n\n  const value = React.useMemo<TypePanelContext>(\n    () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),\n    [isPanelOpen, openPanel, closePanel, togglePanel]\n  );\n\n  return (\n    <PanelContext.Provider value={value}>{children}</PanelContext.Provider>\n  );\n};\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport type {\n  TypeDrawerSnapPoint,\n  TypeDrawerActionProps,\n} from \"@sproutsocial/seeds-react-drawer\";\n\nexport type { TypeDrawerActionProps as TypePanelActionProps };\n\nexport type PanelDirection = \"left\" | \"right\" | \"bottom\";\n\nexport interface TypePanelContext {\n  isPanelOpen: boolean;\n  togglePanel: () => void;\n  openPanel: () => void;\n  closePanel: () => void;\n  closeButtonLabel?: string;\n  /**\n   * Set by `Panel` when rendered headerless. `Panel.Content` reads this to\n   * render flush (no padding) and defer overflow scrolling to its children.\n   */\n  headerless?: boolean;\n}\n\nexport interface TypePanelProviderProps {\n  children: React.ReactNode;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. When provided, the provider becomes controlled. */\n  open?: boolean;\n  /** Called whenever the open state changes. Required for controlled usage. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TypePanelProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Label for the close button. Usually \"Close\". */\n  closeButtonLabel: string;\n\n  /**\n   * Custom header content. When provided, replaces the auto-rendered default\n   * header entirely — `title` and `titleId` are ignored.\n   */\n  header?: React.ReactNode;\n\n  /** Custom footer content. Not rendered when omitted. */\n  footer?: React.ReactNode;\n\n  /**\n   * Renders children flush, without the built-in header/close button or content\n   * padding, and lets the children own overflow scrolling. Use when the content\n   * provides its own chrome (e.g. an embedded agent UI). Provide `aria-label`\n   * (or `aria-labelledby`) for an accessible name, since no header title is\n   * rendered. `title`, `titleId`, and `closeButtonLabel` are ignored in this\n   * mode. Defaults to false.\n   */\n  headerless?: boolean;\n\n  /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */\n  title?: string;\n\n  /**\n   * Sets the `id` on the title element of the auto-rendered header. When the\n   * default header is used, Panel automatically wires `aria-labelledby` to this\n   * id so the dialog/aside has an accessible name. Pass an explicit\n   * `aria-labelledby` to override (e.g. when pointing at a different element).\n   * Ignored when `header` is provided — supply your own `aria-labelledby` in\n   * that case.\n   */\n  titleId?: string;\n\n  /** Side the panel anchors to on desktop. Defaults to \"right\". */\n  direction?: PanelDirection;\n\n  /**\n   * Width (px) when direction is \"left\" or \"right\", or height (px) when\n   * direction is \"bottom\". Defaults to 384 to match the existing web-app-core\n   * Panel.\n   */\n  width?: number;\n\n  /**\n   * Visual gap (px) between the panel and the adjacent content. Applied as\n   * margin on the side facing the content (left when direction=\"right\",\n   * right when direction=\"left\", top when direction=\"bottom\"). Animates with\n   * the panel's open/close transition and collapses to 0 when closed so the\n   * gap does not remain visible alongside a zero-width panel. Defaults to 0.\n   */\n  gap?: number;\n\n  /**\n   * Forwarded to `useIsMobile`. Accepts a px number or any CSS media-query\n   * length. Below this width, the panel renders as an overlay bottom sheet\n   * (via seeds-react-drawer). Defaults to the theme's `breakpoints.sm`.\n   */\n  mobileBreakpoint?: number | string;\n\n  /** Applies only to the mobile bottom-sheet rendering. */\n  zIndex?: number;\n\n  /** Optional id used for data-qa-panel attributes. */\n  id?: string;\n\n  /**\n   * Snap points the panel can rest at when rendered as a mobile bottom sheet.\n   * Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings\n   * accept `px`/`rem` (e.g. `\"480px\"`, `\"30rem\"`). Order matters — the last\n   * entry is the \"expanded\" state. Ignored on the desktop side-panel rendering.\n   */\n  snapPoints?: TypeDrawerSnapPoint[];\n\n  /** Initial snap point for uncontrolled use. Mobile only. */\n  defaultSnapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */\n  snapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Fires when the active snap point changes. Mobile only. */\n  onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;\n\n  /**\n   * When true, fast swipes can't skip past adjacent snap points. Mobile only.\n   */\n  snapToSequentialPoints?: boolean;\n\n  /**\n   * Action buttons shown in a floating rail above the panel on mobile (the\n   * bottom-sheet rendering). Ignored on desktop side-panel rendering — pass\n   * actions through `header`/`footer` slots there. The rail owns the close\n   * button so the default header omits its built-in close affordance.\n   */\n  actions?: TypeDrawerActionProps[];\n\n  /**\n   * Opt out of the floating mobile rail and render the `actions` inline in the\n   * header as pill buttons instead. Useful for nested bottom sheets and\n   * snap-point layouts where the floating rail would collide with surrounding\n   * UI. Defaults to `false`.\n   *\n   * When `header` is omitted, Panel auto-composes a mobile header that renders\n   * the title, the `actions` as pills, and a close-button pill. When `header`\n   * is provided, the consumer is responsible for rendering the actions inside\n   * their own header — `actions` is forwarded for context only.\n   */\n  actionsInHeader?: boolean;\n}\n\nexport interface TypePanelHeaderProps extends TypeBoxProps {\n  title?: string;\n  /**\n   * When children are provided, `<Panel.CloseButton />` is NOT rendered\n   * automatically. Include it yourself to preserve keyboard accessibility.\n   */\n  children?: React.ReactNode;\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n}\n\nexport interface TypePanelContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelFooterProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n  children?: React.ReactNode;\n}\n","import Panel from \"./Panel\";\n\nexport default Panel;\nexport { Panel };\nexport { PanelContext, usePanelContext } from \"./PanelContext\";\nexport { PanelProvider } from \"./PanelProvider\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport { PanelContent } from \"./PanelContent\";\nexport { PanelCloseButton } from \"./PanelCloseButton\";\nexport { PanelFooter } from \"./PanelFooter\";\nexport * from \"./PanelTypes\";\n"],"mappings":"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","names":["React","Drawer","jsx","Box","jsx","jsx","Box","Button","Icon","Text","jsx","jsxs","jsx","jsxs","Drawer","React","jsx"]}

package/dist/index.d.mts

@@ -13,6 +13,11 @@ interface TypePanelContext {
     openPanel: () => void;
     closePanel: () => void;
     closeButtonLabel?: string;
+    /**
+     * Set by `Panel` when rendered headerless. `Panel.Content` reads this to
+     * render flush (no padding) and defer overflow scrolling to its children.
+     */
+    headerless?: boolean;
 }
 interface TypePanelProviderProps {
     children: React.ReactNode;
@@ -34,6 +39,15 @@ interface TypePanelProps extends TypeStyledComponentsCommonProps, TypeSystemComm
     header?: React.ReactNode;
     /** Custom footer content. Not rendered when omitted. */
     footer?: React.ReactNode;
+    /**
+     * Renders children flush, without the built-in header/close button or content
+     * padding, and lets the children own overflow scrolling. Use when the content
+     * provides its own chrome (e.g. an embedded agent UI). Provide `aria-label`
+     * (or `aria-labelledby`) for an accessible name, since no header title is
+     * rendered. `title`, `titleId`, and `closeButtonLabel` are ignored in this
+     * mode. Defaults to false.
+     */
+    headerless?: boolean;
     /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */
     title?: string;
     /**
@@ -131,7 +145,7 @@ interface TypePanelCloseButtonProps extends Omit<TypeButtonProps, "children"> {
 }
 
 declare const PanelComponent: {
-    ({ children, closeButtonLabel, header, footer, title, titleId, direction, width, gap, mobileBreakpoint, zIndex, id, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, actions, actionsInHeader, "aria-labelledby": ariaLabelledByProp, "aria-label": ariaLabel, ...rest }: TypePanelProps): react_jsx_runtime.JSX.Element;
+    ({ children, closeButtonLabel, header, headerless, footer, title, titleId, direction, width, gap, mobileBreakpoint, zIndex, id, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, actions, actionsInHeader, "aria-labelledby": ariaLabelledByProp, "aria-label": ariaLabel, ...rest }: TypePanelProps): react_jsx_runtime.JSX.Element;
     Header: {
         ({ title, id, children, render, ...rest }: TypePanelHeaderProps): string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
         displayName: string;

package/dist/index.d.ts

@@ -13,6 +13,11 @@ interface TypePanelContext {
     openPanel: () => void;
     closePanel: () => void;
     closeButtonLabel?: string;
+    /**
+     * Set by `Panel` when rendered headerless. `Panel.Content` reads this to
+     * render flush (no padding) and defer overflow scrolling to its children.
+     */
+    headerless?: boolean;
 }
 interface TypePanelProviderProps {
     children: React.ReactNode;
@@ -34,6 +39,15 @@ interface TypePanelProps extends TypeStyledComponentsCommonProps, TypeSystemComm
     header?: React.ReactNode;
     /** Custom footer content. Not rendered when omitted. */
     footer?: React.ReactNode;
+    /**
+     * Renders children flush, without the built-in header/close button or content
+     * padding, and lets the children own overflow scrolling. Use when the content
+     * provides its own chrome (e.g. an embedded agent UI). Provide `aria-label`
+     * (or `aria-labelledby`) for an accessible name, since no header title is
+     * rendered. `title`, `titleId`, and `closeButtonLabel` are ignored in this
+     * mode. Defaults to false.
+     */
+    headerless?: boolean;
     /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */
     title?: string;
     /**
@@ -131,7 +145,7 @@ interface TypePanelCloseButtonProps extends Omit<TypeButtonProps, "children"> {
 }
 
 declare const PanelComponent: {
-    ({ children, closeButtonLabel, header, footer, title, titleId, direction, width, gap, mobileBreakpoint, zIndex, id, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, actions, actionsInHeader, "aria-labelledby": ariaLabelledByProp, "aria-label": ariaLabel, ...rest }: TypePanelProps): react_jsx_runtime.JSX.Element;
+    ({ children, closeButtonLabel, header, headerless, footer, title, titleId, direction, width, gap, mobileBreakpoint, zIndex, id, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, actions, actionsInHeader, "aria-labelledby": ariaLabelledByProp, "aria-label": ariaLabel, ...rest }: TypePanelProps): react_jsx_runtime.JSX.Element;
     Header: {
         ({ title, id, children, render, ...rest }: TypePanelHeaderProps): string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
         displayName: string;

package/dist/index.js

@@ -147,7 +147,7 @@ var PanelContainer = import_styled_components.default.aside`
   ${(props) => props.$direction === "bottom" ? import_styled_components.css`
           width: 100%;
         ` : import_styled_components.css`
-          height: 100%;
+          align-self: stretch;
         `}
 
   ${import_seeds_react_system_props.COMMON}
@@ -165,27 +165,41 @@ var PanelInner = import_styled_components.default.div`
   overflow: hidden;
 `;
 var Content = (0, import_styled_components.default)(import_seeds_react_box2.default)`
-  overflow-y: auto;
+  overflow-y: ${({ $scroll = true }) => $scroll ? "auto" : "hidden"};
 `;
 var Footer = (0, import_styled_components.default)(import_seeds_react_box2.default)`
   flex: 0 0 auto;
   overflow: hidden;
+  /*
+   * On mobile the Panel renders inside the Drawer's bottom sheet, whose popup
+   * deliberately bleeds 3rem (--bleed) below the viewport for elastic
+   * overscroll (see seeds-react-drawer/src/styles.ts). A footer pinned to the
+   * end of that popup would land inside the bleed and clip below the fold, so
+   * we lift it by the inherited --bleed; the gap left behind shows the popup's
+   * own background, so there is no visible seam. On desktop --bleed is unset,
+   * so the 0px fallback leaves the footer untouched.
+   */
+  margin-bottom: var(--bleed, 0px);
 `;
 
 // src/PanelContent.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var PanelContent = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  Content,
-  {
-    flex: "1 1 auto",
-    minHeight: "0",
-    p: 450,
-    color: "text.body",
-    "data-panel-content": "",
-    ...rest,
-    children
-  }
-);
+var PanelContent = ({ children, ...rest }) => {
+  const { headerless } = usePanelContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Content,
+    {
+      flex: "1 1 auto",
+      minHeight: "0",
+      p: headerless ? 0 : 450,
+      $scroll: !headerless,
+      color: "text.body",
+      "data-panel-content": "",
+      ...rest,
+      children
+    }
+  );
+};
 PanelContent.displayName = "Panel.Content";
 
 // src/PanelFooter.tsx
@@ -265,6 +279,7 @@ var PanelComponent = ({
   children,
   closeButtonLabel,
   header,
+  headerless = false,
   footer,
   title,
   titleId,
@@ -289,17 +304,28 @@ var PanelComponent = ({
   const { isPanelOpen, closePanel } = panelContext;
   const isMobile = (0, import_seeds_react_hooks.useIsMobile)(mobileBreakpoint);
   const enrichedValue = React6.useMemo(
-    () => ({ ...panelContext, closeButtonLabel }),
-    [panelContext, closeButtonLabel]
+    () => ({ ...panelContext, closeButtonLabel, headerless }),
+    [panelContext, closeButtonLabel, headerless]
   );
   const prevChildrenRef = React6.useRef(null);
   if (isPanelOpen) {
     prevChildrenRef.current = children;
   }
   const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
-  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (header == null ? titleId : void 0);
+  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (!headerless && header == null ? titleId : void 0);
   if (isMobile) {
-    const shouldRenderActionsHeader = header == null && actionsInHeader === true && !!actions && actions.length > 0;
+    const shouldRenderActionsHeader = !headerless && header == null && actionsInHeader === true && !!actions && actions.length > 0;
+    let defaultMobileHeader = null;
+    if (!headerless) {
+      defaultMobileHeader = shouldRenderActionsHeader ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        PanelMobileActionsHeader,
+        {
+          title,
+          titleId,
+          actions
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_drawer2.default.Header, { title, id: titleId });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       import_seeds_react_drawer2.default,
       {
@@ -319,15 +345,8 @@ var PanelComponent = ({
         "aria-labelledby": effectiveAriaLabelledBy,
         "aria-label": ariaLabel,
         children: [
-          header ?? (shouldRenderActionsHeader ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            PanelMobileActionsHeader,
-            {
-              title,
-              titleId,
-              actions
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_drawer2.default.Header, { title, id: titleId })),
-          children,
+          header ?? defaultMobileHeader,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContent, { children }),
           footer
         ]
       }
@@ -346,8 +365,8 @@ var PanelComponent = ({
       "aria-labelledby": effectiveAriaLabelledBy,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PanelInner, { $direction: direction, $width: width, children: [
-        header ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelHeader, { title, id: titleId }),
-        renderedChildren,
+        header ?? (headerless ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelHeader, { title, id: titleId })),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContent, { children: renderedChildren }),
         footer
       ] })
     }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Panel.tsx","../src/PanelContext.tsx","../src/PanelHeader.tsx","../src/PanelCloseButton.tsx","../src/PanelContent.tsx","../src/styles.ts","../src/PanelFooter.tsx","../src/PanelMobileActionsHeader.tsx","../src/PanelProvider.tsx","../src/PanelTypes.ts"],"sourcesContent":["import Panel from \"./Panel\";\n\nexport default Panel;\nexport { Panel };\nexport { PanelContext, usePanelContext } from \"./PanelContext\";\nexport { PanelProvider } from \"./PanelProvider\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport { PanelContent } from \"./PanelContent\";\nexport { PanelCloseButton } from \"./PanelCloseButton\";\nexport { PanelFooter } from \"./PanelFooter\";\nexport * from \"./PanelTypes\";\n","import * as React from \"react\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport { useIsMobile } from \"@sproutsocial/seeds-react-hooks\";\nimport { usePanelContext, PanelContext } from \"./PanelContext\";\nimport { PanelHeader } from \"./PanelHeader\";\nimport { PanelContent } from \"./PanelContent\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport { PanelFooter } from \"./PanelFooter\";\nimport { PanelMobileActionsHeader } from \"./PanelMobileActionsHeader\";\nimport { PanelContainer, PanelInner } from \"./styles\";\nimport type { TypePanelProps, TypePanelContext } from \"./PanelTypes\";\n\nconst PanelComponent = ({\n  children,\n  closeButtonLabel,\n  header,\n  footer,\n  title,\n  titleId,\n  direction = \"right\",\n  width = 384,\n  gap = 4,\n  mobileBreakpoint,\n  zIndex,\n  id,\n  snapPoints,\n  defaultSnapPoint,\n  snapPoint,\n  onSnapPointChange,\n  snapToSequentialPoints,\n  actions,\n  actionsInHeader,\n  \"aria-labelledby\": ariaLabelledByProp,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: TypePanelProps) => {\n  const panelContext = usePanelContext();\n  const { isPanelOpen, closePanel } = panelContext;\n  const isMobile = useIsMobile(mobileBreakpoint);\n\n  // Expose closeButtonLabel through context so PanelCloseButton can read it\n  // without prop drilling — same pattern as DrawerContext.\n  const enrichedValue = React.useMemo<TypePanelContext>(\n    () => ({ ...panelContext, closeButtonLabel }),\n    [panelContext, closeButtonLabel]\n  );\n\n  // Freeze the last-rendered children during the collapse so consumers that\n  // conditionally render content don't produce an empty panel shell while the\n  // flex-basis animation runs.\n  const prevChildrenRef = React.useRef<React.ReactNode>(null);\n  if (isPanelOpen) {\n    prevChildrenRef.current = children;\n  }\n  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;\n\n  // When the consumer relies on the default header, its title element renders\n  // with `id={titleId}`. Auto-wire `aria-labelledby` so the dialog/aside has an\n  // accessible name without forcing every caller to repeat the id.\n  const effectiveAriaLabelledBy =\n    ariaLabelledByProp ?? (header == null ? titleId : undefined);\n\n  if (isMobile) {\n    // With `actionsInHeader`, Drawer suppresses the floating rail and expects\n    // the consumer to render the actions inside a custom header. Auto-compose\n    // one (title + action pills + close pill) when the consumer hasn't\n    // supplied their own header; otherwise we'd drop `actions` on the floor.\n    const shouldRenderActionsHeader =\n      header == null &&\n      actionsInHeader === true &&\n      !!actions &&\n      actions.length > 0;\n\n    return (\n      <PanelContext.Provider value={enrichedValue}>\n        <Drawer\n          {...rest}\n          open={isPanelOpen}\n          onClose={closePanel}\n          direction=\"bottom\"\n          closeButtonLabel={closeButtonLabel}\n          zIndex={zIndex}\n          snapPoints={snapPoints}\n          defaultSnapPoint={defaultSnapPoint}\n          snapPoint={snapPoint}\n          onSnapPointChange={onSnapPointChange}\n          snapToSequentialPoints={snapToSequentialPoints}\n          actions={actions}\n          actionsInHeader={actionsInHeader}\n          aria-labelledby={effectiveAriaLabelledBy}\n          aria-label={ariaLabel}\n        >\n          {header ??\n            (shouldRenderActionsHeader ? (\n              <PanelMobileActionsHeader\n                title={title}\n                titleId={titleId}\n                actions={actions!}\n              />\n            ) : (\n              <Drawer.Header title={title} id={titleId} />\n            ))}\n          {children}\n          {footer}\n        </Drawer>\n      </PanelContext.Provider>\n    );\n  }\n\n  return (\n    <PanelContext.Provider value={enrichedValue}>\n      <PanelContainer\n        {...rest}\n        $isOpen={isPanelOpen}\n        $direction={direction}\n        $width={width}\n        $gap={gap}\n        data-qa-panel={id}\n        data-qa-panel-isopen={isPanelOpen}\n        aria-labelledby={effectiveAriaLabelledBy}\n        aria-label={ariaLabel}\n      >\n        <PanelInner $direction={direction} $width={width}>\n          {header ?? <PanelHeader title={title} id={titleId} />}\n          {renderedChildren}\n          {footer}\n        </PanelInner>\n      </PanelContainer>\n    </PanelContext.Provider>\n  );\n};\n\nPanelComponent.Header = PanelHeader;\nPanelComponent.Content = PanelContent;\nPanelComponent.CloseButton = PanelCloseButton;\nPanelComponent.Footer = PanelFooter;\n\nexport const Panel = PanelComponent;\nexport default PanelComponent;\n","import * as React from \"react\";\nimport type { TypePanelContext } from \"./PanelTypes\";\n\nexport const PanelContext = React.createContext<TypePanelContext | null>(null);\n\nexport const usePanelContext = (): TypePanelContext => {\n  const ctx = React.useContext(PanelContext);\n  if (!ctx) {\n    throw new Error(\n      \"usePanelContext must be used within a <PanelProvider>. Wrap the consuming tree in <PanelProvider> to provide isPanelOpen / togglePanel.\"\n    );\n  }\n  return ctx;\n};\n","import Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { usePanelContext } from \"./PanelContext\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport type { TypePanelHeaderProps } from \"./PanelTypes\";\n\nexport const PanelHeader = ({\n  title = \"\",\n  id = undefined,\n  children,\n  render,\n  ...rest\n}: TypePanelHeaderProps) => {\n  const panelContext = usePanelContext();\n\n  if (render) {\n    return render(panelContext);\n  }\n\n  return (\n    <Box\n      display=\"flex\"\n      flex=\"0 0 auto\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      p={400}\n      borderBottom=\"1px solid\"\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children || (\n        <>\n          <Text.Headline id={id}>{title}</Text.Headline>\n          <PanelCloseButton />\n        </>\n      )}\n    </Box>\n  );\n};\n\nPanelHeader.displayName = \"Panel.Header\";\n","import * as React from \"react\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { usePanelContext } from \"./PanelContext\";\nimport type { TypePanelCloseButtonProps } from \"./PanelTypes\";\n\nexport const PanelCloseButton = (props: TypePanelCloseButtonProps) => {\n  const panelContext = usePanelContext();\n\n  if (props.render) {\n    return props.render(panelContext) ?? null;\n  }\n\n  return (\n    <Button\n      appearance=\"pill\"\n      aria-label={panelContext.closeButtonLabel}\n      onClick={panelContext.closePanel}\n      {...props}\n    >\n      {props.children || <Icon aria-hidden name=\"x-outline\" />}\n    </Button>\n  );\n};\n\nPanelCloseButton.displayName = \"Panel.CloseButton\";\n","import * as React from \"react\";\nimport { Content } from \"./styles\";\nimport type { TypePanelContentProps } from \"./PanelTypes\";\n\nexport const PanelContent = ({ children, ...rest }: TypePanelContentProps) => (\n  <Content\n    flex=\"1 1 auto\"\n    minHeight=\"0\"\n    p={450}\n    color=\"text.body\"\n    data-panel-content=\"\"\n    {...rest}\n  >\n    {children}\n  </Content>\n);\n\nPanelContent.displayName = \"Panel.Content\";\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { MOTION_DURATION_MEDIUM } from \"@sproutsocial/seeds-motion/unitless\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { PanelDirection } from \"./PanelTypes\";\n\ninterface PanelContainerProps extends TypeSystemCommonProps {\n  $isOpen: boolean;\n  $direction: PanelDirection;\n  $width: number;\n  $gap: number;\n}\n\nconst gapSide = (direction: PanelDirection): \"left\" | \"right\" | \"top\" => {\n  if (direction === \"right\") return \"left\";\n  if (direction === \"left\") return \"right\";\n  return \"top\";\n};\n\nexport const PanelContainer = styled.aside<PanelContainerProps>`\n  background: ${(props) => props.theme.colors.container.background.base};\n  flex-grow: 0;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: flex-basis ${MOTION_DURATION_MEDIUM}s ease-in-out,\n    margin ${MOTION_DURATION_MEDIUM}s ease-in-out;\n  flex-basis: ${(props) => (props.$isOpen ? `${props.$width}px` : \"0px\")};\n  margin-${(props) => gapSide(props.$direction)}: ${(props) =>\n  props.$isOpen && props.$gap ? `${props.$gap}px` : \"0px\"};\n  border-radius: ${({ theme }) => theme.radii[800]};\n\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          width: 100%;\n        `\n      : css`\n          height: 100%;\n        `}\n\n  ${COMMON}\n`;\n\nexport const PanelInner = styled.div<{\n  $direction: PanelDirection;\n  $width: number;\n}>`\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          min-height: ${props.$width}px;\n          width: 100%;\n        `\n      : css`\n          min-width: ${props.$width}px;\n          height: 100%;\n        `}\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n\nexport const Content = styled(Box)`\n  overflow-y: auto;\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  overflow: hidden;\n`;\n","import * as React from \"react\";\nimport { Footer } from \"./styles\";\nimport type { TypePanelFooterProps } from \"./PanelTypes\";\n\nexport const PanelFooter = ({ children, ...rest }: TypePanelFooterProps) => (\n  <Footer p={450} data-panel-footer=\"\" {...rest}>\n    {children}\n  </Footer>\n);\n\nPanelFooter.displayName = \"Panel.Footer\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeDrawerActionProps } from \"@sproutsocial/seeds-react-drawer\";\n\ninterface TypePanelMobileActionsHeaderProps {\n  title?: string;\n  titleId?: string;\n  actions: TypeDrawerActionProps[];\n}\n\n/**\n * Mobile bottom-sheet header used by Panel when `actionsInHeader` is set and\n * no custom `header` is provided. Renders the title on the left and the\n * forwarded actions plus a close button as pills on the right — mirrors the\n * pattern in `seeds-react-peek-in/PeekIn.tsx`. The Drawer's floating rail is\n * suppressed in this combination (`actionsInHeader` opts out), so without this\n * header the actions would render nowhere.\n */\nexport const PanelMobileActionsHeader = ({\n  title,\n  titleId,\n  actions,\n}: TypePanelMobileActionsHeaderProps) => (\n  <Drawer.Header\n    render={(ctx) => (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        pt={400}\n        px={450}\n        flex=\"0 0 auto\"\n      >\n        <Text\n          as=\"h2\"\n          fontSize={400}\n          fontWeight=\"semibold\"\n          color=\"text.headline\"\n          id={titleId}\n        >\n          {title}\n        </Text>\n        <Box display=\"flex\" alignItems=\"center\" gap={200}>\n          {actions.map((action, i) => (\n            <Button\n              key={i}\n              appearance=\"pill\"\n              aria-label={action[\"aria-label\"]}\n              onClick={action.onClick}\n              disabled={action.disabled}\n            >\n              {action.iconName && <Icon aria-hidden name={action.iconName} />}\n            </Button>\n          ))}\n          <Button\n            appearance=\"pill\"\n            aria-label={ctx.closeButtonLabel}\n            onClick={ctx.onClose}\n          >\n            <Icon aria-hidden name=\"x-outline\" />\n          </Button>\n        </Box>\n      </Box>\n    )}\n  />\n);\n\nPanelMobileActionsHeader.displayName = \"PanelMobileActionsHeader\";\n","import * as React from \"react\";\nimport { PanelContext } from \"./PanelContext\";\nimport type { TypePanelContext, TypePanelProviderProps } from \"./PanelTypes\";\n\nexport const PanelProvider = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n}: TypePanelProviderProps) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isPanelOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const openPanel = React.useCallback(() => setOpen(true), [setOpen]);\n  const closePanel = React.useCallback(() => setOpen(false), [setOpen]);\n  const togglePanel = React.useCallback(\n    () => setOpen(!isPanelOpen),\n    [setOpen, isPanelOpen]\n  );\n\n  const value = React.useMemo<TypePanelContext>(\n    () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),\n    [isPanelOpen, openPanel, closePanel, togglePanel]\n  );\n\n  return (\n    <PanelContext.Provider value={value}>{children}</PanelContext.Provider>\n  );\n};\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport type {\n  TypeDrawerSnapPoint,\n  TypeDrawerActionProps,\n} from \"@sproutsocial/seeds-react-drawer\";\n\nexport type { TypeDrawerActionProps as TypePanelActionProps };\n\nexport type PanelDirection = \"left\" | \"right\" | \"bottom\";\n\nexport interface TypePanelContext {\n  isPanelOpen: boolean;\n  togglePanel: () => void;\n  openPanel: () => void;\n  closePanel: () => void;\n  closeButtonLabel?: string;\n}\n\nexport interface TypePanelProviderProps {\n  children: React.ReactNode;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. When provided, the provider becomes controlled. */\n  open?: boolean;\n  /** Called whenever the open state changes. Required for controlled usage. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TypePanelProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Label for the close button. Usually \"Close\". */\n  closeButtonLabel: string;\n\n  /**\n   * Custom header content. When provided, replaces the auto-rendered default\n   * header entirely — `title` and `titleId` are ignored.\n   */\n  header?: React.ReactNode;\n\n  /** Custom footer content. Not rendered when omitted. */\n  footer?: React.ReactNode;\n\n  /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */\n  title?: string;\n\n  /**\n   * Sets the `id` on the title element of the auto-rendered header. When the\n   * default header is used, Panel automatically wires `aria-labelledby` to this\n   * id so the dialog/aside has an accessible name. Pass an explicit\n   * `aria-labelledby` to override (e.g. when pointing at a different element).\n   * Ignored when `header` is provided — supply your own `aria-labelledby` in\n   * that case.\n   */\n  titleId?: string;\n\n  /** Side the panel anchors to on desktop. Defaults to \"right\". */\n  direction?: PanelDirection;\n\n  /**\n   * Width (px) when direction is \"left\" or \"right\", or height (px) when\n   * direction is \"bottom\". Defaults to 384 to match the existing web-app-core\n   * Panel.\n   */\n  width?: number;\n\n  /**\n   * Visual gap (px) between the panel and the adjacent content. Applied as\n   * margin on the side facing the content (left when direction=\"right\",\n   * right when direction=\"left\", top when direction=\"bottom\"). Animates with\n   * the panel's open/close transition and collapses to 0 when closed so the\n   * gap does not remain visible alongside a zero-width panel. Defaults to 0.\n   */\n  gap?: number;\n\n  /**\n   * Forwarded to `useIsMobile`. Accepts a px number or any CSS media-query\n   * length. Below this width, the panel renders as an overlay bottom sheet\n   * (via seeds-react-drawer). Defaults to the theme's `breakpoints.sm`.\n   */\n  mobileBreakpoint?: number | string;\n\n  /** Applies only to the mobile bottom-sheet rendering. */\n  zIndex?: number;\n\n  /** Optional id used for data-qa-panel attributes. */\n  id?: string;\n\n  /**\n   * Snap points the panel can rest at when rendered as a mobile bottom sheet.\n   * Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings\n   * accept `px`/`rem` (e.g. `\"480px\"`, `\"30rem\"`). Order matters — the last\n   * entry is the \"expanded\" state. Ignored on the desktop side-panel rendering.\n   */\n  snapPoints?: TypeDrawerSnapPoint[];\n\n  /** Initial snap point for uncontrolled use. Mobile only. */\n  defaultSnapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */\n  snapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Fires when the active snap point changes. Mobile only. */\n  onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;\n\n  /**\n   * When true, fast swipes can't skip past adjacent snap points. Mobile only.\n   */\n  snapToSequentialPoints?: boolean;\n\n  /**\n   * Action buttons shown in a floating rail above the panel on mobile (the\n   * bottom-sheet rendering). Ignored on desktop side-panel rendering — pass\n   * actions through `header`/`footer` slots there. The rail owns the close\n   * button so the default header omits its built-in close affordance.\n   */\n  actions?: TypeDrawerActionProps[];\n\n  /**\n   * Opt out of the floating mobile rail and render the `actions` inline in the\n   * header as pill buttons instead. Useful for nested bottom sheets and\n   * snap-point layouts where the floating rail would collide with surrounding\n   * UI. Defaults to `false`.\n   *\n   * When `header` is omitted, Panel auto-composes a mobile header that renders\n   * the title, the `actions` as pills, and a close-button pill. When `header`\n   * is provided, the consumer is responsible for rendering the actions inside\n   * their own header — `actions` is forwarded for context only.\n   */\n  actionsInHeader?: boolean;\n}\n\nexport interface TypePanelHeaderProps extends TypeBoxProps {\n  title?: string;\n  /**\n   * When children are provided, `<Panel.CloseButton />` is NOT rendered\n   * automatically. Include it yourself to preserve keyboard accessibility.\n   */\n  children?: React.ReactNode;\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n}\n\nexport interface TypePanelContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelFooterProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n  children?: React.ReactNode;\n}\n"],"mappings":"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","names":["React","import_seeds_react_drawer","React","Button","Icon","import_jsx_runtime","Box","Text","React","import_seeds_react_box","styled","Box","import_jsx_runtime","React","import_jsx_runtime","React","import_seeds_react_box","import_seeds_react_button","import_seeds_react_icon","import_seeds_react_text","import_jsx_runtime","Drawer","Box","Text","Button","Icon","import_jsx_runtime","Drawer","React","import_jsx_runtime","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Panel.tsx","../src/PanelContext.tsx","../src/PanelHeader.tsx","../src/PanelCloseButton.tsx","../src/PanelContent.tsx","../src/styles.ts","../src/PanelFooter.tsx","../src/PanelMobileActionsHeader.tsx","../src/PanelProvider.tsx","../src/PanelTypes.ts"],"sourcesContent":["import Panel from \"./Panel\";\n\nexport default Panel;\nexport { Panel };\nexport { PanelContext, usePanelContext } from \"./PanelContext\";\nexport { PanelProvider } from \"./PanelProvider\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport { PanelContent } from \"./PanelContent\";\nexport { PanelCloseButton } from \"./PanelCloseButton\";\nexport { PanelFooter } from \"./PanelFooter\";\nexport * from \"./PanelTypes\";\n","import * as React from \"react\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport { useIsMobile } from \"@sproutsocial/seeds-react-hooks\";\nimport { usePanelContext, PanelContext } from \"./PanelContext\";\nimport { PanelHeader } from \"./PanelHeader\";\nimport { PanelContent } from \"./PanelContent\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport { PanelFooter } from \"./PanelFooter\";\nimport { PanelMobileActionsHeader } from \"./PanelMobileActionsHeader\";\nimport { PanelContainer, PanelInner } from \"./styles\";\nimport type { TypePanelProps, TypePanelContext } from \"./PanelTypes\";\n\nconst PanelComponent = ({\n  children,\n  closeButtonLabel,\n  header,\n  headerless = false,\n  footer,\n  title,\n  titleId,\n  direction = \"right\",\n  width = 384,\n  gap = 4,\n  mobileBreakpoint,\n  zIndex,\n  id,\n  snapPoints,\n  defaultSnapPoint,\n  snapPoint,\n  onSnapPointChange,\n  snapToSequentialPoints,\n  actions,\n  actionsInHeader,\n  \"aria-labelledby\": ariaLabelledByProp,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: TypePanelProps) => {\n  const panelContext = usePanelContext();\n  const { isPanelOpen, closePanel } = panelContext;\n  const isMobile = useIsMobile(mobileBreakpoint);\n\n  // Expose closeButtonLabel through context so PanelCloseButton can read it\n  // without prop drilling — same pattern as DrawerContext.\n  const enrichedValue = React.useMemo<TypePanelContext>(\n    () => ({ ...panelContext, closeButtonLabel, headerless }),\n    [panelContext, closeButtonLabel, headerless]\n  );\n\n  // Freeze the last-rendered children during the collapse so consumers that\n  // conditionally render content don't produce an empty panel shell while the\n  // flex-basis animation runs.\n  const prevChildrenRef = React.useRef<React.ReactNode>(null);\n  if (isPanelOpen) {\n    prevChildrenRef.current = children;\n  }\n  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;\n\n  // When the consumer relies on the default header, its title element renders\n  // with `id={titleId}`. Auto-wire `aria-labelledby` so the dialog/aside has an\n  // accessible name without forcing every caller to repeat the id.\n  const effectiveAriaLabelledBy =\n    ariaLabelledByProp ?? (!headerless && header == null ? titleId : undefined);\n\n  if (isMobile) {\n    // With `actionsInHeader`, Drawer suppresses the floating rail and expects\n    // the consumer to render the actions inside a custom header. Auto-compose\n    // one (title + action pills + close pill) when the consumer hasn't\n    // supplied their own header; otherwise we'd drop `actions` on the floor.\n    const shouldRenderActionsHeader =\n      !headerless &&\n      header == null &&\n      actionsInHeader === true &&\n      !!actions &&\n      actions.length > 0;\n\n    // Headerless suppresses the built-in header entirely; the children own all\n    // chrome in that mode.\n    let defaultMobileHeader: React.ReactNode = null;\n    if (!headerless) {\n      defaultMobileHeader = shouldRenderActionsHeader ? (\n        <PanelMobileActionsHeader\n          title={title}\n          titleId={titleId}\n          actions={actions!}\n        />\n      ) : (\n        <Drawer.Header title={title} id={titleId} />\n      );\n    }\n\n    return (\n      <PanelContext.Provider value={enrichedValue}>\n        <Drawer\n          {...rest}\n          open={isPanelOpen}\n          onClose={closePanel}\n          direction=\"bottom\"\n          closeButtonLabel={closeButtonLabel}\n          zIndex={zIndex}\n          snapPoints={snapPoints}\n          defaultSnapPoint={defaultSnapPoint}\n          snapPoint={snapPoint}\n          onSnapPointChange={onSnapPointChange}\n          snapToSequentialPoints={snapToSequentialPoints}\n          actions={actions}\n          actionsInHeader={actionsInHeader}\n          aria-labelledby={effectiveAriaLabelledBy}\n          aria-label={ariaLabel}\n        >\n          {header ?? defaultMobileHeader}\n          <PanelContent>{children}</PanelContent>\n          {footer}\n        </Drawer>\n      </PanelContext.Provider>\n    );\n  }\n\n  return (\n    <PanelContext.Provider value={enrichedValue}>\n      <PanelContainer\n        {...rest}\n        $isOpen={isPanelOpen}\n        $direction={direction}\n        $width={width}\n        $gap={gap}\n        data-qa-panel={id}\n        data-qa-panel-isopen={isPanelOpen}\n        aria-labelledby={effectiveAriaLabelledBy}\n        aria-label={ariaLabel}\n      >\n        <PanelInner $direction={direction} $width={width}>\n          {header ??\n            (headerless ? null : <PanelHeader title={title} id={titleId} />)}\n          <PanelContent>{renderedChildren}</PanelContent>\n          {footer}\n        </PanelInner>\n      </PanelContainer>\n    </PanelContext.Provider>\n  );\n};\n\nPanelComponent.Header = PanelHeader;\nPanelComponent.Content = PanelContent;\nPanelComponent.CloseButton = PanelCloseButton;\nPanelComponent.Footer = PanelFooter;\n\nexport const Panel = PanelComponent;\nexport default PanelComponent;\n","import * as React from \"react\";\nimport type { TypePanelContext } from \"./PanelTypes\";\n\nexport const PanelContext = React.createContext<TypePanelContext | null>(null);\n\nexport const usePanelContext = (): TypePanelContext => {\n  const ctx = React.useContext(PanelContext);\n  if (!ctx) {\n    throw new Error(\n      \"usePanelContext must be used within a <PanelProvider>. Wrap the consuming tree in <PanelProvider> to provide isPanelOpen / togglePanel.\"\n    );\n  }\n  return ctx;\n};\n","import Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { usePanelContext } from \"./PanelContext\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport type { TypePanelHeaderProps } from \"./PanelTypes\";\n\nexport const PanelHeader = ({\n  title = \"\",\n  id = undefined,\n  children,\n  render,\n  ...rest\n}: TypePanelHeaderProps) => {\n  const panelContext = usePanelContext();\n\n  if (render) {\n    return render(panelContext);\n  }\n\n  return (\n    <Box\n      display=\"flex\"\n      flex=\"0 0 auto\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      p={400}\n      borderBottom=\"1px solid\"\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children || (\n        <>\n          <Text.Headline id={id}>{title}</Text.Headline>\n          <PanelCloseButton />\n        </>\n      )}\n    </Box>\n  );\n};\n\nPanelHeader.displayName = \"Panel.Header\";\n","import * as React from \"react\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { usePanelContext } from \"./PanelContext\";\nimport type { TypePanelCloseButtonProps } from \"./PanelTypes\";\n\nexport const PanelCloseButton = (props: TypePanelCloseButtonProps) => {\n  const panelContext = usePanelContext();\n\n  if (props.render) {\n    return props.render(panelContext) ?? null;\n  }\n\n  return (\n    <Button\n      appearance=\"pill\"\n      aria-label={panelContext.closeButtonLabel}\n      onClick={panelContext.closePanel}\n      {...props}\n    >\n      {props.children || <Icon aria-hidden name=\"x-outline\" />}\n    </Button>\n  );\n};\n\nPanelCloseButton.displayName = \"Panel.CloseButton\";\n","import * as React from \"react\";\nimport { Content } from \"./styles\";\nimport { usePanelContext } from \"./PanelContext\";\nimport type { TypePanelContentProps } from \"./PanelTypes\";\n\nexport const PanelContent = ({ children, ...rest }: TypePanelContentProps) => {\n  // In headerless mode the content renders flush and defers overflow scrolling\n  // to its children, so the panel can host content that owns its own chrome.\n  const { headerless } = usePanelContext();\n\n  return (\n    <Content\n      flex=\"1 1 auto\"\n      minHeight=\"0\"\n      p={headerless ? 0 : 450}\n      $scroll={!headerless}\n      color=\"text.body\"\n      data-panel-content=\"\"\n      {...rest}\n    >\n      {children}\n    </Content>\n  );\n};\n\nPanelContent.displayName = \"Panel.Content\";\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { MOTION_DURATION_MEDIUM } from \"@sproutsocial/seeds-motion/unitless\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { PanelDirection } from \"./PanelTypes\";\n\ninterface PanelContainerProps extends TypeSystemCommonProps {\n  $isOpen: boolean;\n  $direction: PanelDirection;\n  $width: number;\n  $gap: number;\n}\n\nconst gapSide = (direction: PanelDirection): \"left\" | \"right\" | \"top\" => {\n  if (direction === \"right\") return \"left\";\n  if (direction === \"left\") return \"right\";\n  return \"top\";\n};\n\nexport const PanelContainer = styled.aside<PanelContainerProps>`\n  background: ${(props) => props.theme.colors.container.background.base};\n  flex-grow: 0;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: flex-basis ${MOTION_DURATION_MEDIUM}s ease-in-out,\n    margin ${MOTION_DURATION_MEDIUM}s ease-in-out;\n  flex-basis: ${(props) => (props.$isOpen ? `${props.$width}px` : \"0px\")};\n  margin-${(props) => gapSide(props.$direction)}: ${(props) =>\n  props.$isOpen && props.$gap ? `${props.$gap}px` : \"0px\"};\n  border-radius: ${({ theme }) => theme.radii[800]};\n\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          width: 100%;\n        `\n      : css`\n          align-self: stretch;\n        `}\n\n  ${COMMON}\n`;\n\nexport const PanelInner = styled.div<{\n  $direction: PanelDirection;\n  $width: number;\n}>`\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          min-height: ${props.$width}px;\n          width: 100%;\n        `\n      : css`\n          min-width: ${props.$width}px;\n          height: 100%;\n        `}\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n\nexport const Content = styled(Box)<{ $scroll?: boolean }>`\n  overflow-y: ${({ $scroll = true }) => ($scroll ? \"auto\" : \"hidden\")};\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  overflow: hidden;\n  /*\n   * On mobile the Panel renders inside the Drawer's bottom sheet, whose popup\n   * deliberately bleeds 3rem (--bleed) below the viewport for elastic\n   * overscroll (see seeds-react-drawer/src/styles.ts). A footer pinned to the\n   * end of that popup would land inside the bleed and clip below the fold, so\n   * we lift it by the inherited --bleed; the gap left behind shows the popup's\n   * own background, so there is no visible seam. On desktop --bleed is unset,\n   * so the 0px fallback leaves the footer untouched.\n   */\n  margin-bottom: var(--bleed, 0px);\n`;\n","import * as React from \"react\";\nimport { Footer } from \"./styles\";\nimport type { TypePanelFooterProps } from \"./PanelTypes\";\n\nexport const PanelFooter = ({ children, ...rest }: TypePanelFooterProps) => (\n  <Footer p={450} data-panel-footer=\"\" {...rest}>\n    {children}\n  </Footer>\n);\n\nPanelFooter.displayName = \"Panel.Footer\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeDrawerActionProps } from \"@sproutsocial/seeds-react-drawer\";\n\ninterface TypePanelMobileActionsHeaderProps {\n  title?: string;\n  titleId?: string;\n  actions: TypeDrawerActionProps[];\n}\n\n/**\n * Mobile bottom-sheet header used by Panel when `actionsInHeader` is set and\n * no custom `header` is provided. Renders the title on the left and the\n * forwarded actions plus a close button as pills on the right — mirrors the\n * pattern in `seeds-react-peek-in/PeekIn.tsx`. The Drawer's floating rail is\n * suppressed in this combination (`actionsInHeader` opts out), so without this\n * header the actions would render nowhere.\n */\nexport const PanelMobileActionsHeader = ({\n  title,\n  titleId,\n  actions,\n}: TypePanelMobileActionsHeaderProps) => (\n  <Drawer.Header\n    render={(ctx) => (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        pt={400}\n        px={450}\n        flex=\"0 0 auto\"\n      >\n        <Text\n          as=\"h2\"\n          fontSize={400}\n          fontWeight=\"semibold\"\n          color=\"text.headline\"\n          id={titleId}\n        >\n          {title}\n        </Text>\n        <Box display=\"flex\" alignItems=\"center\" gap={200}>\n          {actions.map((action, i) => (\n            <Button\n              key={i}\n              appearance=\"pill\"\n              aria-label={action[\"aria-label\"]}\n              onClick={action.onClick}\n              disabled={action.disabled}\n            >\n              {action.iconName && <Icon aria-hidden name={action.iconName} />}\n            </Button>\n          ))}\n          <Button\n            appearance=\"pill\"\n            aria-label={ctx.closeButtonLabel}\n            onClick={ctx.onClose}\n          >\n            <Icon aria-hidden name=\"x-outline\" />\n          </Button>\n        </Box>\n      </Box>\n    )}\n  />\n);\n\nPanelMobileActionsHeader.displayName = \"PanelMobileActionsHeader\";\n","import * as React from \"react\";\nimport { PanelContext } from \"./PanelContext\";\nimport type { TypePanelContext, TypePanelProviderProps } from \"./PanelTypes\";\n\nexport const PanelProvider = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n}: TypePanelProviderProps) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isPanelOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const openPanel = React.useCallback(() => setOpen(true), [setOpen]);\n  const closePanel = React.useCallback(() => setOpen(false), [setOpen]);\n  const togglePanel = React.useCallback(\n    () => setOpen(!isPanelOpen),\n    [setOpen, isPanelOpen]\n  );\n\n  const value = React.useMemo<TypePanelContext>(\n    () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),\n    [isPanelOpen, openPanel, closePanel, togglePanel]\n  );\n\n  return (\n    <PanelContext.Provider value={value}>{children}</PanelContext.Provider>\n  );\n};\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport type {\n  TypeDrawerSnapPoint,\n  TypeDrawerActionProps,\n} from \"@sproutsocial/seeds-react-drawer\";\n\nexport type { TypeDrawerActionProps as TypePanelActionProps };\n\nexport type PanelDirection = \"left\" | \"right\" | \"bottom\";\n\nexport interface TypePanelContext {\n  isPanelOpen: boolean;\n  togglePanel: () => void;\n  openPanel: () => void;\n  closePanel: () => void;\n  closeButtonLabel?: string;\n  /**\n   * Set by `Panel` when rendered headerless. `Panel.Content` reads this to\n   * render flush (no padding) and defer overflow scrolling to its children.\n   */\n  headerless?: boolean;\n}\n\nexport interface TypePanelProviderProps {\n  children: React.ReactNode;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. When provided, the provider becomes controlled. */\n  open?: boolean;\n  /** Called whenever the open state changes. Required for controlled usage. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TypePanelProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Label for the close button. Usually \"Close\". */\n  closeButtonLabel: string;\n\n  /**\n   * Custom header content. When provided, replaces the auto-rendered default\n   * header entirely — `title` and `titleId` are ignored.\n   */\n  header?: React.ReactNode;\n\n  /** Custom footer content. Not rendered when omitted. */\n  footer?: React.ReactNode;\n\n  /**\n   * Renders children flush, without the built-in header/close button or content\n   * padding, and lets the children own overflow scrolling. Use when the content\n   * provides its own chrome (e.g. an embedded agent UI). Provide `aria-label`\n   * (or `aria-labelledby`) for an accessible name, since no header title is\n   * rendered. `title`, `titleId`, and `closeButtonLabel` are ignored in this\n   * mode. Defaults to false.\n   */\n  headerless?: boolean;\n\n  /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */\n  title?: string;\n\n  /**\n   * Sets the `id` on the title element of the auto-rendered header. When the\n   * default header is used, Panel automatically wires `aria-labelledby` to this\n   * id so the dialog/aside has an accessible name. Pass an explicit\n   * `aria-labelledby` to override (e.g. when pointing at a different element).\n   * Ignored when `header` is provided — supply your own `aria-labelledby` in\n   * that case.\n   */\n  titleId?: string;\n\n  /** Side the panel anchors to on desktop. Defaults to \"right\". */\n  direction?: PanelDirection;\n\n  /**\n   * Width (px) when direction is \"left\" or \"right\", or height (px) when\n   * direction is \"bottom\". Defaults to 384 to match the existing web-app-core\n   * Panel.\n   */\n  width?: number;\n\n  /**\n   * Visual gap (px) between the panel and the adjacent content. Applied as\n   * margin on the side facing the content (left when direction=\"right\",\n   * right when direction=\"left\", top when direction=\"bottom\"). Animates with\n   * the panel's open/close transition and collapses to 0 when closed so the\n   * gap does not remain visible alongside a zero-width panel. Defaults to 0.\n   */\n  gap?: number;\n\n  /**\n   * Forwarded to `useIsMobile`. Accepts a px number or any CSS media-query\n   * length. Below this width, the panel renders as an overlay bottom sheet\n   * (via seeds-react-drawer). Defaults to the theme's `breakpoints.sm`.\n   */\n  mobileBreakpoint?: number | string;\n\n  /** Applies only to the mobile bottom-sheet rendering. */\n  zIndex?: number;\n\n  /** Optional id used for data-qa-panel attributes. */\n  id?: string;\n\n  /**\n   * Snap points the panel can rest at when rendered as a mobile bottom sheet.\n   * Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings\n   * accept `px`/`rem` (e.g. `\"480px\"`, `\"30rem\"`). Order matters — the last\n   * entry is the \"expanded\" state. Ignored on the desktop side-panel rendering.\n   */\n  snapPoints?: TypeDrawerSnapPoint[];\n\n  /** Initial snap point for uncontrolled use. Mobile only. */\n  defaultSnapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */\n  snapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Fires when the active snap point changes. Mobile only. */\n  onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;\n\n  /**\n   * When true, fast swipes can't skip past adjacent snap points. Mobile only.\n   */\n  snapToSequentialPoints?: boolean;\n\n  /**\n   * Action buttons shown in a floating rail above the panel on mobile (the\n   * bottom-sheet rendering). Ignored on desktop side-panel rendering — pass\n   * actions through `header`/`footer` slots there. The rail owns the close\n   * button so the default header omits its built-in close affordance.\n   */\n  actions?: TypeDrawerActionProps[];\n\n  /**\n   * Opt out of the floating mobile rail and render the `actions` inline in the\n   * header as pill buttons instead. Useful for nested bottom sheets and\n   * snap-point layouts where the floating rail would collide with surrounding\n   * UI. Defaults to `false`.\n   *\n   * When `header` is omitted, Panel auto-composes a mobile header that renders\n   * the title, the `actions` as pills, and a close-button pill. When `header`\n   * is provided, the consumer is responsible for rendering the actions inside\n   * their own header — `actions` is forwarded for context only.\n   */\n  actionsInHeader?: boolean;\n}\n\nexport interface TypePanelHeaderProps extends TypeBoxProps {\n  title?: string;\n  /**\n   * When children are provided, `<Panel.CloseButton />` is NOT rendered\n   * automatically. Include it yourself to preserve keyboard accessibility.\n   */\n  children?: React.ReactNode;\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n}\n\nexport interface TypePanelContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelFooterProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n  children?: React.ReactNode;\n}\n"],"mappings":"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","names":["React","import_seeds_react_drawer","React","Button","Icon","import_jsx_runtime","Box","Text","React","import_seeds_react_box","styled","Box","import_jsx_runtime","React","import_jsx_runtime","React","import_seeds_react_box","import_seeds_react_button","import_seeds_react_icon","import_seeds_react_text","import_jsx_runtime","Drawer","Box","Text","Button","Icon","import_jsx_runtime","Drawer","React","import_jsx_runtime","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-panel",
-  "version": "0.3.7",
+  "version": "1.0.0",
   "description": "Seeds React Panel",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/Panel.stories.tsx

@@ -40,12 +40,10 @@ const MainContent = () => (
 );
 
 const PanelBody = () => (
-  <Panel.Content>
-    <Text.BodyCopy as="p">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac
-      consectetur tortor.
-    </Text.BodyCopy>
-  </Panel.Content>
+  <Text.BodyCopy as="p">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac consectetur
+    tortor.
+  </Text.BodyCopy>
 );
 
 const meta: Meta<typeof Panel> = {
@@ -94,6 +92,27 @@ export const LeftSide: Story = {
   ),
 };
 
+export const WithMargin: Story = {
+  render: () => (
+    <PanelProvider defaultOpen>
+      <LayoutFrame>
+        <MainContent />
+        <Panel
+          closeButtonLabel="Close"
+          title="Panel title"
+          titleId="panel-header"
+          aria-labelledby="panel-header"
+          mt={200}
+          mb={200}
+          mr={200}
+        >
+          <PanelBody />
+        </Panel>
+      </LayoutFrame>
+    </PanelProvider>
+  ),
+};
+
 export const CustomWidth: Story = {
   render: () => (
     <PanelProvider defaultOpen>
@@ -127,12 +146,48 @@ export const CustomHeader: Story = {
             </Panel.Header>
           }
         >
-          <Panel.Content>
-            <Text.BodyCopy as="p">
-              When you supply a custom header via the header prop, you are
-              responsible for rendering Panel.CloseButton yourself.
-            </Text.BodyCopy>
-          </Panel.Content>
+          <Text.BodyCopy as="p">
+            When you supply a custom header via the header prop, you are
+            responsible for rendering Panel.CloseButton yourself.
+          </Text.BodyCopy>
+        </Panel>
+      </LayoutFrame>
+    </PanelProvider>
+  ),
+};
+
+export const Headerless: Story = {
+  render: () => (
+    <PanelProvider defaultOpen>
+      <LayoutFrame>
+        <MainContent />
+        <Panel closeButtonLabel="Close" headerless aria-label="Assistant">
+          {/*
+           * In headerless mode the children own all chrome and overflow — no
+           * built-in header, padding, or close button. The auto-wrapped
+           * Panel.Content renders flush (p=0) and is bounded to the panel
+           * height, so the children supply their own flex column + scroll
+           * region. Here a fixed bar stays put while the body scrolls flush to
+           * the panel edges.
+           */}
+          <Box display="flex" flexDirection="column" height="100%">
+            <Box
+              flex="0 0 auto"
+              bg="container.background.base"
+              borderBottom="1px solid"
+              borderColor="container.border.base"
+              p={400}
+            >
+              <Text.Headline as="h2">Custom chrome</Text.Headline>
+            </Box>
+            <Box flex="1 1 auto" minHeight={0} overflow="auto" p={400}>
+              {Array.from({ length: 30 }, (_, i) => (
+                <Text.BodyCopy key={i} as="p">
+                  Scrollable line {i + 1}
+                </Text.BodyCopy>
+              ))}
+            </Box>
+          </Box>
         </Panel>
       </LayoutFrame>
     </PanelProvider>
@@ -149,20 +204,20 @@ export const WithFooter: Story = {
           title="Panel title"
           titleId="panel-header"
           aria-labelledby="panel-header"
+          footer={
+            <Panel.Footer>
+              <Box display="flex" justifyContent="flex-end" gap={300}>
+                <Button appearance="secondary">Cancel</Button>
+                <Button appearance="primary">Save</Button>
+              </Box>
+            </Panel.Footer>
+          }
         >
-          <Panel.Content>
-            {Array.from({ length: 20 }, (_, i) => (
-              <Text.BodyCopy key={i} as="p">
-                Scrollable content line {i + 1}
-              </Text.BodyCopy>
-            ))}
-          </Panel.Content>
-          <Panel.Footer>
-            <Box display="flex" justifyContent="flex-end" gap={300}>
-              <Button appearance="secondary">Cancel</Button>
-              <Button appearance="primary">Save</Button>
-            </Box>
-          </Panel.Footer>
+          {Array.from({ length: 20 }, (_, i) => (
+            <Text.BodyCopy key={i} as="p">
+              Scrollable content line {i + 1}
+            </Text.BodyCopy>
+          ))}
         </Panel>
       </LayoutFrame>
     </PanelProvider>
@@ -221,20 +276,20 @@ export const MobileWithFooter: Story = {
           title="Panel title"
           titleId="panel-header"
           aria-labelledby="panel-header"
+          footer={
+            <Panel.Footer>
+              <Box display="flex" justifyContent="flex-end" gap={300}>
+                <Button appearance="secondary">Cancel</Button>
+                <Button appearance="primary">Save</Button>
+              </Box>
+            </Panel.Footer>
+          }
         >
-          <Panel.Content>
-            {Array.from({ length: 20 }, (_, i) => (
-              <Text.BodyCopy key={i} as="p">
-                Scrollable content line {i + 1}
-              </Text.BodyCopy>
-            ))}
-          </Panel.Content>
-          <Panel.Footer>
-            <Box display="flex" justifyContent="flex-end" gap={300}>
-              <Button appearance="secondary">Cancel</Button>
-              <Button appearance="primary">Save</Button>
-            </Box>
-          </Panel.Footer>
+          {Array.from({ length: 20 }, (_, i) => (
+            <Text.BodyCopy key={i} as="p">
+              Scrollable content line {i + 1}
+            </Text.BodyCopy>
+          ))}
         </Panel>
       </LayoutFrame>
     </PanelProvider>
@@ -316,20 +371,20 @@ export const CustomHeaderAndFooter: Story = {
               <Panel.CloseButton />
             </Panel.Header>
           }
+          footer={
+            <Panel.Footer>
+              <Box display="flex" justifyContent="flex-end" gap={300}>
+                <Button appearance="secondary">Cancel</Button>
+                <Button appearance="primary">Save</Button>
+              </Box>
+            </Panel.Footer>
+          }
         >
-          <Panel.Content>
-            {Array.from({ length: 20 }, (_, i) => (
-              <Text.BodyCopy key={i} as="p">
-                Scrollable content line {i + 1}
-              </Text.BodyCopy>
-            ))}
-          </Panel.Content>
-          <Panel.Footer>
-            <Box display="flex" justifyContent="flex-end" gap={300}>
-              <Button appearance="secondary">Cancel</Button>
-              <Button appearance="primary">Save</Button>
-            </Box>
-          </Panel.Footer>
+          {Array.from({ length: 20 }, (_, i) => (
+            <Text.BodyCopy key={i} as="p">
+              Scrollable content line {i + 1}
+            </Text.BodyCopy>
+          ))}
         </Panel>
       </LayoutFrame>
     </PanelProvider>

package/src/Panel.tsx

@@ -14,6 +14,7 @@ const PanelComponent = ({
   children,
   closeButtonLabel,
   header,
+  headerless = false,
   footer,
   title,
   titleId,
@@ -41,8 +42,8 @@ const PanelComponent = ({
   // Expose closeButtonLabel through context so PanelCloseButton can read it
   // without prop drilling — same pattern as DrawerContext.
   const enrichedValue = React.useMemo<TypePanelContext>(
-    () => ({ ...panelContext, closeButtonLabel }),
-    [panelContext, closeButtonLabel]
+    () => ({ ...panelContext, closeButtonLabel, headerless }),
+    [panelContext, closeButtonLabel, headerless]
   );
 
   // Freeze the last-rendered children during the collapse so consumers that
@@ -58,7 +59,7 @@ const PanelComponent = ({
   // with `id={titleId}`. Auto-wire `aria-labelledby` so the dialog/aside has an
   // accessible name without forcing every caller to repeat the id.
   const effectiveAriaLabelledBy =
-    ariaLabelledByProp ?? (header == null ? titleId : undefined);
+    ariaLabelledByProp ?? (!headerless && header == null ? titleId : undefined);
 
   if (isMobile) {
     // With `actionsInHeader`, Drawer suppresses the floating rail and expects
@@ -66,11 +67,27 @@ const PanelComponent = ({
     // one (title + action pills + close pill) when the consumer hasn't
     // supplied their own header; otherwise we'd drop `actions` on the floor.
     const shouldRenderActionsHeader =
+      !headerless &&
       header == null &&
       actionsInHeader === true &&
       !!actions &&
       actions.length > 0;
 
+    // Headerless suppresses the built-in header entirely; the children own all
+    // chrome in that mode.
+    let defaultMobileHeader: React.ReactNode = null;
+    if (!headerless) {
+      defaultMobileHeader = shouldRenderActionsHeader ? (
+        <PanelMobileActionsHeader
+          title={title}
+          titleId={titleId}
+          actions={actions!}
+        />
+      ) : (
+        <Drawer.Header title={title} id={titleId} />
+      );
+    }
+
     return (
       <PanelContext.Provider value={enrichedValue}>
         <Drawer
@@ -90,17 +107,8 @@ const PanelComponent = ({
           aria-labelledby={effectiveAriaLabelledBy}
           aria-label={ariaLabel}
         >
-          {header ??
-            (shouldRenderActionsHeader ? (
-              <PanelMobileActionsHeader
-                title={title}
-                titleId={titleId}
-                actions={actions!}
-              />
-            ) : (
-              <Drawer.Header title={title} id={titleId} />
-            ))}
-          {children}
+          {header ?? defaultMobileHeader}
+          <PanelContent>{children}</PanelContent>
           {footer}
         </Drawer>
       </PanelContext.Provider>
@@ -121,8 +129,9 @@ const PanelComponent = ({
         aria-label={ariaLabel}
       >
         <PanelInner $direction={direction} $width={width}>
-          {header ?? <PanelHeader title={title} id={titleId} />}
-          {renderedChildren}
+          {header ??
+            (headerless ? null : <PanelHeader title={title} id={titleId} />)}
+          <PanelContent>{renderedChildren}</PanelContent>
           {footer}
         </PanelInner>
       </PanelContainer>

package/src/PanelContent.tsx

@@ -1,18 +1,26 @@
 import * as React from "react";
 import { Content } from "./styles";
+import { usePanelContext } from "./PanelContext";
 import type { TypePanelContentProps } from "./PanelTypes";
 
-export const PanelContent = ({ children, ...rest }: TypePanelContentProps) => (
-  <Content
-    flex="1 1 auto"
-    minHeight="0"
-    p={450}
-    color="text.body"
-    data-panel-content=""
-    {...rest}
-  >
-    {children}
-  </Content>
-);
+export const PanelContent = ({ children, ...rest }: TypePanelContentProps) => {
+  // In headerless mode the content renders flush and defers overflow scrolling
+  // to its children, so the panel can host content that owns its own chrome.
+  const { headerless } = usePanelContext();
+
+  return (
+    <Content
+      flex="1 1 auto"
+      minHeight="0"
+      p={headerless ? 0 : 450}
+      $scroll={!headerless}
+      color="text.body"
+      data-panel-content=""
+      {...rest}
+    >
+      {children}
+    </Content>
+  );
+};
 
 PanelContent.displayName = "Panel.Content";

package/src/PanelTypes.ts

@@ -20,6 +20,11 @@ export interface TypePanelContext {
   openPanel: () => void;
   closePanel: () => void;
   closeButtonLabel?: string;
+  /**
+   * Set by `Panel` when rendered headerless. `Panel.Content` reads this to
+   * render flush (no padding) and defer overflow scrolling to its children.
+   */
+  headerless?: boolean;
 }
 
 export interface TypePanelProviderProps {
@@ -50,6 +55,16 @@ export interface TypePanelProps
   /** Custom footer content. Not rendered when omitted. */
   footer?: React.ReactNode;
 
+  /**
+   * Renders children flush, without the built-in header/close button or content
+   * padding, and lets the children own overflow scrolling. Use when the content
+   * provides its own chrome (e.g. an embedded agent UI). Provide `aria-label`
+   * (or `aria-labelledby`) for an accessible name, since no header title is
+   * rendered. `title`, `titleId`, and `closeButtonLabel` are ignored in this
+   * mode. Defaults to false.
+   */
+  headerless?: boolean;
+
   /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */
   title?: string;
 

package/src/__tests__/Panel.test.tsx

@@ -19,11 +19,7 @@ const renderPanel = ({
   defaultOpen = false,
   direction,
   width,
-  children = (
-    <Panel.Content>
-      <p>Panel Content</p>
-    </Panel.Content>
-  ),
+  children = <p>Panel Content</p>,
   title = "Panel Header",
   titleId = "panel-1-header",
   closeButtonLabel = "close button",
@@ -97,7 +93,7 @@ describe("Panel (desktop / inline mode)", () => {
     );
   });
 
-  it("Panel.Content sets data-panel-content attribute", () => {
+  it("auto-wraps children in Panel.Content (data-panel-content)", () => {
     renderPanel({ defaultOpen: true });
     expect(
       screen.getByText(/panel content/i).closest("[data-panel-content]")
@@ -138,6 +134,51 @@ describe("Panel (desktop / inline mode)", () => {
     renderPanel({ defaultOpen: false });
     expect(screen.getByRole("complementary")).toHaveStyle("flex-basis: 0px");
   });
+
+  describe("headerless", () => {
+    it("suppresses the built-in header and close button", () => {
+      renderPanel({ defaultOpen: true, headerless: true });
+
+      expect(screen.queryByText("Panel Header")).not.toBeInTheDocument();
+      expect(screen.queryByLabelText("close button")).not.toBeInTheDocument();
+    });
+
+    it("still auto-wraps children in Panel.Content", () => {
+      renderPanel({ defaultOpen: true, headerless: true });
+
+      expect(screen.getByText(/panel content/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(/panel content/i).closest("[data-panel-content]")
+      ).toBeInTheDocument();
+    });
+
+    it("still opens and closes via context", async () => {
+      const { user } = renderPanel({ defaultOpen: false, headerless: true });
+      const panel = screen.getByRole("complementary");
+      expect(panel).toHaveAttribute("data-qa-panel-isopen", "false");
+
+      await act(async () => {
+        await user.click(screen.getByText("toggle"));
+      });
+
+      await waitFor(() => {
+        expect(panel).toHaveAttribute("data-qa-panel-isopen", "true");
+      });
+      expect(screen.getByText(/panel content/i)).toBeInTheDocument();
+    });
+
+    it("takes its accessible name from aria-label without a dangling aria-labelledby", () => {
+      renderPanel({
+        defaultOpen: true,
+        headerless: true,
+        "aria-label": "Assistant",
+      });
+
+      const panel = screen.getByRole("complementary");
+      expect(panel).toHaveAttribute("aria-label", "Assistant");
+      expect(panel).not.toHaveAttribute("aria-labelledby");
+    });
+  });
 });
 
 describe("Panel (mobile / drawer mode)", () => {
@@ -303,6 +344,47 @@ describe("Panel (mobile / drawer mode)", () => {
     // The consumer owns rendering — Panel must not duplicate the action pill.
     expect(screen.queryByLabelText("Expand")).not.toBeInTheDocument();
   });
+
+  it("suppresses the default Drawer header when headerless", () => {
+    renderPanel({ defaultOpen: true, headerless: true });
+
+    expect(screen.queryByText("Panel Header")).not.toBeInTheDocument();
+    expect(screen.getByText(/panel content/i)).toBeInTheDocument();
+  });
+
+  it("wraps children in the scrollable Panel.Content region", () => {
+    renderPanel({ defaultOpen: true });
+
+    expect(
+      screen.getByText(/panel content/i).closest("[data-panel-content]")
+    ).toBeInTheDocument();
+  });
+
+  it("renders the footer outside the scroll region so it stays pinned", () => {
+    renderPanel({
+      defaultOpen: true,
+      footer: <Panel.Footer>footer content</Panel.Footer>,
+    });
+
+    const footer = screen.getByText("footer content");
+    expect(footer).toBeInTheDocument();
+    // The footer must be a sibling of the scroll region, not nested inside it,
+    // or it would scroll away with the content and fall below the fold.
+    expect(footer.closest("[data-panel-content]")).not.toBeInTheDocument();
+  });
+
+  it("lifts the footer above the Drawer's bottom-sheet bleed", () => {
+    renderPanel({
+      defaultOpen: true,
+      footer: <Panel.Footer>footer content</Panel.Footer>,
+    });
+
+    // The footer compensates for the Drawer popup's --bleed (3rem of overscroll
+    // below the viewport) so its actions stay fully visible above the fold.
+    expect(
+      screen.getByText("footer content").closest("[data-panel-footer]")
+    ).toHaveStyleRule("margin-bottom", "var(--bleed,0px)");
+  });
 });
 
 describe("PanelProvider (controlled)", () => {
@@ -320,9 +402,7 @@ describe("PanelProvider (controlled)", () => {
         >
           <ToggleButton />
           <Panel closeButtonLabel="close button">
-            <Panel.Content>
-              <p>controlled content</p>
-            </Panel.Content>
+            <p>controlled content</p>
           </Panel>
         </PanelProvider>
       );

package/src/styles.ts

@@ -36,7 +36,7 @@ export const PanelContainer = styled.aside<PanelContainerProps>`
           width: 100%;
         `
       : css`
-          height: 100%;
+          align-self: stretch;
         `}
 
   ${COMMON}
@@ -61,11 +61,21 @@ export const PanelInner = styled.div<{
   overflow: hidden;
 `;
 
-export const Content = styled(Box)`
-  overflow-y: auto;
+export const Content = styled(Box)<{ $scroll?: boolean }>`
+  overflow-y: ${({ $scroll = true }) => ($scroll ? "auto" : "hidden")};
 `;
 
 export const Footer = styled(Box)`
   flex: 0 0 auto;
   overflow: hidden;
+  /*
+   * On mobile the Panel renders inside the Drawer's bottom sheet, whose popup
+   * deliberately bleeds 3rem (--bleed) below the viewport for elastic
+   * overscroll (see seeds-react-drawer/src/styles.ts). A footer pinned to the
+   * end of that popup would land inside the bleed and clip below the fold, so
+   * we lift it by the inherited --bleed; the gap left behind shows the popup's
+   * own background, so there is no visible seam. On desktop --bleed is unset,
+   * so the 0px fallback leaves the footer untouched.
+   */
+  margin-bottom: var(--bleed, 0px);
 `;