@spark-ui/components 12.2.0 → 13.0.1-beta.0

package/dist/alert-dialog/index.js

@@ -25,81 +25,111 @@ __export(alert_dialog_exports, {
 });
 module.exports = __toCommonJS(alert_dialog_exports);
 
-// src/dialog/Dialog.tsx
-var import_radix_ui = require("radix-ui");
+// src/alert-dialog/AlertDialog.tsx
+var import_alert_dialog = require("@base-ui-components/react/alert-dialog");
 var import_react2 = require("react");
 
-// src/dialog/DialogContext.tsx
+// src/alert-dialog/AlertDialogContext.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var DialogContext = (0, import_react.createContext)(null);
-var DialogProvider = ({
-  children: childrenProp,
-  withFade = false
+var AlertDialogContext = (0, import_react.createContext)(null);
+var AlertDialogProvider = ({
+  children,
+  withFade = false,
+  cancelRef
 }) => {
-  const [isFullScreen, setIsFullScreen] = (0, import_react.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogContext.Provider,
+    AlertDialogContext.Provider,
     {
       value: {
-        isFullScreen,
-        setIsFullScreen,
+        cancelRef,
         withFade
       },
-      children: childrenProp
+      children
     }
   );
 };
-var useDialog = () => {
-  const context = (0, import_react.useContext)(DialogContext);
+var useAlertDialog = () => {
+  const context = (0, import_react.useContext)(AlertDialogContext);
   if (!context) {
-    throw Error("useDialog must be used within a Dialog provider");
+    throw Error("useAlertDialog must be used within an AlertDialog provider");
   }
   return context;
 };
 
-// src/dialog/Dialog.tsx
+// src/alert-dialog/AlertDialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Dialog = ({ children, withFade = false, ...rest }) => {
-  const open = rest.open;
-  const activeElementRef = (0, import_react2.useRef)(null);
-  function handleActiveElementFocus() {
-    if (open && document.activeElement) {
-      activeElementRef.current = document.activeElement;
+var AlertDialog = ({ onOpenChange, withFade = false, ...props }) => {
+  const cancelRef = (0, import_react2.useRef)(null);
+  const handleOpenChange = onOpenChange ? (open, _eventDetails) => {
+    onOpenChange(open);
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlertDialogProvider, { withFade, cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_alert_dialog.AlertDialog.Root,
+    {
+      "data-spark-component": "alert-dialog",
+      onOpenChange: handleOpenChange,
+      ...props
     }
-    if (!open) {
-      setTimeout(() => {
-        if (!(activeElementRef.current instanceof HTMLElement)) return;
-        activeElementRef.current.focus();
-      }, 0);
+  ) });
+};
+AlertDialog.displayName = "AlertDialog";
+
+// src/alert-dialog/AlertDialogAction.tsx
+var import_alert_dialog2 = require("@base-ui-components/react/alert-dialog");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/alert-dialog/useRenderSlot.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function useRenderSlot(asChild, defaultTag) {
+  const Component = asChild ? Slot : defaultTag;
+  return asChild ? ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...props }) : void 0;
+}
+
+// src/alert-dialog/AlertDialogAction.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var AlertDialogAction = ({ asChild = false, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_alert_dialog2.AlertDialog.Close,
+    {
+      "data-spark-component": "alert-dialog-action",
+      render: renderSlot,
+      ...props
     }
-  }
-  (0, import_react2.useEffect)(handleActiveElementFocus, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogProvider, { withFade, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
+  );
 };
-Dialog.displayName = "Dialog.Root";
+AlertDialogAction.displayName = "AlertDialog.Action";
 
-// src/dialog/DialogBody.tsx
+// src/alert-dialog/AlertDialogBody.tsx
 var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
 var import_use_scroll_overflow = require("@spark-ui/hooks/use-scroll-overflow");
 var import_class_variance_authority = require("class-variance-authority");
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Body = ({
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AlertDialogBody = ({
   children,
   className,
   inset = false,
   ref: forwardedRef,
   ...rest
 }) => {
-  const scrollAreaRef = (0, import_react3.useRef)(null);
+  const scrollAreaRef = (0, import_react4.useRef)(null);
   const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, scrollAreaRef);
-  const { withFade } = useDialog();
+  const { withFade } = useAlertDialog();
   const { overflow } = (0, import_use_scroll_overflow.useScrollOverflow)(scrollAreaRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
-      "data-spark-component": "dialog-body",
+      "data-spark-component": "alert-dialog-body",
       ref,
       className: (0, import_class_variance_authority.cx)(
         "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
@@ -121,1065 +151,39 @@ var Body = ({
     }
   );
 };
-Body.displayName = "Dialog.Body";
-
-// src/dialog/DialogClose.tsx
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Close = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Dialog.Close, { ...props });
-Close.displayName = "Dialog.Close";
-
-// src/dialog/DialogCloseButton.tsx
-var import_Close = require("@spark-ui/icons/Close");
-var import_class_variance_authority7 = require("class-variance-authority");
-
-// src/icon/Icon.tsx
-var import_react5 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui3 = require("radix-ui");
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Slottable = import_radix_ui3.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui3.Slot.Root, { ref, ...props });
-};
-var wrapPolymorphicSlot = (asChild, children, callback) => {
-  if (!asChild) return callback(children);
-  return (0, import_react4.isValidElement)(children) ? (0, import_react4.cloneElement)(
-    children,
-    void 0,
-    callback(children.props.children)
-  ) : null;
-};
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority2 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
+AlertDialogBody.displayName = "AlertDialog.Body";
 
-// src/icon/Icon.tsx
+// src/alert-dialog/AlertDialogCancel.tsx
+var import_alert_dialog3 = require("@base-ui-components/react/alert-dialog");
+var import_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react5.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    (0, import_react5.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/button/Button.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_react6 = require("react");
-
-// src/spinner/Spinner.styles.tsx
-var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority3 = require("class-variance-authority");
-var defaultVariants = {
-  intent: "current",
-  size: "current",
-  isBackgroundVisible: false
-};
-var spinnerStyles = (0, import_class_variance_authority3.cva)(
-  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
-  {
-    variants: {
-      /**
-       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
-       */
-      size: {
-        current: ["u-current-font-size"],
-        sm: ["w-sz-20", "h-sz-20"],
-        md: ["w-sz-28", "h-sz-28"],
-        full: ["w-full", "h-full"]
-      },
-      /**
-       * Color scheme of the spinner.
-       */
-      intent: (0, import_internal_utils2.makeVariants)({
-        current: ["border-current"],
-        main: ["border-main"],
-        support: ["border-support"],
-        accent: ["border-accent"],
-        basic: ["border-basic"],
-        success: ["border-success"],
-        alert: ["border-alert"],
-        error: ["border-error"],
-        info: ["border-info"],
-        neutral: ["border-neutral"]
-      }),
-      /**
-       * Size of the button.
-       */
-      isBackgroundVisible: {
-        true: ["border-b-neutral-container", "border-l-neutral-container"],
-        false: ["border-b-transparent", "border-l-transparent"]
-      }
-    },
-    defaultVariants
-  }
-);
-
-// src/spinner/Spinner.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Spinner = ({
-  className,
-  size = "current",
-  intent = "current",
-  label,
-  isBackgroundVisible,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "span",
-    {
-      role: "status",
-      "data-spark-component": "spinner",
-      ref,
-      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
-      ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
-    }
-  );
-};
-
-// src/button/Button.styles.tsx
-var import_internal_utils8 = require("@spark-ui/internal-utils");
-var import_class_variance_authority4 = require("class-variance-authority");
-
-// src/button/variants/filled.ts
-var import_internal_utils3 = require("@spark-ui/internal-utils");
-var filledVariants = [
-  // Main
-  {
-    intent: "main",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-main",
-      "text-on-main",
-      "hover:bg-main-hovered",
-      "enabled:active:bg-main-hovered",
-      "focus-visible:bg-main-hovered"
-    ])
-  },
-  // Support
-  {
-    intent: "support",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-support",
-      "text-on-support",
-      "hover:bg-support-hovered",
-      "enabled:active:bg-support-hovered",
-      "focus-visible:bg-support-hovered"
-    ])
-  },
-  // Accent
-  {
-    intent: "accent",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-accent",
-      "text-on-accent",
-      "hover:bg-accent-hovered",
-      "enabled:active:bg-accent-hovered",
-      "focus-visible:bg-accent-hovered"
-    ])
-  },
-  // Basic
-  {
-    intent: "basic",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-basic",
-      "text-on-basic",
-      "hover:bg-basic-hovered",
-      "enabled:active:bg-basic-hovered",
-      "focus-visible:bg-basic-hovered"
-    ])
-  },
-  // Success
-  {
-    intent: "success",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-success",
-      "text-on-success",
-      "hover:bg-success-hovered",
-      "enabled:active:bg-success-hovered",
-      "focus-visible:bg-success-hovered"
-    ])
-  },
-  // Alert
-  {
-    intent: "alert",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-alert",
-      "text-on-alert",
-      "hover:bg-alert-hovered",
-      "enabled:active:bg-alert-hovered",
-      "focus-visible:bg-alert-hovered"
-    ])
-  },
-  // Danger
-  {
-    intent: "danger",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "text-on-error bg-error",
-      "hover:bg-error-hovered enabled:active:bg-error-hovered",
-      "focus-visible:bg-error-hovered"
-    ])
-  },
-  // Info
-  {
-    intent: "info",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "text-on-error bg-info",
-      "hover:bg-info-hovered enabled:active:bg-info-hovered",
-      "focus-visible:bg-info-hovered"
-    ])
-  },
-  // Neutral
-  {
-    intent: "neutral",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-neutral",
-      "text-on-neutral",
-      "hover:bg-neutral-hovered",
-      "enabled:active:bg-neutral-hovered",
-      "focus-visible:bg-neutral-hovered"
-    ])
-  },
-  // Surface
-  {
-    intent: "surface",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-surface",
-      "text-on-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/variants/ghost.ts
-var import_internal_utils4 = require("@spark-ui/internal-utils");
-var ghostVariants = [
-  {
-    intent: "main",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-main-container",
-      "hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5"
-    ])
-  },
-  {
-    intent: "support",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-support-container",
-      "hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-accent-container",
-      "hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-basic-container",
-      "hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5"
-    ])
-  },
-  {
-    intent: "success",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-success-container",
-      "hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-alert-container",
-      "hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-error-container",
-      "hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5"
-    ])
-  },
-  {
-    intent: "info",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-info-container",
-      "hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-neutral-container",
-      "hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-surface",
-      "hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-surface-inverse",
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/dim-5"
-    ])
-  }
-];
-
-// src/button/variants/outlined.ts
-var import_internal_utils5 = require("@spark-ui/internal-utils");
-var outlinedVariants = [
-  {
-    intent: "main",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5",
-      "text-main"
-    ])
-  },
-  {
-    intent: "support",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5",
-      "text-support"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5",
-      "text-accent"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5",
-      "text-basic"
-    ])
-  },
-  {
-    intent: "success",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5",
-      "text-success"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5",
-      "text-alert"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5",
-      "text-error"
-    ])
-  },
-  {
-    intent: "info",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5",
-      "text-info"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5",
-      "text-neutral"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5",
-      "text-surface"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/dim-5",
-      "text-surface-inverse"
-    ])
-  }
-];
-
-// src/button/variants/tinted.ts
-var import_internal_utils6 = require("@spark-ui/internal-utils");
-var tintedVariants = [
-  {
-    intent: "main",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-main-container",
-      "text-on-main-container",
-      "hover:bg-main-container-hovered",
-      "enabled:active:bg-main-container-hovered",
-      "focus-visible:bg-main-container-hovered"
-    ])
-  },
-  {
-    intent: "support",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-support-container",
-      "text-on-support-container",
-      "hover:bg-support-container-hovered",
-      "enabled:active:bg-support-container-hovered",
-      "focus-visible:bg-support-container-hovered"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-accent-container",
-      "text-on-accent-container",
-      "hover:bg-accent-container-hovered",
-      "enabled:active:bg-accent-container-hovered",
-      "focus-visible:bg-accent-container-hovered"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-basic-container",
-      "text-on-basic-container",
-      "hover:bg-basic-container-hovered",
-      "enabled:active:bg-basic-container-hovered",
-      "focus-visible:bg-basic-container-hovered"
-    ])
-  },
-  {
-    intent: "success",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-success-container",
-      "text-on-success-container",
-      "hover:bg-success-container-hovered",
-      "enabled:active:bg-success-container-hovered",
-      "focus-visible:bg-success-container-hovered"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-alert-container",
-      "text-on-alert-container",
-      "hover:bg-alert-container-hovered",
-      "enabled:active:bg-alert-container-hovered",
-      "focus-visible:bg-alert-container-hovered"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-error-container",
-      "text-on-error-container",
-      "hover:bg-error-container-hovered",
-      "enabled:active:bg-error-container-hovered",
-      "focus-visible:bg-error-container-hovered"
-    ])
-  },
-  {
-    intent: "info",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-info-container",
-      "text-on-info-container",
-      "hover:bg-info-container-hovered",
-      "enabled:active:bg-info-container-hovered",
-      "focus-visible:bg-info-container-hovered"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-neutral-container",
-      "text-on-neutral-container",
-      "hover:bg-neutral-container-hovered",
-      "enabled:active:bg-neutral-container-hovered",
-      "focus-visible:bg-neutral-container-hovered"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-surface",
-      "text-on-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/variants/contrast.ts
-var import_internal_utils7 = require("@spark-ui/internal-utils");
-var contrastVariants = [
-  {
-    intent: "main",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-main-contaier bg-surface",
-      "hover:bg-main-container-hovered",
-      "enabled:active:bg-main-container-hovered",
-      "focus-visible:bg-main-container-hovered"
-    ])
-  },
-  {
-    intent: "support",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-support-container bg-surface",
-      "hover:bg-support-container-hovered",
-      "enabled:active:bg-support-container-hovered",
-      "focus-visible:bg-support-container-hovered"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-accent-container bg-surface",
-      "hover:bg-accent-container-hovered",
-      "enabled:active:bg-accent-container-hovered",
-      "focus-visible:bg-accent-container-hovered"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-basic-container bg-surface",
-      "hover:bg-basic-container-hovered",
-      "enabled:active:bg-basic-container-hovered",
-      "focus-visible:bg-basic-container-hovered"
-    ])
-  },
-  {
-    intent: "success",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-success-container bg-surface",
-      "hover:bg-success-container-hovered",
-      "enabled:active:bg-success-container-hovered",
-      "focus-visible:bg-success-container-hovered"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-alert-container bg-surface",
-      "hover:bg-alert-container-hovered",
-      "enabled:active:bg-alert-container-hovered",
-      "focus-visible:bg-alert-container-hovered"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-error-container bg-surface",
-      "hover:bg-error-container-hovered",
-      "enabled:active:bg-error-container-hovered",
-      "focus-visible:bg-error-container-hovered"
-    ])
-  },
-  {
-    intent: "info",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-info-container bg-surface",
-      "hover:bg-info-container-hovered",
-      "enabled:active:bg-info-container-hovered",
-      "focus-visible:bg-info-container-hovered"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-neutral-container bg-surface",
-      "hover:bg-neutral-container-hovered",
-      "enabled:active:bg-neutral-container-hovered",
-      "focus-visible:bg-neutral-container-hovered"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-surface bg-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-surface-inverse bg-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/Button.styles.tsx
-var buttonStyles = (0, import_class_variance_authority4.cva)(
-  [
-    "u-shadow-border-transition",
-    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
-    "default:px-lg",
-    "text-body-1 font-bold",
-    "focus-visible:u-outline"
-  ],
-  {
-    variants: {
-      /**
-       * Main style of the button.
-       *
-       * - `filled`: Button will be plain.
-       *
-       * - `outlined`: Button will be transparent with an outline.
-       *
-       * - `tinted`: Button will be filled but using a lighter color scheme.
-       *
-       * - `ghost`: Button will look like a link. No borders, plain text.
-       *
-       * - `contrast`: Button will be surface filled. No borders, plain text.
-       *
-       */
-      design: (0, import_internal_utils8.makeVariants)({
-        filled: [],
-        outlined: ["bg-transparent", "border-sm", "border-current"],
-        tinted: [],
-        ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
-        contrast: []
-      }),
-      underline: {
-        true: ["underline"]
-      },
-      /**
-       * Color scheme of the button.
-       */
-      intent: (0, import_internal_utils8.makeVariants)({
-        main: [],
-        support: [],
-        accent: [],
-        basic: [],
-        success: [],
-        alert: [],
-        danger: [],
-        info: [],
-        neutral: [],
-        surface: [],
-        surfaceInverse: []
-      }),
-      /**
-       * Size of the button.
-       */
-      size: (0, import_internal_utils8.makeVariants)({
-        sm: ["min-w-sz-32", "h-sz-32"],
-        md: ["min-w-sz-44", "h-sz-44"],
-        lg: ["min-w-sz-56", "h-sz-56"]
-      }),
-      /**
-       * Shape of the button.
-       */
-      shape: (0, import_internal_utils8.makeVariants)({
-        rounded: ["rounded-lg"],
-        square: ["rounded-0"],
-        pill: ["rounded-full"]
-      }),
-      /**
-       * Disable the button, preventing user interaction and adding opacity.
-       */
-      disabled: {
-        true: ["cursor-not-allowed", "opacity-dim-3"],
-        false: ["cursor-pointer"]
-      }
-    },
-    compoundVariants: [
-      ...filledVariants,
-      ...outlinedVariants,
-      ...tintedVariants,
-      ...ghostVariants,
-      ...contrastVariants
-    ],
-    defaultVariants: {
-      design: "filled",
-      intent: "main",
-      size: "md",
-      shape: "rounded"
-    }
-  }
-);
-
-// src/button/Button.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var blockedEventHandlers = [
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseEnter",
-  "onMouseLeave",
-  "onMouseOver",
-  "onMouseOut",
-  "onKeyDown",
-  "onKeyPress",
-  "onKeyUp",
-  "onSubmit"
-];
-var Button = ({
-  children,
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  isLoading = false,
-  loadingLabel,
-  loadingText,
-  shape = "rounded",
-  size = "md",
-  asChild,
-  className,
-  underline = false,
-  ref,
-  ...others
-}) => {
-  const Component = asChild ? Slot : "button";
-  const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react6.useMemo)(() => {
-    const result = {};
-    if (shouldNotInteract) {
-      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
-    }
-    return result;
-  }, [shouldNotInteract]);
-  const spinnerProps = {
-    size: "current",
-    className: loadingText ? "inline-block" : "absolute",
-    ...loadingLabel && { "aria-label": loadingLabel }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Component,
-    {
-      "data-spark-component": "button",
-      ...Component === "button" && { type: "button" },
-      ref,
-      className: buttonStyles({
-        className,
-        design,
-        disabled: shouldNotInteract,
-        intent,
-        shape,
-        size,
-        underline
-      }),
-      disabled: !!disabled,
-      "aria-busy": isLoading,
-      "aria-live": isLoading ? "assertive" : "off",
-      ...others,
-      ...disabledEventHandlers,
-      children: wrapPolymorphicSlot(
-        asChild,
-        children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { ...spinnerProps }),
-          loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              className: (0, import_class_variance_authority5.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
-              children: slotted
-            }
-          )
-        ] }) : slotted
-      )
-    }
-  );
-};
-Button.displayName = "Button";
-
-// src/icon-button/IconButton.styles.tsx
-var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority6 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority6.cva)(["pl-0 pr-0"], {
-  variants: {
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils9.makeVariants)({
-      sm: ["text-body-1"],
-      md: ["text-body-1"],
-      lg: ["text-display-3"]
-    })
-  }
-});
-
-// src/icon-button/IconButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var IconButton = ({
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  shape = "rounded",
-  size = "md",
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    Button,
-    {
-      "data-spark-component": "icon-button",
-      ref,
-      className: iconButtonStyles({ size, className }),
-      design,
-      disabled,
-      intent,
-      shape,
-      size,
-      ...others
-    }
-  );
-};
-IconButton.displayName = "IconButton";
-
-// src/dialog/DialogCloseButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Root = ({
-  "aria-label": ariaLabel,
-  className,
-  size = "md",
-  intent = "neutral",
-  design = "ghost",
-  children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}),
-  ref,
-  ...rest
+var AlertDialogCancel = ({
+  asChild = false,
+  ref: forwardedRef,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    Close,
+  const { cancelRef } = useAlertDialog();
+  const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, cancelRef);
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_alert_dialog3.AlertDialog.Close,
     {
-      "data-spark-component": "dialog-close-button",
-      "data-part": "close",
       ref,
-      className: (0, import_class_variance_authority7.cx)(["absolute", "top-md", "right-xl"], className),
-      asChild: true,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children }) })
+      "data-spark-component": "alert-dialog-cancel",
+      render: renderSlot,
+      ...props
     }
   );
 };
