@ultraviolet/ui 1.9.0 → 1.10.0

package/dist/index.d.ts

@@ -14,7 +14,6 @@ import { ReactDatePickerProps } from 'react-datepicker';
 import { Serie, LineSvgProps } from '@nivo/line';
 import { ScaleSpec } from '@nivo/scales';
 import { PopoverStateReturn } from 'reakit/Popover';
-import { DialogProps, DialogStateReturn } from 'reakit/Dialog';
 import Select, { OptionProps, Props, CommonProps as CommonProps$1, GroupBase } from 'react-select';
 import { ToastOptions } from 'react-toastify';
 
@@ -1401,86 +1400,47 @@ type PasswordStrengthMeterProps$1 = {
 };
 declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps$1) => JSX.Element;
 
-declare const MODAL_WIDTH: {
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-    xxsmall: number;
-};
-type ModalWidth = keyof typeof MODAL_WIDTH;
-declare const MODAL_PLACEMENT: {
-    bottom: string;
-    'bottom-left': string;
-    'bottom-right': string;
-    center: string;
-    left: string;
-    right: string;
-    top: string;
-    'top-left': string;
-    'top-right': string;
-};
-type ModalPlacement = keyof typeof MODAL_PLACEMENT;
-declare const MODAL_ANIMATION: {
-    fold: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    scaleBack: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    scaleUp: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    sketch: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideBottom: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideLeft: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideRight: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideTop: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    zoom: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
+type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
+type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
+type ModalState = {
+    onOpen: () => void;
+    onClose: () => void;
+    toggle: () => void;
+    visible: boolean;
+    modalId: string;
 };
-type ModalAnimation = keyof typeof MODAL_ANIMATION;
-type DisclosureParam = ((dialog?: Partial<DialogStateReturn>) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
-type ModalProps = Partial<Pick<DialogProps, 'animated' | 'id' | 'hideOnEsc' | 'hideOnClickOutside' | 'preventBodyScroll'>> & {
-    animation?: ModalAnimation;
+
+type ModalProps = {
+    id?: string;
+    hideOnEsc?: boolean;
+    hideOnClickOutside?: boolean;
+    preventBodyScroll?: boolean;
     ariaLabel?: string;
-    bordered?: boolean;
-    customDialogBackdropStyles?: JSX.IntrinsicAttributes['css'];
-    customDialogStyles?: JSX.IntrinsicAttributes['css'];
-    disclosure?: DisclosureParam;
-    height?: string;
+    disclosure?: ReactNode | ((state: ModalState) => ReactNode);
     isClosable?: boolean;
-    modal?: boolean;
     onClose?: () => void;
     onBeforeClose?: () => Promise<void> | void;
     opened?: boolean;
     placement?: ModalPlacement;
-    width?: ModalWidth;
-    children: ReactNode | ((args: DialogStateReturn) => ReactNode);
+    size?: ModalSize;
+    /**
+     * @deprecated You should use size prop instead
+     */
+    width?: ModalSize;
+    children: ReactNode | ((args: ModalState) => ReactNode);
     className?: string;
     'data-testid'?: string;
+    backdropClassName?: string;
+    /**
+     * @deprecated You should use backdropClassName instead
+     */
+    customDialogBackdropStyles?: react__default.JSX.IntrinsicAttributes['css'];
+    /**
+     * @deprecated You should use className instead
+     */
+    customDialogStyles?: react__default.JSX.IntrinsicAttributes['css'];
 };
-declare const Modal: react.MemoExoticComponent<({ animated, animation, ariaLabel, id, bordered, children, customDialogBackdropStyles, customDialogStyles, disclosure, height, hideOnClickOutside, hideOnEsc, isClosable, modal, onClose, onBeforeClose, opened, placement, preventBodyScroll, width, className, "data-testid": dataTestId, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element>;
+declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, opened, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, width, customDialogStyles, customDialogBackdropStyles, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type NoticeProps = {
     children: ReactNode;

package/dist/src/components/Modal/Dialog.js

@@ -0,0 +1,151 @@
+import _styled from '@emotion/styled/base';
+import { useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { MODAL_WIDTH, MODAL_PLACEMENT } from './constants.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledBackdrop = /*#__PURE__*/_styled("div", {
+  target: "e1cqen9h1"
+})("position:fixed;top:0;right:0;height:0;width:0;overflow:hidden;background-color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.overlay;
+}, ";&[data-open='true']{padding:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";overflow:auto;display:flex;bottom:0;left:0;height:100%;width:100%;}");
+const StyledDialog = /*#__PURE__*/_styled("dialog", {
+  target: "e1cqen9h0"
+})("background-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";position:relative;border-radius:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.radii.default;
+}, ";border:0;padding:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['3'];
+}, ";width:", MODAL_WIDTH.medium, "px;box-shadow:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.shadows.modal;
+}, ";", /*#__PURE__*/Object.entries(MODAL_WIDTH).map(_ref7 => {
+  let [size, value] = _ref7;
+  return `
+      &[data-size="${size}"] {
+        width: ${value}px;
+      }
+      `;
+}), " ", /*#__PURE__*/Object.entries(MODAL_PLACEMENT).map(_ref8 => {
+  let [placement, value] = _ref8;
+  return `
+        &[data-placement="${placement}"] {
+          ${value}
+        }
+        `;
+}), ";");
+const Dialog = _ref9 => {
+  let {
+    children,
+    open,
+    placement,
+    onClose,
+    hideOnClickOutside,
+    size,
+    id,
+    ariaLabel,
+    className,
+    'data-testid': dataTestId,
+    preventBodyScroll,
+    hideOnEsc,
+    backdropClassName,
+    dialogCss,
+    backdropCss
+  } = _ref9;
+  const containerRef = useRef(document.createElement('div'));
+  const onCloseRef = useRef(onClose);
+
+  // Portal to put the modal in
+  useEffect(() => {
+    const element = containerRef.current;
+    if (open) {
+      document.body.appendChild(element);
+    }
+    return () => {
+      if (document.body.contains(element)) {
+        document.body.removeChild(element);
+      }
+    };
+  }, [open]);
+
+  // Save the reassignment of eventHandler in the useEffect below
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  // Handle hide on esc press
+  useEffect(() => {
+    const handleEscPress = event => {
+      if (event.key === 'Escape' && hideOnEsc) {
+        onCloseRef.current();
+      }
+    };
+    if (open) {
+      document.addEventListener('keyup', handleEscPress);
+    }
+    return () => {
+      document.removeEventListener('keyup', handleEscPress);
+    };
+  }, [open, onCloseRef, hideOnEsc]);
+
+  // Handle body scroll
+  useEffect(() => {
+    if (open && preventBodyScroll) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [preventBodyScroll, open]);
+
+  // Stop click to prevent unexpected dialog close
+  const stopClick = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+
+  // Stop key up : used when having inputs in modals
+  const stopKeyUp = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  return /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
+    "data-open": open,
+    onClick: hideOnClickOutside ? onClose : undefined,
+    className: backdropClassName,
+    css: backdropCss,
+    "data-testid": dataTestId ? `${dataTestId}-backdrop` : undefined,
+    children: jsx(StyledDialog, {
+      css: dialogCss,
+      onKeyUp: stopKeyUp,
+      className: className,
+      id: id,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-placement": placement,
+      "data-size": size,
+      open: open,
+      onClick: stopClick,
+      children: open ? children : null
+    })
+  }), containerRef.current);
+};
+
+export { Dialog };

