@sproutsocial/seeds-react-panel 0.3.7

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-panel/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     13.98 KB
+CJS dist/index.js.map 25.98 KB
+CJS ⚡️ Build success in 63ms
+ESM dist/esm/index.js     10.33 KB
+ESM dist/esm/index.js.map 25.64 KB
+ESM ⚡️ Build success in 63ms
+DTS Build start
+DTS ⚡️ Build success in 3708ms
+DTS dist/index.d.ts  8.35 KB
+DTS dist/index.d.mts 8.35 KB
+Done in 5.00s.

package/CHANGELOG.md

@@ -0,0 +1,139 @@
+# @sproutsocial/seeds-react-panel
+
+## 0.3.7
+
+### Patch Changes
+
+- Updated dependencies [69c9d02]
+  - @sproutsocial/seeds-react-icon@2.4.0
+  - @sproutsocial/seeds-react-button@2.2.1
+  - @sproutsocial/seeds-react-drawer@2.2.7
+
+## 0.3.6
+
+### Patch Changes
+
+- Updated dependencies [67caa51]
+- Updated dependencies [edc1819]
+  - @sproutsocial/seeds-react-drawer@2.2.6
+  - @sproutsocial/seeds-react-text@1.4.3
+
+## 0.3.5
+
+### Patch Changes
+
+- Updated dependencies [456a20f]
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-button@2.2.0
+  - @sproutsocial/seeds-react-system-props@3.1.1
+  - @sproutsocial/seeds-react-drawer@2.2.5
+  - @sproutsocial/seeds-react-box@1.1.21
+  - @sproutsocial/seeds-react-icon@2.3.13
+  - @sproutsocial/seeds-react-text@1.4.2
+
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+- Updated dependencies [a0fe3d3]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-button@2.1.3
+  - @sproutsocial/seeds-react-box@1.1.20
+  - @sproutsocial/seeds-react-drawer@2.2.4
+  - @sproutsocial/seeds-react-hooks@3.2.2
+  - @sproutsocial/seeds-react-icon@2.3.12
+
+## 0.3.3
+
+### Patch Changes
+
+- Updated dependencies [cb27f07]
+  - @sproutsocial/seeds-react-button@2.1.2
+  - @sproutsocial/seeds-react-drawer@2.2.3
+
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [40d2dfe]
+  - @sproutsocial/seeds-react-button@2.1.1
+  - @sproutsocial/seeds-react-drawer@2.2.2
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-button@2.1.0
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+  - @sproutsocial/seeds-react-drawer@2.2.1
+  - @sproutsocial/seeds-react-box@1.1.19
+  - @sproutsocial/seeds-react-hooks@3.2.1
+  - @sproutsocial/seeds-react-icon@2.3.11
+  - @sproutsocial/seeds-react-text@1.4.1
+
+## 0.3.0
+
+### Minor Changes
+
+- 1b8cf30: Add a floating action rail to the mobile bottom-sheet `Drawer`. New `Drawer`
+  props:
+
+  - `actions?: TypeDrawerActionProps[]` — pill buttons rendered in a horizontal
+    rail above the popup on mobile, matching the ModalV2 mobile pattern. The
+    rail owns the close button, so the default `Drawer.Header` omits its
+    built-in close affordance when actions are provided.
+  - `actionsInHeader?: boolean` — opt out of the rail and render actions inside
+    the header instead. Use this for nested bottom sheets and snap-point
+    layouts where a rail above the popup would collide with surrounding UI or
+    fall off-screen at the highest snap point.
+
+  `Panel` and `PeekIn` forward both props to the underlying `Drawer`. `PeekIn`'s
+  existing `actions`/`panelToggle` now render in the rail by default on mobile;
+  opt into the prior in-header behavior with `actionsInHeader`. The
+  `WithSnapPoints` `PeekIn` story has been updated to set `actionsInHeader` so
+  nested-drawer header layout is preserved.
+
+  Internal: new `ActionRail` and `ActionRailButton` primitives are exported from
+  `@sproutsocial/seeds-react-drawer` for use elsewhere in the design system.
+
+### Patch Changes
+
+- 1b8cf30: Fix `Panel` silently dropping `actions` when `actionsInHeader={true}` on mobile.
+  When the consumer opts out of the floating rail and doesn't supply a custom
+  `header`, `Panel` now auto-composes a mobile header that renders the title,
+  the forwarded `actions` as pill buttons, and a close-button pill — matching
+  the pattern used by `PeekIn`. Consumers that pass their own `header` retain
+  full control and are responsible for rendering the actions inline themselves.
+- Updated dependencies [1b8cf30]
+- Updated dependencies [1b8cf30]
+  - @sproutsocial/seeds-react-drawer@2.2.0
+  - @sproutsocial/seeds-react-icon@2.3.10
+  - @sproutsocial/seeds-react-button@2.0.8
+
+## 0.2.0
+
+### Minor Changes
+
+- b961e75: Add `seeds-react-panel` — an inline (push-content) sidebar panel, exposed through Racine as `Panel`, `PanelProvider`, and `usePanelContext`.
+
+  - Renders inline on desktop and pushes sibling content via `flex-basis`. Supports `direction="left" | "right" | "bottom"` and a configurable `width`.
+  - Below the mobile breakpoint, automatically switches to an overlay bottom sheet by delegating to `seeds-react-drawer`.
+  - Compound API mirrors `Drawer`: `Panel.Header`, `Panel.Content`, `Panel.CloseButton`.
+  - Context-driven open state via `PanelProvider` (supports both controlled `open` / `onOpenChange` and uncontrolled `defaultOpen`).
+
+### Patch Changes
+
+- Updated dependencies [b961e75]
+- Updated dependencies [47c62b3]
+- Updated dependencies [b961e75]
+  - @sproutsocial/seeds-react-drawer@2.1.0
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-hooks@3.2.0
+  - @sproutsocial/seeds-react-box@1.1.18
+  - @sproutsocial/seeds-react-icon@2.3.9
+  - @sproutsocial/seeds-react-button@2.0.7