-var CloseButton = Object.assign(Root, {
-  id: "CloseButton"
-});
-Root.displayName = "Dialog.CloseButton";
+AlertDialogCancel.displayName = "AlertDialog.Cancel";
 
-// src/dialog/DialogContent.tsx
-var import_radix_ui4 = require("radix-ui");
-var import_react7 = require("react");
+// src/alert-dialog/AlertDialogContent.tsx
+var import_alert_dialog4 = require("@base-ui-components/react/alert-dialog");
+var import_class_variance_authority3 = require("class-variance-authority");
 
 // src/dialog/DialogContent.styles.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var dialogContentStyles = (0, import_class_variance_authority8.cva)(
+var import_class_variance_authority2 = require("class-variance-authority");
+var dialogContentStyles = (0, import_class_variance_authority2.cva)(
   [
     "z-modal flex flex-col bg-surface group",
     "focus-visible:outline-hidden focus-visible:u-outline",
@@ -1223,300 +227,142 @@ var dialogContentStyles = (0, import_class_variance_authority8.cva)(
   }
 );
 
-// src/dialog/DialogContent.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Content = ({
-  children,
-  className,
-  isNarrow = false,
-  size = "md",
-  onInteractOutside,
-  ref,
-  ...rest
-}) => {
-  const { setIsFullScreen } = useDialog();
-  (0, import_react7.useEffect)(() => {
-    if (size === "fullscreen") setIsFullScreen(true);
-    return () => setIsFullScreen(false);
-  }, [setIsFullScreen, size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_radix_ui4.Dialog.Content,
+// src/alert-dialog/AlertDialogContent.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AlertDialogContent = ({ className, ref, initialFocus, ...others }) => {
+  const { cancelRef } = useAlertDialog();
+  const handleInitialFocus = initialFocus !== void 0 ? initialFocus : () => cancelRef.current;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_alert_dialog4.AlertDialog.Popup,
     {
-      "data-spark-component": "dialog-content",
       ref,
-      className: dialogContentStyles({
-        className,
-        isNarrow,
-        size
-      }),
-      onInteractOutside: (e) => {
-        const isForegroundElement = e.target.closest(".z-toast, .z-popover");
-        if (isForegroundElement) {
-          e.preventDefault();
-        }
-        onInteractOutside?.(e);
-      },
-      ...rest,
-      children
+      "data-spark-component": "alert-dialog-content",
+      role: "alertdialog",
+      className: (state) => (0, import_class_variance_authority3.cx)(
+        dialogContentStyles({ size: "md", isNarrow: true }),
+        "min-w-sz-288",
+        // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes
+        // Transition with opacity and scale for smooth open/close animations
+        "transition-all duration-150",
+        "data-starting-style:scale-90 data-starting-style:opacity-0",
+        "data-ending-style:scale-90 data-ending-style:opacity-0",
+        typeof className === "function" ? className(state) : className
+      ),
+      initialFocus: handleInitialFocus,
+      ...others
     }
   );
 };
-Content.displayName = "Dialog.Content";
+AlertDialogContent.displayName = "AlertDialog.Content";
 
-// src/dialog/DialogDescription.tsx
-var import_radix_ui5 = require("radix-ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Description = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Description, { "data-spark-component": "dialog-description", ...props });
-Description.displayName = "Dialog.Description";
+// src/alert-dialog/AlertDialogDescription.tsx
+var import_alert_dialog5 = require("@base-ui-components/react/alert-dialog");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var AlertDialogDescription = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_alert_dialog5.AlertDialog.Description, { "data-spark-component": "alert-dialog-description", ...props });
+};
+AlertDialogDescription.displayName = "AlertDialog.Description";
 
