@navikt/ds-react 7.36.0 → 7.38.0

package/src/dialog/root/DialogRoot.tsx

@@ -0,0 +1,296 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useId } from "../../util";
+import { useControllableState } from "../../util/hooks/useControllableState";
+import { useEventCallback } from "../../util/hooks/useEventCallback";
+import { useTransitionStatus } from "../../util/hooks/useTransitionStatus";
+import { DialogBody } from "../body/DialogBody";
+import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
+import { DialogDescription } from "../description/DialogDescription";
+import { DialogFooter } from "../footer/DialogFooter";
+import { DialogHeader } from "../header/DialogHeader";
+import { DialogPopup } from "../popup/DialogPopup";
+import { DialogTitle } from "../title/DialogTitle";
+import { DialogTrigger } from "../trigger/DialogTrigger";
+import { DialogContextProvider, useDialogContext } from "./DialogRoot.context";
+
+interface DialogProps {
+  children: React.ReactNode;
+  /**
+   * Whether the dialog is currently open.
+   */
+  open?: boolean;
+  /**
+   * Whether the dialog should be initially open.
+   *
+   * To render a controlled dialog, use the `open` prop instead.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Event handler called when the dialog is opened or closed.
+   */
+  onOpenChange?: (nextOpen: boolean, event: Event) => void;
+  /**
+   * Event handler called after any animations complete when the dialog is opened or closed.
+   */
+  onOpenChangeComplete?: (open: boolean) => void;
+  /**
+   * Updates sub-component padding + DialogTitle and DialogDescription font-size.
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+}
+
+interface DialogComponent extends React.FC<DialogProps> {
+  /**
+   * @see 🏷️ {@link DialogTriggerProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Trigger>
+   *      <Button>Open dialog</Button>
+   *    </Dialog.Trigger>
+   *  </Dialog>
+   * ```
+   */
+  Trigger: typeof DialogTrigger;
+  /**
+   * @see 🏷️ {@link DialogCloseTriggerProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Popup>
+   *      <Dialog.CloseTrigger>
+   *        <Button>Close dialog</Button>
+   *      </Dialog.CloseTrigger>
+   *    </Dialog.Popup>
+   *  </Dialog>
+   * ```
+   */
+  CloseTrigger: typeof DialogCloseTrigger;
+  /**
+   * @see 🏷️ {@link DialogPopupProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Popup>
+   *      ...
+   *    </Dialog.Popup>
+   *  </Dialog>
+   * ```
+   */
+  Popup: typeof DialogPopup;
+
+  /**
+   * @see 🏷️ {@link DialogHeaderProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Popup>
+   *      <Dialog.Header>
+   *        <Dialog.Title>Dialog title</Dialog.Title>
+   *      </Dialog.Header>
+   *    </Dialog.Popup>
+   *  </Dialog>
+   * ```
+   */
+  Header: typeof DialogHeader;
+
+  /**
+   * @see 🏷️ {@link DialogTitleProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Popup>
+   *      <Dialog.Header>
+   *        <Dialog.Title>Dialog title</Dialog.Title>
+   *      </Dialog.Header>
+   *    </Dialog.Popup>
+   *  </Dialog>
+   * ```
+   */
+  Title: typeof DialogTitle;
+
+  /**
+   * @see 🏷️ {@link DialogDescriptionProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Popup>
+   *      <Dialog.Header>
+   *        <Dialog.Title>Dialog title</Dialog.Title>
+   *        <Dialog.Description>Dialog description</Dialog.Description>
+   *      </Dialog.Header>
+   *    </Dialog.Popup>
+   *  </Dialog>
+   * ```
+   */
+  Description: typeof DialogDescription;
+
+  /**
+   * @see 🏷️ {@link DialogBodyProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Popup>
+   *      <Dialog.Body>
+   *        Dialog body content
+   *      </Dialog.Body>
+   *    </Dialog.Popup>
+   *  </Dialog>
+   * ```
+   */
+  Body: typeof DialogBody;
+
+  /**
+   * @see 🏷️ {@link DialogFooterProps}
+   * @example
+   * ```jsx
+   *  <Dialog>
+   *    <Dialog.Popup>
+   *      <Dialog.Footer>
+   *        <Dialog.CloseTrigger>
+   *          <Button>Close dialog</Button>
+   *        </Dialog.CloseTrigger>
+   *      </Dialog.Footer>
+   *    </Dialog.Popup>
+   *  </Dialog>
+   * ```
+   */
+  Footer: typeof DialogFooter;
+}
+
+/**
+ * Dialog component for displaying modal content on top of an application.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dialog)
+ * @see 🏷️ {@link DialogProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Trigger>
+ *      <Button>Open dialog</Button>
+ *    </Dialog.Trigger>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *        <Dialog.Description>Dialog description</Dialog.Description>
+ *      </Dialog.Header>
+ *      <Dialog.Body>
+ *        Dialog body content
+ *      </Dialog.Body>
+ *      <Dialog.Footer>
+ *        <Dialog.CloseTrigger>
+ *          <Button>Close dialog</Button>
+ *        </Dialog.CloseTrigger>
+ *      </Dialog.Footer>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+export const Dialog: DialogComponent = (props: DialogProps) => {
+  const {
+    children,
+    defaultOpen = false,
+    open: openParam,
+    onOpenChange,
+    onOpenChangeComplete,
+    size = "medium",
+  } = props;
+
+  const [open, setOpenStateInternal] = useControllableState({
+    defaultValue: defaultOpen,
+    value: openParam,
+  });
+
+  const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+
+  const popupRef = useRef<HTMLDivElement | null>(null);
+
+  const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(
+    null,
+  );
+  const [popupElement, setPopupElement] = useState<HTMLElement | null>(null);
+
+  const defaultId = useId();
+
+  const [titleId, setTitleId] = useState<string>();
+
+  const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = useState(0);
+
+  const nestedDialogOpened = useCallback((nestedCount: number) => {
+    setOwnNestedOpenDialogs(nestedCount + 1);
+  }, []);
+
+  const nestedDialogClosed = useCallback(() => {
+    setOwnNestedOpenDialogs(0);
+  }, []);
+
+  const parentContext = useDialogContext(false);
+
+  /**
+   * Notify parent dialog about nested dialogs opening/closing.
+   * This allows us to better hide/obscure parent dialogs when nested dialogs are opened.
+   *
+   * This pattern is not good for deep nesting since the context updates will cause cascading renders
+   * but should work fine for 1-2 levels of nesting which is the most common use case here.
+   */
+  useEffect(() => {
+    if (open && parentContext) {
+      parentContext.nestedDialogOpened(ownNestedOpenDialogs);
+      return () => parentContext.nestedDialogClosed();
+    }
+  }, [open, parentContext, ownNestedOpenDialogs]);
+
+  /**
+   * Passing the original event to onOpenChange to allow preventing the state change
+   */
+  const setOpen = useEventCallback(
+    (nextOpen: boolean, originalEvent: Event) => {
+      onOpenChange?.(nextOpen, originalEvent);
+
+      if (originalEvent?.defaultPrevented) {
+        return;
+      }
+
+      setOpenStateInternal(nextOpen);
+    },
+  );
+
+  return (
+    <DialogContextProvider
+      open={open}
+      setOpen={setOpen}
+      mounted={mounted}
+      transitionStatus={transitionStatus}
+      popupRef={popupRef}
+      setPopupElement={setPopupElement}
+      popupElement={popupElement}
+      popupId={popupElement?.id ?? defaultId}
+      setTriggerElement={setTriggerElement}
+      triggerElement={triggerElement}
+      nested={!!parentContext}
+      nestedDialogOpened={nestedDialogOpened}
+      nestedDialogClosed={nestedDialogClosed}
+      nestedOpenDialogCount={ownNestedOpenDialogs}
+      size={size}
+      titleId={titleId}
+      setTitleId={setTitleId}
+      onOpenChangeComplete={onOpenChangeComplete}
+      setMounted={setMounted}
+    >
+      {children}
+    </DialogContextProvider>
+  );
+};
+
+Dialog.Trigger = DialogTrigger;
+Dialog.CloseTrigger = DialogCloseTrigger;
+Dialog.Header = DialogHeader;
+Dialog.Title = DialogTitle;
+Dialog.Description = DialogDescription;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+Dialog.Popup = DialogPopup;
+
+export default Dialog;
+export type { DialogProps };

