@sproutsocial/seeds-react-panel 1.0.11 → 1.1.2

package/dist/index.js

@@ -42,10 +42,8 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Panel.tsx
-var React6 = __toESM(require("react"));
-var import_seeds_react_drawer2 = __toESM(require("@sproutsocial/seeds-react-drawer"));
-var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
+// src/PanelHybrid.tsx
+var import_seeds_react_system_props4 = require("@sproutsocial/seeds-react-system-props");
 
 // src/PanelContext.tsx
 var React = __toESM(require("react"));
@@ -63,6 +61,7 @@ var usePanelContext = () => {
 // src/PanelHeader.tsx
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
 
 // src/PanelCloseButton.tsx
 var React2 = require("react");
@@ -87,45 +86,173 @@ var PanelCloseButton = (props) => {
 };
 PanelCloseButton.displayName = "Panel.CloseButton";
 
+// src/PanelShared.tsx
+var React3 = __toESM(require("react"));
+var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var getPanelContainerStyle = (direction, width, gap, isPanelOpen) => {
+  const gapValue = isPanelOpen && gap ? `${gap}px` : "0px";
+  const style = {
+    flexBasis: isPanelOpen ? `${width}px` : "0px"
+  };
+  if (direction === "bottom") {
+    style.width = "100%";
+  } else {
+    style.alignSelf = "stretch";
+  }
+  if (direction === "right") {
+    style.marginLeft = gapValue;
+  } else if (direction === "left") {
+    style.marginRight = gapValue;
+  } else {
+    style.marginTop = gapValue;
+  }
+  return style;
+};
+var getPanelInnerStyle = (direction, width) => direction === "bottom" ? { minHeight: `${width}px`, width: "100%" } : { minWidth: `${width}px`, height: "100%" };
+var usePanelShell = (props) => {
+  const {
+    children,
+    closeButtonLabel,
+    header,
+    headerless = false,
+    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
+  } = props;
+  const panelContext = usePanelContext();
+  const { isPanelOpen, closePanel } = panelContext;
+  const isMobile = (0, import_seeds_react_hooks.useIsMobile)(mobileBreakpoint);
+  const enrichedValue = React3.useMemo(
+    () => ({ ...panelContext, closeButtonLabel, headerless }),
+    [panelContext, closeButtonLabel, headerless]
+  );
+  const prevChildrenRef = React3.useRef(null);
+  if (isPanelOpen) {
+    prevChildrenRef.current = children;
+  }
+  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
+  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (!headerless && header == null ? titleId : void 0);
+  return {
+    rest,
+    children,
+    closeButtonLabel,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    zIndex,
+    id,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader,
+    ariaLabel,
+    isPanelOpen,
+    closePanel,
+    isMobile,
+    enrichedValue,
+    renderedChildren,
+    effectiveAriaLabelledBy
+  };
+};
+
 // src/PanelHeader.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var PanelHeader = ({
+var PanelHeaderStyled = ({
+  title = "",
+  id = void 0,
+  children,
+  render,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_seeds_react_box.default,
+  {
+    display: "flex",
+    flex: "0 0 auto",
+    justifyContent: "space-between",
+    alignItems: "center",
+    p: 400,
+    borderBottom: "1px solid",
+    borderColor: "container.border.base",
+    ...rest,
+    children: children || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default.Headline, { id, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelCloseButton, {})
+    ] })
+  }
+);
+var PanelHeaderTailwind = ({
   title = "",
   id = void 0,
   children,
   render,
   ...rest
 }) => {
+  const { className, ...domRest } = rest;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("seeds-panel-header", className), ...domRest, children: children || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default.Headline, { id, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelCloseButton, {})
+  ] }) });
+};
+var PanelHeader = (props) => {
   const panelContext = usePanelContext();
-  if (render) {
-    return render(panelContext);
+  if (props.render) {
+    return props.render(panelContext);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_seeds_react_box.default,
-    {
-      display: "flex",
-      flex: "0 0 auto",
-      justifyContent: "space-between",
-      alignItems: "center",
-      p: 400,
-      borderBottom: "1px solid",
-      borderColor: "container.border.base",
-      ...rest,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default.Headline, { id, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelCloseButton, {})
-      ] })
-    }
-  );
+  const { title, id, children, render, ...rest } = props;
+  if ((0, import_seeds_react_system_props.needsStyledComponents)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelHeaderStyled, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelHeaderTailwind, { ...props });
 };
 PanelHeader.displayName = "Panel.Header";
 
 // src/PanelContent.tsx
