@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/lib/components/mobile-flyout/MobileFlyout.js

@@ -0,0 +1,82 @@
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import cn from "classnames";
+import useForkRef from "../../helper/useForkRef.js";
+import useOnClickOutside from "../../helper/useOnClickOutside.js";
+import useControlled from "../../helper/useControlled.js";
+import MobileFlyoutContext from "./MobileFlyoutContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultVisibleValue = ["root"];
+const MobileFlyout = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    open,
+    onOpenChange,
+    onVisibleChange,
+    defaultOpen,
+    visible,
+    defaultVisible = defaultVisibleValue,
+    back,
+    ...props
+  } = _ref;
+  const [openState, setOpen] = useControlled({
+    controlled: open,
+    default: defaultOpen
+  });
+  const [visibleState, setVisible] = useControlled({
+    controlled: visible,
+    default: defaultVisible
+  });
+  const innerRef = useRef(null);
+  const combinedRef = useForkRef(ref, innerRef);
+  const handleVisibleChange = useCallback(v => {
+    if (visibleState !== undefined) {
+      if (visibleState.includes(v)) {
+        const newArray = visibleState.filter(entry => entry !== v);
+        setVisible(newArray);
+      } else {
+        const newArray = [...visibleState, v];
+        setVisible(newArray);
+      }
+    }
+    onVisibleChange?.(v);
+  }, [onVisibleChange, setVisible, visibleState]);
+  const handleOpenChange = useCallback(v => {
+    setOpen(v);
+    onOpenChange?.(v);
+  }, [onOpenChange, setOpen]);
+  function handleClickOutside() {
+    handleOpenChange(false);
+  }
+  function toggle() {
+    const newOpen = !openState;
+    handleOpenChange(newOpen);
+  }
+  useOnClickOutside(innerRef, handleClickOutside);
+  const contextValue = useMemo(() => ({
+    visible: visibleState ?? defaultVisibleValue,
+    setVisible: handleVisibleChange,
+    setOpen: handleOpenChange,
+    back
+  }), [handleVisibleChange, visibleState, back, handleOpenChange]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cn("fwe-mobile-flyout", className),
+    ...props,
+    ref: combinedRef,
+    children: [/*#__PURE__*/_jsx("button", {
+      "aria-label": "menu",
+      type: "button",
+      className: openState ? "fwe-close-button" : "fwe-burger-button",
+      onClick: toggle
+    }), /*#__PURE__*/_jsx("div", {
+      className: cn("fwe-mobile-flyout-container", {
+        "fwe-opened": openState
+      }),
+      children: /*#__PURE__*/_jsx(MobileFlyoutContext.Provider, {
+        value: contextValue,
+        children: children
+      })
+    })]
+  });
+});
+export default MobileFlyout;

package/{dist → lib}/components/mobile-flyout/MobileFlyoutContext.d.ts

@@ -4,5 +4,5 @@ interface MobileFlyoutContext {
     setOpen: (value: boolean) => void;
     back?: string;
 }
-export declare const MobileFlyoutContext: import("react").Context<MobileFlyoutContext>;
-export {};
+declare const _default: import("react").Context<MobileFlyoutContext>;
+export default _default;

package/lib/components/mobile-flyout/MobileFlyoutContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export default /*#__PURE__*/createContext(null);

package/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.d.ts