-// src/dialog/DialogFooter.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+// src/alert-dialog/AlertDialogFooter.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var AlertDialogFooter = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "footer",
   {
-    "data-spark-component": "dialog-footer",
+    "data-spark-component": "alert-dialog-footer",
     ref,
-    className: (0, import_class_variance_authority9.cx)(className, ["px-xl", "py-lg"]),
+    className: (0, import_class_variance_authority4.cx)(className, ["px-xl", "py-lg"]),
     ...rest,
     children
   }
 );
-Footer.displayName = "Dialog.Footer";
+AlertDialogFooter.displayName = "AlertDialog.Footer";
 
-// src/dialog/DialogHeader.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+// src/alert-dialog/AlertDialogHeader.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var AlertDialogHeader = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   "header",
   {
-    "data-spark-component": "dialog-header",
+    "data-spark-component": "alert-dialog-header",
     ref,
-    className: (0, import_class_variance_authority10.cx)(className, ["px-xl", "py-lg"]),
+    className: (0, import_class_variance_authority5.cx)(className, ["px-xl", "py-lg"]),
     ...rest,
     children
   }
 );
-Header.displayName = "Dialog.Header";
-
-// src/dialog/DialogOverlay.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_radix_ui6 = require("radix-ui");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Overlay = ({ className, ref, ...rest }) => {
-  const { isFullScreen } = useDialog();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_radix_ui6.Dialog.Overlay,
-    {
-      "data-spark-component": "dialog-overlay",
-      ref,
-      className: (0, import_class_variance_authority11.cx)(
-        isFullScreen ? "hidden" : "fixed",
-        ["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
-        ["bg-overlay/dim-1"],
-        ["data-[state=open]:animate-fade-in"],
-        ["data-[state=closed]:animate-fade-out"],
-        className
-      ),
-      ...rest
-    }
-  );
-};
-Overlay.displayName = "Dialog.Overlay";
-
-// src/dialog/DialogPortal.tsx
-var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui7.Dialog.Portal, { ...rest, children });
-Portal.displayName = "Dialog.Portal";
+AlertDialogHeader.displayName = "AlertDialog.Header";
 