package/dist/esm/index.js

@@ -0,0 +1,366 @@
+// src/Panel.tsx
+import * as React6 from "react";
+import Drawer2 from "@sproutsocial/seeds-react-drawer";
+import { useIsMobile } from "@sproutsocial/seeds-react-hooks";
+
+// src/PanelContext.tsx
+import * as React from "react";
+var PanelContext = React.createContext(null);
+var usePanelContext = () => {
+  const ctx = React.useContext(PanelContext);
+  if (!ctx) {
+    throw new Error(
+      "usePanelContext must be used within a <PanelProvider>. Wrap the consuming tree in <PanelProvider> to provide isPanelOpen / togglePanel."
+    );
+  }
+  return ctx;
+};
+
+// src/PanelHeader.tsx
+import Box from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+
+// src/PanelCloseButton.tsx
+import "react";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { jsx } from "react/jsx-runtime";
+var PanelCloseButton = (props) => {
+  const panelContext = usePanelContext();
+  if (props.render) {
+    return props.render(panelContext) ?? null;
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "pill",
+      "aria-label": panelContext.closeButtonLabel,
+      onClick: panelContext.closePanel,
+      ...props,
+      children: props.children || /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, name: "x-outline" })
+    }
+  );
+};
+PanelCloseButton.displayName = "Panel.CloseButton";
+
+// src/PanelHeader.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PanelHeader = ({
+  title = "",
+  id = void 0,
+  children,
+  render,
+  ...rest
+}) => {
+  const panelContext = usePanelContext();
+  if (render) {
+    return render(panelContext);
+  }
+  return /* @__PURE__ */ jsx2(
+    Box,
+    {
+      display: "flex",
+      flex: "0 0 auto",
+      justifyContent: "space-between",
+      alignItems: "center",
+      p: 400,
+      borderBottom: "1px solid",
+      borderColor: "container.border.base",
+      ...rest,
+      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Text.Headline, { id, children: title }),
+        /* @__PURE__ */ jsx2(PanelCloseButton, {})
+      ] })
+    }
+  );
+};
+PanelHeader.displayName = "Panel.Header";
+
+// src/PanelContent.tsx
+import "react";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/unitless";
+import Box2 from "@sproutsocial/seeds-react-box";
+var gapSide = (direction) => {
+  if (direction === "right") return "left";
+  if (direction === "left") return "right";
+  return "top";
+};
+var PanelContainer = styled.aside`
+  background: ${(props) => props.theme.colors.container.background.base};
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: flex-basis ${MOTION_DURATION_MEDIUM}s ease-in-out,
+    margin ${MOTION_DURATION_MEDIUM}s ease-in-out;
+  flex-basis: ${(props) => props.$isOpen ? `${props.$width}px` : "0px"};
+  margin-${(props) => gapSide(props.$direction)}: ${(props) => props.$isOpen && props.$gap ? `${props.$gap}px` : "0px"};
+  border-radius: ${({ theme }) => theme.radii[800]};
+
+  ${(props) => props.$direction === "bottom" ? css`
+          width: 100%;
+        ` : css`
+          height: 100%;
+        `}
+
+  ${COMMON}
+`;
+var PanelInner = styled.div`
+  ${(props) => props.$direction === "bottom" ? css`
+          min-height: ${props.$width}px;
+          width: 100%;
+        ` : css`
+          min-width: ${props.$width}px;
+          height: 100%;
+        `}
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+var Content = styled(Box2)`
+  overflow-y: auto;
+`;
+var Footer = styled(Box2)`
+  flex: 0 0 auto;
+  overflow: hidden;
+`;
+
+// src/PanelContent.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PanelContent = ({ children, ...rest }) => /* @__PURE__ */ jsx3(
+  Content,
+  {
+    flex: "1 1 auto",
+    minHeight: "0",
+    p: 450,
+    color: "text.body",
+    "data-panel-content": "",
+    ...rest,
+    children
+  }
+);
+PanelContent.displayName = "Panel.Content";
+
+// src/PanelFooter.tsx
+import "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PanelFooter = ({ children, ...rest }) => /* @__PURE__ */ jsx4(Footer, { p: 450, "data-panel-footer": "", ...rest, children });
+PanelFooter.displayName = "Panel.Footer";
+
+// src/PanelMobileActionsHeader.tsx
+import "react";
+import Box3 from "@sproutsocial/seeds-react-box";
+import Button2 from "@sproutsocial/seeds-react-button";
+import Drawer from "@sproutsocial/seeds-react-drawer";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+import Text2 from "@sproutsocial/seeds-react-text";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var PanelMobileActionsHeader = ({
+  title,
+  titleId,
+  actions
+}) => /* @__PURE__ */ jsx5(
+  Drawer.Header,
+  {
+    render: (ctx) => /* @__PURE__ */ jsxs2(
+      Box3,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pt: 400,
+        px: 450,
+        flex: "0 0 auto",
+        children: [
+          /* @__PURE__ */ jsx5(
+            Text2,
+            {
+              as: "h2",
+              fontSize: 400,
+              fontWeight: "semibold",
+              color: "text.headline",
+              id: titleId,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", gap: 200, children: [
+            actions.map((action, i) => /* @__PURE__ */ jsx5(
+              Button2,
+              {
+                appearance: "pill",
+                "aria-label": action["aria-label"],
+                onClick: action.onClick,
+                disabled: action.disabled,
+                children: action.iconName && /* @__PURE__ */ jsx5(Icon2, { "aria-hidden": true, name: action.iconName })
+              },
+              i
+            )),
+            /* @__PURE__ */ jsx5(
+              Button2,
+              {
+                appearance: "pill",
+                "aria-label": ctx.closeButtonLabel,
+                onClick: ctx.onClose,
+                children: /* @__PURE__ */ jsx5(Icon2, { "aria-hidden": true, name: "x-outline" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  }
+);
+PanelMobileActionsHeader.displayName = "PanelMobileActionsHeader";
+
+// src/Panel.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var PanelComponent = ({
+  children,
+  closeButtonLabel,
+  header,
+  footer,
+  title,
+  titleId,
+  direction = "right",
+  width = 384,
+  gap = 4,
+  mobileBreakpoint,
+  zIndex,
+  id,
+  snapPoints,
+  defaultSnapPoint,
+  snapPoint,
+  onSnapPointChange,
+  snapToSequentialPoints,
+  actions,
+  actionsInHeader,
+  "aria-labelledby": ariaLabelledByProp,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const panelContext = usePanelContext();
+  const { isPanelOpen, closePanel } = panelContext;
+  const isMobile = useIsMobile(mobileBreakpoint);
+  const enrichedValue = React6.useMemo(
+    () => ({ ...panelContext, closeButtonLabel }),
+    [panelContext, closeButtonLabel]
+  );
+  const prevChildrenRef = React6.useRef(null);
+  if (isPanelOpen) {
+    prevChildrenRef.current = children;
+  }
+  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
+  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (header == null ? titleId : void 0);
+  if (isMobile) {
+    const shouldRenderActionsHeader = header == null && actionsInHeader === true && !!actions && actions.length > 0;
+    return /* @__PURE__ */ jsx6(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ jsxs3(
+      Drawer2,
+      {
+        ...rest,
+        open: isPanelOpen,
+        onClose: closePanel,
+        direction: "bottom",
+        closeButtonLabel,
+        zIndex,
+        snapPoints,
+        defaultSnapPoint,
+        snapPoint,
+        onSnapPointChange,
+        snapToSequentialPoints,
+        actions,
+        actionsInHeader,
+        "aria-labelledby": effectiveAriaLabelledBy,
+        "aria-label": ariaLabel,
+        children: [
+          header ?? (shouldRenderActionsHeader ? /* @__PURE__ */ jsx6(
+            PanelMobileActionsHeader,
+            {
+              title,
+              titleId,
+              actions
+            }
+          ) : /* @__PURE__ */ jsx6(Drawer2.Header, { title, id: titleId })),
+          children,
+          footer
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx6(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ jsx6(
+    PanelContainer,
+    {
+      ...rest,
+      $isOpen: isPanelOpen,
+      $direction: direction,
+      $width: width,
+      $gap: gap,
+      "data-qa-panel": id,
+      "data-qa-panel-isopen": isPanelOpen,
+      "aria-labelledby": effectiveAriaLabelledBy,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs3(PanelInner, { $direction: direction, $width: width, children: [
+        header ?? /* @__PURE__ */ jsx6(PanelHeader, { title, id: titleId }),
+        renderedChildren,
+        footer
+      ] })
+    }
+  ) });
+};
+PanelComponent.Header = PanelHeader;
+PanelComponent.Content = PanelContent;
+PanelComponent.CloseButton = PanelCloseButton;
+PanelComponent.Footer = PanelFooter;
+var Panel_default = PanelComponent;
+
+// src/PanelProvider.tsx
+import * as React7 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PanelProvider = ({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = React7.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isPanelOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = React7.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const openPanel = React7.useCallback(() => setOpen(true), [setOpen]);
+  const closePanel = React7.useCallback(() => setOpen(false), [setOpen]);
+  const togglePanel = React7.useCallback(
+    () => setOpen(!isPanelOpen),
+    [setOpen, isPanelOpen]
+  );
+  const value = React7.useMemo(
+    () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),
+    [isPanelOpen, openPanel, closePanel, togglePanel]
+  );
+  return /* @__PURE__ */ jsx7(PanelContext.Provider, { value, children });
+};
+
+// src/PanelTypes.ts
+import "react";
+
+// src/index.ts
+var index_default = Panel_default;
+export {
+  Panel_default as Panel,
+  PanelCloseButton,
+  PanelContent,
+  PanelContext,
+  PanelFooter,
+  PanelHeader,
+  PanelProvider,
+  index_default as default,
+  usePanelContext
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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