@staffbase/design 20.4.0 → 21.0.0

package/dist/main.cjs

@@ -27,8 +27,6 @@ let es_toolkit = require("es-toolkit");
 let motion_react = require("motion/react");
 let _base_ui_react_menu = require("@base-ui/react/menu");
 let _base_ui_react_number_field = require("@base-ui/react/number-field");
-let _radix_ui_react_popover = require("@radix-ui/react-popover");
-_radix_ui_react_popover = require_chunk.__toESM(_radix_ui_react_popover, 1);
 let _base_ui_react_combobox = require("@base-ui/react/combobox");
 let _base_ui_react_radio = require("@base-ui/react/radio");
 let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
@@ -37,6 +35,8 @@ let _base_ui_react_switch = require("@base-ui/react/switch");
 let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 _radix_ui_react_tabs = require_chunk.__toESM(_radix_ui_react_tabs, 1);
 let _base_ui_react_input = require("@base-ui/react/input");
+let _base_ui_react_toggle = require("@base-ui/react/toggle");
+let _base_ui_react_toggle_group = require("@base-ui/react/toggle-group");
 let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
 //#region src/components/actionMenu/ActionMenuContext.tsx
 function useActionMenu({ listRef, placement = "bottom-start", open: controlledOpen, onOpenChange: setControlledOpen }) {
@@ -359,7 +359,7 @@ var AlertDialog = {
 };
 //#endregion
 //#region src/components/avatar/Avatar.tsx
-var Root$10 = (0, react.forwardRef)((props, ref) => {
+var Root$9 = (0, react.forwardRef)((props, ref) => {
 	const { size = 40, className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Root, {
 		ref,
@@ -387,7 +387,7 @@ function deriveColor(name) {
 	return AVATAR_COLORS[name.split("").reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0) % AVATAR_COLORS.length] ?? "purple";
 }
 var Avatar = {
-	Root: Root$10,
+	Root: Root$9,
 	Fallback: (0, react.forwardRef)((props, ref) => {
 		const { className, name, ...rest } = props;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Fallback, {
@@ -2077,17 +2077,17 @@ var EmailBouncesIcon = react.default.forwardRef((props, ref) => {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: "M14.5833 7.91713C15.4869 7.91768 16.3807 8.10404 17.2092 8.46463C17.2736 8.49196 17.3475 8.48524 17.4059 8.44671C17.4644 8.40819 17.4997 8.34297 17.5 8.27296V1.45879C17.5 1.40472 17.467 1.35614 17.4167 1.33629C17.3673 1.31602 17.3105 1.32717 17.2725 1.36463L10.1667 8.47046C9.38372 9.25156 8.11628 9.25156 7.33333 8.47046L0.225834 1.36463C0.187845 1.32693 0.130905 1.31578 0.0815066 1.33638C0.0321083 1.35698 -4.74736e-05 1.40527 2.38713e-07 1.45879V10.2088C-0.000221003 10.5956 0.153353 10.9667 0.426892 11.2402C0.70043 11.5138 1.07149 11.6673 1.45833 11.6671H8.46917C8.54738 11.6669 8.619 11.6232 8.655 11.5538C9.79214 9.32518 12.0814 7.92087 14.5833 7.91713Z",
-				fill: "#74747B"
+				fill: "currentColor"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: "M8.10531 7.69667C8.46132 8.05261 9.03846 8.05261 9.39447 7.69667L16.457 0.634167C16.5546 0.536741 16.5888 0.392543 16.5453 0.261667C16.4653 0.0225 16.242 0 16.0411 0H1.45781C1.25781 0 1.03281 0.0225 0.953641 0.261667C0.910981 0.392577 0.945075 0.536351 1.04197 0.634167L8.10531 7.69667Z",
-				fill: "#74747B"
+				fill: "currentColor"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				fillRule: "evenodd",
 				clipRule: "evenodd",
 				d: "M9.16699 14.5827C9.16699 11.5911 11.5921 9.16602 14.5837 9.16602C17.5737 9.16969 19.9967 11.5927 20.0003 14.5827C20.0003 17.5742 17.5752 19.9993 14.5837 19.9993C11.5921 19.9993 9.16699 17.5742 9.16699 14.5827ZM12.3898 12.3888C12.1518 12.6268 12.145 13.0106 12.3745 13.2568L13.5528 14.4352C13.6335 14.517 13.6335 14.6484 13.5528 14.7302L12.3745 15.9085C12.2073 16.0643 12.1385 16.299 12.195 16.5204C12.2516 16.7419 12.4245 16.9148 12.6459 16.9713C12.8674 17.0279 13.102 16.9591 13.2578 16.7918L14.4362 15.6135C14.5179 15.5328 14.6494 15.5328 14.7312 15.6135L15.9095 16.7918C16.0653 16.9591 16.3 17.0279 16.5214 16.9713C16.7428 16.9148 16.9158 16.7419 16.9723 16.5204C17.0289 16.299 16.96 16.0643 16.7928 15.9085L15.6145 14.7302C15.5338 14.6484 15.5338 14.517 15.6145 14.4352L16.7928 13.2568C16.96 13.101 17.0289 12.8664 16.9723 12.6449C16.9158 12.4235 16.7428 12.2506 16.5214 12.194C16.3 12.1375 16.0653 12.2063 15.9095 12.3735L14.7312 13.5518C14.6494 13.6325 14.5179 13.6325 14.4362 13.5518L13.2578 12.3735C13.0116 12.144 12.6278 12.1508 12.3898 12.3888Z",
-				fill: "#74747B"
+				fill: "currentColor"
 			})
 		]
 	});
@@ -8949,7 +8949,7 @@ var ICONS = {
 	warning: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WarningIcon_default, {}),
 	critical: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {})
 };
-var Root$9 = (0, react.forwardRef)((props, ref) => {
+var Root$8 = (0, react.forwardRef)((props, ref) => {
 	const { children, className, variant = "info", size = "sm", layout = "standalone", ...restProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-c13y-component": "banner",
@@ -8965,7 +8965,7 @@ var Root$9 = (0, react.forwardRef)((props, ref) => {
 		})]
 	});
 });
-Root$9.displayName = "Banner.Root";
+Root$8.displayName = "Banner.Root";
 var Close$3 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...restProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -8978,7 +8978,7 @@ var Close$3 = (0, react.forwardRef)((props, ref) => {
 	});
 });
 Close$3.displayName = "Banner.Close";
-var Banner = Object.assign(Root$9, { Close: Close$3 });
+var Banner = Object.assign(Root$8, { Close: Close$3 });
 //#endregion
 //#region src/components/bottomSheet/BottomSheet.tsx
 var Trigger$6 = (props) => {
@@ -9097,18 +9097,7 @@ var ButtonDeprecated = (0, react.forwardRef)(function Button(props, ref) {
 		]
 	});
 });
-/** @deprecated Use Button component with iconOnly instead */
-var IconButton = (0, react.forwardRef)(function IconButton(props, ref) {
-	const { icon, className = "", variant = "primary", ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		className: (0, clsx.default)("ds-button-deprecated", "ds-icon-button", `ds-button-deprecated--${variant}`, `${className}`),
-		...rest,
-		ref,
-		children: icon
-	});
-});
 ButtonDeprecated.displayName = "Button";
