@ultraviolet/ui 1.51.1 → 1.51.3

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

@@ -1,129 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-import { forwardRef, isValidElement, useRef, useImperativeHandle, cloneElement } from 'react';
-import { usePopoverState, PopoverDisclosure, Popover } from 'reakit/Popover';
-import { Portal } from 'reakit/Portal';
-import Item from './Item.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-
-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 StyledPopover = /*#__PURE__*/_styled(Popover, {
-  target: "e1hqs9p51"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";box-shadow:", ({
-  theme
-}) => theme.shadows.dropdown, ";");
-const bottomStyles = theme => /*#__PURE__*/css("box-shadow:", theme.shadows.menu, ";&:after,&:before{bottom:100%;}&:after{border-bottom-color:", theme.colors.neutral.background, ";}&:before{border-bottom-color:transparent;}");
-const topStyles = theme => /*#__PURE__*/css("box-shadow:", theme.shadows.menu, ";&:after,&:before{top:100%;}&:after{border-top-color:", theme.colors.neutral.background, ";}&:before{border-top-color:rgba(165, 165, 205, 0.4);}");
-const endStyles = process.env.NODE_ENV === "production" ? {
-  name: "15zu3sa",
-  styles: "&:after{margin-left:-9px;right:24px;}&:before{margin-left:-11px;right:24px;}"
-} : {
-  name: "15zu3sa",
-  styles: "&:after{margin-left:-9px;right:24px;}&:before{margin-left:-11px;right:24px;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const startStyles = process.env.NODE_ENV === "production" ? {
-  name: "17k88rr",
-  styles: "&:after{margin-right:-9px;left:24px;}&:before{margin-right:-11px;left:24px;}"
-} : {
-  name: "17k88rr",
-  styles: "&:after{margin-right:-9px;left:24px;}&:before{margin-right:-11px;left:24px;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const centerStyles = process.env.NODE_ENV === "production" ? {
-  name: "1qzrhtz",
-  styles: "&:after,&:before{left:50%;transform:translateX(-50%);}"
-} : {
-  name: "1qzrhtz",
-  styles: "&:after,&:before{left:50%;transform:translateX(-50%);}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const arrowPlacementStyles = {
-  bottom: theme => /*#__PURE__*/css(centerStyles, ";", bottomStyles(theme), ";"),
-  'bottom-end': theme => /*#__PURE__*/css(endStyles, ";", bottomStyles(theme), ";"),
-  'bottom-start': theme => /*#__PURE__*/css(startStyles, ";", bottomStyles(theme), ";"),
-  top: theme => /*#__PURE__*/css(centerStyles, ";", topStyles(theme), ";"),
-  'top-end': theme => /*#__PURE__*/css(endStyles, ";", topStyles(theme), ";"),
-  'top-start': theme => /*#__PURE__*/css(startStyles, ";", topStyles(theme), ";")
-};
-const MenuList = /*#__PURE__*/_styled("div", {
-  target: "e1hqs9p50"
-})("&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";display:flex;flex-direction:column;text-align:center;justify-content:center;color:", ({
-  theme
-}) => theme.colors.neutral.text, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";position:relative;", ({
-  placement,
-  theme,
-  hasArrow
-}) => hasArrow && arrowPlacementStyles[placement]?.(theme), ";");
-const FwdMenu = /*#__PURE__*/forwardRef(({
-  ariaLabel = 'Menu',
-  id,
-  children,
-  disclosure,
-  hasArrow = true,
-  placement = 'bottom',
-  visible = false,
-  className,
-  'data-testid': dataTestId
-}, ref) => {
-  const popover = usePopoverState({
-    baseId: id,
-    placement,
-    visible
-  });
-
-  // if you need dialog inside your component, use function, otherwise component is fine
-  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure(popover);
-  const innerRef = useRef(target);
-  useImperativeHandle(ref, () => innerRef.current);
-  return jsxs(Fragment, {
-    children: [disclosure &&
-    // @ts-expect-error reakit types are invalid, no need to pass as something, default is div
-    jsx(PopoverDisclosure, {
-      ...popover,
-      onClick: event => {
-        target?.props?.onClick?.(event);
-      },
-      ref: innerRef,
-      children: disclosureProps => /*#__PURE__*/cloneElement(target, disclosureProps)
-    }), jsx(Portal, {
-      children: jsx(StyledPopover, {
-        ...popover,
-        "aria-label": ariaLabel,
-        className: className,
-        children: /* Required to avoid loading menu content if not visible */
-        popover.visible ? jsx(MenuList, {
-          "data-testid": dataTestId,
-          className: className,
-          hasArrow: hasArrow,
-          placement: popover.placement,
-          role: "menu",
-          children: typeof children === 'function' ? children(popover) : children
-        }) : null
-      })
-    })]
-  });
-});
-
-/**
- * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
- * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
- * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
- * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
- * @deprecated use MenuV2 component instead
- */
-const Menu = /*#__PURE__*/Object.assign(FwdMenu, {
-  Item
-});
-
-export { Menu };

