"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { keyframes } from "@emotion/react";
import * as Dialog from "@radix-ui/react-dialog";
import { Spacing } from "../../tokens/Spacing.js";
import { modalOverlayStyles } from "../Modal/Modal.js";
import { Button } from "../Button/Button.js";
import { Icon } from "../../atoms/Icon/Icon.js";
const animationSlideUp = keyframes({
  from: { transform: "translateY(100%)" },
  to: { transform: "translateY(0%)" }
});
const animationSlideLeft = keyframes({
  from: { transform: "translateX(100%)" },
  to: { transform: "translateX(0%)" }
});
const Pane = ({ children, height = "100vh", width = "424px", open, onClose, onClick, ...props }) => {
  return /* @__PURE__ */ jsx(
    Dialog.Root,
    {
      open,
      onOpenChange: (isOpen) => {
        if (!isOpen) onClose();
      },
      children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsx(Dialog.Overlay, { sx: modalOverlayStyles, children: /* @__PURE__ */ jsxs(
        Dialog.Content,
        {
          onClick,
          sx: {
            height: ["100vh", null, height],
            width: ["100%", null, width],
            borderRadius: ["8px 8px 0px 0px", null, 0],
            background: "Panes",
            position: "fixed",
            top: 0,
            right: 0,
            overflowY: "auto",
            transition: "filter 0.5s linear",
            willChange: "transform",
            animation: [`${animationSlideUp} 0.6s`, null, `${animationSlideLeft} 0.6s`]
          },
          ...props,
          children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                sx: {
                  display: ["flex", null, "none"],
                  justifyContent: "flex-end",
                  p: Spacing["8px"],
                  width: "100%"
                },
                children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { shape: "round", variant: "secondary", size: "small", sx: { width: "28px" }, children: /* @__PURE__ */ jsx(Icon.Close, { size: "10px" }) }) })
              }
            ),
            children,
            /* @__PURE__ */ jsx("div", { sx: { height: ["100px", null, "0px"] } })
          ]
        }
      ) }) })
    }
  );
};
export {
  Pane
};
