@preply/ds-web-lib 10.0.0 → 11.0.0

package/dist/assets/layout-padding.css

@@ -1,6 +1,6 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Mon Feb 23 2026 07:20:43 GMT+0000 (Coordinated Universal Time) */
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Mon Feb 23 2026 07:20:42 GMT+0000 (Coordinated Universal Time) */
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Mon Feb 23 2026 07:20:44 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Mon Mar 02 2026 15:14:21 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Mon Mar 02 2026 15:14:20 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Mon Mar 02 2026 15:14:22 GMT+0000 (Coordinated Universal Time) */
 [data-preply-ds-component="LayoutFlex"][data-ds-padding="0"],
 [data-preply-ds-component="LayoutFlex"][data-ds-padding*='"_":"0"'] {
   padding: var(--d434fb);

package/dist/assets/layout-relative.css

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Mon Feb 23 2026 07:20:44 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Mon Mar 02 2026 15:14:22 GMT+0000 (Coordinated Universal Time) */
 [data-preply-ds-component="LayoutFlex"][data-ds-relative="true"],
 [data-preply-ds-component="LayoutFlex"][data-ds-relative*='"_":true'] {
   position: relative;

package/dist/assets/text-accent.css

@@ -1,5 +1,5 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Mon Feb 23 2026 07:20:42 GMT+0000 (Coordinated Universal Time) */
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Mon Feb 23 2026 07:20:43 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Mon Mar 02 2026 15:14:20 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Mon Mar 02 2026 15:14:21 GMT+0000 (Coordinated Universal Time) */
 .TextAccent__AfPNQ.TextAccent--accent-default__rjbSO {
   color: var(--628fb7);
 }

package/dist/assets/text-centered.css

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Mon Feb 23 2026 07:20:44 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Mon Mar 02 2026 15:14:22 GMT+0000 (Coordinated Universal Time) */
 .TextCentered__7KaTF.TextCentered--centered__4f-qW {
   text-align: center;
 }

package/dist/assets/text-weight.css

@@ -1,5 +1,5 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Mon Feb 23 2026 07:20:42 GMT+0000 (Coordinated Universal Time) */
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Mon Feb 23 2026 07:20:43 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Mon Mar 02 2026 15:14:20 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Mon Mar 02 2026 15:14:21 GMT+0000 (Coordinated Universal Time) */
 .TextWeight__nr38y.TextWeight--weight-normal__WoBtA {
   font-weight: var(--5ea101);
 }

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -79,20 +79,20 @@ export declare const AlertDialog: React.FC<AlertDialogProps> & {
      *   as a trigger button, at the location where the `AlertDialog` node is
      *   placed in the DOM.
      */
-    Trigger: React.FC<AlertDialogTriggerProps>;
+    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
     /**
      * Wraps a Button component that closes the dialog when clicked, unless if
      * `event.defaultPrevented`.
      *
      * It's intended for the main/confirmatory action (e.g. "Delete", "Confirm").
      */
-    Action: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    Action: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * Wraps a Button component that closes the dialog when clicked, unless if
      * `event.defaultPrevented`.
      *
      * It's intended for the secondary/cancellation action (e.g. "Cancel", "Close").
      */
-    Cancel: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    Cancel: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 };
 //# sourceMappingURL=AlertDialog.d.ts.map

package/dist/components/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAgC,SAAS,EAAc,MAAM,OAAO,CAAC;AAMnF,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAU,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IAClC,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAMF,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC;AAYjD,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC;AAYjD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,mEAAmE;IACnE,KAAK,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,WAAW,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA+CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,WAAW;IACpB;;;;;;;;;;;OAWG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;CAEL,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAgC,SAAS,EAA4B,MAAM,OAAO,CAAC;AAMjG,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAU,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IAClC,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAoBF,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC;AAQjD,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC;AAQjD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,mEAAmE;IACnE,KAAK,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,WAAW,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAiDF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,WAAW;IACpB;;;;;;;;;;;OAWG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;CAEL,CAAC"}

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,13 +1,341 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, Children, isValidElement } from "react";
-import { AlertDialog as AlertDialog$1 } from "radix-ui";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { forwardRef, Children, isValidElement, cloneElement } from "react";
 import { usePortalElement } from "@preply/ds-web-root";
 import { Heading } from "../Heading/Heading.js";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { Button } from "../Button/Button.js";
-import '../../assets/AlertDialog.css';const overlay = "overlay__cqEa0";
+import { u as useDialogRootContext, D as DialogRootContext } from "../../DialogRootContext-BCXmmJAw.js";
+import { u as useButton } from "../../useButton-CFPpP0o5.js";
+import { u as useRenderElement, b as useRefWithInit, E as EMPTY_OBJECT } from "../../useRenderElement-DtYPTE_y.js";
+import { p as popupStateMapping, t as transitionStatusMapping, C as CommonPopupDataAttributes, u as useOpenChangeComplete, a as COMPOSITE_KEYS, I as InternalBackdrop, i as inertValue, F as FloatingFocusManager, b as FloatingPortal, g as getEmptyContext, c as triggerOpenStateMapping } from "../../useOpenInteractionType-Cj41-8Yk.js";
+import { u as useDialogClose } from "../../useDialogClose-C9x1leGd.js";
+import { u as useDialogRoot, D as DialogStore } from "../../store-BUKWfVf3.js";
+import { u as useEventCallback } from "../../floating-ui.utils.dom-3OgjGonN.js";
+import { u as useBaseUiId } from "../../useBaseUiId-DavsGYu9.js";
+import '../../assets/AlertDialog.css';const stateAttributesMapping$1 = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
+const AlertDialogBackdrop = /* @__PURE__ */ React.forwardRef(function AlertDialogBackdrop2(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");
+  const state = React.useMemo(() => ({
+    open,
+    transitionStatus
+  }), [open, transitionStatus]);
+  return useRenderElement("div", componentProps, {
+    state,
+    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";
+const AlertDialogClose = /* @__PURE__ */ React.forwardRef(function AlertDialogClose2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState("open");
+  const {
+    getRootProps,
+    ref
+  } = useDialogClose({
+    disabled,
+    open,
+    setOpen: store.setOpen,
+    nativeButton
+  });
+  const state = React.useMemo(() => ({
+    disabled
+  }), [disabled]);
+  return useRenderElement("button", componentProps, {
+    state,
+    ref: [forwardedRef, ref],
+    props: [elementProps, getRootProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") AlertDialogClose.displayName = "AlertDialogClose";
+const AlertDialogDescription = /* @__PURE__ */ React.forwardRef(function AlertDialogDescription2(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";
+let AlertDialogPopupCssVars = /* @__PURE__ */ (function(AlertDialogPopupCssVars2) {
+  AlertDialogPopupCssVars2["nestedDialogs"] = "--nested-dialogs";
+  return AlertDialogPopupCssVars2;
+})({});
+let AlertDialogPopupDataAttributes = (function(AlertDialogPopupDataAttributes2) {
+  AlertDialogPopupDataAttributes2[AlertDialogPopupDataAttributes2["open"] = CommonPopupDataAttributes.open] = "open";
+  AlertDialogPopupDataAttributes2[AlertDialogPopupDataAttributes2["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  AlertDialogPopupDataAttributes2[AlertDialogPopupDataAttributes2["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  AlertDialogPopupDataAttributes2[AlertDialogPopupDataAttributes2["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  AlertDialogPopupDataAttributes2["nested"] = "data-nested";
+  AlertDialogPopupDataAttributes2["nestedDialogOpen"] = "data-nested-dialog-open";
+  return AlertDialogPopupDataAttributes2;
+})({});
+const AlertDialogPortalContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") AlertDialogPortalContext.displayName = "AlertDialogPortalContext";
+function useAlertDialogPortalContext() {
+  const value = React.useContext(AlertDialogPortalContext);
+  if (value === void 0) {
+    throw new Error("Base UI: <AlertDialog.Portal> is missing.");
+  }
+  return value;
+}
+const stateAttributesMapping = {
+  ...popupStateMapping,
+  ...transitionStatusMapping,
+  nestedDialogOpen(value) {
+    return value ? {
+      [AlertDialogPopupDataAttributes.nestedDialogOpen]: ""
+    } : null;
+  }
+};
+const AlertDialogPopup = /* @__PURE__ */ React.forwardRef(function AlertDialogPopup2(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() {
+      var _a, _b;
+      if (open) {
+        (_b = (_a = store.context).openChangeComplete) == null ? void 0 : _b.call(_a, 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 state = React.useMemo(() => ({
+    open,
+    nested,
+    transitionStatus,
+    nestedDialogOpen
+  }), [open, nested, transitionStatus, nestedDialogOpen]);
+  const element = useRenderElement("div", componentProps, {
+    state,
+    props: [rootPopupProps, {
+      "aria-labelledby": titleElementId != null ? titleElementId : void 0,
+      "aria-describedby": descriptionElementId != null ? 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__ */ jsxs(React.Fragment, {
+    children: [mounted && /* @__PURE__ */ jsx(InternalBackdrop, {
+      ref: store.context.internalBackdropRef,
+      inert: inertValue(!open)
+    }), /* @__PURE__ */ jsx(FloatingFocusManager, {
+      context: floatingRootContext,
+      disabled: !mounted,
+      initialFocus: resolvedInitialFocus,
+      returnFocus: finalFocus,
+      children: element
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") AlertDialogPopup.displayName = "AlertDialogPopup";
+function AlertDialogPortal(props) {
+  const {
+    children,
+    keepMounted = false,
+    container
+  } = props;
+  const {
+    store
+  } = useDialogRootContext();
+  const mounted = store.useState("mounted");
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(AlertDialogPortalContext.Provider, {
+    value: keepMounted,
+    children: /* @__PURE__ */ jsx(FloatingPortal, {
+      root: container,
+      children
+    })
+  });
+}
+const 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()
+};
+const AlertDialogRoot = function AlertDialogRoot2(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 ? void 0 : parentDialogRootContext.store.context
+  });
+  const contextValue = React.useMemo(() => ({
+    store
+  }), [store]);
+  return /* @__PURE__ */ jsx(DialogRootContext.Provider, {
+    value: contextValue,
+    children
+  });
+};
+if (process.env.NODE_ENV !== "production") AlertDialogRoot.displayName = "AlertDialogRoot";
+const AlertDialogTitle = /* @__PURE__ */ React.forwardRef(function AlertDialogTitle2(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";
+const AlertDialogTrigger$1 = /* @__PURE__ */ React.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.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";
+const overlay = "overlay__cqEa0";
 const content = "content__U-iLo";
 const description = "description__7w95W";
 const actions = "actions__DbfEY";
@@ -17,14 +345,22 @@ const styles = {
   description,
   actions
 };
-const AlertDialogTrigger = ({
-  children
-}) => /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { asChild: true, children: Children.only(children) });
-const AlertDialogAction = forwardRef(function AlertDialogActionComponent(props, ref) {
-  return /* @__PURE__ */ jsx(AlertDialog$1.Action, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ...props, ref }) });
+const AlertDialogTrigger2 = forwardRef(function AlertDialogActionComponent(props, ref) {
+  const child = Children.only(props.children);
+  if (!isValidElement(child)) return null;
+  return /* @__PURE__ */ jsx(AlertDialogTrigger$1, { render: (primitiveProps) => {
+    const mergedProps = {
+      ...primitiveProps,
+      ref
+    };
+    return cloneElement(child, mergedProps);
+  } });
+});
+const AlertDialogAction = forwardRef(function AlertDialogActionComponent2(props, ref) {
+  return /* @__PURE__ */ jsx(AlertDialogClose, { ref, render: /* @__PURE__ */ jsx(Button, {}), ...props });
 });
 const AlertDialogCancel = forwardRef(function AlertDialogCancelComponent(props, ref) {
-  return /* @__PURE__ */ jsx(AlertDialog$1.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ...props, ref }) });
+  return /* @__PURE__ */ jsx(AlertDialogClose, { ref, render: /* @__PURE__ */ jsx(Button, {}), ...props });
 });
 const AlertDialogComponent = ({
   open,
@@ -41,20 +377,20 @@ const AlertDialogComponent = ({
   const actions2 = [];
   Children.forEach(children, (child) => {
     if (isValidElement(child)) {
-      if (child.type === AlertDialogTrigger) {
+      if (child.type === AlertDialogTrigger2) {
         trigger = child;
       } else {
         actions2.push(child);
       }
     }
   });
-  return /* @__PURE__ */ jsxs(AlertDialog$1.Root, { open, children: [
+  return /* @__PURE__ */ jsxs(AlertDialogRoot, { open, children: [
     trigger,
-    /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { container, children: [
-      /* @__PURE__ */ jsx(AlertDialog$1.Overlay, { className: styles.overlay }),
-      /* @__PURE__ */ jsxs(AlertDialog$1.Content, { ...datasetProps, className: styles.content, children: [
-        /* @__PURE__ */ jsx(AlertDialog$1.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { tag: "h3", variant: "medium", children: title }) }),
-        /* @__PURE__ */ jsx(AlertDialog$1.Description, { asChild: true, children: /* @__PURE__ */ jsx("p", { className: styles.description, children: description2 }) }),
+    /* @__PURE__ */ jsxs(AlertDialogPortal, { container, children: [
+      /* @__PURE__ */ jsx(AlertDialogBackdrop, { className: styles.overlay }),
+      /* @__PURE__ */ jsxs(AlertDialogPopup, { ...datasetProps, className: styles.content, children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { render: /* @__PURE__ */ jsx(Heading, { tag: "h3", variant: "medium", children: title }) }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { className: styles.description, children: description2 }),
         /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions2 })
       ] })
     ] })
@@ -73,7 +409,7 @@ const AlertDialog = Object.assign(AlertDialogComponent, {
    *   as a trigger button, at the location where the `AlertDialog` node is
    *   placed in the DOM.
    */
-  Trigger: AlertDialogTrigger,
+  Trigger: AlertDialogTrigger2,
   /**
    * Wraps a Button component that closes the dialog when clicked, unless if
    * `event.defaultPrevented`.

package/dist/components/Dialog/primitives/DialogCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI1E,MAAM,MAAM,sBAAsB,GAAG;IACjC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,kGAS7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,eAAe,CAAC;AAE5D,eAAO,MAAM,wBAAwB,2FAenC,CAAC"}
+{"version":3,"file":"DialogCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI1E,MAAM,MAAM,sBAAsB,GAAG;IACjC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,kGAS7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,eAAe,CAAC;AAE5D,eAAO,MAAM,wBAAwB,2FAgBnC,CAAC"}

package/dist/components/Dialog/primitives/DialogCloseButton.js

@@ -6,37 +6,9 @@ import { useIntl } from "react-intl";
 import { IconButton } from "../../IconButton/IconButton.js";
 import { genericAriaLabels } from "../../../utils/shared-strings.js";
 import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { u as useEventCallback, c as createChangeEventDetails } from "../../../floating-ui.utils.dom-BvMNldxo.js";
-import { u as useButton } from "../../../useButton-fjQ0ak8m.js";
-import { m as mergeProps, u as useRenderElement } from "../../../useRenderElement-BSthtPOr.js";
+import { u as useDialogClose } from "../../../useDialogClose-C9x1leGd.js";
 import { u as useDialogRootContext } from "../../../DialogRootContext-BCXmmJAw.js";
-function useDialogClose(params) {
-  const {
-    open,
-    setOpen,
-    disabled,
-    nativeButton
-  } = params;
-  const handleClick = useEventCallback((event) => {
-    if (open) {
-      setOpen(false, createChangeEventDetails("close-press", event.nativeEvent));
-    }
-  });
-  const {
-    getButtonProps,
-    buttonRef
-  } = useButton({
-    disabled,
-    native: nativeButton
-  });
-  const getRootProps = (externalProps) => mergeProps({
-    onClick: handleClick
-  }, externalProps, getButtonProps);
-  return {
-    getRootProps,
-    ref: buttonRef
-  };
-}
+import { u as useRenderElement } from "../../../useRenderElement-DtYPTE_y.js";
 const DialogClose = /* @__PURE__ */ React.forwardRef(function DialogClose2(componentProps, forwardedRef) {
   const {
     render,
@@ -85,7 +57,9 @@ const DialogDefaultCloseButton = forwardRef(function DefaultCloseButton(props, r
   const {
     formatMessage
   } = useIntl();
-  return /* @__PURE__ */ jsx(IconButton, { ref, size: "small", variant: "ghost", assistiveText: formatMessage(genericAriaLabels.close), svg: ForwardRef, ...props });
+  return /* @__PURE__ */ jsx(IconButton, { ref, size: "small", variant: "ghost", dataset: {
+    testid: "dialog-close"
+  }, assistiveText: formatMessage(genericAriaLabels.close), svg: ForwardRef, ...props });
 });
 export {
   DialogCloseButton,

package/dist/components/Dialog/primitives/DialogDescription.js

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
 import { u as useDialogRootContext } from "../../../DialogRootContext-BCXmmJAw.js";
-import { u as useRenderElement } from "../../../useRenderElement-BSthtPOr.js";
+import { u as useRenderElement } from "../../../useRenderElement-DtYPTE_y.js";
 import { u as useBaseUiId } from "../../../useBaseUiId-DavsGYu9.js";
 const DialogDescription$1 = /* @__PURE__ */ React.forwardRef(function DialogDescription(componentProps, forwardedRef) {
   const {