@react-spectrum/s2 0.2.1-nightly.4979

package/dist/Popover.cjs

@@ -0,0 +1,175 @@
+require("./Popover.css");
+var $914a06b3a1c679bc$exports = require("./Provider.cjs");
+var $308b180f49d82d28$exports = require("./runtime.cjs");
+var $16fRD$reactjsxruntime = require("react/jsx-runtime");
+var $16fRD$reactariacomponents = require("react-aria-components");
+var $16fRD$react = require("react");
+var $16fRD$reactspectrumutils = require("@react-spectrum/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Popover", () => $493371ef39bf7a55$export$5b6b19405a83ff9d);
+/*
+ * Copyright 2024 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 $493371ef39bf7a55$var$fadeKeyframes = "-_1llqja1";
+const $493371ef39bf7a55$var$slideUpKeyframes = "-xohm13";
+const $493371ef39bf7a55$var$slideDownKeyframes = "-_2hjlm";
+const $493371ef39bf7a55$var$slideRightKeyframes = "-_1s1guk8";
+const $493371ef39bf7a55$var$slideLeftKeyframes = "-_1dp80kl";
+let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $l = false;
+    for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+    if (props.colorScheme === "dark") rules += ' _Ab';
+    else if (props.colorScheme === "light") rules += ' _Aa';
+    else if (props.colorScheme === "light dark") rules += ' _Ac';
+    rules += ' -_1jgw3ze_b-_____1';
+    rules += ' b-1jgw3ze';
+    rules += ' _vd';
+    rules += ' _wd';
+    rules += ' _xd';
+    rules += ' _yd';
+    if (props.isArrowShown) rules += ' _ub';
+    if (props.isArrowShown) rules += ' _tc';
+    else rules += ' _tb';
+    rules += ' wa';
+    rules += ' ub';
+    rules += ' vb';
+    rules += ' sb';
+    rules += ' tb';
+    rules += ' ca_____v';
+    rules += ' ch';
+    if (!$l) {
+        if (props.size === "L") rules += ' l-3940j6';
+        else if (props.size === "M") rules += ' l-38elgx';
+        else if (props.size === "S") rules += ' l-38aqto';
+    }
+    if (props.placement === "top") {
+        if (props.isArrowShown) rules += ' QF';
+    } else if (props.placement === "bottom") {
+        if (props.isArrowShown) rules += ' Qc';
+    }
+    if (props.placement === "right") {
+        if (props.isArrowShown) rules += ' Pc';
+    } else if (props.placement === "left") {
+        if (props.isArrowShown) rules += ' PF';
+    }
+    if (props.placement === "right") {
+        if (props.isExiting) rules += ' _S-tlelkz';
+        else if (props.isEntering) rules += ' _S-tlelkz';
+    } else if (props.placement === "left") {
+        if (props.isExiting) rules += ' _S-1hbwyb';
+        else if (props.isEntering) rules += ' _S-1hbwyb';
+    } else if (props.placement === "bottom") {
+        if (props.isExiting) rules += ' _S-crq4zk';
+        else if (props.isEntering) rules += ' _S-crq4zk';
+    } else if (props.placement === "top") {
+        if (props.isExiting) rules += ' _S-17xx2vw';
+        else if (props.isEntering) rules += ' _S-17xx2vw';
+    }
+    if (props.isExiting) rules += ' _T-375xx3';
+    else if (props.isEntering) rules += ' _T-375xx3';
+    if (props.isExiting) rules += ' _Yc';
+    if (props.isExiting) rules += ' _Vb';
+    else if (props.isEntering) rules += ' _Va';
+    rules += ' _O-19n1ox2';
+    rules += ' _Q-375x7f';
+    rules += ' _Ra';
+    rules += ' __P-19n1ox2';
+    rules += ' __Fa';
+    return rules;
+};
+// TODO: animations and real Popover Arrow
+let $493371ef39bf7a55$var$arrow = function anonymous(props) {
+    let rules = " .";
+    rules += ' _Za';
+    rules += ' e-1jgw3ze';
+    if (props.placement === "right") rules += ' R-3hn0u';
+    else if (props.placement === "left") rules += ' R-375ty3';
+    else if (props.placement === "bottom") rules += ' R-375xa6';
+    else if (props.placement === "top") rules += ' R-3t1x';
+    else rules += ' R-375xa6';
+    if (props.placement === "right") rules += ' Pb';
+    else if (props.placement === "left") rules += ' PE';
+    rules += ' xb';
+    rules += ' fa_____x';
+    rules += ' fj';
+    return rules;
+};
+function $493371ef39bf7a55$var$Popover(props, ref) {
+    let { hideArrow: hideArrow = false, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, size: size } = props;
+    let domRef = (0, $16fRD$reactspectrumutils.useDOMRef)(ref);
+    let colorScheme = (0, $16fRD$react.useContext)((0, $914a06b3a1c679bc$exports.ColorSchemeContext));
+    let { locale: locale, direction: direction } = (0, $16fRD$reactariacomponents.useLocale)();
+    // TODO: should we pass through lang and dir props in RAC?
+    let popoverRef = (0, $16fRD$react.useCallback)((el)=>{
+        domRef.current = el;
+        if (el) {
+            el.lang = locale;
+            el.dir = direction;
+        }
+    }, [
+        locale,
+        direction,
+        domRef
+    ]);
+    // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results
+    // containerPadding not working as expected
+    return /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)((0, $16fRD$reactariacomponents.Popover), {
+        ...props,
+        ref: popoverRef,
+        style: {
+            ...UNSAFE_style,
+            // Override default z-index from useOverlayPosition. We use isolation: isolate instead.
+            zIndex: undefined
+        },
+        className: (renderProps)=>UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)($493371ef39bf7a55$var$popover({
+                ...renderProps,
+                size: size,
+                isArrowShown: !hideArrow,
+                colorScheme: colorScheme
+            }), styles),
+        children: (0, $16fRD$reactariacomponents.composeRenderProps)(props.children, (children, renderProps)=>/*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsxs)((0, $16fRD$reactjsxruntime.Fragment), {
+                children: [
+                    !hideArrow && /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)((0, $16fRD$reactariacomponents.OverlayArrow), {
+                        children: /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)("svg", {
+                            width: 18,
+                            height: 9,
+                            viewBox: "0 0 18 10",
+                            className: $493371ef39bf7a55$var$arrow(renderProps),
+                            children: /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)("path", {
+                                transform: "translate(0 -1)",
+                                d: "M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1"
+                            })
+                        })
+                    }),
+                    children
+                ]
+            }))
+    });
+}
+/**
+ * A popover is an overlay element positioned relative to a trigger.
+ */ let $493371ef39bf7a55$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $16fRD$react.forwardRef)($493371ef39bf7a55$var$Popover);
+
+
+//# sourceMappingURL=Popover.cjs.map

