@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/Tooltip.css

@@ -1,273 +1,273 @@
 @layer _.a {
-  .-ICUGx-_pc13 {
+  .-ICUGx-_pc15 {
     --s2-color-scheme: light dark;
   }
 
-  .-ICUGx-_pb13 {
+  .-ICUGx-_pb15 {
     --s2-color-scheme: light;
   }
 
-  .-ICUGx-_pa13 {
+  .-ICUGx-_pa15 {
     --s2-color-scheme: dark;
   }
 
-  ._pK8eoyd13 {
+  ._pK8eoyd15 {
     color-scheme: var(--s2-color-scheme);
   }
 
-  .-NvXmrd-_ZN8Gi4c13 {
+  .-NvXmrd-_ZN8Gi4c15 {
     --lightningcss-light: initial;
   }
 
-  .-NvXmrd-_ZLmU13 {
+  .-NvXmrd-_ZLmU15 {
     --lightningcss-light:  ;
   }
 
-  .-j9blY-_ZLmU13 {
+  .-j9blY-_ZLmU15 {
     --lightningcss-dark:  ;
   }
 
-  .-j9blY-_ZN8Gi4c13 {
+  .-j9blY-_ZN8Gi4c15 {
     --lightningcss-dark: initial;
   }
 
-  ._Ca13 {
+  ._Ca15 {
     justify-content: center;
   }
 
-  .eb13 {
+  .eb15 {
     align-items: center;
   }
 
-  .Le13 {
+  .Le15 {
     max-width: calc(10rem * var(--s2-scale));
   }
 
-  .MAyFGYc13 {
+  .MAyFGYc15 {
     min-height: var(--M);
   }
 
-  ._oa13 {
+  ._oa15 {
     box-sizing: border-box;
   }
 
-  .uk13 {
+  .uk15 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b15 {
     --fs: pow(1.125, -1);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb15 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .pr13 {
+  .pr15 {
     color: light-dark(#fff, #111);
   }
 
-  ._kJ8iPYd13 {
+  ._kJ8iPYd15 {
     border-top-width: var(--_k);
   }
 
-  .hXMFGYc13 {
+  .hXMFGYc15 {
     border-bottom-width: var(--h);
   }
 
-  .g013 {
+  .g015 {
     background-color: light-dark(#292929, #dbdbdb);
   }
 
-  .ob13 {
+  .ob15 {
     border-start-start-radius: .5rem;
   }
 
-  .nb13 {
+  .nb15 {
     border-start-end-radius: .5rem;
   }
 
-  .kb13 {
+  .kb15 {
     border-end-start-radius: .5rem;
   }
 
-  .jb13 {
+  .jb15 {
     border-end-end-radius: .5rem;
   }
 
-  .Sv13 {
+  .Sv15 {
     padding-inline-start: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .Rv13 {
+  .Rv15 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .Tu7Fubd13 {
+  .Tu7Fubd15 {
     padding-top: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .Qu7Fubd13 {
+  .Qu7Fubd15 {
     padding-bottom: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .Yd13 {
+  .Yd15 {
     transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .Xc13 {
+  .Xc15 {
     transition-duration: .2s;
   }
 
-  ._2c13 {
+  ._2c15 {
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 
-  .-_7PloMd-G13 {
+  .-_7PloMd-G15 {
     --translateX: 4px;
   }
 
-  .-_7PloMd-m13 {
+  .-_7PloMd-m15 {
     --translateX: -4px;
   }
 
-  .-_8PloMd-F13 {
+  .-_8PloMd-F15 {
     --translateY: 4px;
   }
 
-  .-_8PloMd-l13 {
+  .-_8PloMd-l15 {
     --translateY: -4px;
   }
 
-  ._Ia13 {
+  ._Ia15 {
     opacity: 0;
     opacity: 0;
   }
 
-  .-nTSCV-LTAEPe13 {
+  .-nTSCV-LTAEPe15 {
     overflow-wrap: break-word;
   }
 
-  .-M_-Mg13 {
+  .-M_-Mg15 {
     --M: calc(1.5rem * var(--s2-scale));
   }
 
-  .sb13 {
+  .sb15 {
     display: block;
   }
 
-  .tr13 {
+  .tr15 {
     fill: light-dark(#292929, #dbdbdb);
   }
 
-  .Zi13 {
+  .Zi15 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Ff13 {
+  .Ff15 {
     height: calc(.3125rem * var(--s2-scale));
   }
 
-  ._Sb13 {
+  ._Sb15 {
     rotate: 0deg;
   }
 
-  ._Sc13 {
+  ._Sc15 {
     rotate: 180deg;
   }
 
-  ._Sa13 {
+  ._Sa15 {
     rotate: -90deg;
   }
 
-  ._Sd13 {
+  ._Sd15 {
     rotate: 90deg;
   }
 
-  .-_7PloMd-e13 {
+  .-_7PloMd-e15 {
     --translateX: -25%;
   }
 
-  .-_7PloMd-y13 {
+  .-_7PloMd-y15 {
     --translateX: 25%;
   }
 
-  .__Ya13 {
+  .__Ya15 {
     translate: var(--translateX, 0) var(--translateY, 0);
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  .ud3Euai13:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea15:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje15:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl15:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.D1v0V {
   @media (prefers-color-scheme: dark) {
-    .-NvXmrd-D1v0V_ZLmU13 {
+    .-NvXmrd-D1v0V_ZLmU15 {
       --lightningcss-light:  ;
     }
 
-    .-j9blY-D1v0V_ZN8Gi4c13 {
+    .-j9blY-D1v0V_ZN8Gi4c15 {
       --lightningcss-dark: initial;
     }
   }
@@ -275,31 +275,31 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb13 {
+    .plb15 {
       color: buttontext;
     }
 
-    .mlb13 {
+    .mlb15 {
       border-inline-start-width: 1px;
     }
 
-    .llb13 {
+    .llb15 {
       border-inline-end-width: 1px;
     }
 
-    ._jlf13 {
+    ._jlf15 {
       border-style: solid;
     }
 
-    .ilA13 {
+    .ilA15 {
       border-color: #0000;
     }
 
-    .-_k_-l_kb13 {
+    .-_k_-l_kb15 {
       --_k: 1px;
     }
 
-    .-h_-lhb13 {
+    .-h_-lhb15 {
       --h: 1px;
     }
   }

package/dist/private/Tooltip.css.map

@@ -1 +1 @@
-{"mappings":"AC4CgB;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;;;;EAAA;;;;EA+DI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/DJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["aa7688246f893a38","packages/@react-spectrum/s2/src/Tooltip.tsx"],"sourcesContent":["@import \"98a0a1b80e895d38\";\n@import \"c07030e64bc8758c\";\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  Tooltip as AriaTooltip,\n  TooltipProps as AriaTooltipProps,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n  OverlayArrow,\n  TooltipRenderProps\n} from 'react-aria-components/Tooltip';\nimport {centerPadding, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {ColorScheme, ColorSchemeContext} from './Provider';\nimport {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';\nimport {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\nexport interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay' | keyof GlobalDOMAttributes>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'crossOffset'> {\n  /** The content of the tooltip. */\n  children: ReactNode,\n  /**\n   * The placement of the element with respect to its anchor element.\n   *\n   * @default 'top'\n   */\n  placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'\n}\n\nexport interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'render' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles {\n  /** The content of the tooltip. */\n  children: ReactNode\n}\n\nconst tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({\n  ...setColorScheme(),\n  justifyContent: 'center',\n  alignItems: 'center',\n  maxWidth: 160,\n  minHeight: 24,\n  boxSizing: 'border-box',\n  font: 'ui-sm',\n  color: {\n    default: 'gray-25',\n    forcedColors: 'ButtonText'\n  },\n  borderWidth: {\n    forcedColors: 1\n  },\n  borderStyle: {\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: 'transparent'\n  },\n  backgroundColor: 'neutral',\n  borderRadius: 'default',\n  paddingX: 'edge-to-text',\n  paddingY: centerPadding(),\n  transition: 'default',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\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  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    }\n  },\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  overflowWrap: {\n    default: 'break-word'\n  }\n});\n\nconst arrowStyles = style<TooltipRenderProps>({\n  display: 'block',\n  fill: 'gray-800',\n  width: 10,\n  height: 5,\n  rotate: {\n    placement: {\n      top: 0,\n      bottom: '180deg',\n      left: '-90deg',\n      right: '90deg'\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  }\n});\n\nlet InternalTooltipTriggerContext = createContext<Partial<TooltipTriggerProps>>({});\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nexport const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {\n  let {children, UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useDOMRef(ref);\n  let {\n    containerPadding,\n    crossOffset,\n    placement = 'top',\n    shouldFlip\n  } = useContext(InternalTooltipTriggerContext);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n  let [borderRadius, setBorderRadius] = useState(0);\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let tooltipRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n      let spectrumBorderRadius = typeof window !== 'undefined' ? window.getComputedStyle(el).borderRadius : '';\n      if (spectrumBorderRadius !== '') {\n        setBorderRadius(parseInt(spectrumBorderRadius, 10));\n      }\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <AriaTooltip\n      {...props}\n      arrowBoundaryOffset={borderRadius}\n      containerPadding={containerPadding}\n      crossOffset={crossOffset}\n      offset={4 + 5} // 4px offset + 5px arrow height\n      placement={placement}\n      shouldFlip={shouldFlip}\n      ref={tooltipRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tooltip({...renderProps, colorScheme})}>\n      {renderProps => (\n        <>\n          <OverlayArrow className=\"\">\n            <svg className={arrowStyles(renderProps)} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 5\">\n              <path d=\"M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z\" />\n            </svg>\n          </OverlayArrow>\n          {children}\n        </>\n      )}\n    </AriaTooltip>\n  );\n});\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps): ReactNode {\n  let {\n    containerPadding,\n    crossOffset,\n    placement,\n    shouldFlip,\n    ...triggerProps\n  } = props;\n\n  return (\n    <AriaTooltipTrigger {...triggerProps}>\n      <InternalTooltipTriggerContext.Provider\n        value={{\n          containerPadding: containerPadding,\n          crossOffset: crossOffset,\n          placement: placement,\n          shouldFlip: shouldFlip\n        }}>\n        {props.children}\n      </InternalTooltipTriggerContext.Provider>\n    </AriaTooltipTrigger>\n  );\n}\n\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedTooltip(props: ICombined): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Tooltip.css.map"}
+{"mappings":"AC+EgB;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;;;;EAAA;;;;EA+DI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/DJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["aa7688246f893a38","packages/@react-spectrum/s2/src/Tooltip.tsx"],"sourcesContent":["@import \"98a0a1b80e895d38\";\n@import \"c07030e64bc8758c\";\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  Tooltip as AriaTooltip,\n  TooltipProps as AriaTooltipProps,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n  OverlayArrow,\n  TooltipRenderProps\n} from 'react-aria-components/Tooltip';\nimport {centerPadding, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {ColorScheme, ColorSchemeContext} from './Provider';\nimport {\n  createContext,\n  forwardRef,\n  MutableRefObject,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\nexport interface TooltipTriggerProps\n  extends\n    Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay' | keyof GlobalDOMAttributes>,\n    Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'crossOffset'> {\n  /** The content of the tooltip. */\n  children: ReactNode;\n  /**\n   * The placement of the element with respect to its anchor element.\n   *\n   * @default 'top'\n   */\n  placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom';\n}\n\nexport interface TooltipProps\n  extends\n    Omit<\n      AriaTooltipProps,\n      | 'children'\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'triggerRef'\n      | 'UNSTABLE_portalContainer'\n      | 'isEntering'\n      | 'isExiting'\n      | 'placement'\n      | 'containerPadding'\n      | 'offset'\n      | 'crossOffset'\n      | 'shouldFlip'\n      | 'arrowBoundaryOffset'\n      | 'isOpen'\n      | 'defaultOpen'\n      | 'onOpenChange'\n      | keyof GlobalDOMAttributes\n    >,\n    DOMProps,\n    UnsafeStyles {\n  /** The content of the tooltip. */\n  children: ReactNode;\n}\n\nconst tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({\n  ...setColorScheme(),\n  justifyContent: 'center',\n  alignItems: 'center',\n  maxWidth: 160,\n  minHeight: 24,\n  boxSizing: 'border-box',\n  font: 'ui-sm',\n  color: {\n    default: 'gray-25',\n    forcedColors: 'ButtonText'\n  },\n  borderWidth: {\n    forcedColors: 1\n  },\n  borderStyle: {\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: 'transparent'\n  },\n  backgroundColor: 'neutral',\n  borderRadius: 'default',\n  paddingX: 'edge-to-text',\n  paddingY: centerPadding(),\n  transition: 'default',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\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  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    }\n  },\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  overflowWrap: {\n    default: 'break-word'\n  }\n});\n\nconst arrowStyles = style<TooltipRenderProps>({\n  display: 'block',\n  fill: 'gray-800',\n  width: 10,\n  height: 5,\n  rotate: {\n    placement: {\n      top: 0,\n      bottom: '180deg',\n      left: '-90deg',\n      right: '90deg'\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  }\n});\n\nlet InternalTooltipTriggerContext = createContext<Partial<TooltipTriggerProps>>({});\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nexport const Tooltip = forwardRef(function Tooltip(\n  props: TooltipProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {children, UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useDOMRef(ref);\n  let {\n    containerPadding,\n    crossOffset,\n    placement = 'top',\n    shouldFlip\n  } = useContext(InternalTooltipTriggerContext);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n  let [borderRadius, setBorderRadius] = useState(0);\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let tooltipRef = useCallback(\n    (el: HTMLDivElement) => {\n      (domRef as MutableRefObject<HTMLDivElement>).current = el;\n      if (el) {\n        el.lang = locale;\n        el.dir = direction;\n        let spectrumBorderRadius =\n          typeof window !== 'undefined' ? window.getComputedStyle(el).borderRadius : '';\n        if (spectrumBorderRadius !== '') {\n          setBorderRadius(parseInt(spectrumBorderRadius, 10));\n        }\n      }\n    },\n    [locale, direction, domRef]\n  );\n\n  return (\n    <AriaTooltip\n      {...props}\n      arrowBoundaryOffset={borderRadius}\n      containerPadding={containerPadding}\n      crossOffset={crossOffset}\n      offset={4 + 5} // 4px offset + 5px arrow height\n      placement={placement}\n      shouldFlip={shouldFlip}\n      ref={tooltipRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tooltip({...renderProps, colorScheme})}>\n      {renderProps => (\n        <>\n          <OverlayArrow className=\"\">\n            <svg\n              className={arrowStyles(renderProps)}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 10 5\">\n              <path d=\"M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z\" />\n            </svg>\n          </OverlayArrow>\n          {children}\n        </>\n      )}\n    </AriaTooltip>\n  );\n});\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps): ReactNode {\n  let {containerPadding, crossOffset, placement, shouldFlip, ...triggerProps} = props;\n\n  return (\n    <AriaTooltipTrigger {...triggerProps}>\n      <InternalTooltipTriggerContext.Provider\n        value={{\n          containerPadding: containerPadding,\n          crossOffset: crossOffset,\n          placement: placement,\n          shouldFlip: shouldFlip\n        }}>\n        {props.children}\n      </InternalTooltipTriggerContext.Provider>\n    </AriaTooltipTrigger>\n  );\n}\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedTooltip(props: ICombined): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Tooltip.css.map"}

package/dist/private/Tooltip.mjs

@@ -24,120 +24,120 @@ import {useLocale as $iNhwA$useLocale} from "react-aria/I18nProvider";
 
 const $4c20647d6e5d8fdf$var$tooltip = function anonymous(props) {
     let rules = " ";
-    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa13';
-    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb13';
-    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc13';
-    rules += ' _pK8eoyd13';
-    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU13';
-    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c13';
+    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa15';
+    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb15';
+    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc15';
+    rules += ' _pK8eoyd15';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU15';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -NvXmrd-_ZN8Gi4c13';
-        rules += ' -NvXmrd-D1v0V_ZLmU13';
+        rules += ' -NvXmrd-_ZN8Gi4c15';
+        rules += ' -NvXmrd-D1v0V_ZLmU15';
     }
-    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c13';
-    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU13';
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c15';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -j9blY-_ZLmU13';
-        rules += ' -j9blY-D1v0V_ZN8Gi4c13';
+        rules += ' -j9blY-_ZLmU15';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c15';
     }
-    rules += ' _Ca13';
-    rules += ' eb13';
-    rules += ' Le13';
-    rules += ' MAyFGYc13';
-    rules += ' _oa13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-b13';
-    rules += ' vx13';
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
-    rules += ' pr13';
-    rules += ' plb13';
-    rules += ' _kJ8iPYd13';
-    rules += ' hXMFGYc13';
-    rules += ' mlb13';
-    rules += ' llb13';
-    rules += ' _jlf13';
-    rules += ' ilA13';
-    rules += ' g013';
-    rules += ' ob13';
-    rules += ' nb13';
-    rules += ' kb13';
-    rules += ' jb13';
-    rules += ' Sv13';
-    rules += ' Rv13';
-    rules += ' Tu7Fubd13';
-    rules += ' Qu7Fubd13';
-    rules += ' Yd13';
-    rules += ' Xc13';
-    if (props.isExiting) rules += ' _2c13';
+    rules += ' _Ca15';
+    rules += ' eb15';
+    rules += ' Le15';
+    rules += ' MAyFGYc15';
+    rules += ' _oa15';
+    rules += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' -_6BNtrc-b15';
+    rules += ' vx15';
+    rules += ' xb15';
+    rules += ' _xa15';
+    rules += ' _Fd15';
+    rules += ' _FnuYUweb15';
+    rules += ' pr15';
+    rules += ' plb15';
+    rules += ' _kJ8iPYd15';
+    rules += ' hXMFGYc15';
+    rules += ' mlb15';
+    rules += ' llb15';
+    rules += ' _jlf15';
+    rules += ' ilA15';
+    rules += ' g015';
+    rules += ' ob15';
+    rules += ' nb15';
+    rules += ' kb15';
+    rules += ' jb15';
+    rules += ' Sv15';
+    rules += ' Rv15';
+    rules += ' Tu7Fubd15';
+    rules += ' Qu7Fubd15';
+    rules += ' Yd15';
+    rules += ' Xc15';
+    if (props.isExiting) rules += ' _2c15';
     if (props.placement === "right") {
         if (props.isExiting) {
-            rules += ' -_7PloMd-m13';
-            rules += ' __Ya13';
+            rules += ' -_7PloMd-m15';
+            rules += ' __Ya15';
         } else if (props.isEntering) {
-            rules += ' -_7PloMd-m13';
-            rules += ' __Ya13';
+            rules += ' -_7PloMd-m15';
+            rules += ' __Ya15';
         }
     } else if (props.placement === "left") {
         if (props.isExiting) {
-            rules += ' -_7PloMd-G13';
-            rules += ' __Ya13';
+            rules += ' -_7PloMd-G15';
+            rules += ' __Ya15';
         } else if (props.isEntering) {
-            rules += ' -_7PloMd-G13';
-            rules += ' __Ya13';
+            rules += ' -_7PloMd-G15';
+            rules += ' __Ya15';
         }
     }
     if (props.placement === "bottom") {
         if (props.isExiting) {
-            rules += ' -_8PloMd-l13';
-            rules += ' __Ya13';
+            rules += ' -_8PloMd-l15';
+            rules += ' __Ya15';
         } else if (props.isEntering) {
-            rules += ' -_8PloMd-l13';
-            rules += ' __Ya13';
+            rules += ' -_8PloMd-l15';
+            rules += ' __Ya15';
         }
     } else if (props.placement === "top") {
         if (props.isExiting) {
-            rules += ' -_8PloMd-F13';
-            rules += ' __Ya13';
+            rules += ' -_8PloMd-F15';
+            rules += ' __Ya15';
         } else if (props.isEntering) {
-            rules += ' -_8PloMd-F13';
-            rules += ' __Ya13';
+            rules += ' -_8PloMd-F15';
+            rules += ' __Ya15';
         }
     }
-    if (props.isExiting) rules += ' _Ia13';
-    else if (props.isEntering) rules += ' _Ia13';
-    rules += ' -nTSCV-LTAEPe13';
-    rules += ' -M_-Mg13';
-    rules += ' -_k_-l_kb13';
-    rules += ' -h_-lhb13';
+    if (props.isExiting) rules += ' _Ia15';
+    else if (props.isEntering) rules += ' _Ia15';
+    rules += ' -nTSCV-LTAEPe15';
+    rules += ' -M_-Mg15';
+    rules += ' -_k_-l_kb15';
+    rules += ' -h_-lhb15';
     return rules;
 };
 const $4c20647d6e5d8fdf$var$arrowStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' sb13';
-    rules += ' tr13';
-    rules += ' Zi13';
-    rules += ' Ff13';
-    if (props.placement === "right") rules += ' _Sd13';
-    else if (props.placement === "left") rules += ' _Sa13';
-    else if (props.placement === "bottom") rules += ' _Sc13';
-    else if (props.placement === "top") rules += ' _Sb13';
+    rules += ' sb15';
+    rules += ' tr15';
+    rules += ' Zi15';
+    rules += ' Ff15';
+    if (props.placement === "right") rules += ' _Sd15';
+    else if (props.placement === "left") rules += ' _Sa15';
+    else if (props.placement === "bottom") rules += ' _Sc15';
+    else if (props.placement === "top") rules += ' _Sb15';
     if (props.placement === "right") {
-        rules += ' -_7PloMd-y13';
-        rules += ' __Ya13';
+        rules += ' -_7PloMd-y15';
+        rules += ' __Ya15';
     } else if (props.placement === "left") {
-        rules += ' -_7PloMd-e13';
-        rules += ' __Ya13';
+        rules += ' -_7PloMd-e15';
+        rules += ' __Ya15';
     }
     return rules;
 };