@preply/ds-web-lib 11.0.0 → 11.1.0

package/dist/Accordion-B0hR-tcI.js

@@ -0,0 +1,96 @@
+"use client";
+import { t as Icon } from "./Icon-CixAeOSd.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as Text } from "./Text-CaOF75Z-.js";
+import { useOnOpenChange } from "./components/Accordion/hooks/useOnOpenChange.js";
+import { forwardRef } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+import TokyoUIChevronDown from "@preply/ds-media-icons/dist/24/TokyoUIChevronDown.svg";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import './assets/Accordion.css';var index_module_default = {
+	accordion: "accordion__GSBx4",
+	"--dsInternalSimulation-focus": "_--dsInternalSimulation-focus__XvNco",
+	"--dsInternalSimulation-noAnimation": "_--dsInternalSimulation-noAnimation__eyg-P"
+};
+//#endregion
+//#region src/components/Accordion/Accordion.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* An Accordion container.
+*
+* Add `AccordionItem` children to render a list of disclosable contents.
+*
+* @example
+* <Accordion>
+*     <AccordionItem>
+*         <AccordionHeader>
+*             Is Preply the best platform for learning a language?
+*         </AccordionHeader>
+*         <AccordionContent>Of course it is!</AccordionContent>
+*     </AccordionItem>
+*     <AccordionItem>
+*         <AccordionHeader>Why?</AccordionHeader>
+*         <AccordionContent>
+*             If you are wondering, it means you have not tried it out yet!
+*         </AccordionContent>
+*     </AccordionItem>
+* </Accordion>
+*
+* @see AccordionItem
+* @see AccordionHeader
+* @see AccordionContent
+*/
+var Accordion = ({ dataset, children, "aria-label": ariaLabel }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: index_module_default.accordion,
+		"aria-label": ariaLabel,
+		...getDatasetProps(dataset),
+		"data-preply-ds-component": webComponentNames.Accordion,
+		children
+	});
+};
+/**
+* A single `Accordion` item, the wrapper of AccordionHeader and AccordionContent.
+*/
+var AccordionItem = forwardRef(function AccordionItem({ open, name, dataset, children, onOpenChange, dsInternalSimulation }, ref) {
+	const { mergedRef } = useOnOpenChange({
+		ref,
+		onOpenChange
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("details", {
+		ref: mergedRef,
+		name,
+		open,
+		...getDatasetProps(dataset),
+		className: index_module_default[`--dsInternalSimulation-${dsInternalSimulation}`],
+		children
+	});
+});
+/**
+* The header of a single `Accordion` item, to be used in conjunction with AccordionItem and wrapped inside AccordionContent.
+*/
+var AccordionHeader = forwardRef(function AccordionItem({ dataset, children, onClick }, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
+		ref,
+		...getDatasetProps(dataset),
+		onClick,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			variant: "default-semibold",
+			children
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { svg: TokyoUIChevronDown })]
+	});
+});
+/**
+* The content of a single `Accordion` item, to be used in conjunction with AccordionHeader wrapped inside AccordionContent.
+*/
+var AccordionContent = forwardRef(function AccordionItem({ dataset, children }, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		tag: "div",
+		variant: "small-regular",
+		ref,
+		...getDatasetProps(dataset),
+		children
+	});
+});
+//#endregion
+export { AccordionItem as i, AccordionContent as n, AccordionHeader as r, Accordion as t };

package/dist/AlertBannerProvider-Cf7w9AOq.js

