@iress-oss/ids-components 6.0.1 → 6.1.0

package/dist/components/Slideout/Slideout.styles.js

@@ -33,6 +33,7 @@ var t = e({
 		footer: { borderBlockStart: "divider" },
 		closeButton: {
 			position: "absolute",
+			zIndex: "[1]",
 			insetInlineEnd: "spacing.1",
 			insetBlockStart: "spacing.1"
 		}

package/dist/components/TabSet/TabSet.d.ts

@@ -3,6 +3,11 @@ import { ReactNode } from 'react';
 import { FormControlValue, IressStyledProps } from '../../types';
 import { IressCustomiseSlot } from '../../interfaces';
 export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Content rendered alongside the tablist in the tab bar row, but outside the tablist itself.
+     * Useful for placing action buttons (e.g. "Add tab") at the end of the tab bar.
+     */
+    append?: ReactNode;
     /**
      * Content to be displayed inside the IressTabs, usually multiple `IressTab`.
      */
@@ -43,6 +48,6 @@ export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
     type?: 'primary' | 'secondary';
 }
 export declare const IressTabSet: {
-    ({ children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, type, ...restProps }: IressTabSetProps): import("react/jsx-runtime").JSX.Element;
+    ({ append, children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, type, ...restProps }: IressTabSetProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/TabSet/TabSet.js

@@ -62,18 +62,18 @@ var g = (e) => {
 		ref: i,
 		style: t
 	});
-}, v = ({ children: a, className: c, defaultSelected: u, layout: v = "top-left", onChange: y, panelStyle: b, selected: x, tabHolderStyle: S, type: C, ...w }) => {
-	let [T, E] = f(null), [D, O] = f(!1), [k, A] = f(!1), j = d(null), M = s({
-		layout: v,
-		overflowStart: D,
-		overflowEnd: k,
-		type: C
+}, v = ({ append: a, children: c, className: u, defaultSelected: v, layout: y = "top-left", onChange: b, panelStyle: x, selected: S, tabHolderStyle: C, type: w, ...T }) => {
+	let [E, D] = f(null), [O, k] = f(!1), [A, j] = f(!1), M = d(null), N = s({
+		layout: y,
+		overflowStart: O,
+		overflowEnd: A,
+		type: w
 	});
 	return l(() => {
-		let e = j.current?.querySelector("[role=\"tablist\"]"), t = () => {
+		let e = M.current?.querySelector("[role=\"tablist\"]"), t = () => {
 			if (e) {
 				let { scrollWidth: t, clientWidth: n, scrollLeft: r } = e;
-				t > n ? (O(r > 1), A(r < t - n - 1)) : (O(!1), A(!1));
+				t > n ? (k(r > 1), j(r < t - n - 1)) : (k(!1), j(!1));
 			}
 		};
 		t(), e?.addEventListener("scroll", t);
@@ -81,40 +81,44 @@ var g = (e) => {
 		return e && typeof ResizeObserver < "u" && (n = new ResizeObserver(t), n.observe(e)), () => {
 			e?.removeEventListener("scroll", t), n?.disconnect();
 		};
-	}, [a]), /* @__PURE__ */ m(o, {
-		defaultSelected: u,
-		onChange: y,
-		panel: T,
-		selected: x,
-		type: C,
+	}, [c]), /* @__PURE__ */ m(o, {
+		defaultSelected: v,
+		onChange: b,
+		panel: E,
+		selected: S,
+		type: w,
 		children: /* @__PURE__ */ m(t.div, {
-			className: e(c, M.root, n.TabSet),
-			...w,
-			children: a && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(t.div, {
-				...S,
-				ref: j,
-				className: e(M.listHolder, S?.className),
+			className: e(u, N.root, n.TabSet),
+			...T,
+			children: c && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(t.div, {
+				...C,
+				ref: M,
+				className: e(N.listHolder, C?.className),
 				children: [
-					D && /* @__PURE__ */ m("div", { className: M.overflowStartIndicator }),
-					k && /* @__PURE__ */ m("div", { className: M.overflowEndIndicator }),
+					O && /* @__PURE__ */ m("div", { className: N.overflowStartIndicator }),
+					A && /* @__PURE__ */ m("div", { className: N.overflowEndIndicator }),
 					/* @__PURE__ */ h(i, {
 						render: /* @__PURE__ */ m("div", {
-							className: M.list,
+							className: N.list,
 							role: "tablist"
 						}),
 						loop: !1,
 						children: [
-							/* @__PURE__ */ m(_, { className: M.activeIndicator }),
-							/* @__PURE__ */ m(g, { className: M.hoverIndicator }),
-							a
+							/* @__PURE__ */ m(_, { className: N.activeIndicator }),
+							/* @__PURE__ */ m(g, { className: N.hoverIndicator }),
+							c
 						]
+					}),
+					a && /* @__PURE__ */ m("div", {
+						className: N.append,
+						children: a
 					})
 				]
 			}), /* @__PURE__ */ m(t.div, {
-				...b,
-				className: e(M.panel, b?.className),
-				"data-testid": b?.["data-testid"] ?? r(w["data-testid"], "panel"),
-				ref: E
+				...x,
+				className: e(N.panel, x?.className),
+				"data-testid": x?.["data-testid"] ?? r(T["data-testid"], "panel"),
+				ref: D
 			})] })
 		})
 	});

package/dist/components/TabSet/TabSet.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root" | "hoverIndicator" | "panel" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
+export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"append" | "list" | "root" | "hoverIndicator" | "panel" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
     layout: {
         'top-left': {
             list: {

package/dist/components/TabSet/TabSet.styles.js

@@ -6,6 +6,7 @@ var t = e({
 		"list",
 		"listHolder",
 		"panel",
+		"append",
 		"activeIndicator",
 		"hoverIndicator",
 		"overflowEndIndicator",
@@ -22,6 +23,8 @@ var t = e({
 			overflowX: "clip",
 			overflowY: "visible",
 			pt: "spacing.2",
+			display: "flex",
+			alignItems: "stretch",
 			_after: {
 				content: "\"\"",
 				position: "absolute",
@@ -32,13 +35,22 @@ var t = e({
 				pointerEvents: "none"
 			}
 		},
+		append: {
+			display: "flex",
+			alignItems: "center",
+			marginLeft: "auto",
+			flexShrink: "[0]",
+			pb: "spacing.1"
+		},
 		list: {
 			display: "flex",
 			flexWrap: "nowrap",
 			scrollable: "x",
 			overflowY: "visible",
 			scrollSnapType: "[x proximity]",
-			position: "relative"
+			position: "relative",
+			flex: "[1 1 auto]",
+			minWidth: "[0]"
 		},
 		panel: {
 			textStyle: "typography.body.md",

package/dist/components/Tag/Tag.styles.d.ts

@@ -48,91 +48,91 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
         '10': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.10}";
-                '--tag-border': "{colors.colour.data.subtle.10}";
+                '--tag-border': "{colors.colour.data.bold.10}";
                 '--tag-color': "{colors.colour.data.bold.10}";
             };
         };
         '20': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.20}";
-                '--tag-border': "{colors.colour.data.subtle.20}";
+                '--tag-border': "{colors.colour.data.bold.20}";
                 '--tag-color': "{colors.colour.data.bold.20}";
             };
         };
         '30': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.30}";
-                '--tag-border': "{colors.colour.data.subtle.30}";
+                '--tag-border': "{colors.colour.data.bold.30}";
                 '--tag-color': "{colors.colour.data.bold.30}";
             };
         };
         '40': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.40}";
-                '--tag-border': "{colors.colour.data.subtle.40}";
+                '--tag-border': "{colors.colour.data.bold.40}";
                 '--tag-color': "{colors.colour.data.bold.40}";
             };
         };
         '50': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.50}";
-                '--tag-border': "{colors.colour.data.subtle.50}";
+                '--tag-border': "{colors.colour.data.bold.50}";
                 '--tag-color': "{colors.colour.data.bold.50}";
             };
         };
         '60': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.60}";