package/src/dialog/title/DialogTitle.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
+import { Heading } from "../../typography";
+import { useClientLayoutEffect, useId } from "../../util";
+import { useDialogContext } from "../root/DialogRoot.context";
+
+type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+
+/**
+ * @see 🏷️ {@link DialogTitleProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *      </Dialog.Header>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ className, children, id, ...restProps }, forwardedRef) => {
+    const { cn } = useRenameCSS();
+    const { size, setTitleId } = useDialogContext();
+
+    const titleId = useId(id);
+
+    useClientLayoutEffect(() => {
+      setTitleId(titleId);
+      return () => {
+        setTitleId(undefined);
+      };
+    }, [titleId, setTitleId]);
+
+    return (
+      <Heading
+        {...restProps}
+        id={titleId}
+        ref={forwardedRef}
+        className={cn("navds-dialog__title", className)}
+        size={size}
+        level="1"
+      >
+        {children}
+      </Heading>
+    );
+  },
+);
+
+export { DialogTitle };
+export type { DialogTitleProps };

package/src/dialog/trigger/DialogTrigger.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useMergeRefs } from "../../util/hooks";
+import { useDialogContext } from "../root/DialogRoot.context";
+
+type DialogTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  children: React.ReactElement;
+};
+
+/**
+ * @see 🏷️ {@link DialogTriggerProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Trigger>
+ *      <Button>Open dialog</Button>
+ *    </Dialog.Trigger>
+ *  </Dialog>
+ * ```
+ */
+const DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(
+  ({ children, onClick, ...restProps }, forwardedRef) => {
+    const { open, setOpen, setTriggerElement, popupId } = useDialogContext();
+
+    const mergedRefs = useMergeRefs(forwardedRef, setTriggerElement);
+
+    return (
+      <Slot
+        type="button"
+        {...restProps}
+        ref={mergedRefs}
+        onClick={composeEventHandlers(onClick, (event) =>
+          setOpen(!open, event.nativeEvent),
+        )}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls={open ? popupId : undefined}
+      >
+        {children}
+      </Slot>
+    );
+  },
+);
+
+export { DialogTrigger };
+export type { DialogTriggerProps };