@@ -0,0 +1,76 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { createContext, useContext, useState } from "react";
+import { useIntl } from "react-intl";
+import './assets/AlertBannerProvider.css';var AlertBanner_module_default = {
+	alertBannerHost: "alertBannerHost__LKZaB",
+	alertBanner: "alertBanner__C0J87",
+	icon: "icon__5M08K",
+	description: "description__pXWo6",
+	action: "action__uKuZ4"
+};
+//#endregion
+//#region src/components/AlertBanner/AlertBannerProvider.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var AlertBannerHostContext = createContext({ hostEl: null });
+/**
+* If you have issues with AlertBannerHostContext, ensures `AlertBannerProvider` is put at the top of
+* your app component tree
+*
+* @see AlertBannerProvider
+*/
+function useAlertBannerHost() {
+	const ctx = useContext(AlertBannerHostContext);
+	if (!ctx) throw new Error("useAlertBannerHost must be used within AlertBannerHostContext");
+	return ctx.hostEl;
+}
+/**
+* A region where all the `AlertBanner`s will be rendered into, and announced accordingly. It should
+* be the first element of the page.
+*
+* From an affordance perspective:
+* 1. Sighted users can see the page-wide banner with their eyes. The visual prominence ensures the
+* alerts are noticed.
+* 2. Screen readers announce the banners when they are added, and the text content of the banner
+* help the users to understand the level of importance.
+*
+* For blind users readers, it's important that AlertBannerProvider wraps the whole app so its DOM
+* element is put at the top of the page, because:
+* 1. Screen readers announce the banner contents, but don't allow users to navigate to them and
+* interact with them.
+* 2. So, if this element is put on the top of the page, screen readers wil read the label ("Alerts,
+* warnings, and updates") as the first element, so the users are aware since the beginning that
+* there is a dedicated region for alerts.
+* 3. When an alert appears, it's announced with something like "Alert: we can't renew your
+* subscription", and they can connect the initially announced region with the newly appeared alert.
+* 4. They can then navigate to the alerts region, and interact with the alert actions.
+*
+* @example
+* <App>
+*  <AlertBannerProvider>
+*     ...rest of the app
+*  </AlertBannerProvider>
+* </App>
+*/
+function AlertBannerProvider({ children, ...props }) {
+	const [hostEl, setHostEl] = useState(null);
+	const { formatMessage } = useIntl();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertBannerHostContext.Provider, {
+		value: { hostEl },
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: AlertBanner_module_default.alertBannerHost,
+			role: "region",
+			"aria-live": "polite",
+			"aria-atomic": "false",
+			"aria-label": formatMessage({
+				id: "preply-ds.alert-banner.host-region",
+				defaultMessage: "Alerts, warnings, and updates",
+				description: "It's announced by screen readers when they scan the content of the page, and they find the alert banners container."
+			}),
+			ref: setHostEl,
+			...props
+		}), children]
+	});
+}
+//#endregion
+export { useAlertBannerHost as n, AlertBanner_module_default as r, AlertBannerProvider as t };

package/dist/AlertDialog-BG-diKBi.js