-                '--tag-border': "{colors.colour.data.subtle.60}";
+                '--tag-border': "{colors.colour.data.bold.60}";
                 '--tag-color': "{colors.colour.data.bold.60}";
             };
         };
         '70': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.70}";
-                '--tag-border': "{colors.colour.data.subtle.70}";
+                '--tag-border': "{colors.colour.data.bold.70}";
                 '--tag-color': "{colors.colour.data.bold.70}";
             };
         };
         '80': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.80}";
-                '--tag-border': "{colors.colour.data.subtle.80}";
+                '--tag-border': "{colors.colour.data.bold.80}";
                 '--tag-color': "{colors.colour.data.bold.80}";
             };
         };
         '90': {
             root: {
                 '--tag-bg': "{colors.colour.data.subtle.90}";
-                '--tag-border': "{colors.colour.data.subtle.90}";
+                '--tag-border': "{colors.colour.data.bold.90}";
                 '--tag-color': "{colors.colour.data.bold.90}";
             };
         };
         danger: {
             root: {
                 '--tag-bg': "{colors.colour.system.danger.surface}";
-                '--tag-border': "{colors.colour.system.danger.surface}";
+                '--tag-border': "{colors.colour.system.danger.text}";
                 '--tag-color': "{colors.colour.system.danger.text}";
             };
         };
         info: {
             root: {
                 '--tag-bg': "{colors.colour.system.info.surface}";
-                '--tag-border': "{colors.colour.system.info.surface}";
+                '--tag-border': "{colors.colour.system.info.text}";
                 '--tag-color': "{colors.colour.system.info.text}";
             };
         };
         success: {
             root: {
                 '--tag-bg': "{colors.colour.system.success.surface}";
-                '--tag-border': "{colors.colour.system.success.surface}";
+                '--tag-border': "{colors.colour.system.success.text}";
                 '--tag-color': "{colors.colour.system.success.text}";
             };
         };
         warning: {
             root: {
                 '--tag-bg': "{colors.colour.system.warning.surface}";
-                '--tag-border': "{colors.colour.system.warning.surface}";
+                '--tag-border': "{colors.colour.system.warning.text}";
                 '--tag-color': "{colors.colour.system.warning.text}";
             };
         };
