@sproutsocial/seeds-react-tooltip 1.1.32 → 1.1.34

package/dist/esm/index.js

@@ -1,11 +1,15 @@
 // src/Tooltip.tsx
-import * as React from "react";
+import * as React3 from "react";
 import { useState, useRef, useEffect, useContext } from "react";
 import MOTION from "@sproutsocial/seeds-motion/unitless";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { DisablePortalToBodyContext } from "@sproutsocial/seeds-react-portal";
 import Box2 from "@sproutsocial/seeds-react-box";
 
+// src/TooltipHybrid.tsx
+import React2 from "react";
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+
 // src/styles.ts
 import styled from "styled-components";
 import Box from "@sproutsocial/seeds-react-box";
@@ -15,11 +19,105 @@ var StyledTooltipContent = styled(Box)`
   text-align: ${(props) => props.appearance === "box" ? "left" : "center"};
 `;
 
+// src/TooltipTailwind.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var TooltipTailwind = React.forwardRef(({ appearance, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "tooltip",
+    className: cn(
+      "seeds-tooltip",
+      appearance === "box" ? "seeds-tooltip-box" : "seeds-tooltip-pill",
+      className
+    ),
+    ...rest
+  }
+));
+TooltipTailwind.displayName = "TooltipTailwind";
+
+// src/TooltipHybrid.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ADDITIONAL_BOX_STYLE_PROPS = [
+  "borderRadius",
+  "border",
+  "borderColor",
+  "borderWidth",
+  "borderStyle",
+  "boxShadow",
+  "fontSize",
+  "fontWeight",
+  "lineHeight",
+  "letterSpacing",
+  "fontStyle",
+  "textAlign",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "zIndex",
+  "opacity",
+  "size"
+];
+var hasAdditionalBoxStyleProps = (props) => ADDITIONAL_BOX_STYLE_PROPS.some((prop) => props[prop] !== void 0);
+var TooltipHybrid = React2.forwardRef(
+  ({ appearance, ...rest }, ref) => {
+    if (needsStyledComponents(rest) || hasAdditionalBoxStyleProps(rest)) {
+      return /* @__PURE__ */ jsx2(
+        StyledTooltipContent,
+        {
+          ref,
+          role: "tooltip",
+          appearance,
+          borderRadius: appearance === "box" ? 500 : "5000em",
+          px: 400,
+          py: appearance === "box" ? 400 : 200,
+          m: 200,
+          color: "text.body",
+          bg: "container.background.base",
+          boxShadow: "medium",
+          border: 500,
+          borderColor: "container.border.base",
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx2(
+      TooltipTailwind,
+      {
+        ref,
+        appearance,
+        ...rest
+      }
+    );
+  }
+);
+TooltipHybrid.displayName = "TooltipHybrid";
+var TooltipHybrid_default = TooltipHybrid;
+
 // src/Tooltip.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var idCounter = 0;
 var hasAttribute = (child, attribute) => {
-  return React.isValidElement(child) && child.props[attribute] !== void 0;
+  return React3.isValidElement(child) && child.props[attribute] !== void 0;
 };
 function mapPlacement(placement) {
   const parts = placement.split("-");
@@ -86,7 +184,7 @@ var Tooltip = ({
     }
   }, [disablePortalToBody]);
   if (isInvalidContent) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx3(
       "span",
       {
         style: truncated ? {
@@ -106,12 +204,12 @@ var Tooltip = ({
       disabled: isInvalidContent,
       disableHoverablePopup: !legacyMouseInteraction,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3(
           BaseTooltip.Trigger,
           {
             delay: enterDelay,
             closeDelay: resolvedExitDelay,
-            render: /* @__PURE__ */ jsx(
+            render: /* @__PURE__ */ jsx3(
               "span",
               {
                 ref: triggerRef,
@@ -128,37 +226,27 @@ var Tooltip = ({
                 } : void 0
               }
             ),
-            children: React.isValidElement(children) ? React.cloneElement(children, {
+            children: React3.isValidElement(children) ? React3.cloneElement(children, {
               "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : void 0,
               "aria-describedby": open ? id : void 0
             }) : children
           }
         ),
-        /* @__PURE__ */ jsx(BaseTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3(BaseTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx3(
           BaseTooltip.Positioner,
           {
             side,
             align,
             sideOffset: 4,
             style: { zIndex },
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx3(
               BaseTooltip.Popup,
               {
                 id,
-                render: /* @__PURE__ */ jsx(
-                  StyledTooltipContent,
+                render: /* @__PURE__ */ jsx3(
+                  TooltipHybrid_default,
                   {
-                    role: "tooltip",
                     appearance: defaultAppearance,
-                    borderRadius: defaultAppearance === "box" ? 500 : "5000em",
-                    px: 400,
-                    py: defaultAppearance === "box" ? 400 : 200,
-                    m: 200,
-                    color: "text.body",
-                    bg: "container.background.base",
-                    boxShadow: "medium",
-                    border: 500,
-                    borderColor: "container.border.base",
                     tabIndex: legacyMouseInteraction ? 0 : void 0,
                     ...rest
                   }
@@ -171,7 +259,7 @@ var Tooltip = ({
       ]
     }
   );
-  return hasWrapperProps ? /* @__PURE__ */ jsx(Box2, { ...mergedWrapperProps, children: tooltipTree }) : tooltipTree;
+  return hasWrapperProps ? /* @__PURE__ */ jsx3(Box2, { ...mergedWrapperProps, children: tooltipTree }) : tooltipTree;
 };
 var Tooltip_default = Tooltip;
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useRef, useEffect, useContext } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { DisablePortalToBodyContext } from \"@sproutsocial/seeds-react-portal\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\ntype Side = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Align = \"start\" | \"center\" | \"end\";\n\n// `auto`, `auto-start`, and `auto-end` resolve to `side: \"top\"` (with align\n// taken from the suffix) and rely on base-ui's Positioner collision flipping at\n// runtime, rather than Popper's old best-initial-side selection. Exported for\n// unit testing of this mapping.\nexport function mapPlacement(placement: string): { side: Side; align: Align } {\n  const parts = placement.split(\"-\");\n  let side: Side;\n  let align: Align = \"center\";\n\n  switch (parts[0]) {\n    case \"bottom\":\n      side = \"bottom\";\n      break;\n    case \"left\":\n      side = \"left\";\n      break;\n    case \"right\":\n      side = \"right\";\n      break;\n    case \"top\":\n    case \"auto\":\n    default:\n      side = \"top\";\n      break;\n  }\n\n  if (parts[1] === \"start\") {\n    align = \"start\";\n  } else if (parts[1] === \"end\") {\n    align = \"end\";\n  }\n\n  return { side, align };\n}\n\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  exitDelay,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  triggerProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  legacyMouseInteraction,\n  ...rest\n}: TypeTooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const isInvalidContent = content === null || content === undefined;\n  const disablePortalToBody = useContext(DisablePortalToBodyContext);\n  const [portalContainer, setPortalContainer] = useState<\n    HTMLElement | undefined\n  >(undefined);\n\n  const resolvedExitDelay =\n    exitDelay !== undefined\n      ? exitDelay\n      : legacyMouseInteraction\n      ? MOTION.MOTION_DURATION_FAST * 1000\n      : 0;\n\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  const { side, align } = mapPlacement(placement);\n\n  const mergedWrapperProps = {\n    ...popoutProps,\n    ...triggerProps,\n  };\n\n  const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;\n\n  useEffect(() => {\n    if (disablePortalToBody && triggerRef.current) {\n      const dialogContent =\n        triggerRef.current.closest<HTMLElement>(\"[role='dialog']\");\n      setPortalContainer(dialogContent ?? undefined);\n    }\n  }, [disablePortalToBody]);\n\n  if (isInvalidContent) {\n    return (\n      <span\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {children}\n      </span>\n    );\n  }\n\n  const tooltipTree = (\n    <BaseTooltip.Root\n      open={open}\n      onOpenChange={setOpen}\n      disabled={isInvalidContent}\n      disableHoverablePopup={!legacyMouseInteraction}\n    >\n      <BaseTooltip.Trigger\n        delay={enterDelay}\n        closeDelay={resolvedExitDelay}\n        render={\n          <span\n            ref={triggerRef}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            data-qa-popout-isopen={open ? \"true\" : \"false\"}\n            data-qa-tooltip={id}\n            {...(qa || {})}\n            style={\n              truncated\n                ? {\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    display: \"inline-flex\",\n                  }\n                : undefined\n            }\n          />\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": open ? id : undefined,\n            })\n          : children}\n      </BaseTooltip.Trigger>\n      <BaseTooltip.Portal container={portalContainer}>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={4}\n          style={{ zIndex }}\n        >\n          <BaseTooltip.Popup\n            id={id}\n            render={\n              <StyledTooltipContent\n                role=\"tooltip\"\n                appearance={defaultAppearance}\n                borderRadius={defaultAppearance === \"box\" ? 500 : \"5000em\"}\n                px={400}\n                py={defaultAppearance === \"box\" ? 400 : 200}\n                m={200}\n                color=\"text.body\"\n                bg=\"container.background.base\"\n                boxShadow=\"medium\"\n                border={500}\n                borderColor=\"container.border.base\"\n                tabIndex={legacyMouseInteraction ? 0 : undefined}\n                {...rest}\n              />\n            }\n          >\n            {content}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  return hasWrapperProps ? (\n    <Box {...mergedWrapperProps}>{tooltipTree}</Box>\n  ) : (\n    tooltipTree\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeTooltipPlacement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /**\n   * The placement of the tooltip in relation to the children.\n   *\n   * Note: `auto`, `auto-start`, and `auto-end` resolve to the `top` side (with\n   * the requested alignment) and rely on base-ui's runtime collision flipping,\n   * rather than the legacy Popper.js best-initial-side selection.\n   */\n  placement?: TypeTooltipPlacement;\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */\n  exitDelay?: number;\n\n  /**\n   * When true, enables mouse interaction on tooltip content and sets exitDelay\n   * to MOTION_DURATION_FAST * 1000 by default (instead of 0).\n   */\n  legacyMouseInteraction?: boolean;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /**\n   * @deprecated Use `triggerProps` instead. The Tooltip no longer uses Popout internally. This prop is accepted and merged with triggerProps\n   */\n  popoutProps?: Record<string, unknown>;\n\n  /** Props spread onto an outer wrapper Box rendered around the tooltip. Use this to apply layout styles (e.g. `display`, `width`) or other Box props to the element that wraps the tooltip's children. */\n  triggerProps?: TypeBoxProps;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  legacyMouseInteraction?: boolean;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,UAAU,QAAQ,WAAW,kBAAkB;AACxD,OAAO,YAAY;AACnB,SAAS,WAAW,mBAAmB;AACvC,SAAS,kCAAkC;AAC3C,OAAOA,UAAS;;;ACLhB,OAAO,YAAY;AACnB,OAAO,SAAS;AAGT,IAAM,uBAAuB,OAAO,GAAG;AAAA,iBAG7B,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,IAC9C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,gBAC1B,CAAC,UAAW,MAAM,eAAe,QAAQ,SAAS,QAAS;AAAA;;;ADmGrE,cAiBF,YAjBE;AAnGN,IAAI,YAAY;AAEhB,IAAM,eAAe,CAAC,OAAwB,cAAsB;AAClE,SAAa,qBAAe,KAAK,KAAK,MAAM,MAAM,SAAS,MAAM;AACnE;AASO,SAAS,aAAa,WAAiD;AAC5E,QAAM,QAAQ,UAAU,MAAM,GAAG;AACjC,MAAI;AACJ,MAAI,QAAe;AAEnB,UAAQ,MAAM,CAAC,GAAG;AAAA,IAChB,KAAK;AACH,aAAO;AACP;AAAA,IACF,KAAK;AACH,aAAO;AACP;AAAA,IACF,KAAK;AACH,aAAO;AACP;AAAA,IACF,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO;AACP;AAAA,EACJ;AAEA,MAAI,MAAM,CAAC,MAAM,SAAS;AACxB,YAAQ;AAAA,EACV,WAAW,MAAM,CAAC,MAAM,OAAO;AAC7B,YAAQ;AAAA,EACV;AAEA,SAAO,EAAE,MAAM,MAAM;AACvB;AAEA,IAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa,OAAO,uBAAuB;AAAA,EAC3C;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,EAAE,IAAI,SAAS,kBAAkB,WAAW,EAAE;AACrD,QAAM,aAAa,OAAwB,IAAI;AAC/C,QAAM,mBAAmB,YAAY,QAAQ,YAAY;AACzD,QAAM,sBAAsB,WAAW,0BAA0B;AACjE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAE5C,MAAS;AAEX,QAAM,oBACJ,cAAc,SACV,YACA,yBACA,OAAO,uBAAuB,MAC9B;AAEN,QAAM,oBACJ,eAAe,OAAO,YAAY,WAAW,QAAQ;AAEvD,QAAM,EAAE,MAAM,MAAM,IAAI,aAAa,SAAS;AAE9C,QAAM,qBAAqB;AAAA,IACzB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,OAAO,KAAK,kBAAkB,EAAE,SAAS;AAEjE,YAAU,MAAM;AACd,QAAI,uBAAuB,WAAW,SAAS;AAC7C,YAAM,gBACJ,WAAW,QAAQ,QAAqB,iBAAiB;AAC3D,yBAAmB,iBAAiB,MAAS;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,kBAAkB;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OACE,YACI;AAAA,UACE,UAAU;AAAA,UACV,cAAc;AAAA,UACd,YAAY;AAAA,QACd,IACA,CAAC;AAAA,QAGN;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,cACJ;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,cAAc;AAAA,MACd,UAAU;AAAA,MACV,uBAAuB,CAAC;AAAA,MAExB;AAAA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,QACE;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL;AAAA,gBACA;AAAA,gBACA,yBAAuB,OAAO,SAAS;AAAA,gBACvC,mBAAiB;AAAA,gBAChB,GAAI,MAAM,CAAC;AAAA,gBACZ,OACE,YACI;AAAA,kBACE,UAAU;AAAA,kBACV,cAAc;AAAA,kBACd,YAAY;AAAA,kBACZ,SAAS;AAAA,gBACX,IACA;AAAA;AAAA,YAER;AAAA,YAGD,UAAM,qBAAe,QAAQ,IACpB,mBAAa,UAAgC;AAAA,cACjD,iBAAiB,aAAa,UAAU,eAAe,IACnD,SAAS,MAAM,eAAe,IAC9B;AAAA,cACJ,oBAAoB,OAAO,KAAK;AAAA,YAClC,CAAC,IACD;AAAA;AAAA,QACN;AAAA,QACA,oBAAC,YAAY,QAAZ,EAAmB,WAAW,iBAC7B;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,OAAO,EAAE,OAAO;AAAA,YAEhB;AAAA,cAAC,YAAY;AAAA,cAAZ;AAAA,gBACC;AAAA,gBACA,QACE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,YAAY;AAAA,oBACZ,cAAc,sBAAsB,QAAQ,MAAM;AAAA,oBAClD,IAAI;AAAA,oBACJ,IAAI,sBAAsB,QAAQ,MAAM;AAAA,oBACxC,GAAG;AAAA,oBACH,OAAM;AAAA,oBACN,IAAG;AAAA,oBACH,WAAU;AAAA,oBACV,QAAQ;AAAA,oBACR,aAAY;AAAA,oBACZ,UAAU,yBAAyB,IAAI;AAAA,oBACtC,GAAG;AAAA;AAAA,gBACN;AAAA,gBAGD;AAAA;AAAA,YACH;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAGF,SAAO,kBACL,oBAACC,MAAA,EAAK,GAAG,oBAAqB,uBAAY,IAE1C;AAEJ;AAEA,IAAO,kBAAQ;;;AE7Mf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Box","Box"]}
+{"version":3,"sources":["../../src/Tooltip.tsx","../../src/TooltipHybrid.tsx","../../src/styles.ts","../../src/TooltipTailwind.tsx","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useRef, useEffect, useContext } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { DisablePortalToBodyContext } from \"@sproutsocial/seeds-react-portal\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport TooltipHybrid from \"./TooltipHybrid\";\nimport type { TypeTooltipProps } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\ntype Side = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Align = \"start\" | \"center\" | \"end\";\n\n// `auto`, `auto-start`, and `auto-end` resolve to `side: \"top\"` (with align\n// taken from the suffix) and rely on base-ui's Positioner collision flipping at\n// runtime, rather than Popper's old best-initial-side selection. Exported for\n// unit testing of this mapping.\nexport function mapPlacement(placement: string): { side: Side; align: Align } {\n  const parts = placement.split(\"-\");\n  let side: Side;\n  let align: Align = \"center\";\n\n  switch (parts[0]) {\n    case \"bottom\":\n      side = \"bottom\";\n      break;\n    case \"left\":\n      side = \"left\";\n      break;\n    case \"right\":\n      side = \"right\";\n      break;\n    case \"top\":\n    case \"auto\":\n    default:\n      side = \"top\";\n      break;\n  }\n\n  if (parts[1] === \"start\") {\n    align = \"start\";\n  } else if (parts[1] === \"end\") {\n    align = \"end\";\n  }\n\n  return { side, align };\n}\n\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  exitDelay,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  triggerProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  legacyMouseInteraction,\n  ...rest\n}: TypeTooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const isInvalidContent = content === null || content === undefined;\n  const disablePortalToBody = useContext(DisablePortalToBodyContext);\n  const [portalContainer, setPortalContainer] = useState<\n    HTMLElement | undefined\n  >(undefined);\n\n  const resolvedExitDelay =\n    exitDelay !== undefined\n      ? exitDelay\n      : legacyMouseInteraction\n      ? MOTION.MOTION_DURATION_FAST * 1000\n      : 0;\n\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  const { side, align } = mapPlacement(placement);\n\n  const mergedWrapperProps = {\n    ...popoutProps,\n    ...triggerProps,\n  };\n\n  const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;\n\n  useEffect(() => {\n    if (disablePortalToBody && triggerRef.current) {\n      const dialogContent =\n        triggerRef.current.closest<HTMLElement>(\"[role='dialog']\");\n      setPortalContainer(dialogContent ?? undefined);\n    }\n  }, [disablePortalToBody]);\n\n  if (isInvalidContent) {\n    return (\n      <span\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {children}\n      </span>\n    );\n  }\n\n  const tooltipTree = (\n    <BaseTooltip.Root\n      open={open}\n      onOpenChange={setOpen}\n      disabled={isInvalidContent}\n      disableHoverablePopup={!legacyMouseInteraction}\n    >\n      <BaseTooltip.Trigger\n        delay={enterDelay}\n        closeDelay={resolvedExitDelay}\n        render={\n          <span\n            ref={triggerRef}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            data-qa-popout-isopen={open ? \"true\" : \"false\"}\n            data-qa-tooltip={id}\n            {...(qa || {})}\n            style={\n              truncated\n                ? {\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    display: \"inline-flex\",\n                  }\n                : undefined\n            }\n          />\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": open ? id : undefined,\n            })\n          : children}\n      </BaseTooltip.Trigger>\n      <BaseTooltip.Portal container={portalContainer}>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={4}\n          style={{ zIndex }}\n        >\n          <BaseTooltip.Popup\n            id={id}\n            render={\n              <TooltipHybrid\n                appearance={defaultAppearance}\n                tabIndex={legacyMouseInteraction ? 0 : undefined}\n                {...rest}\n              />\n            }\n          >\n            {content}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  return hasWrapperProps ? (\n    <Box {...mergedWrapperProps}>{tooltipTree}</Box>\n  ) : (\n    tooltipTree\n  );\n};\n\nexport default Tooltip;\n","/**\n * Hybrid Tooltip content\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Rendered as the base-ui Tooltip Popup's `render` element, so it must forward\n * the ref and all base-ui-injected props (id, role, aria-*, data-state,\n * positioning style, className) onto its chosen leaf element.\n */\n\nimport React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport { StyledTooltipContent } from \"./styles\"; // Styled-components version\nimport { TooltipTailwind } from \"./TooltipTailwind\"; // Tailwind version\n\nexport interface TypeTooltipHybridProps extends Omit<TypeBoxProps, \"children\"> {\n  appearance?: \"pill\" | \"box\";\n  children?: React.ReactNode;\n}\n\n// Box style props NOT covered by `needsStyledComponents`. `TypeTooltipProps`\n// extends `Omit<TypeBoxProps, ...>`, so these are part of the public API; if a\n// consumer passes one it must route to the styled-components (Box) path rather\n// than spread onto the plain Tailwind <div> (which would drop the styling and\n// emit React \"unknown DOM attribute\" warnings). `StyledTooltipContent` is a\n// `styled(Box)`, so it accepts all of these safely.\nconst ADDITIONAL_BOX_STYLE_PROPS = [\n  \"borderRadius\",\n  \"border\",\n  \"borderColor\",\n  \"borderWidth\",\n  \"borderStyle\",\n  \"boxShadow\",\n  \"fontSize\",\n  \"fontWeight\",\n  \"lineHeight\",\n  \"letterSpacing\",\n  \"fontStyle\",\n  \"textAlign\",\n  \"position\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n  \"left\",\n  \"zIndex\",\n  \"opacity\",\n  \"size\",\n] as const;\n\nconst hasAdditionalBoxStyleProps = (props: Record<string, any>): boolean =>\n  ADDITIONAL_BOX_STYLE_PROPS.some((prop) => props[prop] !== undefined);\n\nconst TooltipHybrid = React.forwardRef<HTMLDivElement, TypeTooltipHybridProps>(\n  ({ appearance, ...rest }, ref) => {\n    if (needsStyledComponents(rest) || hasAdditionalBoxStyleProps(rest)) {\n      // Styled-components path: a consumer passed system props (e.g. bg, mt) or a\n      // styled(Tooltip) extension injected theme/forwardedComponent. The inline\n      // system props below reproduce the original StyledTooltipContent styling.\n      return (\n        <StyledTooltipContent\n          ref={ref}\n          role=\"tooltip\"\n          appearance={appearance}\n          borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n          px={400}\n          py={appearance === \"box\" ? 400 : 200}\n          m={200}\n          color=\"text.body\"\n          bg=\"container.background.base\"\n          boxShadow=\"medium\"\n          border={500}\n          borderColor=\"container.border.base\"\n          {...rest}\n        />\n      );\n    }\n\n    // Tailwind path (preferred - better performance). The gate above routes any\n    // Box system/style prop (every prop enumerated in `needsStyledComponents`\n    // plus `ADDITIONAL_BOX_STYLE_PROPS`) to the styled-components branch, so only\n    // DOM-safe props (id, role, aria-*, data-*, style, className, tabIndex, ref)\n    // remain in `rest` here.\n    return (\n      <TooltipTailwind\n        ref={ref}\n        appearance={appearance}\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n);\n\nTooltipHybrid.displayName = \"TooltipHybrid\";\nexport default TooltipHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","/**\n * Tailwind CSS implementation of Tooltip content\n * Uses Seeds tooltip CSS classes from tooltip.css\n */\n\nimport React from \"react\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport interface TypeTooltipTailwindProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  appearance?: \"pill\" | \"box\";\n}\n\nexport const TooltipTailwind = React.forwardRef<\n  HTMLDivElement,\n  TypeTooltipTailwindProps\n>(({ appearance, className, ...rest }, ref) => (\n  <div\n    ref={ref}\n    role=\"tooltip\"\n    className={cn(\n      \"seeds-tooltip\",\n      appearance === \"box\" ? \"seeds-tooltip-box\" : \"seeds-tooltip-pill\",\n      className\n    )}\n    {...rest}\n  />\n));\n\nTooltipTailwind.displayName = \"TooltipTailwind\";\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeTooltipPlacement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /**\n   * The placement of the tooltip in relation to the children.\n   *\n   * Note: `auto`, `auto-start`, and `auto-end` resolve to the `top` side (with\n   * the requested alignment) and rely on base-ui's runtime collision flipping,\n   * rather than the legacy Popper.js best-initial-side selection.\n   */\n  placement?: TypeTooltipPlacement;\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */\n  exitDelay?: number;\n\n  /**\n   * When true, enables mouse interaction on tooltip content and sets exitDelay\n   * to MOTION_DURATION_FAST * 1000 by default (instead of 0).\n   */\n  legacyMouseInteraction?: boolean;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /**\n   * @deprecated Use `triggerProps` instead. The Tooltip no longer uses Popout internally. This prop is accepted and merged with triggerProps\n   */\n  popoutProps?: Record<string, unknown>;\n\n  /** Props spread onto an outer wrapper Box rendered around the tooltip. Use this to apply layout styles (e.g. `display`, `width`) or other Box props to the element that wraps the tooltip's children. */\n  triggerProps?: TypeBoxProps;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  legacyMouseInteraction?: boolean;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":"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","names":["React","Box","React","jsx","React","jsx","Box"]}

package/dist/index.js

@@ -36,13 +36,17 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Tooltip.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
+var React3 = __toESM(require("react"));
+var import_react3 = require("react");
 var import_unitless = __toESM(require("@sproutsocial/seeds-motion/unitless"));
 var import_tooltip = require("@base-ui/react/tooltip");
 var import_seeds_react_portal = require("@sproutsocial/seeds-react-portal");
 var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
 
+// src/TooltipHybrid.tsx
+var import_react2 = __toESM(require("react"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
@@ -52,11 +56,105 @@ var StyledTooltipContent = (0, import_styled_components.default)(import_seeds_re
   text-align: ${(props) => props.appearance === "box" ? "left" : "center"};
 `;
 
-// src/Tooltip.tsx
+// src/TooltipTailwind.tsx
+var import_react = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var TooltipTailwind = import_react.default.forwardRef(({ appearance, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    role: "tooltip",
+    className: cn(
+      "seeds-tooltip",
+      appearance === "box" ? "seeds-tooltip-box" : "seeds-tooltip-pill",
+      className
+    ),
+    ...rest
+  }
+));
+TooltipTailwind.displayName = "TooltipTailwind";
+
+// src/TooltipHybrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ADDITIONAL_BOX_STYLE_PROPS = [
+  "borderRadius",
+  "border",
+  "borderColor",
+  "borderWidth",
+  "borderStyle",
+  "boxShadow",
+  "fontSize",
+  "fontWeight",
+  "lineHeight",
+  "letterSpacing",
+  "fontStyle",
+  "textAlign",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "zIndex",
+  "opacity",
+  "size"
+];
+var hasAdditionalBoxStyleProps = (props) => ADDITIONAL_BOX_STYLE_PROPS.some((prop) => props[prop] !== void 0);
+var TooltipHybrid = import_react2.default.forwardRef(
+  ({ appearance, ...rest }, ref) => {
+    if ((0, import_seeds_react_system_props.needsStyledComponents)(rest) || hasAdditionalBoxStyleProps(rest)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        StyledTooltipContent,
+        {
+          ref,
+          role: "tooltip",
+          appearance,
+          borderRadius: appearance === "box" ? 500 : "5000em",
+          px: 400,
+          py: appearance === "box" ? 400 : 200,
+          m: 200,
+          color: "text.body",
+          bg: "container.background.base",
+          boxShadow: "medium",
+          border: 500,
+          borderColor: "container.border.base",
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      TooltipTailwind,
+      {
+        ref,
+        appearance,
+        ...rest
+      }
+    );
+  }
+);
+TooltipHybrid.displayName = "TooltipHybrid";
+var TooltipHybrid_default = TooltipHybrid;
+
+// src/Tooltip.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var idCounter = 0;
 var hasAttribute = (child, attribute) => {
-  return React.isValidElement(child) && child.props[attribute] !== void 0;
+  return React3.isValidElement(child) && child.props[attribute] !== void 0;
 };
 function mapPlacement(placement) {
   const parts = placement.split("-");
@@ -102,12 +200,12 @@ var Tooltip = ({
   legacyMouseInteraction,
   ...rest
 }) => {
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [id] = (0, import_react.useState)(`Racine-tooltip-${idCounter++}`);
-  const triggerRef = (0, import_react.useRef)(null);
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [id] = (0, import_react3.useState)(`Racine-tooltip-${idCounter++}`);
+  const triggerRef = (0, import_react3.useRef)(null);
   const isInvalidContent = content === null || content === void 0;
-  const disablePortalToBody = (0, import_react.useContext)(import_seeds_react_portal.DisablePortalToBodyContext);
-  const [portalContainer, setPortalContainer] = (0, import_react.useState)(void 0);
+  const disablePortalToBody = (0, import_react3.useContext)(import_seeds_react_portal.DisablePortalToBodyContext);
+  const [portalContainer, setPortalContainer] = (0, import_react3.useState)(void 0);
   const resolvedExitDelay = exitDelay !== void 0 ? exitDelay : legacyMouseInteraction ? import_unitless.default.MOTION_DURATION_FAST * 1e3 : 0;
   const defaultAppearance = appearance || (typeof content === "object" ? "box" : "pill");
   const { side, align } = mapPlacement(placement);
@@ -116,14 +214,14 @@ var Tooltip = ({
     ...triggerProps
   };
   const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (disablePortalToBody && triggerRef.current) {
       const dialogContent = triggerRef.current.closest("[role='dialog']");
       setPortalContainer(dialogContent ?? void 0);
     }
   }, [disablePortalToBody]);
   if (isInvalidContent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       {
         style: truncated ? {
@@ -135,7 +233,7 @@ var Tooltip = ({
       }
     );
   }
-  const tooltipTree = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const tooltipTree = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     import_tooltip.Tooltip.Root,
     {
       open,
@@ -143,12 +241,12 @@ var Tooltip = ({
       disabled: isInvalidContent,
       disableHoverablePopup: !legacyMouseInteraction,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_tooltip.Tooltip.Trigger,
           {
             delay: enterDelay,
             closeDelay: resolvedExitDelay,
-            render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            render: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "span",
               {
                 ref: triggerRef,
@@ -165,37 +263,27 @@ var Tooltip = ({
                 } : void 0
               }
             ),
-            children: React.isValidElement(children) ? React.cloneElement(children, {
+            children: React3.isValidElement(children) ? React3.cloneElement(children, {
               "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : void 0,
               "aria-describedby": open ? id : void 0
             }) : children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tooltip.Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_tooltip.Tooltip.Positioner,
           {
             side,
             align,
             sideOffset: 4,
             style: { zIndex },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_tooltip.Tooltip.Popup,
               {
                 id,
-                render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  StyledTooltipContent,
+                render: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  TooltipHybrid_default,
                   {
-                    role: "tooltip",
                     appearance: defaultAppearance,
-                    borderRadius: defaultAppearance === "box" ? 500 : "5000em",
-                    px: 400,
-                    py: defaultAppearance === "box" ? 400 : 200,
-                    m: 200,
-                    color: "text.body",
-                    bg: "container.background.base",
-                    boxShadow: "medium",
-                    border: 500,
-                    borderColor: "container.border.base",
                     tabIndex: legacyMouseInteraction ? 0 : void 0,
                     ...rest
                   }
@@ -208,12 +296,12 @@ var Tooltip = ({
       ]
     }
   );
-  return hasWrapperProps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.default, { ...mergedWrapperProps, children: tooltipTree }) : tooltipTree;
+  return hasWrapperProps ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box2.default, { ...mergedWrapperProps, children: tooltipTree }) : tooltipTree;
 };
 var Tooltip_default = Tooltip;
 
 // src/TooltipTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = Tooltip_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Tooltip.tsx","../src/styles.ts","../src/TooltipTypes.ts"],"sourcesContent":["import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n","import * as React from \"react\";\nimport { useState, useRef, useEffect, useContext } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { DisablePortalToBodyContext } from \"@sproutsocial/seeds-react-portal\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\ntype Side = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Align = \"start\" | \"center\" | \"end\";\n\n// `auto`, `auto-start`, and `auto-end` resolve to `side: \"top\"` (with align\n// taken from the suffix) and rely on base-ui's Positioner collision flipping at\n// runtime, rather than Popper's old best-initial-side selection. Exported for\n// unit testing of this mapping.\nexport function mapPlacement(placement: string): { side: Side; align: Align } {\n  const parts = placement.split(\"-\");\n  let side: Side;\n  let align: Align = \"center\";\n\n  switch (parts[0]) {\n    case \"bottom\":\n      side = \"bottom\";\n      break;\n    case \"left\":\n      side = \"left\";\n      break;\n    case \"right\":\n      side = \"right\";\n      break;\n    case \"top\":\n    case \"auto\":\n    default:\n      side = \"top\";\n      break;\n  }\n\n  if (parts[1] === \"start\") {\n    align = \"start\";\n  } else if (parts[1] === \"end\") {\n    align = \"end\";\n  }\n\n  return { side, align };\n}\n\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  exitDelay,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  triggerProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  legacyMouseInteraction,\n  ...rest\n}: TypeTooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const isInvalidContent = content === null || content === undefined;\n  const disablePortalToBody = useContext(DisablePortalToBodyContext);\n  const [portalContainer, setPortalContainer] = useState<\n    HTMLElement | undefined\n  >(undefined);\n\n  const resolvedExitDelay =\n    exitDelay !== undefined\n      ? exitDelay\n      : legacyMouseInteraction\n      ? MOTION.MOTION_DURATION_FAST * 1000\n      : 0;\n\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  const { side, align } = mapPlacement(placement);\n\n  const mergedWrapperProps = {\n    ...popoutProps,\n    ...triggerProps,\n  };\n\n  const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;\n\n  useEffect(() => {\n    if (disablePortalToBody && triggerRef.current) {\n      const dialogContent =\n        triggerRef.current.closest<HTMLElement>(\"[role='dialog']\");\n      setPortalContainer(dialogContent ?? undefined);\n    }\n  }, [disablePortalToBody]);\n\n  if (isInvalidContent) {\n    return (\n      <span\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {children}\n      </span>\n    );\n  }\n\n  const tooltipTree = (\n    <BaseTooltip.Root\n      open={open}\n      onOpenChange={setOpen}\n      disabled={isInvalidContent}\n      disableHoverablePopup={!legacyMouseInteraction}\n    >\n      <BaseTooltip.Trigger\n        delay={enterDelay}\n        closeDelay={resolvedExitDelay}\n        render={\n          <span\n            ref={triggerRef}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            data-qa-popout-isopen={open ? \"true\" : \"false\"}\n            data-qa-tooltip={id}\n            {...(qa || {})}\n            style={\n              truncated\n                ? {\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    display: \"inline-flex\",\n                  }\n                : undefined\n            }\n          />\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": open ? id : undefined,\n            })\n          : children}\n      </BaseTooltip.Trigger>\n      <BaseTooltip.Portal container={portalContainer}>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={4}\n          style={{ zIndex }}\n        >\n          <BaseTooltip.Popup\n            id={id}\n            render={\n              <StyledTooltipContent\n                role=\"tooltip\"\n                appearance={defaultAppearance}\n                borderRadius={defaultAppearance === \"box\" ? 500 : \"5000em\"}\n                px={400}\n                py={defaultAppearance === \"box\" ? 400 : 200}\n                m={200}\n                color=\"text.body\"\n                bg=\"container.background.base\"\n                boxShadow=\"medium\"\n                border={500}\n                borderColor=\"container.border.base\"\n                tabIndex={legacyMouseInteraction ? 0 : undefined}\n                {...rest}\n              />\n            }\n          >\n            {content}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  return hasWrapperProps ? (\n    <Box {...mergedWrapperProps}>{tooltipTree}</Box>\n  ) : (\n    tooltipTree\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeTooltipPlacement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /**\n   * The placement of the tooltip in relation to the children.\n   *\n   * Note: `auto`, `auto-start`, and `auto-end` resolve to the `top` side (with\n   * the requested alignment) and rely on base-ui's runtime collision flipping,\n   * rather than the legacy Popper.js best-initial-side selection.\n   */\n  placement?: TypeTooltipPlacement;\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */\n  exitDelay?: number;\n\n  /**\n   * When true, enables mouse interaction on tooltip content and sets exitDelay\n   * to MOTION_DURATION_FAST * 1000 by default (instead of 0).\n   */\n  legacyMouseInteraction?: boolean;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /**\n   * @deprecated Use `triggerProps` instead. The Tooltip no longer uses Popout internally. This prop is accepted and merged with triggerProps\n   */\n  popoutProps?: Record<string, unknown>;\n\n  /** Props spread onto an outer wrapper Box rendered around the tooltip. Use this to apply layout styles (e.g. `display`, `width`) or other Box props to the element that wraps the tooltip's children. */\n  triggerProps?: TypeBoxProps;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  legacyMouseInteraction?: boolean;\n}\n"],"mappings":"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","names":["import_seeds_react_box","styled","Box","MOTION","BaseTooltip","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Tooltip.tsx","../src/TooltipHybrid.tsx","../src/styles.ts","../src/TooltipTailwind.tsx","../src/TooltipTypes.ts"],"sourcesContent":["import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n","import * as React from \"react\";\nimport { useState, useRef, useEffect, useContext } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { DisablePortalToBodyContext } from \"@sproutsocial/seeds-react-portal\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport TooltipHybrid from \"./TooltipHybrid\";\nimport type { TypeTooltipProps } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\ntype Side = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Align = \"start\" | \"center\" | \"end\";\n\n// `auto`, `auto-start`, and `auto-end` resolve to `side: \"top\"` (with align\n// taken from the suffix) and rely on base-ui's Positioner collision flipping at\n// runtime, rather than Popper's old best-initial-side selection. Exported for\n// unit testing of this mapping.\nexport function mapPlacement(placement: string): { side: Side; align: Align } {\n  const parts = placement.split(\"-\");\n  let side: Side;\n  let align: Align = \"center\";\n\n  switch (parts[0]) {\n    case \"bottom\":\n      side = \"bottom\";\n      break;\n    case \"left\":\n      side = \"left\";\n      break;\n    case \"right\":\n      side = \"right\";\n      break;\n    case \"top\":\n    case \"auto\":\n    default:\n      side = \"top\";\n      break;\n  }\n\n  if (parts[1] === \"start\") {\n    align = \"start\";\n  } else if (parts[1] === \"end\") {\n    align = \"end\";\n  }\n\n  return { side, align };\n}\n\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  exitDelay,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  triggerProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  legacyMouseInteraction,\n  ...rest\n}: TypeTooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const isInvalidContent = content === null || content === undefined;\n  const disablePortalToBody = useContext(DisablePortalToBodyContext);\n  const [portalContainer, setPortalContainer] = useState<\n    HTMLElement | undefined\n  >(undefined);\n\n  const resolvedExitDelay =\n    exitDelay !== undefined\n      ? exitDelay\n      : legacyMouseInteraction\n      ? MOTION.MOTION_DURATION_FAST * 1000\n      : 0;\n\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  const { side, align } = mapPlacement(placement);\n\n  const mergedWrapperProps = {\n    ...popoutProps,\n    ...triggerProps,\n  };\n\n  const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;\n\n  useEffect(() => {\n    if (disablePortalToBody && triggerRef.current) {\n      const dialogContent =\n        triggerRef.current.closest<HTMLElement>(\"[role='dialog']\");\n      setPortalContainer(dialogContent ?? undefined);\n    }\n  }, [disablePortalToBody]);\n\n  if (isInvalidContent) {\n    return (\n      <span\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {children}\n      </span>\n    );\n  }\n\n  const tooltipTree = (\n    <BaseTooltip.Root\n      open={open}\n      onOpenChange={setOpen}\n      disabled={isInvalidContent}\n      disableHoverablePopup={!legacyMouseInteraction}\n    >\n      <BaseTooltip.Trigger\n        delay={enterDelay}\n        closeDelay={resolvedExitDelay}\n        render={\n          <span\n            ref={triggerRef}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            data-qa-popout-isopen={open ? \"true\" : \"false\"}\n            data-qa-tooltip={id}\n            {...(qa || {})}\n            style={\n              truncated\n                ? {\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    display: \"inline-flex\",\n                  }\n                : undefined\n            }\n          />\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": open ? id : undefined,\n            })\n          : children}\n      </BaseTooltip.Trigger>\n      <BaseTooltip.Portal container={portalContainer}>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={4}\n          style={{ zIndex }}\n        >\n          <BaseTooltip.Popup\n            id={id}\n            render={\n              <TooltipHybrid\n                appearance={defaultAppearance}\n                tabIndex={legacyMouseInteraction ? 0 : undefined}\n                {...rest}\n              />\n            }\n          >\n            {content}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  return hasWrapperProps ? (\n    <Box {...mergedWrapperProps}>{tooltipTree}</Box>\n  ) : (\n    tooltipTree\n  );\n};\n\nexport default Tooltip;\n","/**\n * Hybrid Tooltip content\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Rendered as the base-ui Tooltip Popup's `render` element, so it must forward\n * the ref and all base-ui-injected props (id, role, aria-*, data-state,\n * positioning style, className) onto its chosen leaf element.\n */\n\nimport React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport { StyledTooltipContent } from \"./styles\"; // Styled-components version\nimport { TooltipTailwind } from \"./TooltipTailwind\"; // Tailwind version\n\nexport interface TypeTooltipHybridProps extends Omit<TypeBoxProps, \"children\"> {\n  appearance?: \"pill\" | \"box\";\n  children?: React.ReactNode;\n}\n\n// Box style props NOT covered by `needsStyledComponents`. `TypeTooltipProps`\n// extends `Omit<TypeBoxProps, ...>`, so these are part of the public API; if a\n// consumer passes one it must route to the styled-components (Box) path rather\n// than spread onto the plain Tailwind <div> (which would drop the styling and\n// emit React \"unknown DOM attribute\" warnings). `StyledTooltipContent` is a\n// `styled(Box)`, so it accepts all of these safely.\nconst ADDITIONAL_BOX_STYLE_PROPS = [\n  \"borderRadius\",\n  \"border\",\n  \"borderColor\",\n  \"borderWidth\",\n  \"borderStyle\",\n  \"boxShadow\",\n  \"fontSize\",\n  \"fontWeight\",\n  \"lineHeight\",\n  \"letterSpacing\",\n  \"fontStyle\",\n  \"textAlign\",\n  \"position\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n  \"left\",\n  \"zIndex\",\n  \"opacity\",\n  \"size\",\n] as const;\n\nconst hasAdditionalBoxStyleProps = (props: Record<string, any>): boolean =>\n  ADDITIONAL_BOX_STYLE_PROPS.some((prop) => props[prop] !== undefined);\n\nconst TooltipHybrid = React.forwardRef<HTMLDivElement, TypeTooltipHybridProps>(\n  ({ appearance, ...rest }, ref) => {\n    if (needsStyledComponents(rest) || hasAdditionalBoxStyleProps(rest)) {\n      // Styled-components path: a consumer passed system props (e.g. bg, mt) or a\n      // styled(Tooltip) extension injected theme/forwardedComponent. The inline\n      // system props below reproduce the original StyledTooltipContent styling.\n      return (\n        <StyledTooltipContent\n          ref={ref}\n          role=\"tooltip\"\n          appearance={appearance}\n          borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n          px={400}\n          py={appearance === \"box\" ? 400 : 200}\n          m={200}\n          color=\"text.body\"\n          bg=\"container.background.base\"\n          boxShadow=\"medium\"\n          border={500}\n          borderColor=\"container.border.base\"\n          {...rest}\n        />\n      );\n    }\n\n    // Tailwind path (preferred - better performance). The gate above routes any\n    // Box system/style prop (every prop enumerated in `needsStyledComponents`\n    // plus `ADDITIONAL_BOX_STYLE_PROPS`) to the styled-components branch, so only\n    // DOM-safe props (id, role, aria-*, data-*, style, className, tabIndex, ref)\n    // remain in `rest` here.\n    return (\n      <TooltipTailwind\n        ref={ref}\n        appearance={appearance}\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n);\n\nTooltipHybrid.displayName = \"TooltipHybrid\";\nexport default TooltipHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","/**\n * Tailwind CSS implementation of Tooltip content\n * Uses Seeds tooltip CSS classes from tooltip.css\n */\n\nimport React from \"react\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport interface TypeTooltipTailwindProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  appearance?: \"pill\" | \"box\";\n}\n\nexport const TooltipTailwind = React.forwardRef<\n  HTMLDivElement,\n  TypeTooltipTailwindProps\n>(({ appearance, className, ...rest }, ref) => (\n  <div\n    ref={ref}\n    role=\"tooltip\"\n    className={cn(\n      \"seeds-tooltip\",\n      appearance === \"box\" ? \"seeds-tooltip-box\" : \"seeds-tooltip-pill\",\n      className\n    )}\n    {...rest}\n  />\n));\n\nTooltipTailwind.displayName = \"TooltipTailwind\";\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeTooltipPlacement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /**\n   * The placement of the tooltip in relation to the children.\n   *\n   * Note: `auto`, `auto-start`, and `auto-end` resolve to the `top` side (with\n   * the requested alignment) and rely on base-ui's runtime collision flipping,\n   * rather than the legacy Popper.js best-initial-side selection.\n   */\n  placement?: TypeTooltipPlacement;\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */\n  exitDelay?: number;\n\n  /**\n   * When true, enables mouse interaction on tooltip content and sets exitDelay\n   * to MOTION_DURATION_FAST * 1000 by default (instead of 0).\n   */\n  legacyMouseInteraction?: boolean;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /**\n   * @deprecated Use `triggerProps` instead. The Tooltip no longer uses Popout internally. This prop is accepted and merged with triggerProps\n   */\n  popoutProps?: Record<string, unknown>;\n\n  /** Props spread onto an outer wrapper Box rendered around the tooltip. Use this to apply layout styles (e.g. `display`, `width`) or other Box props to the element that wraps the tooltip's children. */\n  triggerProps?: TypeBoxProps;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  legacyMouseInteraction?: boolean;\n}\n"],"mappings":"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","names":["React","import_react","import_seeds_react_box","import_react","styled","Box","React","import_jsx_runtime","React","import_jsx_runtime","MOTION","BaseTooltip","Box","React"]}

package/dist/tooltip.css

@@ -0,0 +1,41 @@
+/**
+ * Seeds Tooltip component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-tooltip seeds-tooltip-pill" role="tooltip">Label</div>
+ *   <div class="seeds-tooltip seeds-tooltip-box" role="tooltip">Rich content</div>
+ */
+
+@layer components {
+  .seeds-tooltip {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    margin: var(--space-200);
+    padding-left: var(--space-400);
+    padding-right: var(--space-400);
+    color: var(--color-text-body);
+    background-color: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    box-shadow: var(--shadow-medium);
+  }
+
+  .seeds-tooltip-box {
+    text-align: left;
+    border-radius: var(--radius-500);
+    padding-top: var(--space-400);
+    padding-bottom: var(--space-400);
+  }
+
+  .seeds-tooltip-pill {
+    text-align: center;
+    border-radius: 5000em;
+    padding-top: var(--space-200);
+    padding-bottom: var(--space-200);
+  }
+}