-IconButton.displayName = "IconButton";
 //#endregion
 //#region src/components/card/Card.tsx
 var Card = (0, react.forwardRef)((props, ref) => {
@@ -9351,7 +9340,7 @@ function Divider(props) {
 Divider.displayName = "Divider";
 //#endregion
 //#region src/components/empty/Empty.tsx
-var Root$8 = (0, react.forwardRef)((props, ref) => {
+var Root$7 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-c13y-component": "empty",
@@ -9360,7 +9349,7 @@ var Root$8 = (0, react.forwardRef)((props, ref) => {
 		ref
 	});
 });
-Root$8.displayName = "Empty.Root";
+Root$7.displayName = "Empty.Root";
 var Media = (0, react.forwardRef)((props, ref) => {
 	const { className, size = "md", ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -9394,7 +9383,7 @@ var Description$1 = (0, react.forwardRef)((props, ref) => {
 });
 Description$1.displayName = "Empty.Description";
 var Empty = {
-	Root: Root$8,
+	Root: Root$7,
 	Media,
 	Title,
 	Description: Description$1
@@ -9431,7 +9420,7 @@ function EmptyState(props) {
 EmptyState.displayName = "EmptyState";
 //#endregion
 //#region src/components/field/Field.tsx
-var Root$7 = (0, react.forwardRef)((props, ref) => {
+var Root$6 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Root, {
 		"data-c13y-component": "field",
@@ -9477,12 +9466,12 @@ var ErrorMessage = (0, react.forwardRef)((props, ref) => {
 	});
 });
 var Field = {
-	Root: Root$7,
+	Root: Root$6,
 	Label,
 	Description,
 	Error: ErrorMessage
 };
-Root$7.displayName = "Field.Root";
+Root$6.displayName = "Field.Root";
 Label.displayName = "Field.Label";
 Description.displayName = "Field.Description";
 ErrorMessage.displayName = "Field.Error";
@@ -10048,38 +10037,6 @@ var FilterTrigger = (0, react.memo)((0, react.forwardRef)(function FilterTrigger
 }));
 Filter.displayName = "Filter";
 //#endregion
-//#region src/components/ghostButton/GhostButton.tsx
-/** @deprecated Use Button with variant="ghost" instead */
-var GhostButton = (0, react.forwardRef)(function GhostButton(props, ref) {
-	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		className: `ds-ghost-button ds-ghost-button--${variant} ${className}`,
-		disabled,
-		...rest,
-		ref,
-		children: [
-			iconPosition === "leading" ? icon : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, clsx.default)("ds-ghost-button__content"),
-				children
-			}),
-			iconPosition === "trailing" ? icon : null
-		]
-	});
-});
-/** @deprecated Use Button with variant="ghost" and iconOnly instead */
-var IconGhostButton = (0, react.forwardRef)(function IconGhostButton(props, ref) {
-	const { icon, className = "", variant = "primary", ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		className: (0, clsx.default)("ds-ghost-button", "ds-ghost-icon-button", `ds-ghost-button--${variant}`, `${className}`),
-		...rest,
-		ref,
-		children: icon
-	});
-});
-GhostButton.displayName = "GhostButton";
-IconGhostButton.displayName = "IconGhostButton";
-//#endregion
 //#region src/components/growl/Growl.tsx
 /** @deprecated Not an accessible UI pattern — no replacement */
 var PlainGrowl = (0, react.forwardRef)(function PlainGrowl(props, ref) {
@@ -10166,7 +10123,7 @@ function splitC13yProps(props) {
 }
 //#endregion
 //#region src/components/menu/Menu.tsx
-var Root$6 = (props) => {
+var Root$5 = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Root, {
 		modal: false,
 		...props
@@ -10268,7 +10225,7 @@ var SubMenuTrigger = (0, react.forwardRef)((props, ref) => {
 	});
 });
 var Menu = {
-	Root: Root$6,
+	Root: Root$5,
 	Trigger: Trigger$4,
 	Popup: Popup$3,
 	Item: Item$4,
@@ -10343,9 +10300,9 @@ var useModalContext = () => {
 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, {
+	if (showHeaderButton && onHeaderButtonClick && headerButtonText) if (headerButtonIsGhost) headerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		className: (0, clsx.default)("ds-modal__ghost-button--accept"),
-		variant: "primary",
+		variant: "ghost",
 		onClick: () => onHeaderButtonClick(),
 		children: headerButtonText
 	});
@@ -10368,13 +10325,16 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
 				}), titleAddon]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ds-modal__header-buttons",
-				children: [!!headerButton && headerButton, showCancelButton && cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconGhostButton, {
+				children: [!!headerButton && headerButton, showCancelButton && cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 					className: (0, clsx.default)("ds-modal__ghost-button--cancel"),
-					variant: "secondary",
+					variant: "ghost",
+					color: "neutral",
+					iconOnly: true,
 					style: { padding: "10px" },
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon_default, { className: "text-icon-neutral-medium" }),
 					title: cancelButtonText,
-					onClick: () => onCancel()
+					"aria-label": cancelButtonText,
+					onClick: () => onCancel(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon_default, { className: "text-icon-neutral-medium" })
 				})]
 			})]
 		}), !!props.children && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {
@@ -10591,7 +10551,7 @@ function ModalDialog(props) {
 ModalDialog.displayName = "ModalDialog";
 //#endregion
 //#region src/components/numberStepper/NumberStepper.tsx
-var Root$5 = (0, react.forwardRef)((props, ref) => {
+var Root$4 = (0, react.forwardRef)((props, ref) => {
 	const { className, children, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Root, {
 		ref,
@@ -10635,12 +10595,12 @@ var Increment = (0, react.forwardRef)((props, ref) => {
 	});
 });
 var NumberStepper = {
-	Root: Root$5,
+	Root: Root$4,
 	Increment,
 	Input: Input$2,
 	Decrement
 };
-Root$5.displayName = "NumberStepper.Root";
+Root$4.displayName = "NumberStepper.Root";
 Input$2.displayName = "NumberStepper.Input";
 Decrement.displayName = "NumberStepper.Decrement";
 Increment.displayName = "NumberStepper.Increment";
@@ -10659,18 +10619,17 @@ var Pill = (0, react.forwardRef)((props, ref) => {
 Pill.displayName = "Pill";
 //#endregion
 //#region src/components/popover/Popover.tsx
-var Root$4 = _radix_ui_react_popover.Root;
-var Anchor = _radix_ui_react_popover.Anchor;
-var Trigger$3 = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
-	"data-c13y-component": "popover-trigger",
-	asChild: true,
-	...props,
-	ref
-}));
-Trigger$3.displayName = "Popover.Trigger";
+var Trigger$3 = (props) => {
+	const { children, ref, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Trigger, {
+		render: children,
+		ref,
+		...rest
+	});
+};
 var Close = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Close, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Close, {
 		"data-c13y-component": "button",
 		"data-c13y-purpose": "close",
 		ref,
@@ -10679,27 +10638,27 @@ var Close = (0, react.forwardRef)((props, ref) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon_default, {})
 	});
 });
-Close.displayName = "Popover.Close";
 var Content$2 = (0, react.forwardRef)((props, ref) => {
-	const { className, container, ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, {
+	const { className, children, container, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Portal, {
 		container,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
-			"data-c13y-component": "popover",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Positioner, {
 			sideOffset: 4,
-			className: (0, clsx.default)("ds-popover__content", className),
-			ref,
-			...rest
+			...rest,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Popup, {
+				"data-c13y-component": "popover",
+				className: (0, clsx.default)("ds-popover__content", className),
+				children,
+				ref
+			})
 		})
 	});
 });
-Content$2.displayName = "Popover.Content";
 var Popover = {
-	Root: Root$4,
+	Root: _base_ui_react.Popover.Root,
 	Content: Content$2,
 	Trigger: Trigger$3,
-	Close,
-	Anchor
+	Close
 };
 //#endregion
 //#region src/components/radio/Radio.tsx
@@ -11551,6 +11510,61 @@ var Switch = (0, react.forwardRef)((props, ref) => {
 	});
 });
 //#endregion