@@ -140,7 +140,7 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
     bordered: {
         true: {
             root: {
-                borderColor: "[currentColor]";
+                borderColor: "[var(--tag-border, {colors.colour.neutral.70})]";
             };
         };
     };

package/dist/components/Tag/Tag.styles.js

@@ -10,10 +10,10 @@ var t = e({
 		root: {
 			contain: "layout style",
 			alignItems: "center",
-			bg: "[var(--tag-bg, {colors.colour.neutral.20})]",
+			bg: "[var(--tag-bg, {colors.colour.neutral.30})]",
 			borderRadius: "radius.system.tag",
 			border: "divider",
-			borderColor: "[var(--tag-border, transparent)]",
+			borderColor: "[var(--tag-bg, {colors.colour.neutral.30})]",
 			color: "[var(--tag-color, {colors.colour.neutral.80})]",
 			display: "inline-flex",
 			gap: "spacing.1",
@@ -68,71 +68,71 @@ var t = e({
 		mode: {
 			10: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.10}",
-				"--tag-border": "{colors.colour.data.subtle.10}",
+				"--tag-border": "{colors.colour.data.bold.10}",
 				"--tag-color": "{colors.colour.data.bold.10}"
 			} },
 			20: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.20}",
-				"--tag-border": "{colors.colour.data.subtle.20}",
+				"--tag-border": "{colors.colour.data.bold.20}",
 				"--tag-color": "{colors.colour.data.bold.20}"
 			} },
 			30: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.30}",
-				"--tag-border": "{colors.colour.data.subtle.30}",
+				"--tag-border": "{colors.colour.data.bold.30}",
 				"--tag-color": "{colors.colour.data.bold.30}"
 			} },
 			40: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.40}",
-				"--tag-border": "{colors.colour.data.subtle.40}",
+				"--tag-border": "{colors.colour.data.bold.40}",
 				"--tag-color": "{colors.colour.data.bold.40}"
 			} },
 			50: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.50}",
-				"--tag-border": "{colors.colour.data.subtle.50}",
+				"--tag-border": "{colors.colour.data.bold.50}",
 				"--tag-color": "{colors.colour.data.bold.50}"
 			} },
 			60: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.60}",
-				"--tag-border": "{colors.colour.data.subtle.60}",
+				"--tag-border": "{colors.colour.data.bold.60}",
 				"--tag-color": "{colors.colour.data.bold.60}"
 			} },
 			70: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.70}",
-				"--tag-border": "{colors.colour.data.subtle.70}",
+				"--tag-border": "{colors.colour.data.bold.70}",
 				"--tag-color": "{colors.colour.data.bold.70}"
 			} },
 			80: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.80}",
-				"--tag-border": "{colors.colour.data.subtle.80}",
+				"--tag-border": "{colors.colour.data.bold.80}",
 				"--tag-color": "{colors.colour.data.bold.80}"
 			} },
 			90: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.90}",
