@react-spectrum/s2 0.5.0 → 0.7.0

package/dist/Popover.css

@@ -1,84 +1,34 @@
-@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 {
-  ._A-10jn6wd {
+  ._B-10jn6wd {
     color-scheme: var(--lightningcss-light, light) var(--lightningcss-dark, dark);
   }
 
-  ._Ac {
+  ._Bc {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light dark;
   }
 
   @media (prefers-color-scheme: dark) {
-    ._Ac {
+    ._Bc {
       --lightningcss-light: ;
       --lightningcss-dark: initial;
     }
   }
 
-  ._Aa {
+  ._Ba {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light;
   }
 
-  ._Ab {
+  ._Bb {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
   }
 
-  .-_1de2x0q_b-______k {
+  .-_1de2x0q_b-______x {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
@@ -86,31 +36,31 @@
     background-color: var(--s2-container-bg);
   }
 
-  ._vd {
+  ._wd {
     border-start-start-radius: .625rem;
   }
 
-  ._wd {
+  ._xd {
     border-start-end-radius: .625rem;
   }
 
-  ._xd {
+  ._yd {
     border-end-start-radius: .625rem;
   }
 
-  ._yd {
+  ._zd {
     border-end-end-radius: .625rem;
   }
 
-  ._ub {
+  ._vb {
     filter: drop-shadow(0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a));
   }
 
-  ._tb {
+  ._ub {
     box-shadow: 0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a);
   }
 
-  ._td {
+  ._ud {
     box-shadow: none;
   }
 
@@ -154,87 +104,70 @@
     max-width: calc(100vw - 24px);
   }
 
-  .Qd {
-    --translateY: .5rem;
-    translate: var(--translateX, 0) var(--translateY, 0);
+  ._0d {
+    display: flex;
   }
 
-  .QG {
-    --translateY: -.5rem;
-    translate: var(--translateX, 0) var(--translateY, 0);
+  ._L-3t1x {
+    opacity: 0;
+    opacity: 0;
   }
 
-  .PG {
-    --translateX: -.5rem;
+  .Qc {
+    --translateY: .25rem;
     translate: var(--translateX, 0) var(--translateY, 0);
-  }
-
-  .Pd {
-    --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;
-  }
-
-  ._S-1nys8p3 {
-    animation-name: -_1llqja1;
-  }
-
-  ._T-375xx3 {
-    animation-duration: .2s;
+  .QF {
+    --translateY: -.25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Yc {
-    animation-timing-function: cubic-bezier(.5, 0, 1, 1);
+  .Qa {
+    --translateY: 0rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Va {
-    animation-direction: normal;
+  .Pc {
+    --translateX: .25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Vb {
-    animation-direction: reverse;
+  .PF {
+    --translateX: -.25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._O-19n1ox2 {
-    transition-property: opacity, transform;
+  .Pa {
+    --translateX: 0rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Q-375x7f {
-    transition-duration: .15s;
+  ._P-19n5zko {
+    transition-property: opacity, translate;
   }
 
-  ._Ra {
-    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  ._R-375xx3 {
+    transition-duration: .2s;
   }
 
-  .__P-19n1ox2 {
-    will-change: opacity, transform;
+  ._Sc {
+    transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 
-  .__Fa {
+  .__Ga {
     isolation: isolate;
   }
 
-  .__Ba {
+  .__Ca {
     pointer-events: none;
   }
 
-  ._Za {
+  ._0a {
     display: block;
   }
 
@@ -292,39 +225,39 @@
     padding-inline-end: .5rem;
   }
 
-  .__na {
+  .__oa {
     box-sizing: border-box;
   }
 
-  ._La {
+  ._Ma {
     outline-style: none;
   }
 
-  ._v-17zqamw {
+  ._w-17zqamw {
     border-start-start-radius: inherit;
   }
 
-  ._w-17zqamw {
+  ._x-17zqamw {
     border-start-end-radius: inherit;
   }
 
-  ._x-17zqamw {
+  ._y-17zqamw {
     border-end-start-radius: inherit;
   }
 
-  ._y-17zqamw {
+  ._z-17zqamw {
     border-end-end-radius: inherit;
   }
 
-  .__va {
+  .__wa {
     overflow-x: auto;
   }
 
-  .__wa {
+  .__xa {
     overflow-y: auto;
   }
 
-  .Uc {
+  .Vc {
     position: relative;
   }
 
@@ -332,10 +265,6 @@
     width: 100%;
   }
 
-  .kb {
-    height: 100%;
-  }
-
   .r-17zqamw {
     max-width: inherit;
   }
@@ -345,21 +274,17 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .ca_____v {
+    .ca_____I {
       border-color: buttonborder;
     }
 
-    .fa_____x {
+    .fa_____K {
       stroke: buttonborder;
     }
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=Popover.css.map */

package/dist/Popover.css.map

@@ -1 +1 @@
-{"mappings":"ACgDsB;;;;;;;;;;AASG;;;;;;;;;;AASE;;;;;;;;;;AASC;;;;;;;;;;AASD;;;;;;;;;;AAUb;EAAA;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkGF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAoGQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtMN;;AAAA;EAAA;IAAA;;;;IAkGF;;;;;;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@import \"6d02bf82e7eb5c5e\";\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  Dialog,\n  DialogProps,\n  OverlayArrow,\n  OverlayTriggerStateContext,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, 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' 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  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\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  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\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: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: '[calc(100vw - 24px)]',\n  boxSizing: 'border-box',\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    isSubmenu: {\n      isEntering: fadeKeyframes,\n      isExiting: fadeKeyframes\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  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\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 PopoverBase(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  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\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, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), 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\nlet _PopoverBase = forwardRef(PopoverBase);\nexport {_PopoverBase as PopoverBase};\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n  padding: 8,\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: '[inherit]',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\nfunction Popover(props: PopoverDialogProps, ref: DOMRef) {\n  let domRef = useDOMRef(ref);\n\n  return (\n    <_PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n      <Dialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </Dialog>\n    </_PopoverBase>\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"}
+{"mappings":"AC+Cc;EAAA;;;;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;;;;EA6EF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAkGQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/KN;;AAAA;EAAA;IAAA;;;;IA6EF","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\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  Dialog,\n  DialogProps,\n  OverlayArrow,\n  OverlayTriggerStateContext,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, 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 {mergeStyles} from '../style/runtime';\nimport {style} from '../style' 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  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\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: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: '[calc(100vw - 24px)]',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\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\nexport const PopoverBase = forwardRef(function PopoverBase(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  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\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      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\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, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), 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\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n  padding: 8,\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: '[inherit]',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n  let domRef = useDOMRef(ref);\n\n  return (\n    <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n      <Dialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </Dialog>\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}

package/dist/Popover.mjs

@@ -3,7 +3,7 @@ import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from ".
 import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "../icons/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, Dialog as $ggIy9$Dialog, OverlayTriggerStateContext as $ggIy9$OverlayTriggerStateContext} from "react-aria-components";
-import {useContext as $ggIy9$useContext, useCallback as $ggIy9$useCallback, forwardRef as $ggIy9$forwardRef} from "react";
+import {forwardRef as $ggIy9$forwardRef, useContext as $ggIy9$useContext, useCallback as $ggIy9$useCallback} from "react";
 import {useDOMRef as $ggIy9$useDOMRef} from "@react-spectrum/utils";
 
 /*
@@ -22,14 +22,9 @@ import {useDOMRef as $ggIy9$useDOMRef} from "@react-spectrum/utils";
 
 
 
-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|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
     rules += matches.join('');
     let $l = false;
     let $r = false;
@@ -37,25 +32,25 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
         if (/^\s*l/.test(p)) $l = true;
         if (/^\s*r/.test(p)) $r = true;
     }
-    if (props.colorScheme === "dark") rules += ' _Ab';
-    else if (props.colorScheme === "light") rules += ' _Aa';
-    else if (props.colorScheme === "light dark") rules += ' _Ac';
-    else rules += ' _A-10jn6wd';
-    rules += ' -_1de2x0q_b-______k';
+    if (props.colorScheme === "dark") rules += ' _Bb';
+    else if (props.colorScheme === "light") rules += ' _Ba';
+    else if (props.colorScheme === "light dark") rules += ' _Bc';
+    else rules += ' _B-10jn6wd';
+    rules += ' -_1de2x0q_b-______x';
     rules += ' b-1de2x0q';
-    rules += ' _vd';
     rules += ' _wd';
     rules += ' _xd';
     rules += ' _yd';
-    if (props.isArrowShown) rules += ' _ub';
-    if (props.isArrowShown) rules += ' _td';
-    else rules += ' _tb';
+    rules += ' _zd';
+    if (props.isArrowShown) rules += ' _vb';
+    if (props.isArrowShown) rules += ' _ud';
+    else rules += ' _ub';
     rules += ' wa';
     rules += ' ub';
     rules += ' vb';
     rules += ' sb';
     rules += ' tb';
-    rules += ' ca_____v';
+    rules += ' ca_____I';
     rules += ' ch';
     if (!$l) {
         if (props.size === "L") rules += ' l_________G';
@@ -63,50 +58,37 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
         else if (props.size === "S") rules += ' l_____O';
     }
     if (!$r) rules += ' r-rtptky';
-    rules += ' __na';
-    if (props.placement === "top") {
-        if (props.isArrowShown) rules += ' QG';
-    } else if (props.placement === "bottom") {
-        if (props.isArrowShown) rules += ' Qd';
-    }
-    if (props.placement === "right") {
-        if (props.isArrowShown) rules += ' Pd';
-    } else if (props.placement === "left") {
-        if (props.isArrowShown) rules += ' PG';
+    rules += ' __oa';
+    rules += ' _0d';
+    if (props.isExiting) rules += ' _L-3t1x';
+    else if (props.isEntering) rules += ' _L-3t1x';
+    if (props.isSubmenu) rules += ' Qa';
+    else if (props.placement === "bottom") {
+        if (props.isExiting) rules += ' QF';
+        else if (props.isEntering) rules += ' QF';
+    } else if (props.placement === "top") {
+        if (props.isExiting) rules += ' Qc';
+        else if (props.isEntering) rules += ' Qc';
     }
-    if (props.isSubmenu) {
-        if (props.isExiting) rules += ' _S-1nys8p3';
-        else if (props.isEntering) rules += ' _S-1nys8p3';
-    } else if (props.placement === "right") {
-        if (props.isExiting) rules += ' _S-tlelkz';
-        else if (props.isEntering) rules += ' _S-tlelkz';
+    if (props.isSubmenu) rules += ' Pa';
+    else if (props.placement === "right") {
+        if (props.isExiting) rules += ' PF';
+        else if (props.isEntering) rules += ' PF';
     } 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 += ' Pc';
+        else if (props.isEntering) rules += ' Pc';
     }
-    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';
-    if (props.isExiting) rules += ' __Ba';
+    rules += ' _P-19n5zko';
+    rules += ' _R-375xx3';
+    if (props.isExiting) rules += ' _Sc';
+    rules += ' __Ga';
+    if (props.isExiting) rules += ' __Ca';
     return rules;
 };
 // TODO: animations and real Popover Arrow
 let $88b746eba92c8d0d$var$arrow = function anonymous(props) {
     let rules = " .";
-    rules += ' _Za';
+    rules += ' _0a';
     rules += ' e-1de2x0q';
     if (props.placement === "right") rules += ' R-3hn0u';
     else if (props.placement === "left") rules += ' R-375ty3';
@@ -116,11 +98,11 @@ let $88b746eba92c8d0d$var$arrow = function anonymous(props) {
     if (props.placement === "right") rules += ' Pc';
     else if (props.placement === "left") rules += ' PF';
     rules += ' xb';
-    rules += ' fa_____x';
+    rules += ' fa_____K';
     rules += ' fj';
     return rules;
 };
-function $88b746eba92c8d0d$var$PopoverBase(props, ref) {
+const $88b746eba92c8d0d$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function PopoverBase(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));
@@ -160,6 +142,7 @@ function $88b746eba92c8d0d$var$PopoverBase(props, ref) {
     // containerPadding not working as expected
     return /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$Popover), {
         ...props,
+        offset: (props.offset ?? 8) + (hideArrow ? 0 : 8),
         ref: popoverRef,
         style: {
             ...UNSAFE_style,
@@ -191,21 +174,18 @@ function $88b746eba92c8d0d$var$PopoverBase(props, ref) {
                 ]
             }))
     });
-}
-let $88b746eba92c8d0d$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $ggIy9$forwardRef)($88b746eba92c8d0d$var$PopoverBase);
+});
 const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
     rules += matches.join('');
-    let $U = false;
+    let $V = false;
     let $l = false;
-    let $k = false;
     let $r = false;
     let $p = false;
     for (let p of matches){
-        if (/^\s*U/.test(p)) $U = true;
+        if (/^\s*V/.test(p)) $V = true;
         if (/^\s*l/.test(p)) $l = true;
-        if (/^\s*k/.test(p)) $k = true;
         if (/^\s*r/.test(p)) $r = true;
         if (/^\s*p/.test(p)) $p = true;
     }
@@ -213,22 +193,21 @@ const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
     rules += ' Fd';
     rules += ' Cd';
     rules += ' Dd';
-    rules += ' __na';
-    rules += ' _La';
-    rules += ' _v-17zqamw';
+    rules += ' __oa';
+    rules += ' _Ma';
     rules += ' _w-17zqamw';
     rules += ' _x-17zqamw';
     rules += ' _y-17zqamw';
-    rules += ' __va';
+    rules += ' _z-17zqamw';
     rules += ' __wa';
-    if (!$U) rules += ' Uc';
+    rules += ' __xa';
+    if (!$V) rules += ' Vc';
     if (!$l) rules += ' lb';
-    if (!$k) rules += ' kb';
     if (!$r) rules += ' r-17zqamw';
     if (!$p) rules += ' p-17zqamw';
     return rules;
 };
-function $88b746eba92c8d0d$var$Popover(props, ref) {
+const $88b746eba92c8d0d$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function Popover(props, ref) {
     let domRef = (0, $ggIy9$useDOMRef)(ref);
     return /*#__PURE__*/ (0, $ggIy9$jsx)($88b746eba92c8d0d$export$fde1b04c590741a3, {
         size: props.size,
@@ -250,10 +229,7 @@ function $88b746eba92c8d0d$var$Popover(props, ref) {
                 }))
         })
     });
-}
-/**
- * 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$fde1b04c590741a3 as PopoverBase, $88b746eba92c8d0d$export$5b6b19405a83ff9d as Popover};