@@ -0,0 +1,17 @@
+import type { PolymorphicRef } from "../../../helper/types";
+declare module "react" {
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+interface MobileFlyoutItemBaseProps {
+    icon?: React.ReactNode;
+    pageLink?: string;
+    active?: boolean;
+}
+declare const MobileFlyoutItem: <C extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: MobileFlyoutItemBaseProps & {
+    component?: C | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<C>>, "component" | keyof MobileFlyoutItemBaseProps> & {
+    ref?: PolymorphicRef<C> | undefined;
+} & import("react").RefAttributes<unknown>) => React.ReactElement | null;
+export default MobileFlyoutItem;

package/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -0,0 +1,53 @@
+import cn from "classnames";
+import { forwardRef, useContext } from "react";
+import { IconRight2 } from "@festo-ui/react-icons";
+import MobileFlyoutContext from "../MobileFlyoutContext.js";
+import IconWrapper from "../../icon-wrapper/IconWrapper.js";
+/*
+ * Augment `forwardRef` only for this module so that storybook can infer controls
+ * (despite component being wrapped in forwardRef)
+ * https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
+ * https://github.com/microsoft/TypeScript/pull/30215
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MobileFlyoutItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    component,
+    children,
+    pageLink,
+    icon,
+    onClick,
+    active,
+    ...props
+  } = _ref;
+  const Component = component || "a";
+  const {
+    setVisible,
+    setOpen
+  } = useContext(MobileFlyoutContext);
+  function handleClick(e) {
+    if (pageLink) {
+      setVisible(pageLink);
+    } else {
+      setOpen(false);
+    }
+    onClick?.(e);
+  }
+  return /*#__PURE__*/_jsxs(Component, {
+    className: "fwe-mobile-flyout-item fwe-bb",
+    ...props,
+    ref: ref,
+    onClick: handleClick,
+    children: [/*#__PURE__*/_jsx(IconWrapper, {
+      icon: icon
+    }), /*#__PURE__*/_jsx("div", {
+      className: cn("fwe-flex-grow-1", {
+        "fwe-color-hero": active
+      }, {
+        "fwe-ml-xxs": !!icon
+      }),
+      children: children
+    }), pageLink && /*#__PURE__*/_jsx(IconRight2, {})]
+  });
+});
+export default MobileFlyoutItem;

package/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from "react";
+interface MobileFlyoutPageProps extends ComponentPropsWithoutRef<"div"> {
+    back?: string;
+    name?: string;
+    root?: boolean;
+}
+declare const MobileFlyoutPage: (props: MobileFlyoutPageProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default MobileFlyoutPage;

package/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -0,0 +1,46 @@
+import cn from "classnames";
+import { forwardRef, useContext } from "react";
+import MobileFlyoutContext from "../MobileFlyoutContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MobileFlyoutPage = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    back,
+    children,
+    name,
+    root,
+    ...props
+  } = _ref;
+  const {
+    visible,
+    setVisible,
+    back: backContext
+  } = useContext(MobileFlyoutContext);
+  const innerVisible = root || name && visible.includes(name);
+  const innerBack = back ?? backContext ?? "Back";
+  function handleChange() {
+    if (name) {
+      setVisible(name);
+    }
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: cn("fwe-mobile-flyout-page", {
+      "fwe-opened": innerVisible
+    }),
+    ref: ref,
+    ...props,
+    children: [!root && /*#__PURE__*/_jsx("div", {
+      tabIndex: 0,
+      role: "button",
+      className: "fwe-page-back",
+      onClick: handleChange,
+      onKeyUp: handleChange,
+      children: /*#__PURE__*/_jsx("div", {
+        children: innerBack
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-mobile-flyout-item-container",
+      children: children
+    })]
+  });
+});
+export default MobileFlyoutPage;

package/lib/components/modals/AlertModal.d.ts

@@ -0,0 +1,13 @@
+import { ModalProps } from "./Modal";
+interface AlertModalProps extends Omit<ModalProps, "head" | "children"> {
+    title: string;
+    subtitle?: string;
+    alertType: "info" | "warning" | "error";
+    strong?: boolean;
+    cancel?: string;
+    ok?: string;
+    onCancel?: () => void;
+    onOk?: () => void;
+}
+declare function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }: AlertModalProps): import("react/jsx-runtime").JSX.Element;
+export default AlertModal;

package/lib/components/modals/AlertModal.js

@@ -0,0 +1,60 @@
+import cn from "classnames";
+import Modal from "./Modal.js";
+import ModalFooter from "./ModalFooter.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function AlertModal(_ref) {
+  let {
+    title,
+    subtitle,
+    alertType,
+    strong,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    className,
+    body,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Modal, {
+    className: cn({
+      "fwe-modal--with-indicator-bar": strong,
+      "fwe-modal--warning": alertType === "warning",
+      "fwe-modal--error": alertType === "error",
+      "fwe-modal--info": alertType === "info"
+    }, className),
+    head: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [subtitle && /*#__PURE__*/_jsx("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/_jsx("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: typeof body === "string" ? /*#__PURE__*/_jsx("p", {
+      children: body
+    }) : body,
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/_jsxs(ModalFooter, {
+      children: [cancel && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: cn("fwe-btn fwe-btn-lg", {
+          "fwe-btn-link": strong
+        }),
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: cn("fwe-btn fwe-btn-lg", {
+          "fwe-btn-hero": !strong
+        }),
+        onClick: onOk,
+        children: ok
+      })]
+    })
+  });
+}
+export default AlertModal;

