@staffbase/design 18.5.0 → 18.7.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({
@@ -4114,6 +4111,56 @@ var MergeRightIcon = react.default.forwardRef((props, ref) => {
 MergeRightIcon.displayName = "MergeRightIcon";
 var MergeRightIcon_default = react.default.memo(MergeRightIcon);
 //#endregion
+//#region src/icons/MicrophoneAltIcon.tsx
+/**
+* THIS IS A GENERATED FILE. PLEASE SEE `scripts/iconGenerator`.
+*/
+var MicrophoneAltIcon = react.default.forwardRef((props, ref) => {
+	const { className, ...rest } = props;
+	const finalClassName = ["ds-icon ds-icon-microphone-alt", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		width: "1em",
+		height: "1em",
+		fill: "currentColor",
+		...rest,
+		className: finalClassName,
+		ref,
+		"data-c13y-component": "icon",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 20a7.508 7.508 0 0 1-7.5-7.5V10a1 1 0 0 0-2 0v2.5a9.514 9.514 0 0 0 8.282 9.422.249.249 0 0 1 .218.248V23a1 1 0 0 0 2 0v-.83a.249.249 0 0 1 .218-.248 9.433 9.433 0 0 0 3.859-1.4.25.25 0 0 0 .043-.388l-1.091-1.091a.25.25 0 0 0-.3-.04A7.448 7.448 0 0 1 12 20z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6.427 9.447A.25.25 0 0 0 6 9.623V12.5a6 6 0 0 0 8.471 5.467.25.25 0 0 0 .074-.4z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M23.707 22.3l-3.952-3.952a.248.248 0 0 1-.026-.322A9.453 9.453 0 0 0 21.5 12.5V10a1 1 0 0 0-2 0v2.5a7.459 7.459 0 0 1-1.157 4 .249.249 0 0 1-.184.114.246.246 0 0 1-.2-.071l-.728-.727a.251.251 0 0 1-.039-.3A5.963 5.963 0 0 0 18 12.5V6A6 6 0 0 0 6.244 4.309a.251.251 0 0 1-.417.106L1.707.3A1.013 1.013 0 0 0 .293.3a1 1 0 0 0 0 1.414l22 22 .007.007a1 1 0 0 0 1.4-1.425z" })
+		]
+	});
+});
+MicrophoneAltIcon.displayName = "MicrophoneAltIcon";
+var MicrophoneAltIcon_default = react.default.memo(MicrophoneAltIcon);
+//#endregion
+//#region src/icons/MicrophoneIcon.tsx
+/**
+* THIS IS A GENERATED FILE. PLEASE SEE `scripts/iconGenerator`.
+*/
+var MicrophoneIcon = react.default.forwardRef((props, ref) => {
+	const { className, ...rest } = props;
+	const finalClassName = ["ds-icon ds-icon-microphone", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 19 24",
+		width: "1em",
+		height: "1em",
+		fill: "currentColor",
+		...rest,
+		className: finalClassName,
+		ref,
+		"data-c13y-component": "icon",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3.49983 6.00007C3.49983 2.68632 6.18615 0 9.4999 0C12.8137 0 15.5 2.68632 15.5 6.00007V12.5002C15.5 15.8139 12.8137 18.5002 9.4999 18.5002C6.18615 18.5002 3.49983 15.8139 3.49983 12.5002V6.00007Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18.0002 8.99982C18.2654 8.99982 18.5197 9.10525 18.7073 9.29279C18.8948 9.48033 19.0002 9.73461 19.0002 9.99983V12.4999C18.9973 14.8077 18.1557 17.0361 16.632 18.7695C15.1084 20.5028 13.0063 21.623 10.7179 21.9218C10.6576 21.9295 10.6018 21.9592 10.5617 22.0049C10.5217 22.0505 10.4999 22.1092 10.5001 22.1699V23C10.5001 23.2652 10.3947 23.5195 10.2072 23.707C10.0196 23.8946 9.76534 24 9.50012 24C9.2349 24 8.98061 23.8946 8.79308 23.707C8.60554 23.5195 8.5001 23.2652 8.5001 23V22.1699C8.50031 22.1092 8.47853 22.0505 8.43858 22.0049C8.39846 21.9592 8.34261 21.9295 8.28233 21.9218C5.99395 21.623 3.89185 20.5028 2.36819 18.7695C0.844525 17.0361 0.00288563 14.8077 0 12.4999V9.99983C0 9.73461 0.105434 9.48033 0.292972 9.29279C0.480511 9.10525 0.734793 8.99982 1.00001 8.99982C1.26523 8.99982 1.51951 9.10525 1.70705 9.29279C1.89459 9.48033 2.00002 9.73461 2.00002 9.99983V12.4999C2.00214 14.4884 2.79319 16.3946 4.19927 17.8007C5.60535 19.2068 7.51162 19.9978 9.50012 20C11.4886 19.9978 13.3949 19.2068 14.801 17.8007C16.207 16.3946 16.9981 14.4884 17.0002 12.4999V9.99983C17.0002 9.73461 17.1056 9.48033 17.2932 9.29279C17.4807 9.10525 17.735 8.99982 18.0002 8.99982Z" })]
+	});
+});
+MicrophoneIcon.displayName = "MicrophoneIcon";
+var MicrophoneIcon_default = react.default.memo(MicrophoneIcon);
+//#endregion
 //#region src/icons/MinusCircleIcon.tsx
 /**
 * THIS IS A GENERATED FILE. PLEASE SEE `scripts/iconGenerator`.
@@ -8556,6 +8603,8 @@ var iconList = {
 	"map-pin": MapPinIcon_default,
 	"merge-left": MergeLeftIcon_default,
 	"merge-right": MergeRightIcon_default,
+	microphone: MicrophoneIcon_default,
+	"microphone-alt": MicrophoneAltIcon_default,
 	"minus-circle": MinusCircleIcon_default,
 	mobile: MobileIcon_default,
 	move: MoveIcon_default,
@@ -9111,7 +9160,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 +9913,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 +9954,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 +10116,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 +10141,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 +10154,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 +10219,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 +10229,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 +10326,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 +10347,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 +10597,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 +10605,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 +10789,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 +10917,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 +11085,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 +11099,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 +11106,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 +11122,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 +11170,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 +11206,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 +11254,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 +11402,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 +11415,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 +11429,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 +11491,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 +11504,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 +11513,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 +11532,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 +11540,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 +11555,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 +11563,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 +11580,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 +11595,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 +11633,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 +11641,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 +11714,6 @@ function TooltipDeprecated(props) {
 				...styles
 			}
 		}),
-		"data-c13y-component": "tooltip-deprecated",
 		className: (0, clsx.clsx)("ds-tooltip-deprecated", className),
 		children: content
 	}) : null] });
@@ -11840,6 +11880,8 @@ exports.MapPinIcon = MapPinIcon_default;
 exports.Menu = Menu;
 exports.MergeLeftIcon = MergeLeftIcon_default;
 exports.MergeRightIcon = MergeRightIcon_default;
+exports.MicrophoneAltIcon = MicrophoneAltIcon_default;
+exports.MicrophoneIcon = MicrophoneIcon_default;
 exports.MinusCircleIcon = MinusCircleIcon_default;
 exports.MobileIcon = MobileIcon_default;
 exports.Modal = Modal;