package/dist/src/components/MenuV2/Group.js

@@ -1,25 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Text } from '../Text/index.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-
-const Container = /*#__PURE__*/_styled("span", {
-  target: "e7u2rl20"
-})("padding:", ({
-  theme
-}) => `${theme.space['0.5']} ${theme.space['1.5']}`, ";text-align:left;");
-const Group = ({
-  label,
-  children
-}) => jsxs(Fragment, {
-  children: [jsx(Container, {
-    children: jsx(Text, {
-      variant: "captionStrong",
-      as: "span",
-      prominence: "weak",
-      sentiment: "neutral",
-      children: label
-    })
-  }), children]
-});
-
-export { Group };

package/dist/src/components/MenuV2/Item.js

@@ -1,139 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const ANIMATION_DURATION = 200; // in ms
-
-const itemCoreStyle = ({
-  theme,
-  sentiment,
-  disabled
-}) => `
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  min-height: 32px;
-  max-height: 44px;
-  font-size: ${theme.typography.bodySmall.fontSize};
-  line-height: ${theme.typography.bodySmall.lineHeight};
-  font-weight: inherit;
-  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
-  border: none;
-  cursor: pointer;
-  min-width: 110px;
-  width: 100%;
-  border-radius: ${theme.radii.default};
-  transition: background-color ${ANIMATION_DURATION}ms, color ${ANIMATION_DURATION}ms;
-
-  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  svg {
-    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  }
-
-  ${disabled ? `
-        cursor: not-allowed;
-      ` : `
-          &:hover,
-          &:focus, &[data-active='true'] {
-            background-color: ${theme.colors[sentiment].backgroundHover};
-            color: ${theme.colors[sentiment].textHover};
-            svg {
-              fill: ${theme.colors[sentiment].textHover};
-            }
-          }`}
-  `;
-const Container = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['borderless'].includes(prop),
-  target: "ei26g5y2"
-})(({
-  theme,
-  borderless
-}) => borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`, " padding:", ({
-  theme,
-  borderless
-}) => `${borderless ? theme.space['0.25'] : theme.space['0.5']} ${theme.space['0.5']}`, ";&:last-child{border:none;}");
-const StyledItem = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "ei26g5y1"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " background:none;");
-const StyledLinkItem = /*#__PURE__*/_styled('a', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "ei26g5y0"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " text-decoration:none;&:focus{text-decoration:none;}");
-const Item = /*#__PURE__*/forwardRef(({
-  borderless = false,
-  disabled = false,
-  onClick,
-  sentiment = 'neutral',
-  href,
-  children,
-  tooltip,
-  active,
-  className,
-  'data-testid': dataTestId
-}, ref) => {
-  if (href && !disabled) {
-    return jsx(Container, {
-      borderless: borderless,
-      children: jsx(Tooltip, {
-        text: tooltip,
-        children: jsx(StyledLinkItem, {
-          "data-active": active,
-          borderless: true,
-          href: href,
-          ref: ref,
-          onClick: disabled ? undefined : onClick,
-          role: "menuitem",
-          disabled: disabled,
-          sentiment: sentiment,
-          className: className,
-          "data-testid": dataTestId,
-          children: children
-        })
-      })
-    });
-  }
-  return jsx(Container, {
-    borderless: borderless,
-    children: jsx(Tooltip, {
-      text: tooltip,
-      children: jsx(StyledItem, {
-        type: "button",
-        ref: ref,
-        role: "menuitem",
-        disabled: disabled,
-        onClick: onClick,
-        borderless: borderless,
-        sentiment: sentiment,
-        className: className,
-        "data-testid": dataTestId,
-        "data-active": active,
-        children: children
-      })
-    })
-  });
-});
-var Item$1 = Item;
-
-export { Item$1 as default };

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

@@ -1,118 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, useState, useRef, useId, isValidElement, useImperativeHandle, cloneElement } from 'react';
-import { Popup } from '../Popup/index.js';
-import { Stack } from '../Stack/index.js';
-import { Group } from './Group.js';
-import Item from './Item.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const SIZES = {
-  small: '180px',
-  medium: '280px',
-  large: '380px'
-};
-const StyledPopup = /*#__PURE__*/_styled(Popup, {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "e1jn11gg1"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";box-shadow:", ({
-  theme
-}) => theme.shadows.menu, ";padding:0;&[data-has-arrow='true']{&::after{border-color:", ({
-  theme
-}) => theme.colors.neutral.background, " transparent transparent transparent;}}width:", ({
-  size
-}) => SIZES[size], ";max-width:none;padding:", ({
-  theme
-}) => `${theme.space['0.25']} 0`, ";");
-const MenuList = /*#__PURE__*/_styled(Stack, {
-  target: "e1jn11gg0"
-})("overflow-y:auto;overflow-x:hidden;&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";position:relative;");
-const FwdMenu = /*#__PURE__*/forwardRef(({
-  id,
-  ariaLabel = 'Menu',
-  children,
-  disclosure,
-  hasArrow = false,
-  placement = 'bottom',
-  visible = false,
-  className,
-  'data-testid': dataTestId,
-  maxHeight,
-  maxWidth,
-  portalTarget,
-  size = 'small',
-  triggerMethod = 'click',
-  dynamicDomRendering
-}, ref) => {
-  const [isVisible, setIsVisible] = useState(visible);
-  const popupRef = useRef(null);
-  const disclosureRef = useRef(null);
-  const tempId = useId();
-  const finalId = `menu-${id ?? tempId}`;
-
-  // if you need dialog inside your component, use function, otherwise component is fine
-  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure({
-    visible: isVisible
-  });
-  const innerRef = useRef(target);
-  useImperativeHandle(ref, () => innerRef.current);
-  const finalDisclosure = /*#__PURE__*/cloneElement(target, {
-    onClick: event => {
-      target.props.onClick?.(event);
-      setIsVisible(!isVisible);
-    },
-    'aria-haspopup': 'dialog',
-    'aria-expanded': isVisible,
-    // @ts-expect-error not sure how to fix this
-    ref: disclosureRef
-  });
-  return jsx(StyledPopup, {
-    debounceDelay: triggerMethod === 'hover' ? 250 : 0,
-    hideOnClickOutside: true,
-    "aria-label": ariaLabel,
-    className: className,
-    visible: triggerMethod === 'click' ? isVisible : undefined,
-    placement: placement,
-    hasArrow: hasArrow,
-    "data-has-arrow": hasArrow,
-    role: "dialog",
-    id: finalId,
-    ref: popupRef,
-    onClose: () => setIsVisible(false),
-    tabIndex: -1,
-    maxHeight: maxHeight ?? '480px',
-    maxWidth: maxWidth,
-    size: size,
-    text: jsx(MenuList, {
-      "data-testid": dataTestId,
-      className: className,
-      role: "menu",
-      children: typeof children === 'function' ? children({
-        toggle: () => setIsVisible(!isVisible)
-      }) : children
-    }),
-    portalTarget: portalTarget,
-    dynamicDomRendering: dynamicDomRendering,
-    children: finalDisclosure
-  });
-});
-
-/**
- * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
- * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
- * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
- * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
- */
-const MenuV2 = /*#__PURE__*/Object.assign(FwdMenu, {
-  Item,
-  Group
-});
-
-export { MenuV2 };

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

@@ -1,76 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Text } from '../Text/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const StyledStrength = /*#__PURE__*/_styled(Text, {
-  shouldForwardProp: prop => !['color'].includes(prop),
-  target: "e157fc5l2"
-})("float:right;vertical-align:top;color:", ({
-  strength
-}) => strength.color, ";");
-const StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e157fc5l1"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";height:", ({
-  theme
-}) => theme.space['1'], ";margin-top:", ({
-  theme
-}) => theme.space['1'], ";margin-bottom:", ({
-  theme
-}) => theme.space['2'], ";");
-const StyledMeter = /*#__PURE__*/_styled("div", {
-  target: "e157fc5l0"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";height:100%;transition:all 0.5s;");
-/**
- * Show strength of a password based on different criteria.
- */
-const Meter = ({
-  strength,
-  title,
-  value,
-  className,
-  'data-testid': dataTestId,
-  id
-}) => {
-  const toValue = (value + 1) / strength.length * 100;
-  const width = `${toValue}%`;
-  const backgroundColor = strength[value]?.color ?? strength[0].color;
-  const text = strength[value]?.text ?? strength[0].text;
-  return jsxs("div", {
-    "aria-live": "polite",
-    "aria-valuemax": strength.length ?? 0,
-    "aria-valuemin": 0,
-    "aria-valuenow": value,
-    className: className,
-    "data-testid": dataTestId,
-    id: id,
-    role: "meter",
-    title: title,
-    "aria-labelledby": "meter-label",
-    children: [jsxs(Text, {
-      id: "meter-label",
-      variant: "bodySmallStrong",
-      as: "p",
-      children: [title, jsx(StyledStrength, {
-        as: "span",
-        variant: "bodySmallStrong",
-        strength: strength[value],
-        children: text
-      })]
-    }), jsx(StyledWrapper, {
-      children: jsx(StyledMeter, {
-        style: {
-          backgroundColor,
-          width
-        }
-      })
-    })]
-  });
-};
-
-export { Meter };

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

@@ -1,182 +0,0 @@
-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:", ({
-  theme
-}) => theme.colors.overlay, ";z-index:1;&[data-open='true']{padding:", ({
-  theme
-}) => theme.space['2'], ";overflow:auto;display:flex;bottom:0;left:0;height:100%;width:100%;}");
-const StyledDialog = /*#__PURE__*/_styled("dialog", {
-  target: "e1cqen9h0"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";position:relative;border-radius:", ({
-  theme
-}) => theme.radii.default, ";border:0;padding:", ({
-  theme
-}) => theme.space['3'], ";width:", MODAL_WIDTH.medium, "px;box-shadow:", ({
-  theme
-}) => theme.shadows.modal, ";", /*#__PURE__*/Object.entries(MODAL_WIDTH).map(([size, value]) => `
-      &[data-size="${size}"] {
-        width: ${value}px;
-      }
-      `), " ", /*#__PURE__*/Object.entries(MODAL_PLACEMENT).map(([placement, value]) => `
-        &[data-placement="${placement}"] {
-          ${value}
-        }
-        `), ";");
-const Dialog = ({
-  children,
-  open,
-  placement,
-  onClose,
-  hideOnClickOutside,
-  size,
-  id,
-  ariaLabel,
-  className,
-  'data-testid': dataTestId,
-  preventBodyScroll,
-  hideOnEsc,
-  backdropClassName,
-  dialogCss,
-  backdropCss
-}) => {
-  const containerRef = useRef(document.createElement('div'));
-  const dialogRef = useRef(null);
-  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]);
-
-  // On open focus the modal
-  useEffect(() => {
-    if (open) {
-      dialogRef.current?.focus();
-    }
-  }, [open]);
-
-  // Handle body scroll
-  useEffect(() => {
-    const previousOverflow = document.body.style.overflow;
-    if (open && preventBodyScroll) {
-      document.body.style.overflow = 'hidden';
-    }
-    return () => {
-      document.body.style.overflow = previousOverflow;
-    };
-  }, [preventBodyScroll, open]);
-
-  // Stop focus to prevent unexpected body loose focus
-  const stopFocus = useCallback(event => {
-    event.stopPropagation();
-  }, []);
-
-  // Stop click to prevent unexpected dialog close
-  const stopClick = useCallback(event => {
-    event.stopPropagation();
-  }, []);
-
-  // handle key up : used when having inputs in modals - useful for hideOnEsc
-  const handleKeyUp = useCallback(event => {
-    event.stopPropagation();
-    if (event.key === 'Escape' && hideOnEsc) {
-      event.preventDefault();
-      onCloseRef.current();
-    }
-  }, [hideOnEsc]);
-  const handleClose = useCallback(event => {
-    event.stopPropagation();
-    if (hideOnClickOutside) {
-      onCloseRef.current();
-    } else {
-      // Because overlay is not focusable we can't handle hideOnEsc properly
-      dialogRef.current?.focus();
-    }
-  }, [hideOnClickOutside]);
-
-  // Enable focus trap inside the modal
-  const handleFocusTrap = useCallback(event => {
-    event.stopPropagation();
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      return;
-    }
-    const isTabPressed = event.key === 'Tab';
-    if (!isTabPressed) {
-      return;
-    }
-    const focusableEls = dialogRef.current?.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])') ?? [];
-
-    // Handle case when no interactive element are within the modal (including close icon)
-    if (focusableEls.length === 0) {
-      event.preventDefault();
-    }
-    const firstFocusableEl = focusableEls[0];
-    const lastFocusableEl = focusableEls[focusableEls.length - 1];
-    if (event.shiftKey) {
-      if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
-        lastFocusableEl.focus();
-        event.preventDefault();
-      }
-    } else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
-      firstFocusableEl.focus();
-      event.preventDefault();
-    }
-  }, []);
-
-  // Prevent default behaviour on Escape
-  const stopCancel = event => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  return open ? /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
-    "data-open": open,
-    onClick: handleClose,
-    className: backdropClassName,
-    css: backdropCss,
-    "data-testid": dataTestId ? `${dataTestId}-backdrop` : undefined,
-    onFocus: stopFocus,
-    children: jsx(StyledDialog, {
-      css: dialogCss,
-      onKeyUp: handleKeyUp,
-      onKeyDown: handleFocusTrap,
-      className: className,
-      id: id,
-      "data-testid": dataTestId,
-      "aria-label": ariaLabel,
-      "data-placement": placement,
-      "data-size": size,
-      open: open,
-      onClick: stopClick,
-      onCancel: stopCancel,
-      onClose: stopCancel,
-      "aria-modal": true,
-      ref: dialogRef,
-      tabIndex: 0,
-      children: open ? children : null
-    })
-  }), containerRef.current) : null;
-};
-
-export { Dialog };