@staffbase/design 18.5.0 → 18.6.0

package/dist/main.cjs

@@ -161,7 +161,6 @@ var ActionMenuContent = react.default.forwardRef(function ActionMenuContent(prop
 			modal: false,
 			initialFocus: -1,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-c13y-component": "action-menu-content",
 				className: (0, clsx.default)("ds-action-menu", className),
 				ref: forkedRef,
 				style: {
@@ -196,7 +195,6 @@ var ActionMenuItem = react.default.forwardRef(function ActionMenuItem(props, ref
 	const itemRef = (0, _floating_ui_react.useMergeRefs)([ref, listItemRef]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		role: "menuitem",
-		"data-c13y-component": "action-menu-item",
 		className: (0, clsx.default)("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__basic-item", `ds-action-menu__basic-item--${variant}`, className),
 		...rest,
 		...context.getItemProps({
@@ -231,7 +229,6 @@ var ActionMenuLinkItem = react.default.forwardRef(function ActionMenuLinkItem(pr
 	const itemRef = (0, _floating_ui_react.useMergeRefs)([ref, listItemRef]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 		role: "menuitem",
-		"data-c13y-component": "action-menu-link-item",
 		className: (0, clsx.default)("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__link-item", className),
 		...rest,
 		...context.getItemProps({
@@ -9111,7 +9108,6 @@ function getDividerStyles(props) {
 function Divider(props) {
 	const { dividerPosition = "horizontal", className = "", fullWidth = false, ...otherProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
-		"data-c13y-component": "divider",
 		className: (0, clsx.default)("ds-divider", `ds-divider--${dividerPosition}`, className),
 		style: getDividerStyles({
 			dividerPosition,
@@ -9865,6 +9861,30 @@ var HelpButton = (0, react.forwardRef)(function HelpButton(props, ref) {
 });
 HelpButton.displayName = "HelpButton";
 //#endregion
+//#region src/utils/splitC13yProps.ts
+/**
+* Splits a props object into its `data-c13y-*` customizability attributes and
+* everything else.
+*
+* Portalled overlays render a positioner wrapper around the visible popup. The
+* public prop type extends the positioner's props, so a consumer-supplied
+* `data-c13y-region` / `data-c13y-purpose` / `data-c13y-id` would otherwise land
+* on the invisible positioner instead of the visible popup that carries
+* `data-c13y-component`. Use this to forward the customizability attributes onto
+* the popup while keeping positioner props (`align`, `sideOffset`, …) on the
+* positioner.
+*/
+function splitC13yProps(props) {
+	const c13y = {};
+	const rest = {};
+	for (const key of Object.keys(props)) if (key.startsWith("data-c13y-")) c13y[key] = props[key];
+	else rest[key] = props[key];
+	return {
+		c13y,
+		rest
+	};
+}
+//#endregion
 //#region src/components/menu/Menu.tsx
 var Root$6 = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Root, {
@@ -9882,14 +9902,16 @@ var Trigger$4 = (props) => {
 };
 var Popup$3 = (0, react.forwardRef)((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Portal, {
 		container,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Positioner, {
 			align: "end",
 			sideOffset: 4,
 			ref,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Popup, {
+				...c13y,
 				"data-c13y-component": "menu-popover",
 				className: (0, clsx.default)("ds-menu__popup", className),
 				children,
@@ -10042,21 +10064,18 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
 	const { title, titleAddon, showCancelButton = false, cancelButtonText, onCancel, showHeaderButton = false, headerButtonIsGhost = true, onHeaderButtonClick, headerButtonText } = props;
 	let headerButton;
 	if (showHeaderButton && onHeaderButtonClick && headerButtonText) if (headerButtonIsGhost) headerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GhostButton, {
-		"data-c13y-purpose": "accept",
 		className: (0, clsx.default)("ds-modal__ghost-button--accept"),
 		variant: "primary",
 		onClick: () => onHeaderButtonClick(),
 		children: headerButtonText
 	});
 	else headerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		"data-c13y-purpose": "accept",
 		className: (0, clsx.default)("ds-modal__button--accept"),
 		variant: "primary",
 		onClick: () => onHeaderButtonClick(),
 		children: headerButtonText
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-c13y-component": "modal-header",
 		className: (0, clsx.default)("ds-modal__header"),
 		ref,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -10070,7 +10089,6 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ds-modal__header-buttons",
 				children: [!!headerButton && headerButton, showCancelButton && cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconGhostButton, {
-					"data-c13y-purpose": "cancel",
 					className: (0, clsx.default)("ds-modal__ghost-button--cancel"),
 					variant: "secondary",
 					style: { padding: "10px" },
@@ -10084,7 +10102,6 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
 			fullWidth: true
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "ds-modal__header-content",
-			"data-c13y-component": "modal-header-content",
 			"data-testid": "header-content-wrapper",
 			children: props.children
 		})] })]
@@ -10150,7 +10167,6 @@ function ModalContent(props) {
 		setScrollShadows(scroll, scrollContent.current);
 	}, [scroll]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-c13y-component": "modal-content",
 		className: (0, clsx.default)("ds-modal__inner-content", scroll && "ds-modal__inner-content--scroll"),
 		"data-testid": "main-content-wrapper",
 		ref: scrollContent,
@@ -10161,20 +10177,17 @@ function ModalContent(props) {
 var ModalFooter = (0, react.forwardRef)(function ModalFooter(props, ref) {
 	const { cancelButtonText, onCancel, footerButtonText, footerButtonVariant, onFooterButtonClick, disableFooterButton } = props;
 	return footerButtonText && onFooterButtonClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-c13y-component": "modal-footer",
 		className: (0, clsx.default)("ds-modal__footer"),
 		"data-testid": "footer",
 		ref,
 		children: [props.children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "ds-modal__footer-buttons",
 			children: [cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				"data-c13y-purpose": "cancel",
 				className: (0, clsx.default)("ds-modal__button--cancel"),
 				variant: "secondary",
 				onClick: () => onCancel(),
 				children: cancelButtonText
 			}), footerButtonText && onFooterButtonClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				"data-c13y-purpose": "accept",
 				className: (0, clsx.default)("ds-modal__button--accept"),
 				variant: footerButtonVariant,
 				disabled: disableFooterButton,
@@ -10261,7 +10274,6 @@ function ModalDialog(props) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingFocusManager, {
 			context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-c13y-component": "modal-dialog",
 				...getFloatingProps({
 					ref: refs.setFloating,
 					className: (0, clsx.default)("ds-modal-dialog", className)
@@ -10283,12 +10295,10 @@ function ModalDialog(props) {
 						className: "ds-modal-dialog__content",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: confirmButtonVariant,
-							"data-c13y-purpose": "accept",
 							onClick: onConfirm,
 							children: confirmButtonText
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "secondary",
-							"data-c13y-purpose": "cancel",
 							onClick: onCancel,
 							children: cancelButtonText
 						})]
@@ -10535,6 +10545,7 @@ var Input$1 = (0, react.forwardRef)((props, ref) => {
 });
 var Popup$2 = (0, react.forwardRef)((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	const { containerRef } = useSearchableMultiSelectContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Portal, {
 		container,
@@ -10542,8 +10553,9 @@ var Popup$2 = (0, react.forwardRef)((props, ref) => {
 			ref,
 			sideOffset: 4,
 			anchor: containerRef,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Popup, {
+				...c13y,
 				"data-c13y-component": "searchable-multi-select-popover",
 				className: (0, clsx.default)("ds-searchable-multi-select__popup", className),
 				children,
@@ -10725,13 +10737,15 @@ var Input = (0, react.forwardRef)((props, ref) => {
 });
 var Popup$1 = (0, react.forwardRef)((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Portal, {
 		container,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Positioner, {
 			sideOffset: 5,
 			ref,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Popup, {
+				...c13y,
 				"data-c13y-component": "searchable-single-select-popover",
 				className: (0, clsx.default)("ds-searchable-single-select__popup", className),
 				children,
@@ -10851,13 +10865,15 @@ var Trigger$2 = (0, react.forwardRef)((props, ref) => {
 });
 var Popup = (0, react.forwardRef)((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Portal, {
 		container,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Positioner, {
 			alignItemWithTrigger: false,
 			ref,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Popup, {
+				...c13y,
 				"data-c13y-component": "select-popover",
 				className: (0, clsx.default)("ds-select__popup", className),
 				children,
@@ -11017,12 +11033,10 @@ function SingleSelect(props) {
 	const errorOrDescription = (0, react.useMemo)(() => {
 		if (error !== void 0 && error !== "") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "ds-single-select__error",
-			"data-c13y-component": "single-select-error",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {}), error]
 		});
 		if (description !== void 0 && description !== "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "ds-single-select__description",
-			"data-c13y-component": "single-select-description",
 			children: description
 		});
 		return null;
@@ -11033,7 +11047,6 @@ function SingleSelect(props) {
 	const dropdownContent = (0, react.useMemo)(() => {
 		if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "ds-single-select__loader",
-			"data-c13y-component": "single-select-loader",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingSpinner, {
 				size: 24,
 				"aria-label": "Loading select options..."
@@ -11041,19 +11054,15 @@ function SingleSelect(props) {
 		});
 		if (options.length === 0 && emptyResultText !== void 0 && emptyResultText !== "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "ds-single-select__no-results",
-			"data-c13y-component": "single-select-empty",
 			children: emptyResultText
 		});
 		const getLabel = (option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "ds-single-select__option-text",
-			"data-c13y-component": "single-select-option-text",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-c13y-component": "single-select-label",
 				className: (0, clsx.default)("ds-single-select__option-label", value?.id === option.id && "ds-single-select__option-label--selected"),
 				...getItemProps({ id: `${listId}-option-${option.id}-label` }),
 				children: optionLabel(option)
 			}), typeof optionDescription === "function" && optionDescription(option) !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-c13y-component": "single-select-option-description",
 				className: (0, clsx.default)("ds-single-select__option-description", value?.id === option.id && "ds-single-select__option-description--selected"),
 				...getItemProps({ id: `${listId}-option-${option.id}-description` }),
 				"aria-hidden": true,
@@ -11061,7 +11070,6 @@ function SingleSelect(props) {
 			})]
 		});
 		return options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-c13y-component": "single-select-option",
 			...getItemProps({
 				onClick: () => {
 					onChange(option);
@@ -11110,7 +11118,6 @@ function SingleSelect(props) {
 			})]
 		}),
 		variantProps.searchable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-c13y-component": "single-select",
 			className: (0, clsx.default)("ds-single-select__input-wrapper", disabled && "ds-single-select__input-wrapper--disabled", error && "ds-single-select__input-wrapper--error"),
 			ref: refs.setReference,
 			onClick: handleWrapperClick,
@@ -11147,7 +11154,6 @@ function SingleSelect(props) {
 				})
 			]
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			"data-c13y-component": "single-select",
 			className: (0, clsx.default)("ds-single-select__trigger", error !== void 0 && error !== "" && "ds-single-select__trigger--error", disabled && "ds-single-select__trigger--disabled"),
 			...getReferenceProps({
 				disabled,
@@ -11196,7 +11202,6 @@ function SingleSelect(props) {
 			"aria-labelledby": ariaLabelledBy || labelId
 		}),
 		ref: floatingRef,
-		"data-c13y-component": "single-select-dropdown",
 		className: (0, clsx.default)("ds-single-select__dropdown"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: dropdownContent })
 	}) }) : null] });
@@ -11345,13 +11350,11 @@ function TextAreaDeprecated(props) {
 		if (handleValueChange) handleValueChange(event);
 	}, [handleValueChange]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-c13y-component": "text-area-deprecated",
 		className: (0, clsx.default)("ds-text-area__container", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: "ds-text-area__label",
 				htmlFor: id,
-				"data-c13y-component": "text-area-deprecated-label",
 				children: [label, requiredLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "ds-text-area__label-required",
 					"aria-hidden": true,
@@ -11360,7 +11363,6 @@ function TextAreaDeprecated(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 				className: (0, clsx.default)("ds-text-area__input", resizable && "resizable", errorMessage && "ds-text-area__input--error"),
-				"data-c13y-component": "text-area-deprecated-input",
 				dir: "auto",
 				id,
 				name: inputId ?? label,
@@ -11375,24 +11377,20 @@ function TextAreaDeprecated(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ds-text-area__footer",
-				"data-c13y-component": "text-area-deprecated-footer",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					id: errorId,
 					"aria-live": errorAriaLive,
 					"aria-atomic": "true",
 					children: errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "ds-text-area__error",
-						"data-c13y-component": "text-area-deprecated-error",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {}), errorMessage]
 					})
 				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "ds-text-area__description",
 					id: descriptionId,
-					"data-c13y-component": "text-area-deprecated-description",
 					children: description
 				})] }), limit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "ds-text-area__counter",
-					"data-c13y-component": "text-area-deprecated-counter",
 					children: [
 						count,
 						"/",
@@ -11441,13 +11439,11 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
 	const inputRef = (0, react.useRef)(null);
 	if (!ref) ref = inputRef;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-c13y-component": "text-input",
 		className: (0, clsx.default)("ds-text-input__container", errorMessage ? "ds-text-input__container--error" : `ds-text-input__container--${variant}`, restProps.disabled && "ds-text-input__container--disabled", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: "ds-text-input__label",
 				htmlFor: inputId,
-				"data-c13y-component": "text-input-label",
 				children: [label, requiredLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "ds-text-input__label-required",
 					"aria-hidden": true,
@@ -11456,7 +11452,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ds-text-input__base-wrapper",
-				"data-c13y-component": "text-input-container",
 				style: { width },
 				onClick: () => ref && "current" in ref && ref.current?.focus(),
 				role: "none",
@@ -11466,7 +11461,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
 						children: icon
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						"data-c13y-component": "text-input-input",
 						className: "ds-text-input__base-input",
 						"aria-invalid": !!errorMessage,
 						id: inputId,
@@ -11486,7 +11480,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
 			errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ds-text-input__error",
 				id: inputErrorId,
-				"data-c13y-component": "text-input-error",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "ds-text-input__error-icon",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {})
@@ -11495,7 +11488,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
 			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: (0, clsx.default)("ds-text-input__description"),
 				id: inputDescriptionId,
-				"data-c13y-component": "text-input-description",
 				children: description
 			})
 		]
@@ -11511,7 +11503,6 @@ function Toggle(props) {
 	const descriptionId = `toggle-${id}-descr`;
 	const inputId = `toggle-${id}-label`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-c13y-component": "toggle",
 		className: (0, clsx.default)("ds-toggle__container", disabled && "ds-toggle__container--disabled", spaceBetween ? "ds-toggle__container--full-width" : "ds-toggle__container--content-width", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: (0, clsx.default)("ds-toggle__wrapper"),
@@ -11520,13 +11511,11 @@ function Toggle(props) {
 					className: (0, clsx.default)("ds-toggle__label-container"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 						className: (0, clsx.default)("ds-toggle__label"),
-						"data-c13y-component": "toggle-label",
 						htmlFor: inputId,
 						children: label
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					"data-c13y-component": "toggle-input",
 					className: "ds-toggle",
 					name,
 					type: "checkbox",
@@ -11539,7 +11528,6 @@ function Toggle(props) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: (0, clsx.default)("ds-toggle__switch-wrapper"),
-					"data-c13y-component": "toggle-switch",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon_default, {
 							"aria-hidden": "true",
@@ -11555,7 +11543,6 @@ function Toggle(props) {
 			]
 		}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 			className: (0, clsx.default)("ds-toggle__description"),
-			"data-c13y-component": "toggle-description",
 			id: descriptionId,
 			children: description
 		})]
@@ -11594,6 +11581,7 @@ var Tooltip = {
 	Content: (0, react.forwardRef)((props, ref) => {
 		const context = (0, react.useContext)(TooltipContext);
 		const { className, children, variant = "default", is = "description", container, ...rest } = props;
+		const { c13y, rest: positionerProps } = splitC13yProps(rest);
 		(0, react.useEffect)(() => {
 			if (context) context.setIs(is);
 		}, [is, context]);
@@ -11601,8 +11589,9 @@ var Tooltip = {
 			container,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Positioner, {
 				sideOffset: 4,
-				...rest,
+				...positionerProps,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Popup, {
+					...c13y,
 					"data-c13y-component": "tooltip-popover",
 					className: (0, clsx.default)(`ds-tooltip--${variant}`, "ds-tooltip", className),
 					id: context?.id,
@@ -11673,7 +11662,6 @@ function TooltipDeprecated(props) {
 				...styles
 			}
 		}),
-		"data-c13y-component": "tooltip-deprecated",
 		className: (0, clsx.clsx)("ds-tooltip-deprecated", className),
 		children: content
 	}) : null] });