package/lib/components/modals/ConfirmModal.d.ts

@@ -0,0 +1,12 @@
+import { ModalProps } from "./Modal";
+interface ConfirmModalProps extends Omit<ModalProps, "head" | "children"> {
+    title: string;
+    subtitle?: string;
+    cancel?: string;
+    ok?: string;
+    onCancel?: () => void;
+    onOk?: () => void;
+    large?: boolean;
+}
+declare function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
+export default ConfirmModal;

package/lib/components/modals/ConfirmModal.js

@@ -0,0 +1,52 @@
+import cn from "classnames";
+import Modal from "./Modal.js";
+import ModalFooter from "./ModalFooter.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function ConfirmModal(_ref) {
+  let {
+    title,
+    subtitle,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    large,
+    body,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Modal, {
+    className: cn({
+      "fwe-modal--large": large
+    }, className),
+    head: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [subtitle && /*#__PURE__*/_jsx("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/_jsx("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: typeof body === "string" ? /*#__PURE__*/_jsx("p", {
+      children: body
+    }) : body,
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/_jsxs(ModalFooter, {
+      children: [cancel && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn fwe-btn-lg",
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+        onClick: onOk,
+        children: ok
+      })]
+    })
+  });
+}
+export default ConfirmModal;

package/lib/components/modals/CustomModal.d.ts

@@ -0,0 +1,9 @@
+import { ModalBaseProps } from "./ModalBase";
+interface CustomModalProps extends ModalBaseProps {
+    large?: boolean;
+    title?: string;
+    subtitle?: string;
+    onCloseDone?: () => void;
+}
+declare const CustomModal: (props: CustomModalProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default CustomModal;

package/lib/components/modals/CustomModal.js

@@ -0,0 +1,41 @@
+import cn from "classnames";
+import { forwardRef } from "react";
+import ModalBase from "./ModalBase.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CustomModal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    large,
+    title,
+    subtitle,
+    className,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsxs(ModalBase, {
+    className: cn({
+      "fwe-modal--large": large
+    }, className),
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsx("button", {
+      className: "fwe-modal-close-btn",
+      type: "button",
+      "aria-label": "Close",
+      onClick: props.onClose,
+      children: /*#__PURE__*/_jsx("span", {
+        className: "fwe-sr-only",
+        children: "Close"
+      })
+    }), title && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-modal-header",
+      children: [subtitle && /*#__PURE__*/_jsx("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/_jsx("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }), children]
+  });
+});
+export default CustomModal;

package/lib/components/modals/Modal.d.ts

@@ -0,0 +1,9 @@
+import "./Modal.scss";
+import React from "react";
+import { ModalBaseProps } from "./ModalBase";
+export interface ModalProps extends Omit<ModalBaseProps, "onCloseDone"> {
+    head?: React.ReactNode;
+    body: React.ReactNode;
+}
+declare const Modal: (props: ModalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default Modal;

package/lib/components/modals/Modal.js

@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import ModalBase from "./ModalBase.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    head,
+    body,
+    className,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsxs(ModalBase, {
+    className: className,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsx("button", {
+      className: "fwe-modal-close-btn",
+      type: "button",
+      "aria-label": "Close",
+      onClick: props.onClose,
+      children: /*#__PURE__*/_jsx("span", {
+        className: "fwe-sr-only",
+        children: "Close"
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-modal-header",
+      children: head
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-modal-body",
+      children: body
+    }), children]
+  });
+});
+export default Modal;

package/lib/components/modals/ModalBase.d.ts