package/dist/Popover.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--popoverBackground': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--popoverBackground',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--popoverBackground',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.cjs.map"}

package/dist/Popover.css

@@ -0,0 +1,281 @@
+@keyframes -_1llqja1 {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes -xohm13 {
+  from {
+    transform: translateY(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes -_2hjlm {
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes -_1s1guk8 {
+  from {
+    transform: translateX(4px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes -_1dp80kl {
+  from {
+    transform: translateX(-4px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@layer _.a {
+  ._Ac {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light dark;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    ._Ac {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+    }
+  }
+
+  ._Aa {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+  }
+
+  ._Ab {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+    color-scheme: dark;
+  }
+
+  .-_1jgw3ze_b-_____1 {
+    --popoverBackground: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
+  }
+
+  .b-1jgw3ze {
+    background-color: var(--popoverBackground);
+  }
+
+  ._vd {
+    border-start-start-radius: .625rem;
+  }
+
+  ._wd {
+    border-start-end-radius: .625rem;
+  }
+
+  ._xd {
+    border-end-start-radius: .625rem;
+  }
+
+  ._yd {
+    border-end-end-radius: .625rem;
+  }
+
+  ._ub {
+    filter: drop-shadow(0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a));
+  }
+
+  ._tb {
+    box-shadow: 0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a);
+  }
+
+  ._tc {
+    box-shadow: none;
+  }
+
+  .wa {
+    border-style: solid;
+  }
+
+  .ub {
+    border-top-width: 1px;
+  }
+
+  .vb {
+    border-bottom-width: 1px;
+  }
+
+  .sb {
+    border-inline-start-width: 1px;
+  }
+
+  .tb {
+    border-inline-end-width: 1px;
+  }
+
+  .ch {
+    border-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
+  }
+
+  .l-38aqto {
+    width: 21rem;
+  }
+
+  .l-38elgx {
+    width: 26rem;
+  }
+
+  .l-3940j6 {
+    width: 36rem;
+  }
+
+  .Qc {
+    --translateY: .5rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+
+  .QF {
+    --translateY: -.5rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+
+  .PF {
+    --translateX: -.5rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+
+  .Pc {
+    --translateX: .5rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+
+  ._S-17xx2vw {
+    animation-name: -_2hjlm, -_1llqja1;
+  }
+
+  ._S-crq4zk {
+    animation-name: -xohm13, -_1llqja1;
+  }
+
+  ._S-1hbwyb {
+    animation-name: -_1s1guk8, -_1llqja1;
+  }
+
+  ._S-tlelkz {
+    animation-name: -_1dp80kl, -_1llqja1;
+  }
+
+  ._T-375xx3 {
+    animation-duration: .2s;
+  }
+
+  ._Yc {
+    animation-timing-function: cubic-bezier(.5, 0, 1, 1);
+  }
+
+  ._Va {
+    animation-direction: normal;
+  }
+
+  ._Vb {
+    animation-direction: reverse;
+  }
+
+  ._O-19n1ox2 {
+    transition-property: opacity, transform;
+  }
+
+  ._Q-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .__P-19n1ox2 {
+    will-change: opacity, transform;
+  }
+
+  .__Fa {
+    isolation: isolate;
+  }
+
+  ._Za {
+    display: block;
+  }
+
+  .e-1jgw3ze {
+    fill: var(--popoverBackground);
+  }
+
+  .R-3t1x {
+    rotate: none;
+  }
+
+  .R-375xa6 {
+    rotate: 180deg;
+  }
+
+  .R-375ty3 {
+    rotate: -90deg;
+  }
+
+  .R-3hn0u {
+    rotate: 90deg;
+  }
+
+  .PE {
+    --translateX: -.25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+
+  .Pb {
+    --translateX: .25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+
+  .xb {
+    stroke-width: 1px;
+  }
+
+  .fj {
+    stroke: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
+  }
+}
+
+@layer _.b, UNSAFE_overrides;
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .ca_____v {
+      border-color: buttonborder;
+    }
+
+    .fa_____x {
+      stroke: buttonborder;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=Popover.css.map */

package/dist/Popover.css.map

@@ -0,0 +1 @@
+{"mappings":"ACwCsB;;;;;;;;;;AASG;;;;;;;;;;AASE;;;;;;;;;;AASC;;;;;;;;;;AASD;;;;;;;;;;AAUb;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;AAxFE;;AAAA;EAAA;IAAA;;;;IAwFF;;;;;;AAAA","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\n@import \"5d916373626af735\";\n@import \"b7be93ba2a203a5d\";\n@import \"4d2c1c572cefcb8e\";\n@import \"5a3650982696b8cb\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--popoverBackground': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--popoverBackground',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--popoverBackground',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.css.map"}

package/dist/Popover.mjs

@@ -0,0 +1,170 @@
+import "./Popover.css";
+import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from "./Provider.mjs";
+import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "./runtime.mjs";
+import {jsx as $ggIy9$jsx, jsxs as $ggIy9$jsxs, Fragment as $ggIy9$Fragment} from "react/jsx-runtime";
+import {useLocale as $ggIy9$useLocale, Popover as $ggIy9$Popover, composeRenderProps as $ggIy9$composeRenderProps, OverlayArrow as $ggIy9$OverlayArrow} from "react-aria-components";
+import {useContext as $ggIy9$useContext, useCallback as $ggIy9$useCallback, forwardRef as $ggIy9$forwardRef} from "react";
+import {useDOMRef as $ggIy9$useDOMRef} from "@react-spectrum/utils";
+
+/*
+ * Copyright 2024 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 $88b746eba92c8d0d$var$fadeKeyframes = "-_1llqja1";
+const $88b746eba92c8d0d$var$slideUpKeyframes = "-xohm13";
+const $88b746eba92c8d0d$var$slideDownKeyframes = "-_2hjlm";
+const $88b746eba92c8d0d$var$slideRightKeyframes = "-_1s1guk8";
+const $88b746eba92c8d0d$var$slideLeftKeyframes = "-_1dp80kl";
+let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $l = false;
+    for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+    if (props.colorScheme === "dark") rules += ' _Ab';
+    else if (props.colorScheme === "light") rules += ' _Aa';
+    else if (props.colorScheme === "light dark") rules += ' _Ac';
+    rules += ' -_1jgw3ze_b-_____1';
+    rules += ' b-1jgw3ze';
+    rules += ' _vd';
+    rules += ' _wd';
+    rules += ' _xd';
+    rules += ' _yd';
+    if (props.isArrowShown) rules += ' _ub';
+    if (props.isArrowShown) rules += ' _tc';
+    else rules += ' _tb';
+    rules += ' wa';
+    rules += ' ub';
+    rules += ' vb';
+    rules += ' sb';
+    rules += ' tb';
+    rules += ' ca_____v';
+    rules += ' ch';
+    if (!$l) {
+        if (props.size === "L") rules += ' l-3940j6';
+        else if (props.size === "M") rules += ' l-38elgx';
+        else if (props.size === "S") rules += ' l-38aqto';
+    }
+    if (props.placement === "top") {
+        if (props.isArrowShown) rules += ' QF';
+    } else if (props.placement === "bottom") {
+        if (props.isArrowShown) rules += ' Qc';
+    }
+    if (props.placement === "right") {
+        if (props.isArrowShown) rules += ' Pc';
+    } else if (props.placement === "left") {
+        if (props.isArrowShown) rules += ' PF';
+    }
+    if (props.placement === "right") {
+        if (props.isExiting) rules += ' _S-tlelkz';
+        else if (props.isEntering) rules += ' _S-tlelkz';
+    } else if (props.placement === "left") {
+        if (props.isExiting) rules += ' _S-1hbwyb';
+        else if (props.isEntering) rules += ' _S-1hbwyb';
+    } else if (props.placement === "bottom") {
+        if (props.isExiting) rules += ' _S-crq4zk';
+        else if (props.isEntering) rules += ' _S-crq4zk';
+    } else if (props.placement === "top") {
+        if (props.isExiting) rules += ' _S-17xx2vw';
+        else if (props.isEntering) rules += ' _S-17xx2vw';
+    }
+    if (props.isExiting) rules += ' _T-375xx3';
+    else if (props.isEntering) rules += ' _T-375xx3';
+    if (props.isExiting) rules += ' _Yc';
+    if (props.isExiting) rules += ' _Vb';
+    else if (props.isEntering) rules += ' _Va';
+    rules += ' _O-19n1ox2';
+    rules += ' _Q-375x7f';
+    rules += ' _Ra';
+    rules += ' __P-19n1ox2';
+    rules += ' __Fa';
+    return rules;
+};
+// TODO: animations and real Popover Arrow
+let $88b746eba92c8d0d$var$arrow = function anonymous(props) {
+    let rules = " .";
+    rules += ' _Za';
+    rules += ' e-1jgw3ze';
+    if (props.placement === "right") rules += ' R-3hn0u';
+    else if (props.placement === "left") rules += ' R-375ty3';
+    else if (props.placement === "bottom") rules += ' R-375xa6';
+    else if (props.placement === "top") rules += ' R-3t1x';
+    else rules += ' R-375xa6';
+    if (props.placement === "right") rules += ' Pb';
+    else if (props.placement === "left") rules += ' PE';
+    rules += ' xb';
+    rules += ' fa_____x';
+    rules += ' fj';
+    return rules;
+};
+function $88b746eba92c8d0d$var$Popover(props, ref) {
+    let { hideArrow: hideArrow = false, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, size: size } = props;
+    let domRef = (0, $ggIy9$useDOMRef)(ref);
+    let colorScheme = (0, $ggIy9$useContext)((0, $9affbfa4e13b9582$export$374e0245597d19a3));
+    let { locale: locale, direction: direction } = (0, $ggIy9$useLocale)();
+    // TODO: should we pass through lang and dir props in RAC?
+    let popoverRef = (0, $ggIy9$useCallback)((el)=>{
+        domRef.current = el;
+        if (el) {
+            el.lang = locale;
+            el.dir = direction;
+        }
+    }, [
+        locale,
+        direction,
+        domRef
+    ]);
+    // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results
+    // containerPadding not working as expected
+    return /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$Popover), {
+        ...props,
+        ref: popoverRef,
+        style: {
+            ...UNSAFE_style,
+            // Override default z-index from useOverlayPosition. We use isolation: isolate instead.
+            zIndex: undefined
+        },
+        className: (renderProps)=>UNSAFE_className + (0, $feb886035e0d4633$export$e618dc39ac9ad607)($88b746eba92c8d0d$var$popover({
+                ...renderProps,
+                size: size,
+                isArrowShown: !hideArrow,
+                colorScheme: colorScheme
+            }), styles),
+        children: (0, $ggIy9$composeRenderProps)(props.children, (children, renderProps)=>/*#__PURE__*/ (0, $ggIy9$jsxs)((0, $ggIy9$Fragment), {
+                children: [
+                    !hideArrow && /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$OverlayArrow), {
+                        children: /*#__PURE__*/ (0, $ggIy9$jsx)("svg", {
+                            width: 18,
+                            height: 9,
+                            viewBox: "0 0 18 10",
+                            className: $88b746eba92c8d0d$var$arrow(renderProps),
+                            children: /*#__PURE__*/ (0, $ggIy9$jsx)("path", {
+                                transform: "translate(0 -1)",
+                                d: "M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1"
+                            })
+                        })
+                    }),
+                    children
+                ]
+            }))
+    });
+}
+/**
+ * A popover is an overlay element positioned relative to a trigger.
+ */ let $88b746eba92c8d0d$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ggIy9$forwardRef)($88b746eba92c8d0d$var$Popover);
+
+
+export {$88b746eba92c8d0d$export$5b6b19405a83ff9d as Popover};
+//# sourceMappingURL=Popover.mjs.map

package/dist/Popover.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--popoverBackground': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--popoverBackground',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--popoverBackground',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.mjs.map"}