-// src/dialog/DialogTitle.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_radix_ui8 = require("radix-ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Title = ({ className, ref, ...others }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_radix_ui8.Dialog.Title,
+// src/alert-dialog/AlertDialogOverlay.tsx
+var import_alert_dialog6 = require("@base-ui-components/react/alert-dialog");
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AlertDialogOverlay = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_alert_dialog6.AlertDialog.Backdrop,
     {
-      "data-spark-component": "dialog-title",
-      ref,
-      className: (0, import_class_variance_authority12.cx)(
-        "text-headline-1 text-on-surface",
-        "group-has-data-[part=close]:pr-3xl",
-        className
+      "data-spark-component": "alert-dialog-overlay",
+      className: (state) => (0, import_class_variance_authority6.cx)(
+        "z-overlay fixed top-0 left-0 h-screen w-screen",
+        "bg-overlay/dim-1",
+        // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes
+        "data-[starting-style]:animate-fade-in",
+        "data-[ending-style]:animate-fade-out",
+        typeof className === "function" ? className(state) : className
       ),
-      ...others
+      ...props
     }
   );
 };
-Title.displayName = "Dialog.Title";
-
-// src/dialog/DialogTrigger.tsx
-var import_radix_ui9 = require("radix-ui");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui9.Dialog.Trigger, { "data-spark-component": "dialog-trigger", ...props });
-Trigger.displayName = "Dialog.Trigger";
-
-// src/dialog/index.ts
-var Dialog2 = Object.assign(Dialog, {
-  Trigger,
-  Portal,
-  Overlay,
-  Content,
-  Header,
-  Body,
-  Footer,
-  Close,
-  CloseButton,
-  Title,
-  Description
-});
-Dialog2.displayName = "Dialog";
-Dialog2.Trigger.displayName = "Dialog.Trigger";
-Trigger.displayName = "Dialog.Trigger";
-Portal.displayName = "Dialog.Portal";
-Overlay.displayName = "Dialog.Overlay";
-Content.displayName = "Dialog.Content";
-Header.displayName = "Dialog.Header";
-Body.displayName = "Dialog.Body";
-Footer.displayName = "Dialog.Footer";
-CloseButton.displayName = "Dialog.CloseButton";
-Title.displayName = "Dialog.Title";
-Description.displayName = "Dialog.Description";
-
-// src/alert-dialog/AlertDialog.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var AlertDialog = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog2, { "data-spark-component": "alert-dialog", ...props, modal: true });
-};
-AlertDialog.displayName = "AlertDialog";
-
-// src/alert-dialog/AlertDialogAction.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var AlertDialogAction = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog2.Close, { "data-spark-component": "alert-dialog-action", ...props });
-};
-AlertDialogAction.displayName = "AlertDialog.Action";
-
-// src/alert-dialog/AlertDialogBody.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var AlertDialogBody = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog2.Body, { "data-spark-component": "alert-dialog-body", ...props });
-};
-AlertDialogBody.displayName = "AlertDialog.Body";
-
-// src/alert-dialog/AlertDialogCancel.tsx
-var import_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
-
-// src/alert-dialog/AlertDialogContext.ts
-var import_react8 = require("react");
-var AlertDialogContext = (0, import_react8.createContext)(null);
-var useAlertDialog = () => {
-  const context = (0, import_react8.useContext)(AlertDialogContext);
-  if (!context) {
-    throw Error("useAlertDialog must be used within a RadioGroup provider");
-  }
-  return context;
-};
-
-// src/alert-dialog/AlertDialogCancel.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var AlertDialogCancel = ({ ref: forwardedRef, ...props }) => {
-  const { cancelRef } = useAlertDialog();
-  const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, cancelRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Dialog2.Close, { ref, "data-spark-component": "alert-dialog-cancel", ...props });
-};
-AlertDialogCancel.displayName = "AlertDialog.Cancel";
-
-// src/alert-dialog/AlertDialogContent.tsx
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_internal = require("radix-ui/internal");
-var import_react9 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var AlertDialogContent = ({
-  className,
-  onOpenAutoFocus,
-  ref,
-  ...others
-}) => {
-  const cancelRef = (0, import_react9.useRef)(null);
-  const value = (0, import_react9.useMemo)(() => {
-    return { cancelRef };
-  }, []);
-  const handleOpenAutoFocus = (event) => {
-    event.preventDefault();
-    cancelRef.current?.focus({ preventScroll: true });
-  };
-  const handlePointerDownOutside = (event) => {
-    event.preventDefault();
-  };
-  const handleInteractOutside = (event) => {
-    event.preventDefault();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AlertDialogContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    Dialog2.Content,
-    {
-      ref,
-      "data-spark-component": "alert-dialog-content",
-      ...others,
-      className: (0, import_class_variance_authority13.cx)(className, "min-w-sz-288"),
-      role: "alertdialog",
-      size: "md",
-      onOpenAutoFocus: (0, import_internal.composeEventHandlers)(onOpenAutoFocus, handleOpenAutoFocus),
-      onPointerDownOutside: handlePointerDownOutside,
-      onInteractOutside: handleInteractOutside,
-      isNarrow: true
-    }
-  ) });
-};
-AlertDialogContent.displayName = "AlertDialog.Content";
-
-// src/alert-dialog/AlertDialogDescription.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var AlertDialogDescription = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Dialog2.Description, { "data-spark-component": "alert-dialog-description", ...props });
-};
-AlertDialogDescription.displayName = "AlertDialog.Description";
-
-// src/alert-dialog/AlertDialogFooter.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var AlertDialogFooter = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Dialog2.Footer, { "data-spark-component": "alert-dialog-footer", ...props });
-};
-AlertDialogFooter.displayName = "AlertDialog.Footer";
-
-// src/alert-dialog/AlertDialogHeader.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var AlertDialogHeader = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Dialog2.Header, { "data-spark-component": "alert-dialog-header", ...props });
-};
-AlertDialogHeader.displayName = "AlertDialog.Header";
-
-// src/alert-dialog/AlertDialogOverlay.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var AlertDialogOverlay = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog2.Overlay, { "data-spark-component": "alert-dialog-overlay", ...props });
-};
 AlertDialogOverlay.displayName = "AlertDialog.Overlay";
 
 // src/alert-dialog/AlertDialogPortal.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_alert_dialog7 = require("@base-ui-components/react/alert-dialog");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var AlertDialogPortal = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Dialog2.Portal, { "data-spark-component": "alert-dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_alert_dialog7.AlertDialog.Portal, { "data-spark-component": "alert-dialog-portal", ...props });
 };
 AlertDialogPortal.displayName = "AlertDialog.Portal";
 
 // src/alert-dialog/AlertDialogTitle.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var AlertDialogTitle = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Title, { "data-spark-component": "alert-dialog-title", ...props });
+var import_alert_dialog8 = require("@base-ui-components/react/alert-dialog");
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var AlertDialogTitle = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_alert_dialog8.AlertDialog.Title,
+    {
+      "data-spark-component": "alert-dialog-title",
+      className: (0, import_class_variance_authority7.cx)("text-headline-1 text-on-surface", className),
+      ...props
+    }
+  );
 };
 AlertDialogTitle.displayName = "AlertDialog.Title";
 
 // src/alert-dialog/AlertDialogTrigger.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var AlertDialogTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog2.Trigger, { "data-spark-component": "alert-dialog-title", ...props });
+var import_alert_dialog9 = require("@base-ui-components/react/alert-dialog");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var AlertDialogTrigger = ({ asChild = false, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_alert_dialog9.AlertDialog.Trigger,
+    {
+      "data-spark-component": "alert-dialog-trigger",
+      render: renderSlot,
+      ...props
+    }
+  );
 };
 AlertDialogTrigger.displayName = "AlertDialog.Trigger";