@@ -0,0 +1,10 @@
+import "./Modal.scss";
+import { ComponentPropsWithoutRef } from "react";
+export interface ModalBaseProps extends ComponentPropsWithoutRef<"div"> {
+    isOpen: boolean;
+    isLoading?: boolean;
+    onClose?: () => void;
+    onCloseDone?: () => void;
+}
+declare const ModalBase: (props: ModalBaseProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default ModalBase;

package/lib/components/modals/ModalBase.js

@@ -0,0 +1,142 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import classNames from "classnames";
+import { forwardRef, useEffect, useRef, useCallback } from "react";
+import ReactDOM from "react-dom";
+import { CSSTransition } from "react-transition-group";
+import { RemoveScroll } from "react-remove-scroll";
+import useForkRef from "../../helper/useForkRef.js";
+import LoadingIndicator from "../loading-indicator/LoadingIndicator.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ModalBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    isOpen,
+    isLoading,
+    onClose,
+    onCloseDone,
+    className,
+    children,
+    ...props
+  } = _ref;
+  const modalRef = useRef(null);
+  const backdropRef = useRef(null);
+  const mouseDownOnBackdropActive = useRef(false);
+  const allRefs = useForkRef(ref, modalRef);
+  const container = modalRef?.current?.ownerDocument || document;
+
+  // Handle Escape key to close modal
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === "Escape" && isOpen) {
+        onClose?.();
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, isOpen, container]);
+
+  // Focus trap implementation
+  const handleTabKey = useCallback(e => {
+    if (e.key === "Tab" && modalRef.current && isOpen) {
+      // Query for all focusable elements
+      const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      // If shift+tab and we're on the first element, move to the last
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      }
+      // If tab and we're on the last element, move to the first
+      else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    }
+  }, [isOpen]);
+
+  // Set up the focus trap listener
+  useEffect(() => {
+    if (isOpen) {
+      container.addEventListener("keydown", handleTabKey);
+
+      // Auto-focus first focusable element when modal opens
+      setTimeout(() => {
+        if (modalRef.current) {
+          const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+
+          // Focus the first input element, or the first focusable element if no input exists
+          const firstInput = Array.from(focusableElements).find(el => el.tagName.toLowerCase() === "input");
+          if (firstInput) {
+            firstInput.focus();
+          } else if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        }
+      }, 100);
+    }
+    return () => {
+      container.removeEventListener("keydown", handleTabKey);
+    };
+  }, [isOpen, handleTabKey, container]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(CSSTransition, {
+        classNames: "fr-modal-backdrop",
+        in: isOpen,
+        timeout: {
+          exit: 300
+        },
+        appear: true,
+        unmountOnExit: true,
+        nodeRef: backdropRef,
+        component: null,
+        children: /*#__PURE__*/_jsx("div", {
+          ref: backdropRef,
+          className: "fr-modal-backdrop fwe-modal-backdrop"
+        })
+      }), /*#__PURE__*/_jsx(CSSTransition, {
+        classNames: "fr-modal",
+        in: isOpen && !isLoading,
+        onExited: onCloseDone,
+        timeout: {
+          exit: 300,
+          enter: 100
+        },
+        appear: true,
+        unmountOnExit: true,
+        nodeRef: modalRef,
+        component: null,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "fr-modal-overlay-wrapper",
+          onClick: e => e.stopPropagation(),
+          onMouseDown: e => {
+            mouseDownOnBackdropActive.current = e.target === e.currentTarget;
+          },
+          onMouseUp: e => {
+            const closeModal = mouseDownOnBackdropActive.current && e.target === e.currentTarget;
+            mouseDownOnBackdropActive.current = false;
+            if (closeModal) {
+              onClose?.();
+            }
+          },
+          children: /*#__PURE__*/_jsx(RemoveScroll, {
+            ref: allRefs,
+            enabled: isOpen,
+            className: classNames("fr-modal fwe-modal", className),
+            ...props,
+            children: children
+          })
+        })
+      }), isOpen && isLoading && /*#__PURE__*/_jsx("div", {
+        className: "fr-modal-overlay-wrapper",
+        children: /*#__PURE__*/_jsx(LoadingIndicator, {
+          size: "large"
+        })
+      })]
+    }), container.body)
+  });
+});
+export default ModalBase;

package/lib/components/modals/ModalFooter.d.ts

@@ -0,0 +1,3 @@
+import { ClassNamePropsWithChildren } from "../../helper/types";
+declare const ModalFooter: (props: ClassNamePropsWithChildren & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default ModalFooter;

package/lib/components/modals/ModalFooter.js

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import cn from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ModalFooter = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: cn("fwe-modal-footer", className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cn("fwe-modal-buttons"),
+      children: children
+    })
+  });
+});
+export default ModalFooter;

package/{dist → lib}/components/modals/Prompt.d.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
-import { type ModalProps } from './Modal';
-export interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'children'> {
+import React from "react";
+import { ModalProps } from "./Modal";
+interface PromptProps extends Omit<ModalProps, "head" | "body" | "children"> {
     title: string;
     subtitle?: string;
     hint?: string;
@@ -12,4 +12,5 @@ export interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'childre
     onCancel?: () => void;
     onOk: (value: string | undefined) => void;
 }
-export declare function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }: PromptProps): JSX.Element;
+export default function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }: PromptProps): JSX.Element;
+export {};