import{_ as _extends}from"./_rollupPluginBabelHelpers-B5fk9IVe.js";import React__default,{useState,useEffect}from"react";import{createPortal}from"react-dom";import PropTypes from"prop-types";import{I as Icon}from"./Icon.component-BVkaZqpA.js";import{u as usePortalRef}from"./PortalProvider.component-BS7qHZAz.js";const panelClasses=(a,b,c)=>`
      jn-fixed
      jn-right-0
      jn-transition-transform
      jn-ease-out
      jn-duration-300
      jn-inset-y-0
      jn-z-[9989]
      jn-grid
      jn-grid-rows-[auto_1fr]
      jn-bg-theme-panel
      jn-backdrop-blur
      jn-backdrop-saturate-150     
      jn-shadow-md
      ${"large"===c?`
          jn-w-[90%]
          xl:jn-w-[80%]
          2xl:jn-w-[1228px]`:`
          jn-w-[75%]
          xl:jn-w-[55%]
          2xl:jn-w-[844px]`}
			${a?"":`jn-translate-x-[100%]`}
			${a||b?"":`jn-invisible`}
		`.replace(/\n/g," ").replace(/\s+/g," "),contentWrapperClasses=`
  jn-overflow-auto
`,panelHeaderClasses=`
  jn-flex
  jn-items-center
  jn-py-4
  jn-px-8
`,panelTitleClasses=`
  jn-text-theme-high
  jn-text-lg
  jn-font-bold
`,Panel=a=>{let{heading:f="",size:b,className:g="",opened:h=!1,closeable:i=!0,onClose:c,children:d,...e}=a;const[j,k]=useState(h),[l,m]=useState(i),[n,o]=useState(!1);useEffect(()=>{k(h)},[h]),useEffect(()=>{m(i)},[i]);const p=React__default.useRef(null);React__default.useEffect(()=>()=>clearTimeout(p.current),[]),useEffect(()=>{j||(o(!0),clearTimeout(p.current),p.current=setTimeout(()=>o(!1),500))},[j]);const q=usePortalRef();return createPortal(React__default.createElement("div",_extends({className:`juno-panel ${panelClasses(j,n,b)} ${g}`,role:"dialog","aria-labelledby":"juno-panel-title"},e),React__default.createElement("div",{className:`juno-panel-header ${panelHeaderClasses}`},React__default.createElement("div",{className:`juno-panel-title ${panelTitleClasses}`,id:"juno-panel-title"},f),l&&React__default.createElement(Icon,{icon:"close",onClick:a=>{k(!1),c&&c(a)},className:"juno-panel-close jn-ml-auto"})),React__default.createElement("div",{className:`juno-panel-content-wrapper ${contentWrapperClasses}`},d)),q?q:document.body)};Panel.propTypes={heading:PropTypes.node,size:PropTypes.oneOf(["default","large"]),opened:PropTypes.bool,closeable:PropTypes.bool,onClose:PropTypes.func,className:PropTypes.string,children:PropTypes.node};export{Panel as P};