@yahoo/uds 3.100.0-beta.3 → 3.100.0-beta.4

package/dist/automated-config/dist/generated/autoVariants.cjs

@@ -545,6 +545,7 @@ const autoVariants = {
 		warning: "uds-toast-variant-warning-root"
 	},
 	tooltipSizeBody: { default: "uds-tooltip-size-default-body" },
+	tooltipSizeEndContent: { default: "uds-tooltip-size-default-endcontent" },
 	tooltipSizeIcon: { default: "uds-tooltip-size-default-icon" },
 	tooltipSizeRoot: { default: "uds-tooltip-size-default-root" },
 	tooltipSizeSvg: { default: "uds-tooltip-size-default-svg" },

package/dist/automated-config/dist/generated/autoVariants.d.cts

@@ -122,6 +122,7 @@ interface StylePropsVariantsAuto<T> {
   toastVariantIcon: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   toastVariantRoot: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   tooltipSizeBody: Record<'default', T>;
+  tooltipSizeEndContent: Record<'default', T>;
   tooltipSizeIcon: Record<'default', T>;
   tooltipSizeRoot: Record<'default', T>;
   tooltipSizeSvg: Record<'default', T>;

package/dist/automated-config/dist/generated/autoVariants.d.ts

@@ -122,6 +122,7 @@ interface StylePropsVariantsAuto<T> {
   toastVariantIcon: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   toastVariantRoot: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   tooltipSizeBody: Record<'default', T>;
+  tooltipSizeEndContent: Record<'default', T>;
   tooltipSizeIcon: Record<'default', T>;
   tooltipSizeRoot: Record<'default', T>;
   tooltipSizeSvg: Record<'default', T>;

package/dist/automated-config/dist/generated/autoVariants.js

@@ -544,6 +544,7 @@ const autoVariants = {
 		warning: "uds-toast-variant-warning-root"
 	},
 	tooltipSizeBody: { default: "uds-tooltip-size-default-body" },
+	tooltipSizeEndContent: { default: "uds-tooltip-size-default-endcontent" },
 	tooltipSizeIcon: { default: "uds-tooltip-size-default-icon" },
 	tooltipSizeRoot: { default: "uds-tooltip-size-default-root" },
 	tooltipSizeSvg: { default: "uds-tooltip-size-default-svg" },

package/dist/automated-config/dist/generated/generatedConfigs.cjs

@@ -30423,6 +30423,61 @@ const TooltipConfig = {
 						]]
 					} }
 				},