-				"--tag-border": "{colors.colour.data.subtle.90}",
+				"--tag-border": "{colors.colour.data.bold.90}",
 				"--tag-color": "{colors.colour.data.bold.90}"
 			} },
 			danger: { root: {
 				"--tag-bg": "{colors.colour.system.danger.surface}",
-				"--tag-border": "{colors.colour.system.danger.surface}",
+				"--tag-border": "{colors.colour.system.danger.text}",
 				"--tag-color": "{colors.colour.system.danger.text}"
 			} },
 			info: { root: {
 				"--tag-bg": "{colors.colour.system.info.surface}",
-				"--tag-border": "{colors.colour.system.info.surface}",
+				"--tag-border": "{colors.colour.system.info.text}",
 				"--tag-color": "{colors.colour.system.info.text}"
 			} },
 			success: { root: {
 				"--tag-bg": "{colors.colour.system.success.surface}",
-				"--tag-border": "{colors.colour.system.success.surface}",
+				"--tag-border": "{colors.colour.system.success.text}",
 				"--tag-color": "{colors.colour.system.success.text}"
 			} },
 			warning: { root: {
 				"--tag-bg": "{colors.colour.system.warning.surface}",
-				"--tag-border": "{colors.colour.system.warning.surface}",
+				"--tag-border": "{colors.colour.system.warning.text}",
 				"--tag-color": "{colors.colour.system.warning.text}"
 			} }
 		},
