@react-spectrum/s2 0.2.1-nightly.4979

package/dist/Tooltip.cjs

@@ -0,0 +1,192 @@
+require("./Tooltip.css");
+var $914a06b3a1c679bc$exports = require("./Provider.cjs");
+var $8KZCJ$reactjsxruntime = require("react/jsx-runtime");
+var $8KZCJ$reactariacomponents = require("react-aria-components");
+var $8KZCJ$react = require("react");
+var $8KZCJ$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, "TooltipTrigger", () => $d3b6a84aebe66f8d$export$8c610744efcf8a1d);
+$parcel$export(module.exports, "Tooltip", () => $d3b6a84aebe66f8d$export$28c660c63b792dea);
+/*
+ * 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 $d3b6a84aebe66f8d$var$slide = "-d5xa23";
+const $d3b6a84aebe66f8d$var$tooltip = function anonymous(props) {
+    let rules = " .";
+    if (props.colorScheme === "dark") rules += ' _Ab';
+    else if (props.colorScheme === "light") rules += ' _Aa';
+    else if (props.colorScheme === "light dark") rules += ' _Ac';
+    rules += ' _2d';
+    rules += ' _1c';
+    rules += ' rbK';
+    rules += ' rH';
+    rules += ' o-375tou';
+    rules += ' __na';
+    rules += ' _c-bc1l9oh';
+    rules += ' _c-1uotwbwg';
+    rules += ' _c-eo0c6sf';
+    rules += ' _c-enzzrge';
+    rules += ' _c-enzykdd';
+    rules += ' _c-enzwzjc';
+    rules += ' _c-enzrfpb';
+    rules += ' _ca';
+    rules += ' _dbd';
+    rules += ' _dc';
+    rules += ' _eb';
+    rules += ' _f-1x99dlob';
+    rules += ' _fa';
+    rules += ' aa_____x';
+    rules += ' ad';
+    rules += ' u-375tp0';
+    rules += ' v-375tp1';
+    rules += ' sab';
+    rules += ' tab';
+    rules += ' waa';
+    rules += ' caa';
+    if (props.isPressed) rules += ' bo';
+    else if (props.isFocusVisible) rules += ' bo';
+    else if (props.isHovered) rules += ' bo';
+    else rules += ' bn';
+    rules += ' _vh';
+    rules += ' _wh';
+    rules += ' _xh';
+    rules += ' _yh';
+    rules += ' CH';
+    rules += ' DH';
+    rules += ' E-1dbqcch';
+    rules += ' F-1dbqcch';
+    rules += ' Ac';
+    rules += ' Bc';
+    rules += ' yc';
+    rules += ' zc';
+    if (props.isExiting) rules += ' _S-xkqmqx';
+    else if (props.isEntering) rules += ' _S-xkqmqx';
+    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';
+    if (props.placement === "right") rules += ' -s75z33_A-J';
+    else if (props.placement === "left") rules += ' -s75z33_A-b';
+    else if (props.placement === "bottom") rules += ' -s75z33_A-a';
+    else if (props.placement === "top") rules += ' -s75z33_A-a';
+    if (props.placement === "right") rules += ' -s75z34_A-a';
+    else if (props.placement === "left") rules += ' -s75z34_A-a';
+    else if (props.placement === "bottom") rules += ' -s75z34_A-J';
+    else if (props.placement === "top") rules += ' -s75z34_A-b';
+    rules += ' -_375tou_o-bl';
+    rules += ' -_375tou_o-k';
+    rules += ' -_375tp0_u-ab';
+    rules += ' -_375tp1_v-ab';
+    return rules;
+};
+const $d3b6a84aebe66f8d$var$arrowStyles = function anonymous(props) {
+    let rules = " .";
+    rules += ' _Za';
+    rules += ' eI';
+    if (props.placement === "right") rules += ' R-3d7kri';
+    else if (props.placement === "left") rules += ' R-wggzbf';
+    else if (props.placement === "bottom") rules += ' R-z0ysi6';
+    else if (props.placement === "top") rules += ' R-3t1x';
+    if (props.placement === "right") rules += ' P-375y1d';
+    else if (props.placement === "left") rules += ' P-yj88ji';
+    return rules;
+};
+let $d3b6a84aebe66f8d$var$InternalTooltipTriggerContext = /*#__PURE__*/ (0, $8KZCJ$react.createContext)({});
+function $d3b6a84aebe66f8d$var$Tooltip(props, ref) {
+    let { children: children, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
+    let domRef = (0, $8KZCJ$reactspectrumutils.useDOMRef)(ref);
+    let { containerPadding: containerPadding, crossOffset: crossOffset, offset: offset, placement: placement = 'top', shouldFlip: shouldFlip } = (0, $8KZCJ$react.useContext)($d3b6a84aebe66f8d$var$InternalTooltipTriggerContext);
+    let colorScheme = (0, $8KZCJ$react.useContext)((0, $914a06b3a1c679bc$exports.ColorSchemeContext));
+    let { locale: locale, direction: direction } = (0, $8KZCJ$reactariacomponents.useLocale)();
+    // TODO: should we pass through lang and dir props in RAC?
+    let tooltipRef = (0, $8KZCJ$react.useCallback)((el)=>{
+        domRef.current = el;
+        if (el) {
+            el.lang = locale;
+            el.dir = direction;
+        }
+    }, [
+        locale,
+        direction,
+        domRef
+    ]);
+    return /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)((0, $8KZCJ$reactariacomponents.Tooltip), {
+        ...props,
+        containerPadding: containerPadding,
+        crossOffset: crossOffset,
+        offset: offset,
+        placement: placement,
+        shouldFlip: shouldFlip,
+        ref: tooltipRef,
+        style: UNSAFE_style,
+        className: (renderProps)=>UNSAFE_className + $d3b6a84aebe66f8d$var$tooltip({
+                ...renderProps,
+                colorScheme: colorScheme
+            }),
+        children: (renderProps)=>/*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsxs)((0, $8KZCJ$reactjsxruntime.Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)((0, $8KZCJ$reactariacomponents.OverlayArrow), {
+                        children: /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)("svg", {
+                            className: $d3b6a84aebe66f8d$var$arrowStyles(renderProps),
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "10",
+                            height: "5",
+                            viewBox: "0 0 10 5",
+                            children: /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)("path", {
+                                d: "M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z"
+                            })
+                        })
+                    }),
+                    children
+                ]
+            })
+    });
+}
+function $d3b6a84aebe66f8d$var$TooltipTrigger(props) {
+    let { containerPadding: containerPadding, crossOffset: crossOffset, offset: offset, placement: placement, shouldFlip: shouldFlip, ...triggerProps } = props;
+    return /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)((0, $8KZCJ$reactariacomponents.TooltipTrigger), {
+        ...triggerProps,
+        children: /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)($d3b6a84aebe66f8d$var$InternalTooltipTriggerContext.Provider, {
+            value: {
+                containerPadding: containerPadding,
+                crossOffset: crossOffset,
+                offset: offset,
+                placement: placement,
+                shouldFlip: shouldFlip
+            },
+            children: props.children
+        })
+    });
+}
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */ let $d3b6a84aebe66f8d$export$8c610744efcf8a1d = /*#__PURE__*/ (0, $8KZCJ$react.forwardRef)($d3b6a84aebe66f8d$var$TooltipTrigger);
+/**
+ * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ */ let $d3b6a84aebe66f8d$export$28c660c63b792dea = /*#__PURE__*/ (0, $8KZCJ$react.forwardRef)($d3b6a84aebe66f8d$var$Tooltip);
+function $d3b6a84aebe66f8d$export$92ee03cda75aac2b(props) {
+    return /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)("div", {});
+}
+
+
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoCD,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEN,MAAM;;;;;;;;;;;;AAmBN,IAAI,oEAAgC,CAAA,GAAA,0BAAY,EAAuB,CAAC;AAExE,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,YAAC,QAAQ,gBAAE,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IACtD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,oBACF,gBAAgB,eAChB,WAAW,UACX,MAAM,aACN,YAAY,mBACZ,UAAU,EACX,GAAG,CAAA,GAAA,uBAAS,EAAE;IACf,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,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,kBAAkB;QAClB,aAAa;QACb,QAAQ;QACR,WAAW;QACX,YAAY;QACZ,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBAChF,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,WAAW,kCAAY;4BAAc,OAAM;4BAA6B,OAAM;4BAAK,QAAO;4BAAI,SAAQ;sCACzG,cAAA,gCAAC;gCAAK,GAAE;;;;oBAGX;;;;AAKX;AAEA,SAAS,qCAAe,KAA0B;IAChD,IAAI,oBACF,gBAAgB,eAChB,WAAW,UACX,MAAM,aACN,SAAS,cACT,UAAU,EACV,GAAG,cACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,yCAAiB;QAAG,GAAG,YAAY;kBAClC,cAAA,gCAAC,oDAA8B,QAAQ;YACrC,OAAO;gBACL,kBAAkB;gBAClB,aAAa;gBACb,QAAQ;gBACR,WAAW;gBACX,YAAY;YACd;sBACC,MAAM,QAAQ;;;AAIvB;AAEA;;;;CAIC,GACD,IAAI,0DAAkB,CAAA,GAAA,uBAAS,EAAE;AAIjC;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,uBAAS,EAAE;AAOnB,SAAS,0CAAgB,KAAgB;IAC9C,qBAAO,gCAAC;AACV","sources":["packages/@react-spectrum/s2/src/Tooltip.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  Tooltip as AriaTooltip,\n  TooltipProps as AriaTooltipProps,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n  OverlayArrow,\n  TooltipRenderProps,\n  useLocale\n} from 'react-aria-components';\nimport {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorScheme} from '@react-types/provider';\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext} from 'react';\nimport {DOMRef} from '@react-types/shared';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | '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' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {\n  /** The content of the tooltip. */\n  children?: ReactNode\n}\n\nconst slide = keyframes(`\n  from {\n    transform: translate(var(--originX), var(--originY));\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`);\n\nconst tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({\n  ...colorScheme(),\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: 'control',\n  paddingX: 'edge-to-text',\n  paddingY: centerPadding(),\n  margin: 8,\n  animation: {\n    isEntering: slide,\n    isExiting: slide\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  '--originX': {\n    type: 'marginTop',\n    value: {\n      placement: {\n        top: 0,\n        bottom: 0,\n        left: 4,\n        right: -4\n      }\n    }\n  },\n  '--originY': {\n    type: 'marginTop',\n    value: {\n      placement: {\n        top: 4,\n        bottom: -4,\n        left: 0,\n        right: -0\n      }\n    }\n  }\n});\n\nconst arrowStyles = style<TooltipRenderProps>({\n  display: 'block',\n  fill: 'gray-800',\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<TooltipTriggerProps>({});\n\nfunction 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    offset,\n    placement = 'top',\n    shouldFlip\n  } = useContext(InternalTooltipTriggerContext);\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 tooltipRef = 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  return (\n    <AriaTooltip\n      {...props}\n      containerPadding={containerPadding}\n      crossOffset={crossOffset}\n      offset={offset}\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>\n            <svg className={arrowStyles(renderProps)} xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"5\" 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\nfunction TooltipTrigger(props: TooltipTriggerProps) {\n  let {\n    containerPadding,\n    crossOffset,\n    offset,\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          offset: offset,\n          placement: placement,\n          shouldFlip: shouldFlip\n        }}>\n        {props.children}\n      </InternalTooltipTriggerContext.Provider>\n    </AriaTooltipTrigger>\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 */\nlet _TooltipTrigger = forwardRef(TooltipTrigger);\nexport {_TooltipTrigger as TooltipTrigger};\n\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\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) {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Tooltip.cjs.map"}

package/dist/Tooltip.css

@@ -0,0 +1,327 @@
+@keyframes -d5xa23 {
+  from {
+    transform: translate(var(--originX), var(--originY));
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(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;
+  }
+
+  ._2d {
+    justify-content: center;
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  .rH {
+    max-width: 10rem;
+  }
+
+  .o-375tou {
+    min-height: var(--o);
+  }
+
+  .__na {
+    box-sizing: border-box;
+  }
+
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._dc {
+    font-size: .75rem;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .ad {
+    color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+  }
+
+  .u-375tp0 {
+    border-top-width: var(--u);
+  }
+
+  .v-375tp1 {
+    border-bottom-width: var(--v);
+  }
+
+  .bn {
+    background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .bo {
+    background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  ._vh {
+    border-start-start-radius: .571429em;
+  }
+
+  ._wh {
+    border-start-end-radius: .571429em;
+  }
+
+  ._xh {
+    border-end-start-radius: .571429em;
+  }
+
+  ._yh {
+    border-end-end-radius: .571429em;
+  }
+
+  .CH {
+    padding-inline-start: calc(var(--k, var(--o)) * 3 / 8);
+  }
+
+  .DH {
+    padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
+  }
+
+  .E-1dbqcch {
+    padding-top: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  }
+
+  .F-1dbqcch {
+    padding-bottom: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  }
+
+  .Ac {
+    margin-top: .5rem;
+  }
+
+  .Bc {
+    margin-bottom: .5rem;
+  }
+
+  .yc {
+    margin-inline-start: .5rem;
+  }
+
+  .zc {
+    margin-inline-end: .5rem;
+  }
+
+  ._S-xkqmqx {
+    animation-name: -d5xa23;
+  }
+
+  ._T-375xx3 {
+    animation-duration: .2s;
+  }
+
+  ._Yc {
+    animation-timing-function: cubic-bezier(.5, 0, 1, 1);
+  }
+
+  ._Va {
+    animation-direction: normal;
+  }
+
+  ._Vb {
+    animation-direction: reverse;
+  }
+
+  .-s75z33_A-a {
+    --originX: 0rem;
+  }
+
+  .-s75z33_A-b {
+    --originX: .25rem;
+  }
+
+  .-s75z33_A-J {
+    --originX: -.25rem;
+  }
+
+  .-s75z34_A-b {
+    --originY: .25rem;
+  }
+
+  .-s75z34_A-J {
+    --originY: -.25rem;
+  }
+
+  .-s75z34_A-a {
+    --originY: 0rem;
+  }
+
+  .-_375tou_o-k {
+    --o: 1.5rem;
+  }
+
+  ._Za {
+    display: block;
+  }
+
+  .eI {
+    fill: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .R-3t1x {
+    rotate: none;
+  }
+
+  .R-z0ysi6 {
+    rotate: 180deg;
+  }
+
+  .R-wggzbf {
+    rotate: -90deg;
+  }
+
+  .R-3d7kri {
+    rotate: 90deg;
+  }
+
+  .P-yj88ji {
+    --translateX: -25%;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+
+  .P-375y1d {
+    --translateX: 25%;
+    translate: var(--translateX, 0) var(--translateY, 0);
+  }
+}
+
+@layer _.b {
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd: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 {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg: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 {
+  ._c-bc1l9oh: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 UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .rbK {
+      max-width: 12.5rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    .-_375tou_o-bl {
+      --o: 1.875rem;
+    }
+  }
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .aa_____x {
+      color: buttontext;
+    }
+
+    .sab {
+      border-inline-start-width: 1px;
+    }
+
+    .tab {
+      border-inline-end-width: 1px;
+    }
+
+    .waa {
+      border-style: solid;
+    }
+
+    .caa {
+      border-color: #0000;
+    }
+
+    .-_375tp0_u-ab {
+      --u: 1px;
+    }
+
+    .-_375tp1_v-ab {
+      --v: 1px;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=Tooltip.css.map */

package/dist/Tooltip.css.map

@@ -0,0 +1 @@
+{"mappings":"AC8Cc;;;;;;;;;;;;AAYE;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;;;;EAiEI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;AAjEJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiEI","sources":["aa7688246f893a38","packages/@react-spectrum/s2/src/Tooltip.tsx"],"sourcesContent":["@import \"98a0a1b80e895d38\";\n@import \"c07030e64bc8758c\";\n@import \"1e9ed49e5bafc79c\";\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  useLocale\n} from 'react-aria-components';\nimport {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorScheme} from '@react-types/provider';\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext} from 'react';\nimport {DOMRef} from '@react-types/shared';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | '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' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {\n  /** The content of the tooltip. */\n  children?: ReactNode\n}\n\nconst slide = keyframes(`\n  from {\n    transform: translate(var(--originX), var(--originY));\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`);\n\nconst tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({\n  ...colorScheme(),\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: 'control',\n  paddingX: 'edge-to-text',\n  paddingY: centerPadding(),\n  margin: 8,\n  animation: {\n    isEntering: slide,\n    isExiting: slide\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  '--originX': {\n    type: 'marginTop',\n    value: {\n      placement: {\n        top: 0,\n        bottom: 0,\n        left: 4,\n        right: -4\n      }\n    }\n  },\n  '--originY': {\n    type: 'marginTop',\n    value: {\n      placement: {\n        top: 4,\n        bottom: -4,\n        left: 0,\n        right: -0\n      }\n    }\n  }\n});\n\nconst arrowStyles = style<TooltipRenderProps>({\n  display: 'block',\n  fill: 'gray-800',\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<TooltipTriggerProps>({});\n\nfunction 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    offset,\n    placement = 'top',\n    shouldFlip\n  } = useContext(InternalTooltipTriggerContext);\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 tooltipRef = 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  return (\n    <AriaTooltip\n      {...props}\n      containerPadding={containerPadding}\n      crossOffset={crossOffset}\n      offset={offset}\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>\n            <svg className={arrowStyles(renderProps)} xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"5\" 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\nfunction TooltipTrigger(props: TooltipTriggerProps) {\n  let {\n    containerPadding,\n    crossOffset,\n    offset,\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          offset: offset,\n          placement: placement,\n          shouldFlip: shouldFlip\n        }}>\n        {props.children}\n      </InternalTooltipTriggerContext.Provider>\n    </AriaTooltipTrigger>\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 */\nlet _TooltipTrigger = forwardRef(TooltipTrigger);\nexport {_TooltipTrigger as TooltipTrigger};\n\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\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) {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Tooltip.css.map"}