@@ -0,0 +1,475 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { f as useRefWithInit, t as useRenderElement, u as EMPTY_OBJECT } from "./useRenderElement-ZBds6eRN.js";
+import { S as useEventCallback } from "./floating-ui.utils.dom-CoeTbDZx.js";
+import { t as useBaseUiId } from "./useBaseUiId-CWAD_PSs.js";
+import { A as inertValue, F as useOpenChangeComplete, L as COMPOSITE_KEYS, M as popupStateMapping, P as triggerOpenStateMapping, ft as transitionStatusMapping, j as CommonPopupDataAttributes, o as getEmptyContext, r as InternalBackdrop, v as FloatingFocusManager, y as FloatingPortal } from "./useOpenInteractionType-D8vA_ZKI.js";
+import { t as useButton } from "./useButton-DHTh3Hm7.js";
+import { n as useDialogRootContext, t as DialogRootContext } from "./DialogRootContext-Bz8RW-Mq.js";
+import { t as useDialogClose } from "./useDialogClose-BzFIyWco.js";
+import { n as useDialogRoot, t as DialogStore } from "./store-sN_eYeZT.js";
+import { t as Heading } from "./Heading-DA9gHfsx.js";
+import { t as Button } from "./Button-C35BZJZT.js";
+import * as React$1 from "react";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { usePortalElement } from "@preply/ds-web-root";
+import './assets/AlertDialog.css';//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/backdrop/AlertDialogBackdrop.js
+var stateAttributesMapping$1 = {
+	...popupStateMapping,
+	...transitionStatusMapping
+};
+/**
+* An overlay displayed beneath the popup.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+var AlertDialogBackdrop = /* @__PURE__ */ React$1.forwardRef(function AlertDialogBackdrop(componentProps, forwardedRef) {
+	const { render, className, forceRender = false, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const open = store.useState("open");
+	const nested = store.useState("nested");
+	const mounted = store.useState("mounted");
+	const transitionStatus = store.useState("transitionStatus");
+	return useRenderElement("div", componentProps, {
+		state: React$1.useMemo(() => ({
+			open,
+			transitionStatus
+		}), [open, transitionStatus]),
+		ref: [store.context.backdropRef, forwardedRef],
+		props: [{
+			role: "presentation",
+			hidden: !mounted,
+			style: {
+				userSelect: "none",
+				WebkitUserSelect: "none"
+			}
+		}, elementProps],
+		stateAttributesMapping: stateAttributesMapping$1,
+		enabled: forceRender || !nested
+	});
+});
+if (process.env.NODE_ENV !== "production") AlertDialogBackdrop.displayName = "AlertDialogBackdrop";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/close/AlertDialogClose.js
+/**
+* A button that closes the alert dialog.
+* Renders a `<button>` element.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+var AlertDialogClose = /* @__PURE__ */ React$1.forwardRef(function AlertDialogClose(componentProps, forwardedRef) {
+	const { render, className, disabled = false, nativeButton = true, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const { getRootProps, ref } = useDialogClose({
+		disabled,
+		open: store.useState("open"),
+		setOpen: store.setOpen,
+		nativeButton
+	});
+	return useRenderElement("button", componentProps, {
+		state: React$1.useMemo(() => ({ disabled }), [disabled]),
+		ref: [forwardedRef, ref],
+		props: [elementProps, getRootProps]
+	});
+});
+if (process.env.NODE_ENV !== "production") AlertDialogClose.displayName = "AlertDialogClose";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/description/AlertDialogDescription.js
+/**
+* A paragraph with additional information about the alert dialog.
+* Renders a `<p>` element.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+var AlertDialogDescription = /* @__PURE__ */ React$1.forwardRef(function AlertDialogDescription(componentProps, forwardedRef) {
+	const { render, className, id: idProp, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const id = useBaseUiId(idProp);
+	store.useSyncedValueWithCleanup("descriptionElementId", id);
+	return useRenderElement("p", componentProps, {
+		ref: forwardedRef,
+		props: [{ id }, elementProps]
+	});
+});
+if (process.env.NODE_ENV !== "production") AlertDialogDescription.displayName = "AlertDialogDescription";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/popup/AlertDialogPopupCssVars.js
+var AlertDialogPopupCssVars = /* @__PURE__ */ function(AlertDialogPopupCssVars) {
+	/**
+	* Indicates how many dialogs are nested within.
+	* @type {number}
+	*/
+	AlertDialogPopupCssVars["nestedDialogs"] = "--nested-dialogs";
+	return AlertDialogPopupCssVars;
+}({});
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/popup/AlertDialogPopupDataAttributes.js
+var AlertDialogPopupDataAttributes = function(AlertDialogPopupDataAttributes) {
+	/**
+	* Present when the dialog is open.
+	*/
+	AlertDialogPopupDataAttributes[AlertDialogPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+	/**
+	* Present when the dialog is closed.
+	*/
+	AlertDialogPopupDataAttributes[AlertDialogPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+	/**
+	* Present when the dialog is animating in.
+	*/
+	AlertDialogPopupDataAttributes[AlertDialogPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+	/**
+	* Present when the dialog is animating out.
+	*/
+	AlertDialogPopupDataAttributes[AlertDialogPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+	/**
+	* Present when the dialog is nested within another dialog.
+	*/
+	AlertDialogPopupDataAttributes["nested"] = "data-nested";
+	/**
+	* Present when the dialog has other open dialogs nested within it.
+	*/
+	AlertDialogPopupDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
+	return AlertDialogPopupDataAttributes;
+}({});
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/portal/AlertDialogPortalContext.js
+var AlertDialogPortalContext = /* @__PURE__ */ React$1.createContext(void 0);
+if (process.env.NODE_ENV !== "production") AlertDialogPortalContext.displayName = "AlertDialogPortalContext";
+function useAlertDialogPortalContext() {
+	const value = React$1.useContext(AlertDialogPortalContext);
+	if (value === void 0) throw new Error("Base UI: <AlertDialog.Portal> is missing.");
+	return value;
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/popup/AlertDialogPopup.js
+var import_jsx_runtime = require_jsx_runtime();
+var stateAttributesMapping = {
+	...popupStateMapping,
+	...transitionStatusMapping,
+	nestedDialogOpen(value) {
+		return value ? { [AlertDialogPopupDataAttributes.nestedDialogOpen]: "" } : null;
+	}
+};
+/**
+* A container for the alert dialog contents.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+var AlertDialogPopup = /* @__PURE__ */ React$1.forwardRef(function AlertDialogPopup(componentProps, forwardedRef) {
+	const { className, render, initialFocus, finalFocus, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const descriptionElementId = store.useState("descriptionElementId");
+	const floatingRootContext = store.useState("floatingRootContext");
+	const rootPopupProps = store.useState("popupProps");
+	const mounted = store.useState("mounted");
+	const nested = store.useState("nested");
+	const nestedOpenDialogCount = store.useState("nestedOpenDialogCount");
+	const open = store.useState("open");
+	const titleElementId = store.useState("titleElementId");
+	const transitionStatus = store.useState("transitionStatus");
+	useAlertDialogPortalContext();
+	useOpenChangeComplete({
+		open,
+		ref: store.context.popupRef,
+		onComplete() {
+			if (open) {
+				var _store$context$openCh, _store$context;
+				(_store$context$openCh = (_store$context = store.context).openChangeComplete) === null || _store$context$openCh === void 0 || _store$context$openCh.call(_store$context, true);
+			}
+		}
+	});
+	const defaultInitialFocus = useEventCallback((interactionType) => {
+		if (interactionType === "touch") return store.context.popupRef.current;
+		return true;
+	});
+	const resolvedInitialFocus = initialFocus === void 0 ? defaultInitialFocus : initialFocus;
+	const nestedDialogOpen = nestedOpenDialogCount > 0;
+	const element = useRenderElement("div", componentProps, {
+		state: React$1.useMemo(() => ({
+			open,
+			nested,
+			transitionStatus,
+			nestedDialogOpen
+		}), [
+			open,
+			nested,
+			transitionStatus,
+			nestedDialogOpen
+		]),
+		props: [
+			rootPopupProps,
+			{
+				"aria-labelledby": titleElementId !== null && titleElementId !== void 0 ? titleElementId : void 0,
+				"aria-describedby": descriptionElementId !== null && descriptionElementId !== void 0 ? descriptionElementId : void 0,
+				role: "alertdialog",
+				tabIndex: -1,
+				hidden: !mounted,
+				onKeyDown(event) {
+					if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+				},
+				style: { [AlertDialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount }
+			},
+			elementProps
+		],
+		ref: [
+			forwardedRef,
+			store.context.popupRef,
+			store.getElementSetter("popupElement")
+		],
+		stateAttributesMapping
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React$1.Fragment, { children: [mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalBackdrop, {
+		ref: store.context.internalBackdropRef,
+		inert: inertValue(!open)
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingFocusManager, {
+		context: floatingRootContext,
+		disabled: !mounted,
+		initialFocus: resolvedInitialFocus,
+		returnFocus: finalFocus,
+		children: element
+	})] });
+});
+if (process.env.NODE_ENV !== "production") AlertDialogPopup.displayName = "AlertDialogPopup";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/portal/AlertDialogPortal.js
+/**
+* A portal element that moves the popup to a different part of the DOM.
+* By default, the portal element is appended to `<body>`.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+function AlertDialogPortal(props) {
+	const { children, keepMounted = false, container } = props;
+	const { store } = useDialogRootContext();
+	if (!(store.useState("mounted") || keepMounted)) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogPortalContext.Provider, {
+		value: keepMounted,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingPortal, {
+			root: container,
+			children
+		})
+	});
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/root/AlertDialogRoot.js
+var INITIAL_STATE = {
+	open: false,
+	dismissible: false,
+	nested: false,
+	popupElement: null,
+	triggerElement: null,
+	modal: true,
+	descriptionElementId: void 0,
+	titleElementId: void 0,
+	openMethod: null,
+	mounted: false,
+	transitionStatus: "idle",
+	nestedOpenDialogCount: 0,
+	triggerProps: EMPTY_OBJECT,
+	popupProps: EMPTY_OBJECT,
+	floatingRootContext: getEmptyContext()
+};
+/**
+* Groups all parts of the alert dialog.
+* Doesn’t render its own HTML element.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+var AlertDialogRoot = function AlertDialogRoot(props) {
+	const { children, defaultOpen = false, onOpenChange, onOpenChangeComplete, open: openProp, actionsRef } = props;
+	const parentDialogRootContext = useDialogRootContext();
+	const nested = Boolean(parentDialogRootContext);
+	const store = useRefWithInit(DialogStore.create, INITIAL_STATE).current;
+	store.useControlledProp("open", openProp, defaultOpen);
+	store.useSyncedValue("nested", nested);
+	store.useContextCallback("openChange", onOpenChange);
+	store.useContextCallback("openChangeComplete", onOpenChangeComplete);
+	useDialogRoot({
+		store,
+		actionsRef,
+		parentContext: parentDialogRootContext === null || parentDialogRootContext === void 0 ? void 0 : parentDialogRootContext.store.context,
+		onOpenChange
+	});
+	const contextValue = React$1.useMemo(() => ({ store }), [store]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogRootContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+if (process.env.NODE_ENV !== "production") AlertDialogRoot.displayName = "AlertDialogRoot";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/title/AlertDialogTitle.js
+/**
+* A heading that labels the dialog.
+* Renders an `<h2>` element.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+var AlertDialogTitle = /* @__PURE__ */ React$1.forwardRef(function AlertDialogTitle(componentProps, forwardedRef) {
+	const { render, className, id: idProp, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const id = useBaseUiId(idProp);
+	store.useSyncedValueWithCleanup("titleElementId", id);
+	return useRenderElement("h2", componentProps, {
+		ref: forwardedRef,
+		props: [{ id }, elementProps]
+	});
+});
+if (process.env.NODE_ENV !== "production") AlertDialogTitle.displayName = "AlertDialogTitle";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/alert-dialog/trigger/AlertDialogTrigger.js
+/**
+* A button that opens the alert dialog.
+* Renders a `<button>` element.
+*
+* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+*/
+var AlertDialogTrigger$1 = /* @__PURE__ */ React$1.forwardRef(function AlertDialogTrigger(componentProps, forwardedRef) {
+	const { render, className, disabled = false, nativeButton = true, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const open = store.useState("open");
+	const triggerProps = store.useState("triggerProps");
+	const state = React$1.useMemo(() => ({
+		disabled,
+		open
+	}), [disabled, open]);
+	const { getButtonProps, buttonRef } = useButton({
+		disabled,
+		native: nativeButton
+	});
+	return useRenderElement("button", componentProps, {
+		state,
+		ref: [
+			forwardedRef,
+			buttonRef,
+			store.getElementSetter("triggerElement")
+		],
+		stateAttributesMapping: triggerOpenStateMapping,
+		props: [
+			triggerProps,
+			elementProps,
+			getButtonProps
+		]
+	});
+});
+if (process.env.NODE_ENV !== "production") AlertDialogTrigger$1.displayName = "AlertDialogTrigger";
+var AlertDialog_module_default = {
+	overlay: "overlay__cqEa0",
+	overlayShow: "overlayShow__DlV95",
+	content: "content__U-iLo",
+	contentShow: "contentShow__8iLk2",
+	description: "description__7w95W",
+	actions: "actions__DbfEY"
+};
+//#endregion
+//#region src/components/AlertDialog/AlertDialog.tsx
+var AlertDialogTrigger = forwardRef(function AlertDialogActionComponent(props, ref) {
+	const child = Children.only(props.children);
+	if (!isValidElement(child)) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogTrigger$1, { render: (primitiveProps) => {
+		return cloneElement(child, {
+			...primitiveProps,
+			ref
+		});
+	} });
+});
+var AlertDialogAction = forwardRef(function AlertDialogActionComponent(props, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogClose, {
+		ref,
+		render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {}),
+		...props
+	});
+});
+var AlertDialogCancel = forwardRef(function AlertDialogCancelComponent(props, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogClose, {
+		ref,
+		render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {}),
+		...props
+	});
+});
+var AlertDialogComponent = ({ open, title, description, dataset, children }) => {
+	const container = usePortalElement();
+	const datasetProps = getDatasetProps(dataset, { preplyDsComponent: webComponentNames.AlertDialog });
+	let trigger;
+	const actions = [];
+	Children.forEach(children, (child) => {
+		if (isValidElement(child)) if (child.type === AlertDialogTrigger) trigger = child;
+		else actions.push(child);
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogRoot, {
+		open,
+		children: [trigger, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogPortal, {
+			container,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogBackdrop, { className: AlertDialog_module_default.overlay }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogPopup, {
+				...datasetProps,
+				className: AlertDialog_module_default.content,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogTitle, { render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, {
+						tag: "h3",
+						variant: "medium",
+						children: title
+					}) }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogDescription, {
+						className: AlertDialog_module_default.description,
+						children: description
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: AlertDialog_module_default.actions,
+						children: actions
+					})
+				]
+			})]
+		})]
+	});
+};
+/**
+* A modal alertdialog that interrupts the user with important content and expects a response.
+*
+* Unlike a `Dialog`, it cannot be dismissed by clicking outside or pressing escape.
+*
+* @example
+* // Controlled:
+* <Button variant="critical" onClick={() => setIsOpen(true)}>
+*   Delete Account
+* </Button>
+* <AlertDialog
+*   open={isOpen}
+*   title="Delete Account"
+*   description="This action cannot be undone."
+* >
+*  <AlertDialog.Cancel variant="secondary" onClick={() => setIsOpen(false)}>
+*    Cancel
+*  </AlertDialog.Cancel>
+*  <AlertDialog.Action variant="critical" onClick={() => setIsOpen(false)}>
+*    Delete
+*  </AlertDialog.Action>
+* </AlertDialog>
+*
+* @example
+* // Uncontrolled:
+* <AlertDialog
+*   title="Delete Account"
+*   description="This action cannot be undone."
+* >
+*  <AlertDialog.Trigger>
+*    <Button variant="critical">Delete Account</Button>
+*  </AlertDialog.Trigger>
+*  <AlertDialog.Cancel variant="secondary">
+*    Cancel
+*  </AlertDialog.Cancel>
+*  <AlertDialog.Action variant="critical">
+*    Delete
+*  </AlertDialog.Action>
+* </AlertDialog>
+*/
+var AlertDialog = Object.assign(AlertDialogComponent, {
+	Trigger: AlertDialogTrigger,
+	Action: AlertDialogAction,
+	Cancel: AlertDialogCancel
+});
+//#endregion
+export { AlertDialog as t };