+//#region src/components/switchDeprecated/SwitchDeprecated.tsx
+/** @deprecated Use Switch component instead */
+function SwitchDeprecated(props) {
+	const { checked, disabled, name, label, description, onChange, spaceBetween, className = "", ref } = props;
+	const id = (0, react.useId)();
+	const descriptionId = `toggle-${id}-descr`;
+	const inputId = `toggle-${id}-label`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("ds-switch-deprecated__container", disabled && "ds-switch-deprecated__container--disabled", spaceBetween ? "ds-switch-deprecated__container--full-width" : "ds-switch-deprecated__container--content-width", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("ds-switch-deprecated__wrapper"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)("ds-switch-deprecated__label-container"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						className: (0, clsx.default)("ds-switch-deprecated__label"),
+						htmlFor: inputId,
+						children: label
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "ds-switch-deprecated",
+					name,
+					type: "checkbox",
+					onChange,
+					id: inputId,
+					disabled,
+					"aria-describedby": description ? descriptionId : void 0,
+					checked,
+					ref
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, clsx.default)("ds-switch-deprecated__switch-wrapper"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon_default, {
+							"aria-hidden": "true",
+							className: (0, clsx.default)("ds-switch-deprecated__inner", "ds-switch-deprecated__inner--on")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon_default, {
+							"aria-hidden": "true",
+							className: (0, clsx.default)("ds-switch-deprecated__inner", "ds-switch-deprecated__inner--off")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("ds-switch-deprecated__switch") })
+					]
+				})
+			]
+		}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: (0, clsx.default)("ds-switch-deprecated__description"),
+			id: descriptionId,
+			children: description
+		})]
+	});
+}
+SwitchDeprecated.displayName = "SwitchDeprecated";
+//#endregion
 //#region src/components/tabs/Tabs.tsx
 var Root$1 = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.Root, {
 	"data-c13y-component": "tabs",
@@ -11763,60 +11777,29 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
 TextInput.displayName = "TextInput";
 //#endregion
 //#region src/components/toggle/Toggle.tsx
-/** @deprecated Use Switch component instead */
-function Toggle(props) {
-	const { checked, disabled, name, label, description, onChange, spaceBetween, className = "", ref } = props;
-	const id = (0, react.useId)();
-	const descriptionId = `toggle-${id}-descr`;
-	const inputId = `toggle-${id}-label`;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		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"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, clsx.default)("ds-toggle__label-container"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-						className: (0, clsx.default)("ds-toggle__label"),
-						htmlFor: inputId,
-						children: label
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					className: "ds-toggle",
-					name,
-					type: "checkbox",
-					onChange,
-					id: inputId,
-					disabled,
-					"aria-describedby": description ? descriptionId : void 0,
-					checked,
-					ref
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, clsx.default)("ds-toggle__switch-wrapper"),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon_default, {
-							"aria-hidden": "true",
-							className: (0, clsx.default)("ds-toggle__inner", "ds-toggle__inner--on")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon_default, {
-							"aria-hidden": "true",
-							className: (0, clsx.default)("ds-toggle__inner", "ds-toggle__inner--off")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("ds-toggle__switch") })
-					]
-				})
-			]
-		}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: (0, clsx.default)("ds-toggle__description"),
-			id: descriptionId,
-			children: description
-		})]
+var Toggle = (0, react.forwardRef)((props, ref) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toggle.Toggle, {
+		"data-c13y-component": "toggle",
+		className: (0, clsx.default)("ds-toggle", className),
+		ref,
+		...rest
 	});