package/dist/src/components/Modal/Disclosure.js

@@ -0,0 +1,38 @@
+import { useEffect, isValidElement, cloneElement, createRef } from 'react';
+
+const Disclosure = _ref => {
+  let {
+    disclosure,
+    handleOpen,
+    visible,
+    handleClose,
+    toggle,
+    id
+  } = _ref;
+  const disclosureRef = /*#__PURE__*/createRef();
+  useEffect(() => {
+    const element = disclosureRef.current;
+    element?.addEventListener('click', handleOpen);
+    return () => {
+      element?.removeEventListener('click', handleOpen);
+    };
+  }, [handleOpen, disclosureRef]);
+  if (typeof disclosure === 'function') {
+    return disclosure({
+      visible,
+      onClose: handleClose,
+      toggle,
+      onOpen: handleOpen,
+      modalId: id
+    });
+  }
+  if ( /*#__PURE__*/isValidElement(disclosure)) {
+    return /*#__PURE__*/cloneElement(disclosure, {
+      ...disclosure.props,
+      ref: disclosureRef
+    });
+  }
+  return null;
+};
+
+export { Disclosure };

package/dist/src/components/Modal/Modal.js

@@ -0,0 +1,110 @@
+import _styled from '@emotion/styled/base';
+import { useState, useId, useCallback } from 'react';
+import { Button } from '../Button/index.js';
+import { Dialog } from './Dialog.js';
+import { Disclosure } from './Disclosure.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e227mx40"
+})("position:absolute;top:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";right:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";");
+const Modal = _ref3 => {
+  let {
+    ariaLabel = 'modal',
+    id,
+    children,
+    disclosure,
+    hideOnClickOutside = true,
+    hideOnEsc = true,
+    isClosable = true,
+    onClose,
+    onBeforeClose,
+    opened = false,
+    placement = 'center',
+    preventBodyScroll = true,
+    size,
+    className,
+    'data-testid': dataTestId,
+    backdropClassName,
+    width = 'small',
+    customDialogStyles,
+    customDialogBackdropStyles
+  } = _ref3;
+  const [visible, setVisible] = useState(opened);
+  const controlId = useId();
+  const handleOpen = useCallback(() => {
+    setVisible(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    } else {
+      const promise = onBeforeClose?.();
+      if (promise && 'catch' in promise) {
+        promise.catch(undefined);
+      }
+      setVisible(false);
+    }
+  }, [onBeforeClose, onClose]);
+  const handleToggle = useCallback(() => {
+    setVisible(current => !current);
+  }, []);
+  const finalId = id ?? controlId;
+  const finalSize = size ?? width;
+  return jsxs(Fragment, {
+    children: [jsx(Disclosure, {
+      id: finalId,
+      handleOpen: handleOpen,
+      disclosure: disclosure,
+      handleClose: handleClose,
+      visible: visible,
+      toggle: handleToggle
+    }), jsx(Dialog, {
+      open: visible,
+      placement: placement,
+      size: finalSize,
+      ariaLabel: ariaLabel,
+      hideOnClickOutside: hideOnClickOutside,
+      hideOnEsc: hideOnEsc,
+      preventBodyScroll: preventBodyScroll,
+      onClose: handleClose,
+      className: className,
+      backdropClassName: backdropClassName,
+      "data-testid": dataTestId,
+      id: finalId,
+      dialogCss: customDialogStyles,
+      backdropCss: customDialogBackdropStyles,
+      children: jsxs(Fragment, {
+        children: [typeof children === 'function' ? children({
+          visible,
+          onClose: handleClose,
+          onOpen: handleOpen,
+          toggle: handleToggle,
+          modalId: finalId
+        }) : children, jsx(StyledContainer, {
+          children: isClosable ? jsx(Button, {
+            "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,
+            onClick: handleClose,
+            variant: "ghost",
+            size: "small",
+            icon: "close",
+            sentiment: "neutral",
+            "aria-label": "close"
+          }) : null
+        })]
+      })
+    })]
+  });
+};
+
+export { Modal };

