@react-spectrum/overlays 4.1.0 → 5.1.0

package/dist/import.mjs

@@ -0,0 +1,579 @@
+import "./main.css";
+import {Provider as $fQOb3$Provider} from "@react-spectrum/provider";
+import $fQOb3$react, {useState as $fQOb3$useState, useCallback as $fQOb3$useCallback, useRef as $fQOb3$useRef, forwardRef as $fQOb3$forwardRef} from "react";
+import {Overlay as $fQOb3$Overlay, usePopover as $fQOb3$usePopover, DismissButton as $fQOb3$DismissButton, useModalOverlay as $fQOb3$useModalOverlay} from "@react-aria/overlays";
+import {Transition as $fQOb3$Transition} from "react-transition-group";
+import {useDOMRef as $fQOb3$useDOMRef, useStyleProps as $fQOb3$useStyleProps, classNames as $fQOb3$classNames} from "@react-spectrum/utils";
+import {useLayoutEffect as $fQOb3$useLayoutEffect, useViewportSize as $fQOb3$useViewportSize} from "@react-aria/utils";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+const $bc765a7a041310da$var$OPEN_STATES = {
+    entering: false,
+    entered: true
+};
+function $bc765a7a041310da$export$b847a40ee92eff38(props) {
+    var child;
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Transition), {
+        timeout: {
+            enter: 0,
+            exit: 350
+        },
+        ...props
+    }, (state)=>(0, $fQOb3$react).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, $fQOb3$react).cloneElement(child, {
+                isOpen: !!$bc765a7a041310da$var$OPEN_STATES[state]
+            })));
+}
+
+
+
+
+
+function $70305dc5fb729c3b$var$Overlay(props, ref) {
+    let { children: children , isOpen: isOpen , container: container , onEnter: onEnter , onEntering: onEntering , onEntered: onEntered , onExit: onExit , onExiting: onExiting , onExited: onExited , nodeRef: nodeRef  } = props;
+    let [exited, setExited] = (0, $fQOb3$useState)(!isOpen);
+    let handleEntered = (0, $fQOb3$useCallback)(()=>{
+        setExited(false);
+        if (onEntered) onEntered();
+    }, [
+        onEntered
+    ]);
+    let handleExited = (0, $fQOb3$useCallback)(()=>{
+        setExited(true);
+        if (onExited) onExited();
+    }, [
+        onExited
+    ]);
+    // Don't un-render the overlay while it's transitioning out.
+    let mountOverlay = isOpen || !exited;
+    if (!mountOverlay) // Don't bother showing anything if we don't have to.
+    return null;
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Overlay), {
+        portalContainer: container
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Provider), {
+        ref: ref,
+        UNSAFE_style: {
+            background: "transparent",
+            isolation: "isolate"
+        },
+        isDisabled: false
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
+        in: isOpen,
+        appear: true,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: handleExited,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: handleEntered,
+        nodeRef: nodeRef
+    }, children)));
+}
+let $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $fQOb3$react).forwardRef($70305dc5fb729c3b$var$Overlay);
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+var $853e19557ad8790f$exports = {};
+
+$parcel$export($853e19557ad8790f$exports, "spectrum-Popover", () => $853e19557ad8790f$export$a62dc1b6ab23a7bb, (v) => $853e19557ad8790f$export$a62dc1b6ab23a7bb = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Popover", () => $853e19557ad8790f$export$884f6b5065bdc41a, (v) => $853e19557ad8790f$export$884f6b5065bdc41a = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Dialog-content", () => $853e19557ad8790f$export$cb8eccd0f3639238, (v) => $853e19557ad8790f$export$cb8eccd0f3639238 = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Modal-wrapper", () => $853e19557ad8790f$export$35bea187ff802494, (v) => $853e19557ad8790f$export$35bea187ff802494 = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Modal-wrapper", () => $853e19557ad8790f$export$e088717c213c31d7, (v) => $853e19557ad8790f$export$e088717c213c31d7 = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Modal", () => $853e19557ad8790f$export$4c0b1e44c3834c85, (v) => $853e19557ad8790f$export$4c0b1e44c3834c85 = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Modal", () => $853e19557ad8790f$export$f8edeb62d7fed8c1, (v) => $853e19557ad8790f$export$f8edeb62d7fed8c1 = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Tray", () => $853e19557ad8790f$export$ce0704cd084c4f0d, (v) => $853e19557ad8790f$export$ce0704cd084c4f0d = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Tray", () => $853e19557ad8790f$export$69dafa24343974dd, (v) => $853e19557ad8790f$export$69dafa24343974dd = v);
+var $853e19557ad8790f$export$a62dc1b6ab23a7bb;
+var $853e19557ad8790f$export$884f6b5065bdc41a;
+var $853e19557ad8790f$export$cb8eccd0f3639238;
+var $853e19557ad8790f$export$35bea187ff802494;
+var $853e19557ad8790f$export$e088717c213c31d7;
+var $853e19557ad8790f$export$4c0b1e44c3834c85;
+var $853e19557ad8790f$export$f8edeb62d7fed8c1;
+var $853e19557ad8790f$export$ce0704cd084c4f0d;
+var $853e19557ad8790f$export$69dafa24343974dd;
+$853e19557ad8790f$export$a62dc1b6ab23a7bb = "spectrum-Popover_38efea";
+$853e19557ad8790f$export$884f6b5065bdc41a = "react-spectrum-Popover_38efea";
+$853e19557ad8790f$export$cb8eccd0f3639238 = "spectrum-Dialog-content_38efea";
+$853e19557ad8790f$export$35bea187ff802494 = "spectrum-Modal-wrapper_38efea";
+$853e19557ad8790f$export$e088717c213c31d7 = "react-spectrum-Modal-wrapper_38efea";
+$853e19557ad8790f$export$4c0b1e44c3834c85 = "spectrum-Modal_38efea";
+$853e19557ad8790f$export$f8edeb62d7fed8c1 = "react-spectrum-Modal_38efea";
+$853e19557ad8790f$export$ce0704cd084c4f0d = "spectrum-Tray_38efea";
+$853e19557ad8790f$export$69dafa24343974dd = "react-spectrum-Tray_38efea";
+
+
+
+var $645594d913f34a2a$exports = {};
+
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover", () => $645594d913f34a2a$export$a62dc1b6ab23a7bb, (v) => $645594d913f34a2a$export$a62dc1b6ab23a7bb = v);
+$parcel$export($645594d913f34a2a$exports, "is-open", () => $645594d913f34a2a$export$a9781837241c946d, (v) => $645594d913f34a2a$export$a9781837241c946d = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--bottom", () => $645594d913f34a2a$export$6a19b19b14780d4a, (v) => $645594d913f34a2a$export$6a19b19b14780d4a = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--top", () => $645594d913f34a2a$export$f30becfb1df0cae4, (v) => $645594d913f34a2a$export$f30becfb1df0cae4 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--right", () => $645594d913f34a2a$export$5fc8b429396c9f58, (v) => $645594d913f34a2a$export$5fc8b429396c9f58 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--left", () => $645594d913f34a2a$export$79cc55906ac5b00, (v) => $645594d913f34a2a$export$79cc55906ac5b00 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover-tip", () => $645594d913f34a2a$export$3100ec4dc1668df1, (v) => $645594d913f34a2a$export$3100ec4dc1668df1 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover-tip-triangle", () => $645594d913f34a2a$export$ed733fa6cf19ab80, (v) => $645594d913f34a2a$export$ed733fa6cf19ab80 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--dialog", () => $645594d913f34a2a$export$cf634262e726cd19, (v) => $645594d913f34a2a$export$cf634262e726cd19 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--withTip", () => $645594d913f34a2a$export$d8b16c5377728262, (v) => $645594d913f34a2a$export$d8b16c5377728262 = v);
+var $645594d913f34a2a$export$a62dc1b6ab23a7bb;
+var $645594d913f34a2a$export$a9781837241c946d;
+var $645594d913f34a2a$export$6a19b19b14780d4a;
+var $645594d913f34a2a$export$f30becfb1df0cae4;
+var $645594d913f34a2a$export$5fc8b429396c9f58;
+var $645594d913f34a2a$export$79cc55906ac5b00;
+var $645594d913f34a2a$export$3100ec4dc1668df1;
+var $645594d913f34a2a$export$ed733fa6cf19ab80;
+var $645594d913f34a2a$export$cf634262e726cd19;
+var $645594d913f34a2a$export$d8b16c5377728262;
+$645594d913f34a2a$export$a62dc1b6ab23a7bb = "spectrum-Popover_6115b8";
+$645594d913f34a2a$export$a9781837241c946d = "is-open_6115b8";
+$645594d913f34a2a$export$6a19b19b14780d4a = "spectrum-Popover--bottom_6115b8";
+$645594d913f34a2a$export$f30becfb1df0cae4 = "spectrum-Popover--top_6115b8";
+$645594d913f34a2a$export$5fc8b429396c9f58 = "spectrum-Popover--right_6115b8";
+$645594d913f34a2a$export$79cc55906ac5b00 = "spectrum-Popover--left_6115b8";
+$645594d913f34a2a$export$3100ec4dc1668df1 = "spectrum-Popover-tip_6115b8";
+$645594d913f34a2a$export$ed733fa6cf19ab80 = "spectrum-Popover-tip-triangle_6115b8";
+$645594d913f34a2a$export$cf634262e726cd19 = "spectrum-Popover--dialog_6115b8";
+$645594d913f34a2a$export$d8b16c5377728262 = "spectrum-Popover--withTip_6115b8";
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+var $c77d7b73b2bbd0fb$exports = {};
+
+$parcel$export($c77d7b73b2bbd0fb$exports, "spectrum-Underlay", () => $c77d7b73b2bbd0fb$export$74470528f463af97, (v) => $c77d7b73b2bbd0fb$export$74470528f463af97 = v);
+$parcel$export($c77d7b73b2bbd0fb$exports, "is-open", () => $c77d7b73b2bbd0fb$export$a9781837241c946d, (v) => $c77d7b73b2bbd0fb$export$a9781837241c946d = v);
+$parcel$export($c77d7b73b2bbd0fb$exports, "spectrum-Underlay--transparent", () => $c77d7b73b2bbd0fb$export$8eb3860104039b44, (v) => $c77d7b73b2bbd0fb$export$8eb3860104039b44 = v);
+var $c77d7b73b2bbd0fb$export$74470528f463af97;
+var $c77d7b73b2bbd0fb$export$a9781837241c946d;
+var $c77d7b73b2bbd0fb$export$8eb3860104039b44;
+$c77d7b73b2bbd0fb$export$74470528f463af97 = "spectrum-Underlay_eb7615";
+$c77d7b73b2bbd0fb$export$a9781837241c946d = "is-open_eb7615";
+$c77d7b73b2bbd0fb$export$8eb3860104039b44 = "spectrum-Underlay--transparent_eb7615";
+
+
+function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen , isTransparent: isTransparent  }) {
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c77d7b73b2bbd0fb$exports))), "spectrum-Underlay", {
+            "is-open": isOpen,
+            "spectrum-Underlay--transparent": isTransparent
+        })
+    });
+}
+
+
+
+/**
+ * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
+ * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
+ * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
+ * the path always starts at 0 so that it perfectly overlaps the popover's border.
+ * See bottom of file for more explanation.
+ */ let $17b503f7de08fecc$var$arrowPlacement = {
+    left: "right",
+    right: "right",
+    top: "bottom",
+    bottom: "bottom"
+};
+function $17b503f7de08fecc$var$Popover(props, ref) {
+    let { children: children , state: state , ...otherProps } = props;
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    let wrapperRef = (0, $fQOb3$useRef)(null);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
+        ...otherProps,
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$PopoverWrapper, {
+        ref: domRef,
+        ...props,
+        wrapperRef: wrapperRef
+    }, children));
+}
+const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)((props, ref)=>{
+    let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state , wrapperRef: wrapperRef  } = props;
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { size: size , borderWidth: borderWidth , arrowRef: arrowRef  } = $17b503f7de08fecc$var$useArrowSize();
+    const borderRadius = $17b503f7de08fecc$var$usePopoverBorderRadius(ref);
+    let borderDiagonal = borderWidth * Math.SQRT2;
+    let primary = size + borderDiagonal;
+    let secondary = primary * 2;
+    let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement  } = (0, $fQOb3$usePopover)({
+        ...props,
+        popoverRef: ref,
+        maxHeight: null,
+        arrowSize: hideArrow ? 0 : secondary,
+        arrowBoundaryOffset: borderRadius
+    }, state);
+    // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ref: wrapperRef
+    }, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
+        isTransparent: true,
+        ...underlayProps,
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...popoverProps,
+        style: {
+            ...styleProps.style,
+            ...popoverProps.style
+        },
+        ref: ref,
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover", `spectrum-Popover--${placement}`, {
+            "spectrum-Popover--withTip": !hideArrow,
+            "is-open": isOpen
+        }, (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Popover", "react-spectrum-Popover"), styleProps.className),
+        role: "presentation",
+        "data-testid": "popover"
+    }, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
+        onDismiss: state.close
+    }), children, hideArrow ? null : /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$Arrow, {
+        arrowProps: arrowProps,
+        isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] === "bottom",
+        arrowRef: arrowRef,
+        primary: primary,
+        secondary: secondary,
+        borderDiagonal: borderDiagonal
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
+        onDismiss: state.close
+    })));
+});
+function $17b503f7de08fecc$var$usePopoverBorderRadius(popoverRef) {
+    let [borderRadius, setBorderRadius] = (0, $fQOb3$useState)(0);
+    (0, $fQOb3$useLayoutEffect)(()=>{
+        if (popoverRef.current) {
+            let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
+            if (spectrumBorderRadius !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
+        }
+    }, [
+        popoverRef
+    ]);
+    return borderRadius;
+}
+function $17b503f7de08fecc$var$useArrowSize() {
+    let [size, setSize] = (0, $fQOb3$useState)(20);
+    let [borderWidth, setBorderWidth] = (0, $fQOb3$useState)(1);
+    let arrowRef = (0, $fQOb3$useRef)(null);
+    // get the css value for the tip size and divide it by 2 for this arrow implementation
+    (0, $fQOb3$useLayoutEffect)(()=>{
+        if (arrowRef.current) {
+            let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-size");
+            if (spectrumTipWidth !== "") setSize(parseInt(spectrumTipWidth, 10) / 2);
+            let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
+            if (spectrumBorderWidth !== "") setBorderWidth(parseInt(spectrumBorderWidth, 10));
+        }
+    }, []);
+    return {
+        size: size,
+        borderWidth: borderWidth,
+        arrowRef: arrowRef
+    };
+}
+function $17b503f7de08fecc$var$Arrow(props) {
+    let { primary: primary , secondary: secondary , isLandscape: isLandscape , arrowProps: arrowProps , borderDiagonal: borderDiagonal , arrowRef: arrowRef  } = props;
+    let halfBorderDiagonal = borderDiagonal / 2;
+    let primaryStart = 0;
+    let primaryEnd = primary - halfBorderDiagonal;
+    let secondaryStart = halfBorderDiagonal;
+    let secondaryMiddle = secondary / 2;
+    let secondaryEnd = secondary - halfBorderDiagonal;
+    let pathData = isLandscape ? [
+        "M",
+        secondaryStart,
+        primaryStart,
+        "L",
+        secondaryMiddle,
+        primaryEnd,
+        "L",
+        secondaryEnd,
+        primaryStart
+    ] : [
+        "M",
+        primaryStart,
+        secondaryStart,
+        "L",
+        primaryEnd,
+        secondaryMiddle,
+        "L",
+        primaryStart,
+        secondaryEnd
+    ];
+    /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $fQOb3$react).createElement("svg", {
+        xmlns: "http://www.w3.org/svg/2000",
+        width: Math.ceil(isLandscape ? secondary : primary),
+        height: Math.ceil(isLandscape ? primary : secondary),
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip"),
+        ref: arrowRef,
+        ...arrowProps
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("path", {
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip-triangle"),
+        d: pathData.join(" ")
+    }));
+}
+let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $fQOb3$forwardRef)($17b503f7de08fecc$var$Popover);
+ /**
+ * More explanation on popover tips.
+ * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.
+ * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.
+ * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.
+ * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.
+ * - I tried getting the client bounding box and setting the svg to that partial pixel value
+ * This didn't work because again the issue was inside the svg
+ * - I didn't try drawing the svg backwards
+ * This could still be tried
+ * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded
+ * This seems to have done the trick.
+ */ 
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+var $f7ed9f5201273840$exports = {};
+
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal", () => $f7ed9f5201273840$export$4c0b1e44c3834c85, (v) => $f7ed9f5201273840$export$4c0b1e44c3834c85 = v);
+$parcel$export($f7ed9f5201273840$exports, "is-open", () => $f7ed9f5201273840$export$a9781837241c946d, (v) => $f7ed9f5201273840$export$a9781837241c946d = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal-wrapper", () => $f7ed9f5201273840$export$35bea187ff802494, (v) => $f7ed9f5201273840$export$35bea187ff802494 = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal--responsive", () => $f7ed9f5201273840$export$fd1e42aa8ea02a1, (v) => $f7ed9f5201273840$export$fd1e42aa8ea02a1 = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal--fullscreen", () => $f7ed9f5201273840$export$a4423fa77727431a, (v) => $f7ed9f5201273840$export$a4423fa77727431a = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal--fullscreenTakeover", () => $f7ed9f5201273840$export$175dd699720b5fb7, (v) => $f7ed9f5201273840$export$175dd699720b5fb7 = v);
+var $f7ed9f5201273840$export$4c0b1e44c3834c85;
+var $f7ed9f5201273840$export$a9781837241c946d;
+var $f7ed9f5201273840$export$35bea187ff802494;
+var $f7ed9f5201273840$export$fd1e42aa8ea02a1;
+var $f7ed9f5201273840$export$a4423fa77727431a;
+var $f7ed9f5201273840$export$175dd699720b5fb7;
+$f7ed9f5201273840$export$4c0b1e44c3834c85 = "spectrum-Modal_f81956";
+$f7ed9f5201273840$export$a9781837241c946d = "is-open_f81956";
+$f7ed9f5201273840$export$35bea187ff802494 = "spectrum-Modal-wrapper_f81956";
+$f7ed9f5201273840$export$fd1e42aa8ea02a1 = "spectrum-Modal--responsive_f81956";
+$f7ed9f5201273840$export$a4423fa77727431a = "spectrum-Modal--fullscreen_f81956";
+$f7ed9f5201273840$export$175dd699720b5fb7 = "spectrum-Modal--fullscreenTakeover_f81956";
+
+
+
+
+
+
+
+function $842084dfa182af65$var$Modal(props, ref) {
+    let { children: children , state: state , ...otherProps } = props;
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    let wrapperRef = (0, $fQOb3$useRef)(null);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
+        ...otherProps,
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($842084dfa182af65$var$ModalWrapper, {
+        ...props,
+        wrapperRef: wrapperRef,
+        ref: domRef
+    }, children));
+}
+let $842084dfa182af65$var$typeMap = {
+    fullscreen: "fullscreen",
+    fullscreenTakeover: "fullscreenTakeover"
+};
+let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)(function(props, ref) {
+    let { type: type , children: children , state: state , isOpen: isOpen , wrapperRef: wrapperRef  } = props;
+    let typeVariant = $842084dfa182af65$var$typeMap[type];
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { modalProps: modalProps , underlayProps: underlayProps  } = (0, $fQOb3$useModalOverlay)(props, state, ref);
+    let wrapperClassName = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f7ed9f5201273840$exports))), "spectrum-Modal-wrapper", (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Modal-wrapper", "react-spectrum-Modal-wrapper"));
+    let modalClassName = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f7ed9f5201273840$exports))), "spectrum-Modal", {
+        "is-open": isOpen
+    }, (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Modal", "react-spectrum-Modal"), {
+        [`spectrum-Modal--${typeVariant}`]: typeVariant
+    }, styleProps.className);
+    let viewport = (0, $fQOb3$useViewportSize)();
+    let style = {
+        "--spectrum-visual-viewport-height": viewport.height + "px"
+    };
+    // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ref: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
+        ...underlayProps,
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        className: wrapperClassName,
+        style: style
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...modalProps,
+        ref: ref,
+        className: modalClassName,
+        "data-testid": "modal"
+    }, children)));
+});
+let $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fQOb3$forwardRef)($842084dfa182af65$var$Modal);
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+var $930b2f4095bb11d1$exports = {};
+
+$parcel$export($930b2f4095bb11d1$exports, "spectrum-Tray", () => $930b2f4095bb11d1$export$ce0704cd084c4f0d, (v) => $930b2f4095bb11d1$export$ce0704cd084c4f0d = v);
+$parcel$export($930b2f4095bb11d1$exports, "is-open", () => $930b2f4095bb11d1$export$a9781837241c946d, (v) => $930b2f4095bb11d1$export$a9781837241c946d = v);
+$parcel$export($930b2f4095bb11d1$exports, "spectrum-Tray-wrapper", () => $930b2f4095bb11d1$export$641b9b70c23dce66, (v) => $930b2f4095bb11d1$export$641b9b70c23dce66 = v);
+$parcel$export($930b2f4095bb11d1$exports, "spectrum-Tray--fixedHeight", () => $930b2f4095bb11d1$export$79bfb05e59a300b, (v) => $930b2f4095bb11d1$export$79bfb05e59a300b = v);
+var $930b2f4095bb11d1$export$ce0704cd084c4f0d;
+var $930b2f4095bb11d1$export$a9781837241c946d;
+var $930b2f4095bb11d1$export$641b9b70c23dce66;
+var $930b2f4095bb11d1$export$79bfb05e59a300b;
+$930b2f4095bb11d1$export$ce0704cd084c4f0d = "spectrum-Tray_23bf66";
+$930b2f4095bb11d1$export$a9781837241c946d = "is-open_23bf66";
+$930b2f4095bb11d1$export$641b9b70c23dce66 = "spectrum-Tray-wrapper_23bf66";
+$930b2f4095bb11d1$export$79bfb05e59a300b = "spectrum-Tray--fixedHeight_23bf66";
+
+
+
+
+function $1afc87f3d16a5a1c$var$Tray(props, ref) {
+    let { children: children , state: state , ...otherProps } = props;
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    let wrapperRef = (0, $fQOb3$useRef)(null);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
+        ...otherProps,
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($1afc87f3d16a5a1c$var$TrayWrapper, {
+        ...props,
+        wrapperRef: wrapperRef,
+        ref: domRef
+    }, children));
+}
+let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)(function(props, ref) {
+    let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , state: state , wrapperRef: wrapperRef  } = props;
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { modalProps: modalProps , underlayProps: underlayProps  } = (0, $fQOb3$useModalOverlay)({
+        ...props,
+        isDismissable: true
+    }, state, ref);
+    // We need to measure the window's height in JS rather than using percentages in CSS
+    // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
+    // does not work properly because there is nothing to base the percentage on.
+    // We cannot use vh units because mobile browsers adjust the window height dynamically
+    // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
+    // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
+    // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
+    let viewport = (0, $fQOb3$useViewportSize)();
+    let wrapperStyle = {
+        "--spectrum-visual-viewport-height": viewport.height + "px"
+    };
+    let wrapperClassName = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($930b2f4095bb11d1$exports))), "spectrum-Tray-wrapper");
+    let className = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($930b2f4095bb11d1$exports))), "spectrum-Tray", {
+        "is-open": isOpen,
+        "spectrum-Tray--fixedHeight": isFixedHeight
+    }, (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Tray", "react-spectrum-Tray"), styleProps.className);
+    // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ref: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
+        ...underlayProps,
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        className: wrapperClassName,
+        style: wrapperStyle
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...modalProps,
+        className: className,
+        ref: ref,
+        "data-testid": "tray"
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
+        onDismiss: state.close
+    }), children, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
+        onDismiss: state.close
+    }))));
+});
+let $1afc87f3d16a5a1c$export$4589ed81930b555c = /*#__PURE__*/ (0, $fQOb3$forwardRef)($1afc87f3d16a5a1c$var$Tray);
+
+
+
+
+
+export {$70305dc5fb729c3b$export$c6fdb837b070b4ff as Overlay, $17b503f7de08fecc$export$5b6b19405a83ff9d as Popover, $842084dfa182af65$export$2b77a92f1a5ad772 as Modal, $1afc87f3d16a5a1c$export$4589ed81930b555c as Tray, $bc765a7a041310da$export$b847a40ee92eff38 as OpenTransition};
+//# sourceMappingURL=module.js.map