package/src/expansion-card/ExpansionCardContent.tsx

@@ -14,7 +14,7 @@ const ExpansionCardContent = forwardRef<
 >(({ children, className, ...rest }, ref) => {
   const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
-  const themeContext = useThemeInternal(false);
+  const themeContext = useThemeInternal();
 
   if (panelContext === null) {
     console.error(

package/src/form/checkbox/Checkbox.tsx

@@ -12,7 +12,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const { cn } = useRenameCSS();
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
     const descriptionId = useId();
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     if (themeContext?.isDarkside) {
       return (

package/src/form/combobox/ComboboxWrapper.tsx

@@ -43,6 +43,7 @@ const ComboboxWrapper = ({
   }
 
   return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper for combobox input and chips.
     <div
       ref={wrapperRef}
       className={cn(

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -15,7 +15,7 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const { cn } = useRenameCSS();
-  const themeContext = useThemeInternal(false);
+  const themeContext = useThemeInternal();
   const {
     inputProps: { id },
     anchorRef,
@@ -103,7 +103,6 @@ const FilteredOptions = () => {
         )}
 
         {shouldRenderFilteredOptionsList && (
-          /* biome-ignore lint/a11y/useFocusableInteractive: Interaction is not handeled by listbox itself. */
           <ul
             ref={setFilteredOptionsRef}
             role="listbox"

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { SetStateAction, useCallback, useMemo, useState } from "react";
-import { createContext } from "../../../util/create-context";
+import { createStrictContext } from "../../../util/create-strict-context";
 import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -36,12 +36,14 @@ type FilteredOptionsContextValue = {
   shouldAutocomplete?: boolean;
   virtualFocus: VirtualFocusType;
 };
-const [FilteredOptionsContextProvider, useFilteredOptionsContext] =
-  createContext<FilteredOptionsContextValue>({
-    name: "FilteredOptionsContext",
-    errorMessage:
-      "useFilteredOptionsContext must be used within a FilteredOptionsProvider",
-  });
+const {
+  Provider: FilteredOptionsContextProvider,
+  useContext: useFilteredOptionsContext,
+} = createStrictContext<FilteredOptionsContextValue>({
+  name: "FilteredOptionsContext",
+  errorMessage:
+    "useFilteredOptionsContext must be used within a FilteredOptionsProvider",
+});
 
 const FilteredOptionsProvider = ({
   children,

package/src/form/combobox/Input/Input.context.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { createContext } from "../../../util/create-context";
+import { createStrictContext } from "../../../util/create-strict-context";
 import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
 import { ComboboxProps } from "../types";
@@ -22,8 +22,8 @@ interface InputContextValue extends FormFieldType {
   setAnchorRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
 }
 
-const [InputContextProvider, useInputContext] =
-  createContext<InputContextValue>({
+const { Provider: InputContextProvider, useContext: useInputContext } =
+  createStrictContext<InputContextValue>({
     name: "InputContext",
     errorMessage: "useInputContext must be used within an InputContextProvider",
   });

package/src/form/combobox/Input/InputController.tsx

@@ -59,6 +59,7 @@ export const InputController = forwardRef<
 
   return (
     <Floating.Anchor asChild ref={setAnchorRef}>
+      {/** biome-ignore lint/a11y/noStaticElementInteractions: Acts as wrapper list-toggle and input */}
       <div
         className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
           "navds-combobox__wrapper-inner--virtually-unfocused":

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { createContext } from "../../../util/create-context";
+import { createStrictContext } from "../../../util/create-strict-context";
 import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/Input.context";
 import { isInList } from "../combobox-utils";
@@ -20,8 +20,12 @@ type SelectedOptionsContextValue = {
   ) => void;
 };
 
-const [SelectedOptionsContextProvider, useSelectedOptionsContext] =
-  createContext<SelectedOptionsContextValue>();
+const {
+  Provider: SelectedOptionsContextProvider,
+  useContext: useSelectedOptionsContext,
+} = createStrictContext<SelectedOptionsContextValue>({
+  name: "SelectedOptionsContext",
+});
 
 const SelectedOptionsProvider = ({
   children,

package/src/form/combobox/customOptionsContext.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { createContext } from "../../util/create-context";
+import { createStrictContext } from "../../util/create-strict-context";
 import { useInputContext } from "./Input/Input.context";
 import { ComboboxOption } from "./types";
 
@@ -10,12 +10,14 @@ type CustomOptionsContextValue = {
   setCustomOptions: React.Dispatch<React.SetStateAction<ComboboxOption[]>>;
 };
 
-const [ComboboxCustomOptionsProvider, useComboboxCustomOptions] =
-  createContext<CustomOptionsContextValue>({
-    name: "ComboboxCustomOptions",
-    errorMessage:
-      "useComboboxCustomOptions must be used within a ComboboxCustomOptionsProvider",
-  });
+const {
+  Provider: ComboboxCustomOptionsProvider,
+  useContext: useComboboxCustomOptions,
+} = createStrictContext<CustomOptionsContextValue>({
+  name: "ComboboxCustomOptions",
+  errorMessage:
+    "useComboboxCustomOptions must be used within a ComboboxCustomOptionsProvider",
+});
 
 const CustomOptionsProvider = ({
   children,

package/src/form/error-summary/ErrorSummary.tsx

@@ -87,6 +87,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     const mergedRef = useMergeRefs(ref, wrapperRef);
 
     return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: Allows focus-calls on div to move focus to heading.
       <div
         ref={mergedRef}
         {...rest}

package/src/form/file-upload/FileUpload.context.tsx

@@ -1,9 +1,13 @@
-import { createContext } from "../../util/create-context";
+import { createStrictContext } from "../../util/create-strict-context";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
 
 export type FileUploadLocaleContextProps = {
   translations?: ComponentTranslation<"FileUpload">;
 };
 
-export const [FileUploadLocaleContextProvider, useFileUploadTranslation] =
-  createContext<FileUploadLocaleContextProps>();
+export const {
+  Provider: FileUploadLocaleContextProvider,
+  useContext: useFileUploadTranslation,
+} = createStrictContext<FileUploadLocaleContextProps>({
+  name: "FileUploadLocaleContext",
+});

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { CircleSlashIcon, CloudUpIcon } from "@navikt/aksel-icons";
@@ -98,16 +101,15 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
             {description}
           </BodyShort>
         )}
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: Assistive technologies will use the input within.  */}
         <div
           className={cn("navds-dropzone__area")}
           onDragEnter={dropzoneCtx.onDragEnter}
           onDragOver={dropzoneCtx.onDragOver}
           onDragLeave={dropzoneCtx.onDragLeave}
           onDrop={dropzoneCtx.onDrop}
-          onClick={composeEventHandlers(
-            onClick,
-            () => inputRef.current?.click(),
+          onClick={composeEventHandlers(onClick, () =>
+            inputRef.current?.click(),
           )}
           data-disabled={inputProps.disabled}
         >

package/src/form/radio/Radio.tsx

@@ -10,7 +10,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { cn } = useRenameCSS();
   const { inputProps, size, hasError, readOnly } = useRadio(props);
   const descriptionId = useId();
-  const themeContext = useThemeInternal(false);
+  const themeContext = useThemeInternal();
 
   if (themeContext?.isDarkside) {
     return (

package/src/form/search/Search.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, {
   InputHTMLAttributes,
   forwardRef,
@@ -151,7 +152,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       clearButton && !inputProps.disabled && (value ?? internalValue);
 
     return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      // biome-ignore lint/a11y/noStaticElementInteractions: Escape key handler for clearing input
       <div
         onKeyDown={(event) => {
           if (event.key !== "Escape") {
@@ -268,7 +269,7 @@ function ClearButton({
 }: SearchClearButtonProps) {
   const { cn } = useRenameCSS();
 
-  const themeContext = useThemeInternal(false);
+  const themeContext = useThemeInternal();
   const translate = useI18n("Search");
 
   return themeContext?.isDarkside ? (

package/src/guide-panel/GuidePanel.tsx

@@ -47,7 +47,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
     ref,
   ) => {
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     return (
       <div

package/src/help-text/HelpText.tsx

@@ -53,7 +53,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
     const [open, setOpen] = useState(false);
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
     const translate = useI18n("HelpText");
 
     const titleWithFallback = title || translate("title");

package/src/index.ts

@@ -187,6 +187,18 @@ export {
   type LocalAlertContentProps,
   type LocalAlertCloseButtonProps,
 } from "./alert/local-alert";
+export {
+  Dialog,
+  type DialogProps,
+  type DialogTriggerProps,
+  type DialogCloseTriggerProps,
+  type DialogPopupProps,
+  type DialogHeaderProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
+  type DialogBodyProps,
+  type DialogFooterProps,
+} from "./dialog";
 
 /**
  * Theming