package/dist/src/components/Modal/constants.js

@@ -0,0 +1,50 @@
+const MODAL_WIDTH = {
+  large: 850,
+  medium: 708,
+  small: 616,
+  xsmall: 400,
+  xxsmall: 360
+};
+const MODAL_PLACEMENT = {
+  bottom: `
+    margin: auto;
+    margin-bottom: 0;
+  `,
+  'bottom-left': `
+    margin: auto;
+    margin-left: 0;
+    margin-bottom: 0;
+  `,
+  'bottom-right': `
+    margin: auto;
+    margin-right: 0;
+    margin-bottom: 0;
+  `,
+  center: `
+    margin: auto;
+  `,
+  left: `
+    margin: auto;
+    margin-left: 0;
+  `,
+  right: `
+    margin: auto;
+    margin-right: 0;
+  `,
+  top: `
+    margin: auto;
+    margin-top: 0px;
+  `,
+  'top-left': `
+    margin: auto;
+    margin-left: 0;
+    margin-top: 0;
+  `,
+  'top-right': `
+    margin: auto;
+    margin-right: 0;
+    margin-top: 0;
+  `
+};
+
+export { MODAL_PLACEMENT, MODAL_WIDTH };

package/dist/src/index.js

@@ -28,7 +28,7 @@ export { List } from './components/List/index.js';
 export { Loader } from './components/Loader/index.js';
 export { Menu } from './components/Menu/index.js';
 export { Meter } from './components/Meter/Meter.js';
-export { Modal } from './components/Modal/index.js';
+export { Modal } from './components/Modal/Modal.js';
 export { Notice } from './components/Notice/index.js';
 export { NumberInput } from './components/NumberInput/index.js';
 export { Pagination } from './components/Pagination/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.10",