-		bordered: { true: { root: { borderColor: "[currentColor]" } } }
+		bordered: { true: { root: { borderColor: "[var(--tag-border, {colors.colour.neutral.70})]" } } }
 	},
 	compoundVariants: [{
 		bordered: !0,

package/dist/components/Tag/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Tag';
 export * from './Tag.styles';
-export * from './TagInput/TagInput';

package/dist/components/Tag/index.js

@@ -1,4 +1,3 @@
 import { tag as e } from "./Tag.styles.js";
 import { IressTag as t } from "./Tag.js";
-import { IressTagInput as n } from "./TagInput/TagInput.js";
-export { t as IressTag, n as IressTagInput, e as tag };
+export { t as IressTag, e as tag };

package/dist/components/{Tag/TagInput → TagInput}/TagInput.d.ts

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { InputBaseElement, InputRef, IressInputProps } from '../../Input';
+import { InputBaseElement, InputRef, IressInputProps } from '../Input';
 import { IressTagProps } from '../Tag';
 export interface IressTagInputProps extends Omit<IressInputProps<string>, 'defaultValue' | 'onChange' | 'prepend' | 'value' | 'rows'> {
     /**

package/dist/components/{Tag/TagInput → TagInput}/TagInput.js

@@ -1,13 +1,13 @@
-import { propagateTestid as e } from "../../../helpers/utility/propagateTestid.js";
-import { useControlledState as t } from "../../../hooks/useControlledState.js";
-import { IressInput as n } from "../../Input/Input.js";
-import { getValueAsEvent as r } from "../../../helpers/form/getValueAsEvent.js";
-import { IressTag as i } from "../Tag.js";
-import { IressInline as a } from "../../Inline/Inline.js";
+import { propagateTestid as e } from "../../helpers/utility/propagateTestid.js";
+import { useControlledState as t } from "../../hooks/useControlledState.js";
+import { IressInput as n } from "../Input/Input.js";
+import { getValueAsEvent as r } from "../../helpers/form/getValueAsEvent.js";
+import { IressTag as i } from "../Tag/Tag.js";
+import { IressInline as a } from "../Inline/Inline.js";
 import { tagInput as o } from "./TagInput.styles.js";
 import { forwardRef as s, useCallback as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-//#region src/components/Tag/TagInput/TagInput.tsx
+//#region src/components/TagInput/TagInput.tsx
 var f = ({ "data-testid": t, onTagDelete: n, onTagDeleteAll: r, onTagDeleteButtonBlur: a, selectedOptionsTagText: o, tags: s = [], tagLimit: c = 5 }) => s.length ? s.length <= c ? s.map((r) => /* @__PURE__ */ u(i, {
 	deleteButtonText: `Delete ${r}`,
 	onDelete: n,

package/dist/components/TagInput/TagInput.styles.d.ts

@@ -0,0 +1 @@
+export declare const tagInput: import('../../styled-system/types').SlotRecipeRuntimeFn<"input" | "tag", import('../../styled-system/types').SlotRecipeVariantRecord<"input" | "tag">>;

package/dist/components/{Tag/TagInput → TagInput}/TagInput.styles.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../../sva-DOLIp5Dd.js";
-//#region src/components/Tag/TagInput/TagInput.styles.ts
+import { t as e } from "../../sva-DOLIp5Dd.js";
+//#region src/components/TagInput/TagInput.styles.ts
 var t = e({
 	slots: ["input", "tag"],
 	base: { input: {

package/dist/components/TagInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TagInput';
+export * from './TagInput.styles';

package/dist/components/TagInput/index.js

@@ -0,0 +1,3 @@
+import { tagInput as e } from "./TagInput.styles.js";
+import { IressTagInput as t } from "./TagInput.js";
+export { t as IressTagInput, e as tagInput };

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FloatingUIAligns, IressStyledProps } from '../../types';
+import { FloatingUIAligns, FloatingUIContainer, IressStyledProps } from '../../types';
 export interface IressTooltipProps extends IressStyledProps {
     /**
      * Sets the alignment of the popover relative to the activator element.
@@ -10,6 +10,11 @@ export interface IressTooltipProps extends IressStyledProps {
      * The element to add a tooltip to.
      */
     children: ReactNode;
+    /**
+     * The container element to render the tooltip into.
+     * Overrides the container set by `IressTooltipProvider`.
+     */
+    container?: FloatingUIContainer;
     /**
      * Sets the tooltip display delay in milliseconds.
      * @default 500
@@ -32,6 +37,6 @@ export interface IressTooltipProps extends IressStyledProps {
     variant?: 'rich';
 }
 export declare const IressTooltip: {
-    ({ children, className, align, delay, open, tooltipText, variant, "data-testid": testid, ...restProps }: IressTooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, align, container, delay, open, tooltipText, variant, "data-testid": testid, ...restProps }: IressTooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Tooltip/Tooltip.js

@@ -5,55 +5,61 @@ import { idsLogger as r } from "../../helpers/utility/idsLogger.js";
 import { propagateTestid as i } from "../../helpers/utility/propagateTestid.js";
 import { toArray as a } from "../../helpers/formatting/toArray.js";
 import { focusableElements as o } from "../../helpers/dom/focusableElements.js";
-import { C as s, S as c, d as l, g as u, h as d, m as f, u as p, w as m, x as h, y as g } from "../../floating-ui.react-COiJC198.js";
-import { tooltip as _ } from "./Tooltip.styles.js";
-import { Fragment as v, useEffect as y, useState as b } from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { C as s, S as c, d as l, g as u, h as d, m as f, s as p, u as m, w as h, x as g, y as _ } from "../../floating-ui.react-COiJC198.js";
+import { tooltip as v } from "./Tooltip.styles.js";
+import { useTooltipContainer as y } from "./hooks/useTooltipContainer.js";
+import { Fragment as b, useEffect as x, useState as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/Tooltip/Tooltip.tsx
-var C = ({ children: C, className: w, align: T = "top", delay: E = 500, open: D = !1, tooltipText: O, variant: k, "data-testid": A, ...j }) => {
-	let M = _({ variant: k }), N = T === "auto", [P, F] = b(D), { refs: I, floatingStyles: L, context: R } = l({
-		placement: N ? void 0 : T,
-		open: P,
-		onOpenChange: F,
+var T = ({ children: T, className: E, align: D = "top", container: O, delay: k = 500, open: A = !1, tooltipText: j, variant: M, "data-testid": N, ...P }) => {
+	let F = v({ variant: M }), I = D === "auto", { container: L } = y(), R = O === void 0 ? L : O, [z, B] = S(A), { refs: V, floatingStyles: H, context: U } = l({
+		placement: I ? void 0 : D,
+		open: z,
+		onOpenChange: B,
 		middleware: [
 			s(5),
-			N ? h() : c(),
-			m()
+			I ? g() : c(),
+			h()
 		]
-	}), { getReferenceProps: z, getFloatingProps: B } = u([
-		d(R, {
+	}), { getReferenceProps: W, getFloatingProps: G } = u([
+		d(U, {
 			move: !1,
-			restMs: E
+			restMs: k
 		}),
-		f(R),
-		p(R),
-		g(R, { role: "tooltip" })
+		f(U),
+		m(U),
+		_(U, { role: "tooltip" })
 	]);
-	return y(() => {
-		!C || !I.reference.current || o(I.reference.current).length > 0 || r("IressTooltip: The content that activates the tooltip is not focusable,\n            which is a failure of WCAG Level AA Success Criterion 1.4.13 - Content on Hover or Focus.\n            To fix this warning, change the activator to either IressButton, IressMenuItem or another focusable component.", "warn");
-	}, [C, I.reference]), /* @__PURE__ */ S(t.div, {
-		className: e(M.root, w, n.Tooltip),
-		...j,
-		"data-testid": A,
-		children: [/* @__PURE__ */ x("div", {
-			className: M.activator,
-			"data-testid": i(A, "activator"),
-			ref: I.setReference,
-			...z(),
-			children: C
-		}), P && /* @__PURE__ */ x("div", {
-			className: M.content,
-			style: L,
-			"data-testid": i(A, "tooltip-text"),
-			ref: I.setFloating,
-			...B(),
-			children: k === "rich" ? a(O).map((e, t) => /* @__PURE__ */ x("span", {
-				className: t === 0 ? M.richName : M.richMeta,
-				children: e
-			}, t)) : a(O).map((e, t, n) => /* @__PURE__ */ S(v, { children: [e, t < n.length - 1 && /* @__PURE__ */ x("br", {})] }, t))
-		})]
+	x(() => {
+		!T || !V.reference.current || o(V.reference.current).length > 0 || r("IressTooltip: The content that activates the tooltip is not focusable,\n            which is a failure of WCAG Level AA Success Criterion 1.4.13 - Content on Hover or Focus.\n            To fix this warning, change the activator to either IressButton, IressMenuItem or another focusable component.", "warn");
+	}, [T, V.reference]);
+	let K = z && /* @__PURE__ */ C("div", {
+		className: F.content,
+		style: H,
+		"data-testid": i(N, "tooltip-text"),
+		ref: V.setFloating,
+		...G(),
+		children: M === "rich" ? a(j).map((e, t) => /* @__PURE__ */ C("span", {
+			className: t === 0 ? F.richName : F.richMeta,
+			children: e
+		}, t)) : a(j).map((e, t, n) => /* @__PURE__ */ w(b, { children: [e, t < n.length - 1 && /* @__PURE__ */ C("br", {})] }, t))
+	});
+	return /* @__PURE__ */ w(t.div, {
+		className: e(F.root, E, n.Tooltip),
+		...P,
+		"data-testid": N,
+		children: [/* @__PURE__ */ C("div", {
+			className: F.activator,
+			"data-testid": i(N, "activator"),
+			ref: V.setReference,
+			...W(),
+			children: T
+		}), R ? /* @__PURE__ */ C(p, {
+			root: R,
+			children: K
+		}) : K]
 	});
 };
-C.displayName = "IressTooltip";
+T.displayName = "IressTooltip";
 //#endregion
-export { C as IressTooltip };
+export { T as IressTooltip };

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

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { FloatingUIContainer } from '../../types';
+export interface IressTooltipProviderProps extends PropsWithChildren {
+    /**
+     * The container element to render nested tooltips into.
+     * By default, tooltips render where their parent is rendered.
+     *
+     * Individual tooltips can override this by setting their own `container` prop.
+     */
+    container?: FloatingUIContainer;
+}
+/**
+ * Provides a shared container context for nested tooltips to render into.
+ *
+ * @example
+ * ```tsx
+ * import { IressTooltipProvider } from '@iress-oss/ids-components';
+ *
+ * <IressTooltipProvider container={document.getElementById('tooltip-root')}>
+ *   {children}
+ * </IressTooltipProvider>
+ * ```
+ */
+export declare const IressTooltipProvider: {
+    ({ children, container, }: IressTooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Tooltip/TooltipProvider.js

@@ -0,0 +1,14 @@
+import { TooltipContainerContext as e } from "./hooks/useTooltipContainer.js";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Tooltip/TooltipProvider.tsx
+var r = ({ children: r, container: i }) => {
+	let a = t(() => ({ container: i }), [i]);
+	return /* @__PURE__ */ n(e.Provider, {
+		value: a,
+		children: r
+	});
+};
+r.displayName = "IressTooltipProvider";
+//#endregion
+export { r as IressTooltipProvider };