text: import { jsx, Fragment } from 'react/jsx-runtime';
  import { createContext, useState, useMemo, useContext, Children, isValidElement, cloneElement } from 'react';
  import { animated, useTransition } from 'react-spring';
  import { DialogOverlay, DialogContent } from '@reach/dialog';
  import { useId } from '@reach/auto-id';
  
  /*! *****************************************************************************
  Copyright (c) Microsoft Corporation.
  
  Permission to use, copy, modify, and/or distribute this software for any
  purpose with or without fee is hereby granted.
  
  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  PERFORMANCE OF THIS SOFTWARE.
  ***************************************************************************** */
  
  function __rest(s, e) {
      var t = {};
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
          t[p] = s[p];
      if (s != null && typeof Object.getOwnPropertySymbols === "function")
          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                  t[p[i]] = s[p[i]];
          }
      return t;
  }
  
  const AnimatedDialogOverlay = animated(DialogOverlay);
  const AnimatedDialogContent = animated(DialogContent);
  const emptyObject = {};
  /**
   * Input: `{ opacity: 0 }`
   * Output: `{ 'overlay__opacity': 0 }`
   */
  function prefixProperties(prefix, props) {
      if (typeof props === 'object' && props !== null) {
          return Object.fromEntries(Object.entries(props).map(([key, value]) => [`${prefix}__${key}`, value]));
      }
      return emptyObject;
  }
  /**
   * Input: `{ 'overlay__opacity': 0, other: 'stuff' }`
   * Output: `{ opacity: 0 }`
   */
  function removePropertyPrefixes(prefix, props) {
      return Object.fromEntries(Object.entries(props)
          .filter(([key]) => key.startsWith(prefix + '__'))
          .map(([key, value]) => [key.replace(prefix + '__', ''), value]));
  }
  const defaultOverlayTransition = {
      from: { opacity: 0 },
      enter: { opacity: 1 },
      leave: { opacity: 0 }
  };
  const ModalContext = createContext({});
  function BaseModal(_a) {
      var { isOpen, onDismiss, children, dangerouslyBypassFocusLock } = _a, _b = _a.overlayProps, _c = _b === void 0 ? emptyObject : _b, { style: overlayStyle = emptyObject, className: overlayClassName = '' } = _c, otherOverlayProps = __rest(_c, ["style", "className"]), { overlayTransition = defaultOverlayTransition } = _a, _d = _a.contentProps, _e = _d === void 0 ? emptyObject : _d, { style: contentStyle = emptyObject, className: contentClassName = '' } = _e, otherContentProps = __rest(_e, ["style", "className"]), { contentTransition, transitionConfig = emptyObject, labelId } = _a;
      const [status, setStatus] = useState('focus-unlocked');
      const values = useMemo(() => (Object.assign(Object.assign({ initial: Object.assign(Object.assign({}, prefixProperties('overlay', overlayTransition === null || overlayTransition === void 0 ? void 0 : overlayTransition.initial)), prefixProperties('content', contentTransition === null || contentTransition === void 0 ? void 0 : contentTransition.initial)), from: Object.assign(Object.assign({}, prefixProperties('overlay', overlayTransition === null || overlayTransition === void 0 ? void 0 : overlayTransition.from)), prefixProperties('content', contentTransition === null || contentTransition === void 0 ? void 0 : contentTransition.from)), enter: Object.assign(Object.assign({}, prefixProperties('overlay', overlayTransition === null || overlayTransition === void 0 ? void 0 : overlayTransition.enter)), prefixProperties('content', contentTransition === null || contentTransition === void 0 ? void 0 : contentTransition.enter)), leave: Object.assign(Object.assign({}, prefixProperties('overlay', overlayTransition === null || overlayTransition === void 0 ? void 0 : overlayTransition.leave)), prefixProperties('content', contentTransition === null || contentTransition === void 0 ? void 0 : contentTransition.leave)) }, transitionConfig), { onRest(isOpen, animationStatus) {
              if (typeof transitionConfig.onRest === 'function') {
                  transitionConfig === null || transitionConfig === void 0 ? void 0 : transitionConfig.onRest(isOpen, animationStatus);
              }
              if (animationStatus === 'update')
                  setStatus(isOpen ? 'focus-locked' : 'focus-unlocked'); // if done opening, lock focus. if done closing, unlock focus
          } })), [overlayTransition, contentTransition, transitionConfig]);
      const transition = useTransition(isOpen, null, values);
      labelId = useId(labelId);
      // If the dev doesn't set `dangerouslyBypassFocusLock`, use our status
      if (dangerouslyBypassFocusLock === undefined)
          dangerouslyBypassFocusLock = status === 'focus-unlocked';
      return (jsx(ModalContext.Provider, Object.assign({ value: { labelId, onDismiss } }, { children: transition.map(({ item, key, props: styles }) => item && (jsx(AnimatedDialogOverlay, Object.assign({ as: "div", onDismiss: onDismiss, dangerouslyBypassFocusLock: dangerouslyBypassFocusLock, style: Object.assign(Object.assign({}, removePropertyPrefixes('overlay', styles)), overlayStyle), className: `ModalOverlay ${overlayClassName}` }, otherOverlayProps, { children: jsx(AnimatedDialogContent, Object.assign({ as: "div", style: Object.assign(Object.assign({}, removePropertyPrefixes('content', styles)), contentStyle), className: `ModalContent ${contentClassName}`, "aria-labelledby": labelId }, otherContentProps, { children: children }), void 0) }), key))) }), void 0));
  }
  function ModalTitle(_a) {
      var { as: Component = 'h1', id } = _a, props = __rest(_a, ["as", "id"]);
      const { labelId } = useContext(ModalContext);
      return jsx(Component, Object.assign({ id: id || labelId }, props), void 0);
  }
  function ModalCloseTarget({ children }) {
      const { onDismiss } = useContext(ModalContext);
      return (jsx(Fragment, { children: Children.map(children, child => {
              if (isValidElement(child)) {
                  const onClick = (event) => {
                      if (onDismiss)
                          onDismiss(event);
                      if (child.props.onClick)
                          child.props.onClick(event);
                  };
                  return cloneElement(child, { onClick });
              }
              return child;
          }) }, void 0));
  }
  /** Pre-built Custom Modals */
  function CenterModal(_a) {
      var _b, _c;
      var { overlayProps, contentProps } = _a, props = __rest(_a, ["overlayProps", "contentProps"]);
      return (jsx(BaseModal, Object.assign({ overlayProps: Object.assign(Object.assign({}, overlayProps), { className: (_b = 'ModalOverlay--center ' + (overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.className)) !== null && _b !== void 0 ? _b : '' }), contentProps: Object.assign(Object.assign({}, contentProps), { className: (_c = 'CenterModal ' + (contentProps === null || contentProps === void 0 ? void 0 : contentProps.className)) !== null && _c !== void 0 ? _c : '' }) }, props), void 0));
  }
  function BottomModal(_a) {
      var _b, _c;
      var { overlayProps, contentProps } = _a, props = __rest(_a, ["overlayProps", "contentProps"]);
      return (jsx(BaseModal, Object.assign({ overlayProps: Object.assign(Object.assign({}, overlayProps), { className: (_b = 'ModalOverlay--bottom ' + (overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.className)) !== null && _b !== void 0 ? _b : '' }), contentProps: Object.assign(Object.assign({}, contentProps), { className: (_c = 'BottomModal ' + (contentProps === null || contentProps === void 0 ? void 0 : contentProps.className)) !== null && _c !== void 0 ? _c : '' }), contentTransition: {
              initial: { transform: 'translateY(100%)' },
              from: { transform: 'translateY(100%)' },
              enter: { transform: 'translateY(0%)' },
              leave: { transform: 'translateY(100%)' }
          } }, props), void 0));
  }
  function ExpandModal(_a) {
      var _b;
      var { overlayProps, contentProps, x = 50, y = 50 } = _a, props = __rest(_a, ["overlayProps", "contentProps", "x", "y"]);
      return (jsx(BaseModal, Object.assign({ overlayProps: Object.assign(Object.assign({}, overlayProps), { className: 'ExpandModal__overlay ' + (overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.className) }), contentTransition: {
              from: { clipPath: `circle(0% at ${x}% ${y}%)` },
              enter: { clipPath: `circle(100% at ${x}% ${y}%)` },
              leave: { clipPath: `circle(0% at ${x}% ${y}%)` }
          }, contentProps: Object.assign(Object.assign({}, contentProps), { className: (_b = 'ExpandModal ' + (contentProps === null || contentProps === void 0 ? void 0 : contentProps.className)) !== null && _b !== void 0 ? _b : '' }) }, props), void 0));
  }
  
  export { AnimatedDialogContent, AnimatedDialogOverlay, BaseModal, BottomModal, CenterModal, ExpandModal, ModalCloseTarget, ModalTitle };
  //# sourceMappingURL=index.js.map
  