+    "@babel/core": "7.22.11",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -68,6 +68,6 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "1.3.0"
+    "@ultraviolet/icons": "1.3.1"
   }
 }

package/dist/src/components/Modal/index.js

@@ -1,283 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-import { memo, useEffect, useCallback, isValidElement, useRef, cloneElement } from 'react';
-import { useDialogState, DialogBackdrop, Dialog, DialogDisclosure } from 'reakit/Dialog';
-import { Button } from '../Button/index.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { unfoldIn, unfoldOut, scaleForward, scaleBack, scaleUp, scaleDown, sketchIn, sketchOut, slideFromBottom, slideToBottom, slideFromLeft, slideToLeft, slideFromRight, slideToRight, slideFromTop, slideToTop, zoomIn, zoomOut } from '../../utils/animations.js';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const MODAL_WIDTH = {
-  large: 850,
-  medium: 708,
-  small: 616,
-  xsmall: 400,
-  xxsmall: 360
-};
-const MODAL_PLACEMENT = {
-  bottom: `
-    margin: auto;
-    margin-bottom: 0;
-  `,
-  'bottom-left': `
-    margin: auto;
-    margin-left: 0;
-    margin-bottom: 0;
-  `,
-  'bottom-right': `
-    margin: auto;
-    margin-right: 0;
-    margin-bottom: 0;
-  `,
-  center: `
-    margin: auto;
-  `,
-  left: `
-    margin: auto;
-    margin-left: 0;
-  `,
-  right: `
-    margin: auto;
-    margin-right: 0;
-  `,
-  top: `
-    margin: auto;
-    margin-top: 0px;
-  `,
-  'top-left': `
-    margin: auto;
-    margin-left: 0;
-    margin-top: 0;
-  `,
-  'top-right': `
-    margin: auto;
-    margin-right: 0;
-    margin-top: 0;
-  `
-};
-const MODAL_ANIMATION = {
-  fold: {
-    enter: unfoldIn,
-    leave: unfoldOut
-  },
-  scaleBack: {
-    enter: scaleForward,
-    leave: scaleBack
-  },
-  scaleUp: {
-    enter: scaleUp,
-    leave: scaleDown
-  },
-  sketch: {
-    enter: sketchIn,
-    leave: sketchOut
-  },
-  slideBottom: {
-    enter: slideFromBottom,
-    leave: slideToBottom
-  },
-  slideLeft: {
-    enter: slideFromLeft,
-    leave: slideToLeft
-  },
-  slideRight: {
-    enter: slideFromRight,
-    leave: slideToRight
-  },
-  slideTop: {
-    enter: slideFromTop,
-    leave: slideToTop
-  },
-  zoom: {
-    enter: zoomIn,
-    leave: zoomOut
-  }
-};
-const backdropAnimatedStyle = `
-  opacity: 0;
-  transition: opacity 250ms ease-in-out;
-  &[data-enter] {
-    opacity: 1;
-    transition: opacity 250ms ease-in-out;
-  }
-  &[data-leave] {
-    opacity: 0;
-    transition: opacity 400ms ease-in-out;
-  }
-`;
-const dialogAnimatedStyle = _ref => {
-  let {
-    animation
-  } = _ref;
-  return /*#__PURE__*/css("opacity:0;&[data-enter]{opacity:1;transition:opacity 500ms ease-in-out;animation:", MODAL_ANIMATION[animation].enter, " 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}&[data-leave]{opacity:0;transition:opacity 500ms ease-in-out;animation:", MODAL_ANIMATION[animation].leave, " 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}");
-};
-const Disclosure = _ref2 => {
-  let {
-    disclosure,
-    dialog
-  } = _ref2;
-  // if you need dialog inside your component, use function, otherwise component is fine
-  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure(dialog);
-  const innerRef = useRef(target);
-  return (
-    // @ts-expect-error reakit types are invalid, no need to pass as something, default is div
-    jsx(DialogDisclosure, {
-      ...dialog,
-      onClick: event => {
-        // This allow to use onClick for speficique case like traking.
-        target?.props?.onClick?.(event);
-      },
-      ref: innerRef,
-      children: disclosureProps => /*#__PURE__*/cloneElement(target, disclosureProps)
-    })
-  );
-};
-const MemoDisclosure = /*#__PURE__*/memo(Disclosure);
-const StyledDialogBackdrop = /*#__PURE__*/_styled(DialogBackdrop, {
-  target: "ebywm9u2"
-})("display:flex;position:fixed;overflow:auto;padding:16px;top:0;bottom:0;right:0;left:0;opacity:1;background-color:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.overlay;
-}, ";", _ref4 => {
-  let {
-    animated
-  } = _ref4;
-  return animated && backdropAnimatedStyle;
-}, ";");
-const StyledDialog = /*#__PURE__*/_styled(Dialog, {
-  shouldForwardProp: prop => !['animation', 'placement', 'width', 'height', 'bordered'].includes(prop),
-  target: "ebywm9u1"
-})("background-color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";position:relative;border-radius:", _ref6 => {
-  let {
-    bordered,
-    theme
-  } = _ref6;
-  return bordered ? theme.radii.default : theme.radii.none;
-}, ";border:0;padding:32px;", _ref7 => {
-  let {
-    placement
-  } = _ref7;
-  return MODAL_PLACEMENT[placement];
-}, " width:", _ref8 => {
-  let {
-    width
-  } = _ref8;
-  return MODAL_WIDTH[width];
-}, "px;min-height:", _ref9 => {
-  let {
-    height
-  } = _ref9;
-  return height;
-}, ";box-shadow:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.shadows.modal;
-}, ";opacity:1;&::before{content:'';height:100%;width:100%;}", _ref11 => {
-  let {
-    animated,
-    animation
-  } = _ref11;
-  return animated && dialogAnimatedStyle({
-    animation
-  });
-}, ";");
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "ebywm9u0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "et21s3",
-  styles: "display:flex;flex-grow:1;flex-wrap:wrap;justify-content:flex-end;position:absolute;top:16px;right:16px;left:16px"
-} : {
-  name: "et21s3",
-  styles: "display:flex;flex-grow:1;flex-wrap:wrap;justify-content:flex-end;position:absolute;top:16px;right:16px;left:16px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Modal = /*#__PURE__*/memo(_ref12 => {
-  let {
-    animated = false,
-    animation = 'zoom',
-    ariaLabel = 'modal',
-    id,
-    bordered = true,
-    children,
-    customDialogBackdropStyles,
-    customDialogStyles = {},
-    disclosure,
-    height = 'initial',
-    hideOnClickOutside = true,
-    hideOnEsc = true,
-    isClosable = true,
-    modal = true,
-    onClose,
-    onBeforeClose,
-    opened = false,
-    placement = 'center',
-    preventBodyScroll = true,
-    width = 'small',
-    className,
-    'data-testid': dataTestId
-  } = _ref12;
-  const dialog = useDialogState({
-    animated,
-    baseId: id,
-    modal,
-    visible: opened
-  });
-  const {
-    setVisible
-  } = dialog;
-  useEffect(() => setVisible(opened), [setVisible, opened]);
-  const onCloseCallBack = useCallback(async () => {
-    await onBeforeClose?.();
-    dialog.toggle();
-  }, [dialog, onBeforeClose]);
-  return jsxs(Fragment, {
-    children: [disclosure && jsx(MemoDisclosure, {
-      dialog: dialog,
-      disclosure: disclosure
-    }), jsx(StyledDialogBackdrop, {
-      ...dialog,
-      css: customDialogBackdropStyles,
-      children: jsx(StyledDialog, {
-        "aria-label": ariaLabel,
-        role: "dialog",
-        tabIndex: 0,
-        animation: animation,
-        bordered: bordered,
-        height: height,
-        placement: placement,
-        width: width,
-        css: customDialogStyles,
-        hideOnClickOutside: hideOnClickOutside,
-        hideOnEsc: hideOnEsc,
-        preventBodyScroll: preventBodyScroll,
-        ...dialog,
-        hide: onClose || onCloseCallBack,
-        className: className,
-        "data-testid": dataTestId,
-        children: jsxs(Fragment, {
-          children: [dialog.visible && (typeof children === 'function' ? children(dialog) : children), jsx(StyledContainer, {
-            children: isClosable && jsx(Button, {
-              "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,
-              onClick: onClose || onCloseCallBack,
-              variant: "ghost",
-              size: "small",
-              icon: "close",
-              sentiment: "neutral",
-              "aria-label": "close"
-            })
-          })]
-        })
-      })
-    })]
-  });
-});
-
-export { MODAL_ANIMATION, MODAL_PLACEMENT, MODAL_WIDTH, Modal };