package/dist/main.css

@@ -1 +1 @@
-.spectrum-Popover_38efea.react-spectrum-Popover_38efea{visibility:visible}.spectrum-Popover_38efea .spectrum-Dialog-content_38efea{max-height:initial}.spectrum-Modal-wrapper_38efea.react-spectrum-Modal-wrapper_38efea,.spectrum-Modal_38efea.react-spectrum-Modal_38efea,.spectrum-Tray_38efea.react-spectrum-Tray_38efea{visibility:visible}.spectrum-Tray_23bf66{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Tray_23bf66.is-open_23bf66{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}[dir=ltr] .spectrum-Tray-wrapper_23bf66{left:0}[dir=rtl] .spectrum-Tray-wrapper_23bf66{right:0}.spectrum-Tray-wrapper_23bf66{width:100%;height:100vh;pointer-events:none;z-index:2;justify-content:center;display:flex;position:fixed;top:0}.spectrum-Tray_23bf66{--spectrum-tray-margin-top:64px;--spectrum-tray-max-width:450px;width:var(--spectrum-tray-width,100%);max-width:var(--spectrum-tray-max-width,375px);min-height:var(--spectrum-tray-min-height,var(--spectrum-global-dimension-static-size-800));max-height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));padding-bottom:max(calc(100vh - var(--spectrum-visual-viewport-height)),env(safe-area-inset-bottom));border-radius:var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-border-radius,0px)var(--spectrum-tray-border-radius,0px);transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,transform var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s;outline:none;flex-direction:column;display:flex;position:absolute;bottom:0;transform:translateY(100%)}.spectrum-Tray_23bf66.is-open_23bf66{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}.spectrum-Tray--fixedHeight_23bf66{height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));top:var(--spectrum-tray-margin-top)}@media (max-width:450px){.spectrum-Tray_23bf66{border-radius:var(--spectrum-tray-border-radius,0px)}}.spectrum-Tray_23bf66{background-color:var(--spectrum-tray-background-color)}.spectrum-Modal_f81956{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Modal_f81956.is-open_f81956{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Modal-wrapper_f81956{box-sizing:border-box;width:100vw;height:var(--spectrum-visual-viewport-height);visibility:hidden;pointer-events:none;z-index:2;transition:visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.spectrum-Modal-wrapper_f81956.is-open_f81956{visibility:visible}.spectrum-Modal_f81956{transform:translateY(var(--spectrum-dialog-entry-animation-distance,var(--spectrum-global-dimension-size-250)));z-index:2;max-height:calc(var(--spectrum-visual-viewport-height)*.9);max-width:90vw;min-width:var(--spectrum-dialog-min-width,var(--spectrum-global-dimension-static-size-3600));border-radius:var(--spectrum-dialog-border-radius,var(--spectrum-global-dimension-size-50));pointer-events:auto;transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,visibility 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))),transform 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100)));outline:none}.spectrum-Modal_f81956.is-open_f81956{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}@media only screen and (max-device-width:400px),only screen and (max-device-height:350px){.spectrum-Modal--responsive_f81956{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0}.spectrum-Modal-wrapper_f81956 .spectrum-Modal--responsive_f81956{margin-top:0}}.spectrum-Modal--fullscreen_f81956{max-width:none;max-height:none;width:calc(100% - 80px);height:calc(100% - 80px);position:fixed;top:40px;bottom:40px;left:40px;right:40px}.spectrum-Modal--fullscreenTakeover_f81956{max-width:none;max-height:none;box-sizing:border-box;border:none;border-radius:0;position:fixed;top:0;bottom:0;left:0;right:0}.spectrum-Modal--fullscreenTakeover_f81956,.spectrum-Modal--fullscreenTakeover_f81956.is-open_f81956{transform:none}.spectrum-Modal_f81956{background:var(--spectrum-dialog-background-color,var(--spectrum-alias-background-color-default))}.spectrum-Underlay_eb7615{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Underlay_eb7615.is-open_eb7615{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Underlay_eb7615{z-index:1;transition:opacity var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300))cubic-bezier(.5,0,1,1)var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)),visibility 0s linear calc(var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300)));position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.spectrum-Underlay_eb7615.spectrum-Underlay--transparent_eb7615{background:0 0;transition:none}.spectrum-Underlay_eb7615.is-open_eb7615{transition:opacity var(--spectrum-dialog-background-entry-animation-duration,var(--spectrum-global-animation-duration-600))cubic-bezier(0,0,.4,1)0s}.spectrum-Underlay_eb7615{background:var(--spectrum-dialog-underlay-background-color,var(--spectrum-alias-background-color-modal-overlay))}.spectrum-Popover_6115b8{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Popover_6115b8.is-open_6115b8{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Popover--bottom_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--top_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover--right_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--left_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover_6115b8{box-sizing:border-box;min-width:var(--spectrum-global-dimension-size-400);min-height:var(--spectrum-global-dimension-size-400);border-style:solid;border-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-popover-border-radius,var(--spectrum-alias-border-radius-regular));outline:none;flex-direction:column;display:inline-flex;position:absolute}.spectrum-Popover-tip_6115b8{--spectrum-popover-tip-size:var(--spectrum-popover-tip-width,var(--spectrum-global-dimension-size-250));--spectrum-popover-tip-borderWidth:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));position:absolute;-webkit-transform:translate(0)}.spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{stroke-linecap:square;stroke-linejoin:miter;stroke-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin))}.spectrum-Popover--dialog_6115b8{min-width:270px;padding:30px 29px}.spectrum-Popover--left_6115b8.spectrum-Popover--withTip_6115b8{margin-right:13px}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8{left:100%}.spectrum-Popover--right_6115b8.spectrum-Popover--withTip_6115b8{margin-left:13px}.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{right:100%;transform:scaleX(-1)}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{margin-top:calc(var(--spectrum-global-dimension-size-150)*-1);top:50%}.spectrum-Popover--bottom_6115b8.spectrum-Popover--withTip_6115b8{margin-top:13px}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8{bottom:100%;transform:scaleY(-1)}.spectrum-Popover--top_6115b8.spectrum-Popover--withTip_6115b8{margin-bottom:13px}.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{top:100%}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{margin-left:calc(var(--spectrum-global-dimension-size-150)*-1);left:50%}.spectrum-Popover_6115b8{background-color:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark));filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));-webkit-filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));will-change:filter;clip-path:inset(-30px)}.spectrum-Popover_6115b8 .spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{fill:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));stroke:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark))}
+.spectrum-Popover_38efea.react-spectrum-Popover_38efea{visibility:visible}.spectrum-Popover_38efea .spectrum-Dialog-content_38efea{max-height:initial}.spectrum-Modal-wrapper_38efea.react-spectrum-Modal-wrapper_38efea,.spectrum-Modal_38efea.react-spectrum-Modal_38efea,.spectrum-Tray_38efea.react-spectrum-Tray_38efea{visibility:visible}:root{font-synthesis:weight}.spectrum-Tray_23bf66{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Tray_23bf66.is-open_23bf66{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}[dir=ltr] .spectrum-Tray-wrapper_23bf66{left:0}[dir=rtl] .spectrum-Tray-wrapper_23bf66{right:0}.spectrum-Tray-wrapper_23bf66{width:100%;height:100vh;pointer-events:none;z-index:2;justify-content:center;display:flex;position:fixed;top:0}.spectrum-Tray_23bf66{--spectrum-tray-margin-top:64px;--spectrum-tray-max-width:450px;width:var(--spectrum-tray-width,100%);max-width:var(--spectrum-tray-max-width,375px);min-height:var(--spectrum-tray-min-height,var(--spectrum-global-dimension-static-size-800));max-height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));padding-bottom:max(calc(100vh - var(--spectrum-visual-viewport-height)),env(safe-area-inset-bottom));border-radius:var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-border-radius,0px)var(--spectrum-tray-border-radius,0px);transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,transform var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s;outline:none;flex-direction:column;display:flex;position:absolute;bottom:0;transform:translateY(100%)}.spectrum-Tray_23bf66.is-open_23bf66{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}.spectrum-Tray--fixedHeight_23bf66{height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));top:var(--spectrum-tray-margin-top)}@media (max-width:450px){.spectrum-Tray_23bf66{border-radius:var(--spectrum-tray-border-radius,0px)}}.spectrum-Tray_23bf66{background-color:var(--spectrum-tray-background-color)}:root{font-synthesis:weight}.spectrum-Modal_f81956{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Modal_f81956.is-open_f81956{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Modal-wrapper_f81956{box-sizing:border-box;width:100vw;height:var(--spectrum-visual-viewport-height);visibility:hidden;pointer-events:none;z-index:2;transition:visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.spectrum-Modal-wrapper_f81956.is-open_f81956{visibility:visible}.spectrum-Modal_f81956{transform:translateY(var(--spectrum-dialog-entry-animation-distance,var(--spectrum-global-dimension-size-250)));z-index:2;max-height:calc(var(--spectrum-visual-viewport-height)*.9);max-width:90vw;min-width:var(--spectrum-dialog-min-width,var(--spectrum-global-dimension-static-size-3600));border-radius:var(--spectrum-dialog-border-radius,var(--spectrum-global-dimension-size-50));pointer-events:auto;transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,visibility 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))),transform 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100)));outline:none}.spectrum-Modal_f81956.is-open_f81956{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}@media only screen and (max-device-width:400px),only screen and (max-device-height:350px){.spectrum-Modal--responsive_f81956{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0}.spectrum-Modal-wrapper_f81956 .spectrum-Modal--responsive_f81956{margin-top:0}}.spectrum-Modal--fullscreen_f81956{max-width:none;max-height:none;width:calc(100% - 80px);height:calc(100% - 80px);position:fixed;top:40px;bottom:40px;left:40px;right:40px}.spectrum-Modal--fullscreenTakeover_f81956{max-width:none;max-height:none;box-sizing:border-box;border:none;border-radius:0;position:fixed;top:0;bottom:0;left:0;right:0}.spectrum-Modal--fullscreenTakeover_f81956,.spectrum-Modal--fullscreenTakeover_f81956.is-open_f81956{transform:none}.spectrum-Modal_f81956{background:var(--spectrum-dialog-background-color,var(--spectrum-alias-background-color-default))}:root{font-synthesis:weight}.spectrum-Underlay_eb7615{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Underlay_eb7615.is-open_eb7615{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Underlay_eb7615{z-index:1;transition:opacity var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300))cubic-bezier(.5,0,1,1)var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)),visibility 0s linear calc(var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300)));position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.spectrum-Underlay_eb7615.spectrum-Underlay--transparent_eb7615{background:0 0;transition:none}.spectrum-Underlay_eb7615.is-open_eb7615{transition:opacity var(--spectrum-dialog-background-entry-animation-duration,var(--spectrum-global-animation-duration-600))cubic-bezier(0,0,.4,1)0s}.spectrum-Underlay_eb7615{background:var(--spectrum-dialog-underlay-background-color,var(--spectrum-alias-background-color-modal-overlay))}:root{font-synthesis:weight}.spectrum-Popover_6115b8{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Popover_6115b8.is-open_6115b8{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Popover--bottom_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--top_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover--right_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--left_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover_6115b8{box-sizing:border-box;min-width:var(--spectrum-global-dimension-size-400);min-height:var(--spectrum-global-dimension-size-400);border-style:solid;border-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-popover-border-radius,var(--spectrum-alias-border-radius-regular));outline:none;flex-direction:column;display:inline-flex;position:absolute}.spectrum-Popover-tip_6115b8{--spectrum-popover-tip-size:var(--spectrum-popover-tip-width,var(--spectrum-global-dimension-size-250));--spectrum-popover-tip-borderWidth:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));position:absolute;-webkit-transform:translate(0)}.spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{stroke-linecap:square;stroke-linejoin:miter;stroke-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin))}.spectrum-Popover--dialog_6115b8{min-width:270px;padding:30px 29px}.spectrum-Popover--left_6115b8.spectrum-Popover--withTip_6115b8{margin-right:13px}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8{left:100%}.spectrum-Popover--right_6115b8.spectrum-Popover--withTip_6115b8{margin-left:13px}.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{right:100%;transform:scaleX(-1)}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{margin-top:calc(var(--spectrum-global-dimension-size-150)*-1);top:50%}.spectrum-Popover--bottom_6115b8.spectrum-Popover--withTip_6115b8{margin-top:13px}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8{bottom:100%;transform:scaleY(-1)}.spectrum-Popover--top_6115b8.spectrum-Popover--withTip_6115b8{margin-bottom:13px}.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{top:100%}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{margin-left:calc(var(--spectrum-global-dimension-size-150)*-1);left:50%}.spectrum-Popover_6115b8{background-color:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark));filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));-webkit-filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));will-change:filter;clip-path:inset(-30px)}.spectrum-Popover_6115b8 .spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{fill:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));stroke:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark))}