@sproutsocial/seeds-react-panel 1.0.7 → 1.0.9

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     15.02 KB
-CJS dist/index.js.map 28.30 KB
-CJS ⚡️ Build success in 81ms
-ESM dist/esm/index.js     11.33 KB
-ESM dist/esm/index.js.map 27.96 KB
-ESM ⚡️ Build success in 81ms
+CJS dist/index.js     15.38 KB
+CJS dist/index.js.map 28.81 KB
+CJS ⚡️ Build success in 28ms
+ESM dist/esm/index.js     11.66 KB
+ESM dist/esm/index.js.map 28.47 KB
+ESM ⚡️ Build success in 29ms
 DTS Build start
-DTS ⚡️ Build success in 4199ms
+DTS ⚡️ Build success in 3982ms
 DTS dist/index.d.ts  9.03 KB
 DTS dist/index.d.mts 9.03 KB
-Done in 5.71s.
+Done in 5.84s.

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sproutsocial/seeds-react-panel
 
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies [8e5e1ba]
+  - @sproutsocial/seeds-react-button@2.3.2
+  - @sproutsocial/seeds-react-drawer@2.2.15
+
+## 1.0.8
+
+### Patch Changes
+
+- d27cbd1: Headerless `Panel.Content` now lays out as a flex column so its children can fill the panel height.
+
+  Headerless mode already defers overflow scrolling to the panel's children, but the content area rendered as a block container — so a child could never resolve a percentage height or flex to the panel's full height, leaving anything past the fold clipped by the content's hidden overflow with no way to scroll. This also makes the PeekIn rail's existing `flex: 1 1 auto` styles functional, letting embedded content pin its own header/footer and scroll the area between them. Non-headerless panels are unchanged.
+
 ## 1.0.7
 
 ### Patch Changes

package/dist/esm/index.js

@@ -122,6 +122,15 @@ var PanelInner = styled.div`
 `;
 var Content = styled(Box2)`
   overflow-y: ${({ $scroll = true }) => $scroll ? "auto" : "hidden"};
+  /*
+   * When content owns its own scrolling ($scroll false, i.e. headerless), lay
+   * out as a flex column so a child can flex to the panel's full height —
+   * percentage heights can't resolve against a block container here.
+   */
+  ${({ $scroll = true }) => !$scroll && css`
+      display: flex;
+      flex-direction: column;
+    `}
 `;
 var Footer = styled(Box2)`
   flex: 0 0 auto;

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  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"]}
+{"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 as a flex column and defers\n  // overflow scrolling to its children, so the panel can host content that\n  // owns its own chrome and fills the panel height (e.g. via flex: 1 1 auto).\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   * When content owns its own scrolling ($scroll false, i.e. headerless), lay\n   * out as a flex column so a child can flex to the panel's full height —\n   * percentage heights can't resolve against a block container here.\n   */\n  ${({ $scroll = true }) =>\n    !$scroll &&\n    css`\n      display: flex;\n      flex-direction: column;\n    `}\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.js

@@ -166,6 +166,15 @@ var PanelInner = import_styled_components.default.div`
 `;
 var Content = (0, import_styled_components.default)(import_seeds_react_box2.default)`
   overflow-y: ${({ $scroll = true }) => $scroll ? "auto" : "hidden"};
+  /*
+   * When content owns its own scrolling ($scroll false, i.e. headerless), lay
+   * out as a flex column so a child can flex to the panel's full height —
+   * percentage heights can't resolve against a block container here.
+   */
+  ${({ $scroll = true }) => !$scroll && import_styled_components.css`
+      display: flex;
+      flex-direction: column;
+    `}
 `;
 var Footer = (0, import_styled_components.default)(import_seeds_react_box2.default)`
   flex: 0 0 auto;

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  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"]}
+{"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 as a flex column and defers\n  // overflow scrolling to its children, so the panel can host content that\n  // owns its own chrome and fills the panel height (e.g. via flex: 1 1 auto).\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   * When content owns its own scrolling ($scroll false, i.e. headerless), lay\n   * out as a flex column so a child can flex to the panel's full height —\n   * percentage heights can't resolve against a block container here.\n   */\n  ${({ $scroll = true }) =>\n    !$scroll &&\n    css`\n      display: flex;\n      flex-direction: column;\n    `}\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": "1.0.7",
+  "version": "1.0.9",
   "description": "Seeds React Panel",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     "@sproutsocial/seeds-react-theme": "^4.3.1",
     "@sproutsocial/seeds-react-system-props": "^3.1.3",
     "@sproutsocial/seeds-react-box": "^1.1.27",
-    "@sproutsocial/seeds-react-button": "^2.3.1",
+    "@sproutsocial/seeds-react-button": "^2.3.2",
     "@sproutsocial/seeds-react-icon": "^2.4.6",
     "@sproutsocial/seeds-react-text": "^1.5.2",
     "@sproutsocial/seeds-motion": "^1.8.2",

package/src/PanelContent.tsx

@@ -4,8 +4,9 @@ import { usePanelContext } from "./PanelContext";
 import type { TypePanelContentProps } from "./PanelTypes";
 
 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.
+  // In headerless mode the content renders flush as a flex column and defers
+  // overflow scrolling to its children, so the panel can host content that
+  // owns its own chrome and fills the panel height (e.g. via flex: 1 1 auto).
   const { headerless } = usePanelContext();
 
   return (

package/src/__tests__/Panel.test.tsx

@@ -152,6 +152,17 @@ describe("Panel (desktop / inline mode)", () => {
       ).toBeInTheDocument();
     });
 
+    it("lays Panel.Content out as a flex column so children can fill the panel height", () => {
+      renderPanel({ defaultOpen: true, headerless: true });
+
+      const content = screen
+        .getByText(/panel content/i)
+        .closest("[data-panel-content]");
+      expect(content).toHaveStyle("display: flex");
+      expect(content).toHaveStyle("flex-direction: column");
+      expect(content).toHaveStyle("overflow-y: hidden");
+    });
+
     it("still opens and closes via context", async () => {
       const { user } = renderPanel({ defaultOpen: false, headerless: true });
       const panel = screen.getByRole("complementary");

package/src/styles.ts

@@ -63,6 +63,17 @@ export const PanelInner = styled.div<{
 
 export const Content = styled(Box)<{ $scroll?: boolean }>`
   overflow-y: ${({ $scroll = true }) => ($scroll ? "auto" : "hidden")};
+  /*
+   * When content owns its own scrolling ($scroll false, i.e. headerless), lay
+   * out as a flex column so a child can flex to the panel's full height —
+   * percentage heights can't resolve against a block container here.
+   */
+  ${({ $scroll = true }) =>
+    !$scroll &&
+    css`
+      display: flex;
+      flex-direction: column;
+    `}
 `;
 
 export const Footer = styled(Box)`