-var React3 = require("react");
+var React4 = require("react");
+var import_seeds_react_system_props3 = require("@sproutsocial/seeds-react-system-props");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
-var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
 var import_unitless = require("@sproutsocial/seeds-motion/unitless");
 var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
 var gapSide = (direction) => {
@@ -150,7 +277,7 @@ var PanelContainer = import_styled_components.default.aside`
           align-self: stretch;
         `}
 
-  ${import_seeds_react_system_props.COMMON}
+  ${import_seeds_react_system_props2.COMMON}
 `;
 var PanelInner = import_styled_components.default.div`
   ${(props) => props.$direction === "bottom" ? import_styled_components.css`
@@ -193,7 +320,7 @@ var Footer = (0, import_styled_components.default)(import_seeds_react_box2.defau
 
 // src/PanelContent.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var PanelContent = ({ children, ...rest }) => {
+var PanelContentStyled = ({ children, ...rest }) => {
   const { headerless } = usePanelContext();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Content,
@@ -209,157 +336,188 @@ var PanelContent = ({ children, ...rest }) => {
     }
   );
 };
+var PanelContentTailwind = ({ children, ...rest }) => {
+  const { headerless } = usePanelContext();
+  const scroll = !headerless;
+  const { className, style, ...domRest } = rest;
+  const contentStyle = {
+    overflowY: scroll ? "auto" : "hidden"
+  };
+  if (!scroll) {
+    contentStyle.display = "flex";
+    contentStyle.flexDirection = "column";
+  }
+  Object.assign(contentStyle, style);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: cn(
+        "seeds-panel-content",
+        { "seeds-panel-content--headerless": !!headerless },
+        className
+      ),
+      style: contentStyle,
+      "data-panel-content": "",
+      ...domRest,
+      children
+    }
+  );
+};
+var PanelContent = (props) => {
+  const { children, ...rest } = props;
+  if ((0, import_seeds_react_system_props3.needsStyledComponents)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelContentStyled, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelContentTailwind, { ...props });
+};
 PanelContent.displayName = "Panel.Content";
 
-// src/PanelFooter.tsx
-var React4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var PanelFooter = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Footer, { p: 450, "data-panel-footer": "", ...rest, children });
-PanelFooter.displayName = "Panel.Footer";
+// src/PanelMobile.tsx
+var React6 = require("react");
+var import_seeds_react_drawer2 = __toESM(require("@sproutsocial/seeds-react-drawer"));
 
 // src/PanelMobileActionsHeader.tsx
 var React5 = require("react");
-var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_button2 = __toESM(require("@sproutsocial/seeds-react-button"));
 var import_seeds_react_drawer = __toESM(require("@sproutsocial/seeds-react-drawer"));
 var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PanelMobileActionsHeader = ({
   title,
   titleId,
   actions
-}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   import_seeds_react_drawer.default.Header,
   {
-    render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      import_seeds_react_box3.default,
-      {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        pt: 400,
-        px: 450,
-        flex: "0 0 auto",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_seeds_react_text2.default,
-            {
-              as: "h2",
-              fontSize: 400,
-              fontWeight: "semibold",
-              color: "text.headline",
-              id: titleId,
-              children: title
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_seeds_react_box3.default, { display: "flex", alignItems: "center", gap: 200, children: [
-            actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_seeds_react_button2.default,
-              {
-                appearance: "pill",
-                "aria-label": action["aria-label"],
-                onClick: action.onClick,
-                disabled: action.disabled,
-                children: action.iconName && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: action.iconName })
-              },
-              i
-            )),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_seeds_react_button2.default,
-              {
-                appearance: "pill",
-                "aria-label": ctx.closeButtonLabel,
-                onClick: ctx.onClose,
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: "x-outline" })
-              }
-            )
-          ] })
-        ]
-      }
-    )
+    render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "seeds-panel-mobile-actions-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_seeds_react_text2.default,
+        {
+          as: "h2",
+          fontSize: 400,
+          fontWeight: "semibold",
+          color: "text.headline",
+          id: titleId,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "seeds-panel-mobile-actions-buttons", children: [
+        actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_seeds_react_button2.default,
+          {
+            appearance: "pill",
+            "aria-label": action["aria-label"],
+            onClick: action.onClick,
+            disabled: action.disabled,
+            children: action.iconName && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: action.iconName })
+          },
+          i
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_seeds_react_button2.default,
+          {
+            appearance: "pill",
+            "aria-label": ctx.closeButtonLabel,
+            onClick: ctx.onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: "x-outline" })
+          }
+        )
+      ] })
+    ] })
   }
 );
 PanelMobileActionsHeader.displayName = "PanelMobileActionsHeader";
 
-// src/Panel.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var PanelComponent = ({
-  children,
-  closeButtonLabel,
-  header,
-  headerless = false,
-  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 = (0, import_seeds_react_hooks.useIsMobile)(mobileBreakpoint);
-  const enrichedValue = React6.useMemo(
-    () => ({ ...panelContext, closeButtonLabel, headerless }),
-    [panelContext, closeButtonLabel, headerless]
-  );
-  const prevChildrenRef = React6.useRef(null);
-  if (isPanelOpen) {
-    prevChildrenRef.current = children;
-  }
-  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
-  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (!headerless && header == null ? titleId : void 0);
-  if (isMobile) {
-    const shouldRenderActionsHeader = !headerless && header == null && actionsInHeader === true && !!actions && actions.length > 0;
-    let defaultMobileHeader = null;
-    if (!headerless) {
-      defaultMobileHeader = shouldRenderActionsHeader ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        PanelMobileActionsHeader,
-        {
-          title,
-          titleId,
-          actions
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_drawer2.default.Header, { title, id: titleId });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      import_seeds_react_drawer2.default,
+// src/PanelMobile.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PanelMobile = ({ shell }) => {
+  const {
+    rest,
+    children,
+    closeButtonLabel,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    zIndex,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader,
+    ariaLabel,
+    isPanelOpen,
+    closePanel,
+    enrichedValue,
+    effectiveAriaLabelledBy
+  } = shell;
+  const shouldRenderActionsHeader = !headerless && header == null && actionsInHeader === true && !!actions && actions.length > 0;
+  let defaultMobileHeader = null;
+  if (!headerless) {
+    defaultMobileHeader = shouldRenderActionsHeader ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      PanelMobileActionsHeader,
       {
-        ...rest,
-        open: isPanelOpen,
-        onClose: closePanel,
-        direction: "bottom",
-        closeButtonLabel,
-        zIndex,
-        snapPoints,
-        defaultSnapPoint,
-        snapPoint,
-        onSnapPointChange,
-        snapToSequentialPoints,
-        actions,
-        actionsInHeader,
-        "aria-labelledby": effectiveAriaLabelledBy,
-        "aria-label": ariaLabel,
-        children: [
-          header ?? defaultMobileHeader,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContent, { children }),
-          footer
-        ]
+        title,
+        titleId,
+        actions
       }
-    ) });
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_drawer2.default.Header, { title, id: titleId });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_seeds_react_drawer2.default,
+    {
+      ...rest,
+      open: isPanelOpen,
+      onClose: closePanel,
+      direction: "bottom",
+      closeButtonLabel,
+      zIndex,
+      snapPoints,
+      defaultSnapPoint,
+      snapPoint,
+      onSnapPointChange,
+      snapToSequentialPoints,
+      actions,
+      actionsInHeader,
+      "aria-labelledby": effectiveAriaLabelledBy,
+      "aria-label": ariaLabel,
+      children: [
+        header ?? defaultMobileHeader,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanelContent, { children }),
+        footer
+      ]
+    }
+  ) });
+};
+
+// src/PanelStyled.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PanelStyled = (props) => {
+  const shell = usePanelShell(props);
+  const {
+    rest,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    id,
+    ariaLabel,
+    isPanelOpen,
+    isMobile,
+    enrichedValue,
+    renderedChildren,
+    effectiveAriaLabelledBy
+  } = shell;
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelMobile, { shell });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     PanelContainer,
@@ -381,6 +539,126 @@ var PanelComponent = ({
     }
   ) });
 };
+
+// src/PanelTailwind.tsx
+var React7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PanelTailwind = (props) => {
+  const shell = usePanelShell(props);
+  const {
+    rest,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    id,
+    ariaLabel,
+    isPanelOpen,
+    isMobile,
+    enrichedValue,
+    renderedChildren,
+    effectiveAriaLabelledBy
+  } = shell;
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanelMobile, { shell });
+  }
+  const { className, style, ...domRest } = rest;
+  const containerStyle = getPanelContainerStyle(
+    direction,
+    width,
+    gap,
+    isPanelOpen
+  );
+  const innerStyle = getPanelInnerStyle(direction, width);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "aside",
+    {
+      ...domRest,
+      className: cn("seeds-panel", className),
+      style: { ...containerStyle, ...style },
+      "data-qa-panel": id,
+      "data-qa-panel-isopen": isPanelOpen,
+      "aria-labelledby": effectiveAriaLabelledBy,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "seeds-panel-inner", style: innerStyle, children: [
+        header ?? (headerless ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanelHeader, { title, id: titleId })),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanelContent, { children: renderedChildren }),
+        footer
+      ] })
+    }
+  ) });
+};
+
+// src/PanelHybrid.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var PanelHybrid = (props) => {
+  const {
+    children,
+    closeButtonLabel,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    mobileBreakpoint,
+    zIndex,
+    id,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  if ((0, import_seeds_react_system_props4.needsStyledComponents)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanelStyled, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanelTailwind, { ...props });
+};
+PanelHybrid.displayName = "Panel";
+
+// src/PanelFooter.tsx
+var React8 = require("react");
+var import_seeds_react_system_props5 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PanelFooterStyled = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Footer, { p: 450, "data-panel-footer": "", ...rest, children });
+var PanelFooterTailwind = ({ children, ...rest }) => {
+  const { className, style, ...domRest } = rest;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: cn("seeds-panel-footer", className),
+      style: { marginBottom: "var(--bleed, 0px)", ...style },
+      "data-panel-footer": "",
+      ...domRest,
+      children
+    }
+  );
+};
+var PanelFooter = (props) => {
+  const { children, ...rest } = props;
+  if ((0, import_seeds_react_system_props5.needsStyledComponents)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanelFooterStyled, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanelFooterTailwind, { ...props });
+};
+PanelFooter.displayName = "Panel.Footer";
+
+// src/Panel.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PanelComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PanelHybrid, { ...props });
+PanelComponent.displayName = "Panel";
 PanelComponent.Header = PanelHeader;
 PanelComponent.Content = PanelContent;
 PanelComponent.CloseButton = PanelCloseButton;
@@ -388,39 +666,39 @@ PanelComponent.Footer = PanelFooter;
 var Panel_default = PanelComponent;
 
 // src/PanelProvider.tsx
-var React7 = __toESM(require("react"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var React9 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var PanelProvider = ({
   children,
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange
 }) => {
-  const [internalOpen, setInternalOpen] = React7.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React9.useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isPanelOpen = isControlled ? controlledOpen : internalOpen;
-  const setOpen = React7.useCallback(
+  const setOpen = React9.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(
+  const openPanel = React9.useCallback(() => setOpen(true), [setOpen]);
+  const closePanel = React9.useCallback(() => setOpen(false), [setOpen]);
+  const togglePanel = React9.useCallback(
     () => setOpen(!isPanelOpen),
     [setOpen, isPanelOpen]
   );
-  const value = React7.useMemo(
+  const value = React9.useMemo(
     () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),
     [isPanelOpen, openPanel, closePanel, togglePanel]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanelContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanelContext.Provider, { value, children });
 };
 
 // src/PanelTypes.ts
-var React8 = require("react");
+var React10 = require("react");
 
 // src/index.ts
 var index_default = Panel_default;