+				endContent: {
+					label: "endContent",
+					properties: { textVariant: {
+						defaults: { default: "caption1" },
+						label: "shortcut text variant",
+						name: "textVariant",
+						typeOfFixture: ["textVariants"],
+						values: [[
+							"display1",
+							"display2",
+							"display3",
+							"title1",
+							"title2",
+							"title3",
+							"title4",
+							"headline1",
+							"body1",
+							"label1",
+							"label2",
+							"label3",
+							"label4",
+							"caption1",
+							"caption2",
+							"legal1",
+							"ui1",
+							"ui2",
+							"ui3",
+							"ui4",
+							"ui5",
+							"ui6",
+							"display1/emphasized",
+							"display2/emphasized",
+							"display3/emphasized",
+							"title1/emphasized",
+							"title2/emphasized",
+							"title3/emphasized",
+							"title4/emphasized",
+							"headline1/emphasized",
+							"body1/emphasized",
+							"label1/emphasized",
+							"label2/emphasized",
+							"label3/emphasized",
+							"label4/emphasized",
+							"caption1/emphasized",
+							"caption2/emphasized",
+							"legal1/emphasized",
+							"ui1/emphasized",
+							"ui2/emphasized",
+							"ui3/emphasized",
+							"ui4/emphasized",
+							"ui5/emphasized",
+							"ui6/emphasized"
+						]]
+					} }
+				},
 				icon: {
 					label: "icon",
 					properties: { size: {
@@ -30443,7 +30498,7 @@ const TooltipConfig = {
 					properties: {
 						gap: {
 							defaults: { default: "1" },
-							label: "spacing vertical gap",
+							label: "title/content row gap",
 							name: "gap",
 							typeOfFixture: ["spacingAliases"],
 							values: [[

package/dist/automated-config/dist/generated/generatedConfigs.d.cts

@@ -3275,6 +3275,20 @@ declare const TooltipConfig: {
             };
           };
         };
+        readonly endContent: {
+          readonly label: "endContent";
+          readonly properties: {
+            readonly textVariant: {
+              readonly defaults: {
+                readonly default: "caption1";
+              };
+              readonly label: "shortcut text variant";
+              readonly name: "textVariant";
+              readonly typeOfFixture: readonly ["textVariants"];
+              readonly values: readonly [readonly ["display1", "display2", "display3", "title1", "title2", "title3", "title4", "headline1", "body1", "label1", "label2", "label3", "label4", "caption1", "caption2", "legal1", "ui1", "ui2", "ui3", "ui4", "ui5", "ui6", "display1/emphasized", "display2/emphasized", "display3/emphasized", "title1/emphasized", "title2/emphasized", "title3/emphasized", "title4/emphasized", "headline1/emphasized", "body1/emphasized", "label1/emphasized", "label2/emphasized", "label3/emphasized", "label4/emphasized", "caption1/emphasized", "caption2/emphasized", "legal1/emphasized", "ui1/emphasized", "ui2/emphasized", "ui3/emphasized", "ui4/emphasized", "ui5/emphasized", "ui6/emphasized"]];
+            };
+          };
+        };
         readonly icon: {
           readonly label: "icon";
           readonly properties: {
@@ -3296,7 +3310,7 @@ declare const TooltipConfig: {
               readonly defaults: {
                 readonly default: "1";
               };
-              readonly label: "spacing vertical gap";
+              readonly label: "title/content row gap";
               readonly name: "gap";
               readonly typeOfFixture: readonly ["spacingAliases"];
               readonly values: readonly [readonly ["0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"]];

package/dist/automated-config/dist/generated/generatedConfigs.d.ts

@@ -3275,6 +3275,20 @@ declare const TooltipConfig: {
             };
           };
         };
+        readonly endContent: {
+          readonly label: "endContent";
+          readonly properties: {
+            readonly textVariant: {
+              readonly defaults: {
+                readonly default: "caption1";
+              };
+              readonly label: "shortcut text variant";
+              readonly name: "textVariant";
+              readonly typeOfFixture: readonly ["textVariants"];
+              readonly values: readonly [readonly ["display1", "display2", "display3", "title1", "title2", "title3", "title4", "headline1", "body1", "label1", "label2", "label3", "label4", "caption1", "caption2", "legal1", "ui1", "ui2", "ui3", "ui4", "ui5", "ui6", "display1/emphasized", "display2/emphasized", "display3/emphasized", "title1/emphasized", "title2/emphasized", "title3/emphasized", "title4/emphasized", "headline1/emphasized", "body1/emphasized", "label1/emphasized", "label2/emphasized", "label3/emphasized", "label4/emphasized", "caption1/emphasized", "caption2/emphasized", "legal1/emphasized", "ui1/emphasized", "ui2/emphasized", "ui3/emphasized", "ui4/emphasized", "ui5/emphasized", "ui6/emphasized"]];
+            };
+          };
+        };
         readonly icon: {
           readonly label: "icon";
           readonly properties: {
@@ -3296,7 +3310,7 @@ declare const TooltipConfig: {
               readonly defaults: {
                 readonly default: "1";
               };
-              readonly label: "spacing vertical gap";
+              readonly label: "title/content row gap";
               readonly name: "gap";
               readonly typeOfFixture: readonly ["spacingAliases"];
               readonly values: readonly [readonly ["0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"]];

package/dist/automated-config/dist/generated/generatedConfigs.js

@@ -30422,6 +30422,61 @@ const TooltipConfig = {
 						]]
 					} }
 				},
+				endContent: {
+					label: "endContent",
+					properties: { textVariant: {
+						defaults: { default: "caption1" },
+						label: "shortcut text variant",
+						name: "textVariant",
+						typeOfFixture: ["textVariants"],
+						values: [[
+							"display1",
+							"display2",
+							"display3",
+							"title1",
+							"title2",
+							"title3",
+							"title4",
+							"headline1",
+							"body1",
+							"label1",
+							"label2",
+							"label3",
+							"label4",
+							"caption1",
+							"caption2",
+							"legal1",
+							"ui1",
+							"ui2",
+							"ui3",
+							"ui4",
+							"ui5",
+							"ui6",
+							"display1/emphasized",
+							"display2/emphasized",
+							"display3/emphasized",
+							"title1/emphasized",
+							"title2/emphasized",
+							"title3/emphasized",
+							"title4/emphasized",
+							"headline1/emphasized",
+							"body1/emphasized",
+							"label1/emphasized",
+							"label2/emphasized",
+							"label3/emphasized",
+							"label4/emphasized",
+							"caption1/emphasized",
+							"caption2/emphasized",
+							"legal1/emphasized",
+							"ui1/emphasized",
+							"ui2/emphasized",
+							"ui3/emphasized",
+							"ui4/emphasized",
+							"ui5/emphasized",
+							"ui6/emphasized"
+						]]
+					} }
+				},
 				icon: {
 					label: "icon",
 					properties: { size: {
@@ -30442,7 +30497,7 @@ const TooltipConfig = {
 					properties: {
 						gap: {
 							defaults: { default: "1" },
-							label: "spacing vertical gap",
+							label: "title/content row gap",
 							name: "gap",
 							typeOfFixture: ["spacingAliases"],
 							values: [[

package/dist/automated-config/dist/generated/universalTokensConfigAuto.cjs

@@ -11933,6 +11933,11 @@ const defaultUniversalTokensConfigAuto = {
 				value: "ui3/emphasized",
 				valueType: "alias"
 			} } },
+			"size/default/endContent": { textVariant: { rest: {
+				type: "textVariants",
+				value: "caption1",
+				valueType: "alias"
+			} } },
 			"size/default/icon": { size: { rest: {
 				type: "iconSizes",
 				value: "xs",

package/dist/automated-config/dist/generated/universalTokensConfigAuto.js

@@ -11932,6 +11932,11 @@ const defaultUniversalTokensConfigAuto = {
 				value: "ui3/emphasized",
 				valueType: "alias"
 			} } },
+			"size/default/endContent": { textVariant: { rest: {
+				type: "textVariants",
+				value: "caption1",
+				valueType: "alias"
+			} } },
 			"size/default/icon": { size: { rest: {
 				type: "iconSizes",
 				value: "xs",

package/dist/components/client/Toast/Toast.cjs

@@ -42,7 +42,7 @@ const iconMap = {
 * <Toast variant="info" message="This is a toast" />
 *```
 *
-* @related Tooltip (coming soon) and Popover (coming soon).
+* @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
 **/
 const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = _yahoo_uds_icons.Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
 	const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = require_components_client_Toast_UDSToastConfigProvider.useToastConfig(sizeProp, variantProp);

package/dist/components/client/Toast/Toast.d.cts

@@ -44,7 +44,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
  * <Toast variant="info" message="This is a toast" />
  *```
  *
- * @related Tooltip (coming soon) and Popover (coming soon).
+ * @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
  **/
 declare const Toast: {
   ({

package/dist/components/client/Toast/Toast.d.ts

@@ -44,7 +44,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
  * <Toast variant="info" message="This is a toast" />
  *```
  *
- * @related Tooltip (coming soon) and Popover (coming soon).
+ * @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
  **/
 declare const Toast: {
   ({

package/dist/components/client/Toast/Toast.js

@@ -40,7 +40,7 @@ const iconMap = {
 * <Toast variant="info" message="This is a toast" />
 *```
 *
-* @related Tooltip (coming soon) and Popover (coming soon).
+* @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
 **/
 const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
 	const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = useToastConfig(sizeProp, variantProp);

package/dist/components/client/Tooltip/Tooltip.cjs

@@ -8,7 +8,35 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
 
 //#region src/components/client/Tooltip/Tooltip.tsx
-function Tooltip({ children, placement = "top", open, portal = true }) {
+/**
+* **⚙️️ A Tooltip component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+*
+* Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+*
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button>Tooltip Trigger</Button>
+*   </TooltipTrigger>
+*   <TooltipContent>basic tooltip content</TooltipContent>
+* </Tooltip>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+**/
+function Tooltip({ children, placement, open, portal = true }) {
 	const hideOnHoverOutside = open === void 0;
 	const controlledProps = open !== void 0 ? {
 		showTimeout: 0,

package/dist/components/client/Tooltip/Tooltip.d.cts

@@ -3,12 +3,41 @@ import { UniversalTooltipProps } from "../../../types/dist/index.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tooltip/Tooltip.d.ts
+type TooltipProps = UniversalTooltipProps;
+/**
+ * **⚙️️ A Tooltip component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+ *
+ * Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+ *
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Tooltip Trigger</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>basic tooltip content</TooltipContent>
+ * </Tooltip>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+ **/
 declare function Tooltip({
   children,
   placement,
   open,
   portal
-}: UniversalTooltipProps): react_jsx_runtime0.JSX.Element;
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
 declare namespace Tooltip {
   var displayName: string;
 }

package/dist/components/client/Tooltip/Tooltip.d.ts

@@ -3,12 +3,41 @@ import { UniversalTooltipProps } from "../../../types/dist/index.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tooltip/Tooltip.d.ts
+type TooltipProps = UniversalTooltipProps;
+/**
+ * **⚙️️ A Tooltip component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+ *
+ * Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+ *
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Tooltip Trigger</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>basic tooltip content</TooltipContent>
+ * </Tooltip>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+ **/
 declare function Tooltip({
   children,
   placement,
   open,
   portal
-}: UniversalTooltipProps): react_jsx_runtime0.JSX.Element;
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
 declare namespace Tooltip {
   var displayName: string;
 }

package/dist/components/client/Tooltip/Tooltip.js

@@ -6,7 +6,35 @@ import { jsx } from "react/jsx-runtime";
 import { TooltipProvider } from "@ariakit/react";
 
 //#region src/components/client/Tooltip/Tooltip.tsx
-function Tooltip({ children, placement = "top", open, portal = true }) {
+/**
+* **⚙️️ A Tooltip component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+*
+* Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+*
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button>Tooltip Trigger</Button>
+*   </TooltipTrigger>
+*   <TooltipContent>basic tooltip content</TooltipContent>
+* </Tooltip>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+**/
+function Tooltip({ children, placement, open, portal = true }) {
 	const hideOnHoverOutside = open === void 0;
 	const controlledProps = open !== void 0 ? {
 		showTimeout: 0,

package/dist/components/client/Tooltip/TooltipContent.cjs

@@ -23,7 +23,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 	const currentPlacement = (0, _ariakit_react.useStoreState)(store, "currentPlacement");
 	const placement = (0, _ariakit_react.useStoreState)(store, "placement");
 	const effectivePlacement = currentPlacement ?? placement ?? "top";
-	const { borderRadius } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig();
+	const { borderRadius, animationDuration } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig();
 	const defaultBorderRadius = borderRadius["default"];
 	const arrowRef = (0, react.useRef)(null);
 	const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, tooltipShift, onPositionUpdate } = require_components_client_Tooltip_useTooltipContent.useTooltipContent({
@@ -31,7 +31,8 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 		effectivePlacement,
 		maxWidth,
 		borderRadius: defaultBorderRadius,
-		arrowRef
+		arrowRef,
+		animationDuration
 	});
 	const mergedRef = require_hooks_useForkRef.useForkRef(ref, internalRef);
 	const classNames = {
@@ -50,10 +51,11 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 			position: "absolute",
 			width: "full",
 			height: "full",
-			className: require_styles_styler.cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]", "transition-opacity", "duration-200", "ease-in-out")
+			className: require_styles_styler.cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]", "transition-opacity", `duration-[${animationDuration}ms]`, "ease-in-out")
 		}),
 		title: require_styles_styler.getStyles({ tooltipSizeTitle: "default" }),
 		body: require_styles_styler.getStyles({ tooltipSizeBody: "default" }),
+		endContent: require_styles_styler.getStyles({ tooltipSizeEndContent: "default" }),
 		icon: require_styles_styler.getStyles({
 			tooltipSizeIcon: "default",
 			tooltipVariantIcon: "default"
@@ -89,35 +91,46 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 						width: dimensions.width + 2 * (shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
 						height: dimensions.height + 2 * (shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
 						colorInterpolationFilters: "sRGB",
-						children: [shadows.map((shadow, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
-							shadow.spread !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMorphology", {
-								in: "SourceAlpha",
-								operator: shadow.spread > 0 ? "dilate" : "erode",
-								radius: Math.abs(shadow.spread),
-								result: `spread${i}`
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
-								in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
-								stdDeviation: shadow.blur / 2,
-								result: `blurred${i}`
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feOffset", {
-								in: `blurred${i}`,
-								dx: shadow.x,
-								dy: shadow.y,
-								result: `offset${i}`
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
-								floodColor: shadow.color,
-								result: `color${i}`
+						children: [
+							shadows.map((shadow, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+								shadow.spread !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMorphology", {
+									in: "SourceAlpha",
+									operator: shadow.spread > 0 ? "dilate" : "erode",
+									radius: Math.abs(shadow.spread),
+									result: `spread${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
+									in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
+									stdDeviation: shadow.blur / 2,
+									result: `blurred${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feOffset", {
+									in: `blurred${i}`,
+									dx: shadow.x,
+									dy: shadow.y,
+									result: `offset${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
+									floodColor: shadow.color,
+									result: `color${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feComposite", {
+									in: `color${i}`,
+									in2: `offset${i}`,
+									operator: "in",
+									result: `shadow${i}`
+								})
+							] }, i)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMerge", {
+								result: "mergedShadows",
+								children: shadows.map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMergeNode", { in: `shadow${i}` }, i))
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feComposite", {
-								in: `color${i}`,
-								in2: `offset${i}`,
-								operator: "in",
-								result: `shadow${i}`
+								in: "mergedShadows",
+								in2: "SourceAlpha",
+								operator: "out"
 							})
-						] }, i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMerge", { children: shadows.map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMergeNode", { in: `shadow${i}` }, i)) })]
+						]
 					}) }),
 					shadows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 						d: svgPath,
@@ -133,8 +146,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
 				position: "relative",
 				flexDirection: "column",
-				rowGap: "1",
-				className: "z-[3]",
+				className: "z-[3] gap-[inherit]",
 				style: childTransitionStyle,
 				id,
 				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
@@ -146,6 +158,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 						className: classNames.icon
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
 						className: classNames.title,
+						color: "inherit",
 						children: title
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
@@ -153,9 +166,11 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 					columnGap: "1.5",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
 						className: classNames.body,
+						color: "inherit",
 						children
 					}), endContent && !(0, react.isValidElement)(endContent) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
-						variant: "caption1",
+						className: classNames.endContent,
+						color: "inherit",
 						children: endContent
 					}) : endContent]
 				})]