-}
+});
 Toggle.displayName = "Toggle";
 //#endregion
+//#region src/components/toggleGroup/ToggleGroup.tsx
+var ToggleGroup = (0, react.forwardRef)((props, ref) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toggle_group.ToggleGroup, {
+		"data-c13y-component": "toggle-group",
+		className: (0, clsx.default)("ds-toggle-group", className),
+		ref,
+		...rest
+	});
+});
+ToggleGroup.displayName = "ToggleGroup";
+//#endregion
 //#region src/components/tooltip/Tooltip.tsx
 var TooltipContext = (0, react.createContext)(null);
 var Root = (props) => {
@@ -12056,7 +12039,6 @@ exports.FolderShareIcon = FolderShareIcon_default;
 exports.FontsIcon = FontsIcon_default;
 exports.FootballIcon = FootballIcon_default;
 exports.GalleryIcon = GalleryIcon_default;
-exports.GhostButton = GhostButton;
 exports.GlobeIcon = GlobeIcon_default;
 exports.GridIcon = GridIcon_default;
 exports.GroupConversationAddIcon = GroupConversationAddIcon_default;
@@ -12073,8 +12055,6 @@ exports.HierarchyChartIcon = HierarchyChartIcon_default;
 exports.HomeIcon = HomeIcon_default;
 exports.HouseIcon = HouseIcon_default;
 exports.Icon = Icon;
-exports.IconButton = IconButton;
-exports.IconGhostButton = IconGhostButton;
 exports.ImageIcon = ImageIcon_default;
 exports.ImageUploadIcon = ImageUploadIcon_default;
 exports.InfoIcon = InfoIcon_default;
@@ -12214,6 +12194,7 @@ exports.StarAltIcon = StarAltIcon_default;
 exports.StarIcon = StarIcon_default;
 exports.StyleChip = StyleChip;
 exports.Switch = Switch;
+exports.SwitchDeprecated = SwitchDeprecated;
 exports.TabletIcon = TabletIcon_default;
 exports.Tabs = Tabs;
 exports.TagIcon = TagIcon_default;
@@ -12237,6 +12218,7 @@ exports.ThumbDownIcon = ThumbDownIcon_default;
 exports.ThumbUpAltIcon = ThumbUpAltIcon_default;
 exports.ThumbUpIcon = ThumbUpIcon_default;
 exports.Toggle = Toggle;
+exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.TooltipDeprecated = TooltipDeprecated;
 exports.TranslationOnIcon = TranslationOnIcon_default;