(function() {
  var useEffect = React.useEffect;
  var GlassSurface = window.GlassSurface;

  function GlassSheet(props) {
    var open = props.open;
    var onClose = props.onClose;
    var children = props.children;
    var className = props.className || '';

    useEffect(function() {
      if (!open) return;
      function onKey(e) {
        if (e.key === 'Escape' && onClose) onClose();
      }
      document.addEventListener('keydown', onKey);
      document.body.style.overflow = 'hidden';
      return function() {
        document.removeEventListener('keydown', onKey);
        document.body.style.overflow = '';
      };
    }, [open, onClose]);

    if (!open) return null;

    return React.createElement('div', {
      className: 'glass-overlay glass-overlay-sheet',
      role: 'dialog',
      'aria-modal': true,
      onClick: function(e) { if (e.target === e.currentTarget && onClose) onClose(); }
    },
      React.createElement(GlassSurface, {
        elevation: 5,
        radius: 'xl',
        className: 'glass-sheet ' + className,
        tone: 'adaptive',
        onClick: function(e) { e.stopPropagation(); }
      },
        React.createElement('div', { className: 'glass-sheet-handle', 'aria-hidden': true }),
        children
      )
    );
  }

  window.GlassSheet = GlassSheet;
})();