@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib-esm/Dialog/ConfirmationDialog.js

@@ -0,0 +1,169 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import Box from '../Box';
+import { ThemeProvider, useTheme } from '../ThemeProvider';
+import { FocusKeys } from '../behaviors/focusZone';
+import { get } from '../constants';
+import { Dialog } from '../Dialog/Dialog';
+import { useFocusZone } from '../hooks/useFocusZone';
+/**
+ * Props to customize the ConfirmationDialog.
+ */
+
+const StyledConfirmationHeader = styled.header.withConfig({
+  displayName: "ConfirmationDialog__StyledConfirmationHeader",
+  componentId: "sc-1ub32x2-0"
+})(["padding:", ";display:flex;flex-direction:row;"], get('space.2'));
+const StyledTitle = styled(Box).withConfig({
+  displayName: "ConfirmationDialog__StyledTitle",
+  componentId: "sc-1ub32x2-1"
+})(["font-size:", ";font-weight:", ";padding:6px ", ";flex-grow:1;"], get('fontSizes.3'), get('fontWeights.bold'), get('space.2'));
+
+const ConfirmationHeader = ({
+  title,
+  onClose,
+  dialogLabelId
+}) => {
+  const onCloseClick = useCallback(() => {
+    onClose('close-button');
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement(StyledConfirmationHeader, null, /*#__PURE__*/React.createElement(StyledTitle, {
+    id: dialogLabelId
+  }, title), /*#__PURE__*/React.createElement(Dialog.CloseButton, {
+    onClose: onCloseClick
+  }));
+};
+
+ConfirmationHeader.displayName = "ConfirmationHeader";
+const StyledConfirmationBody = styled(Box).withConfig({
+  displayName: "ConfirmationDialog__StyledConfirmationBody",
+  componentId: "sc-1ub32x2-2"
+})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], get('fontSizes.1'), get('space.3'), get('space.3'), get('space.3'), get('colors.fg.muted'));
+
+const ConfirmationBody = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(StyledConfirmationBody, null, children);
+};
+
+ConfirmationBody.displayName = "ConfirmationBody";
+const StyledConfirmationFooter = styled(Box).withConfig({
+  displayName: "ConfirmationDialog__StyledConfirmationFooter",
+  componentId: "sc-1ub32x2-3"
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:", ";align-items:end;justify-content:end;padding:", " ", " ", ";"], get('space.2'), get('space.1'), get('space.3'), get('space.3'));
+
+const ConfirmationFooter = ({
+  footerButtons
+}) => {
+  const {
+    containerRef: footerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
+    focusInStrategy: 'closest'
+  }); // Must have exactly 2 buttons!
+
+  return /*#__PURE__*/React.createElement(StyledConfirmationFooter, {
+    ref: footerRef
+  }, /*#__PURE__*/React.createElement(Dialog.Buttons, {
+    buttons: footerButtons !== null && footerButtons !== void 0 ? footerButtons : []
+  }));
+};
+
+ConfirmationFooter.displayName = "ConfirmationFooter";
+
+/**
+ * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
+ * is used to confirm a user action. ConfirmationDialogs always have exactly
+ * two buttons: one to cancel the action and one to confirm it. No custom
+ * rendering capabilities are provided for ConfirmationDialog.
+ */
+export const ConfirmationDialog = props => {
+  const {
+    onClose,
+    title,
+    cancelButtonContent = 'Cancel',
+    confirmButtonContent = 'OK',
+    confirmButtonType = 'normal',
+    children
+  } = props;
+  const onCancelButtonClick = useCallback(() => {
+    onClose('cancel');
+  }, [onClose]);
+  const onConfirmButtonClick = useCallback(() => {
+    onClose('confirm');
+  }, [onClose]);
+  const cancelButton = {
+    content: cancelButtonContent,
+    onClick: onCancelButtonClick
+  };
+  const confirmButton = {
+    content: confirmButtonContent,
+    buttonType: confirmButtonType,
+    onClick: onConfirmButtonClick,
+    autoFocus: true
+  };
+  const footerButtons = [cancelButton, confirmButton];
+  return /*#__PURE__*/React.createElement(Dialog, {
+    onClose: onClose,
+    title: title,
+    footerButtons: footerButtons,
+    role: "alertdialog",
+    width: "medium",
+    renderHeader: ConfirmationHeader,
+    renderBody: ConfirmationBody,
+    renderFooter: ConfirmationFooter
+  }, children);
+};
+ConfirmationDialog.displayName = "ConfirmationDialog";
+
+async function confirm(themeProps, options) {
+  const {
+    content,
+    ...confirmationDialogProps
+  } = options;
+  return new Promise(resolve => {
+    const hostElement = document.createElement('div');
+
+    const onClose = gesture => {
+      ReactDOM.unmountComponentAtNode(hostElement);
+
+      if (gesture === 'confirm') {
+        resolve(true);
+      } else {
+        resolve(false);
+      }
+    };
+
+    ReactDOM.render( /*#__PURE__*/React.createElement(ThemeProvider, themeProps, /*#__PURE__*/React.createElement(ConfirmationDialog, _extends({}, confirmationDialogProps, {
+      onClose: onClose
+    }), content)), hostElement);
+  });
+}
+/**
+ * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
+ * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
+ * resolved with `true` or `false` depending on whether or not the confirm button was used.
+ */
+
+
+export function useConfirm() {
+  const {
+    theme,
+    colorMode,
+    dayScheme,
+    nightScheme
+  } = useTheme();
+  const result = useCallback(options => {
+    const themeProps = {
+      theme,
+      colorMode,
+      dayScheme,
+      nightScheme
+    };
+    return confirm(themeProps, options);
+  }, [theme, colorMode, dayScheme, nightScheme]);
+  return result;
+}

package/lib-esm/Dialog/Dialog.js

@@ -0,0 +1,275 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import Button, { ButtonPrimary, ButtonDanger } from '../Button';
+import Box from '../Box';
+import { get } from '../constants';
+import { useOnEscapePress, useProvidedRefOrCreate } from '../hooks';
+import { useFocusTrap } from '../hooks/useFocusTrap';
+import sx from '../sx';
+import StyledOcticon from '../StyledOcticon';
+import { XIcon } from '@primer/octicons-react';
+import { useFocusZone } from '../hooks/useFocusZone';
+import { FocusKeys } from '../behaviors/focusZone';
+import Portal from '../Portal';
+import { useCombinedRefs } from '../hooks/useCombinedRefs';
+import { useSSRSafeId } from '@react-aria/ssr';
+const ANIMATION_DURATION = '200ms';
+/**
+ * Props that characterize a button to be rendered into the footer of
+ * a Dialog.
+ */
+
+const Backdrop = styled('div').withConfig({
+  displayName: "Dialog__Backdrop",
+  componentId: "sc-11pkgky-0"
+})(["position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,0.4);animation:dialog-backdrop-appear ", " ", ";@keyframes dialog-backdrop-appear{0%{opacity:0;}100%{opacity:1;}}"], ANIMATION_DURATION, get('animation.easeOutCubic'));
+const heightMap = {
+  small: '480px',
+  large: '640px',
+  auto: 'auto'
+};
+const widthMap = {
+  small: '296px',
+  medium: '320px',
+  large: '480px',
+  xlarge: '640px'
+};
+const StyledDialog = styled.div.withConfig({
+  displayName: "Dialog__StyledDialog",
+  componentId: "sc-11pkgky-1"
+})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => {
+  var _props$width;
+
+  return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
+}, props => {
+  var _props$height;
+
+  return heightMap[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : 'auto'];
+}, ANIMATION_DURATION, get('animation.easeOutCubic'), sx);
+
+const DefaultHeader = ({
+  dialogLabelId,
+  title,
+  subtitle,
+  dialogDescriptionId,
+  onClose
+}) => {
+  const onCloseClick = useCallback(() => {
+    onClose('close-button');
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement(Dialog.Header, null, /*#__PURE__*/React.createElement(Box, {
+    display: "flex"
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    px: 2,
+    py: "6px",
+    flexDirection: "column",
+    flexGrow: 1
+  }, /*#__PURE__*/React.createElement(Dialog.Title, {
+    id: dialogLabelId
+  }, title !== null && title !== void 0 ? title : 'Dialog'), subtitle && /*#__PURE__*/React.createElement(Dialog.Subtitle, {
+    id: dialogDescriptionId
+  }, subtitle)), /*#__PURE__*/React.createElement(Dialog.CloseButton, {
+    onClose: onCloseClick
+  })));
+};
+
+DefaultHeader.displayName = "DefaultHeader";
+
+const DefaultBody = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Dialog.Body, null, children);
+};
+
+DefaultBody.displayName = "DefaultBody";
+
+const DefaultFooter = ({
+  footerButtons
+}) => {
+  const {
+    containerRef: footerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
+    focusInStrategy: 'closest'
+  });
+  return footerButtons ? /*#__PURE__*/React.createElement(Dialog.Footer, {
+    ref: footerRef
+  }, /*#__PURE__*/React.createElement(Dialog.Buttons, {
+    buttons: footerButtons
+  })) : null;
+};
+
+const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  const {
+    title = 'Dialog',
+    subtitle = '',
+    renderHeader,
+    renderBody,
+    renderFooter,
+    onClose,
+    role = 'dialog',
+    width = 'xlarge',
+    height = 'auto',
+    footerButtons = []
+  } = props;
+  const dialogLabelId = useSSRSafeId();
+  const dialogDescriptionId = useSSRSafeId();
+  const autoFocusedFooterButtonRef = useRef(null);
+
+  for (const footerButton of footerButtons) {
+    if (footerButton.autoFocus) {
+      footerButton.ref = autoFocusedFooterButtonRef;
+    }
+  }
+
+  const defaultedProps = { ...props,
+    title,
+    subtitle,
+    role,
+    dialogLabelId,
+    dialogDescriptionId
+  };
+  const dialogRef = useRef(null);
+  const combinedRef = useCombinedRefs(dialogRef, forwardedRef);
+  const backdropRef = useRef(null);
+  useFocusTrap({
+    containerRef: dialogRef,
+    restoreFocusOnCleanUp: true,
+    initialFocusRef: autoFocusedFooterButtonRef
+  });
+  useOnEscapePress(event => {
+    onClose('escape');
+    event.preventDefault();
+  }, [onClose]);
+  const header = (renderHeader !== null && renderHeader !== void 0 ? renderHeader : DefaultHeader)(defaultedProps);
+  const body = (renderBody !== null && renderBody !== void 0 ? renderBody : DefaultBody)(defaultedProps);
+  const footer = (renderFooter !== null && renderFooter !== void 0 ? renderFooter : DefaultFooter)(defaultedProps);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Backdrop, {
+    ref: backdropRef
+  }, /*#__PURE__*/React.createElement(StyledDialog, {
+    width: width,
+    height: height,
+    ref: combinedRef,
+    role: role,
+    "aria-labelledby": dialogLabelId,
+    "aria-describedby": dialogDescriptionId
+  }, header, body, footer))));
+});
+
+_Dialog.displayName = 'Dialog';
+const Header = styled.div.attrs({
+  as: 'header'
+}).withConfig({
+  displayName: "Dialog__Header",
+  componentId: "sc-11pkgky-2"
+})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], get('colors.border.default'), get('space.2'));
+const Title = styled.div.withConfig({
+  displayName: "Dialog__Title",
+  componentId: "sc-11pkgky-3"
+})(["font-size:", ";font-weight:", ";", ";"], get('fontSizes.1'), get('fontWeights.bold'), sx);
+const Subtitle = styled.div.withConfig({
+  displayName: "Dialog__Subtitle",
+  componentId: "sc-11pkgky-4"
+})(["font-size:", ";margin-top:", ";color:", ";", ";"], get('fontSizes.0'), get('space.1'), get('colors.fg.muted'), sx);
+const Body = styled.div.withConfig({
+  displayName: "Dialog__Body",
+  componentId: "sc-11pkgky-5"
+})(["flex-grow:1;overflow:auto;padding:", ";", ";"], get('space.3'), sx);
+const Footer = styled.div.attrs({
+  as: 'footer'
+}).withConfig({
+  displayName: "Dialog__Footer",
+  componentId: "sc-11pkgky-6"
+})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}", ";"], get('colors.border.default'), get('space.3'), get('space.1'), sx);
+const buttonTypes = {
+  normal: Button,
+  primary: ButtonPrimary,
+  danger: ButtonDanger
+};
+
+const Buttons = ({
+  buttons
+}) => {
+  var _buttons$find;
+
+  const autoFocusRef = useProvidedRefOrCreate((_buttons$find = buttons.find(button => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref);
+  let autoFocusCount = 0;
+  const [hasRendered, setHasRendered] = useState(0);
+  useEffect(() => {
+    // hack to work around dialogs originating from other focus traps.
+    if (hasRendered === 1) {
+      var _autoFocusRef$current;
+
+      (_autoFocusRef$current = autoFocusRef.current) === null || _autoFocusRef$current === void 0 ? void 0 : _autoFocusRef$current.focus();
+    } else {
+      setHasRendered(hasRendered + 1);
+    }
+  }, [autoFocusRef, hasRendered]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, buttons.map((dialogButtonProps, index) => {
+    const {
+      content,
+      buttonType = 'normal',
+      autoFocus = false,
+      ...buttonProps
+    } = dialogButtonProps;
+    const ButtonElement = buttonTypes[buttonType];
+    return /*#__PURE__*/React.createElement(ButtonElement, _extends({
+      key: index
+    }, buttonProps, {
+      variant: buttonType,
+      ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null
+    }), content);
+  }));
+};
+
+const DialogCloseButton = styled(Button).withConfig({
+  displayName: "Dialog__DialogCloseButton",
+  componentId: "sc-11pkgky-7"
+})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], get('colors.fg.muted'), get('space.2'));
+
+const CloseButton = ({
+  onClose
+}) => {
+  return /*#__PURE__*/React.createElement(DialogCloseButton, {
+    "aria-label": "Close",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: XIcon
+  }));
+};
+
+CloseButton.displayName = "CloseButton";
+
+/**
+ * A dialog is a type of overlay that can be used for confirming actions, asking
+ * for disambiguation, and presenting small forms. They generally allow the user
+ * to focus on a quick task without having to navigate to a different page.
+ *
+ * Dialogs appear in the page after a direct user interaction. Don't show dialogs
+ * on page load or as system alerts.
+ *
+ * Dialogs appear centered in the page, with a visible backdrop that dims the rest
+ * of the window for focus.
+ *
+ * All dialogs have a title and a close button.
+ *
+ * Dialogs are modal. Dialogs can be dismissed by clicking on the close button,
+ * pressing the escape key, or by interacting with another button in the dialog.
+ * To avoid losing information and missing important messages, clicking outside
+ * of the dialog will not close it.
+ *
+ * The sub components provided (e.g. Header, Title, etc.) are available for custom
+ * renderers only. They are not intended to be used otherwise.
+ */
+export const Dialog = Object.assign(_Dialog, {
+  Header,
+  Title,
+  Subtitle,
+  Body,
+  Footer,
+  Buttons,
+  CloseButton
+});

package/lib-esm/Dialog.js

@@ -1,33 +1,36 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useRef, forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useRef } from 'react';
 import styled from 'styled-components';
-import { COMMON, LAYOUT, get } from './constants';
-import theme from './theme';
-import sx from './sx';
-import Text from './Text';
-import Flex from './Flex';
 import ButtonClose from './Button/ButtonClose';
+import { get } from './constants';
+import Box from './Box';
 import useDialog from './hooks/useDialog';
-const StyledDialog = styled.div.withConfig({
-  displayName: "Dialog__StyledDialog",
-  componentId: "dh15lb-0"
-})(["box-shadow:0px 4px 32px rgba(0,0,0,0.35);border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('radii.2'), get('colors.white'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', LAYOUT, COMMON, sx);
-const DialogHeaderBase = styled(Flex).withConfig({
+import sx from './sx';
+import Text from './Text';
+import { useCombinedRefs } from './hooks/useCombinedRefs';
+
+const noop = () => null;
+
+const DialogBase = styled.div.withConfig({
+  displayName: "Dialog__DialogBase",
+  componentId: "sc-1vcjhsg-0"
+})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', sx);
+const DialogHeaderBase = styled(Box).withConfig({
   displayName: "Dialog__DialogHeaderBase",
-  componentId: "dh15lb-1"
-})(["border-radius:4px 4px 0px 0px;border-bottom:1px solid #dad5da;@media screen and (max-width:750px){border-radius:0px;}", ";"], sx);
+  componentId: "sc-1vcjhsg-1"
+})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.default'), sx);
 
 function DialogHeader({
   theme,
   children,
+  backgroundColor = 'gray.1',
   ...rest
 }) {
   if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
     children = /*#__PURE__*/React.createElement(Text, {
       theme: theme,
-      color: "gray.9",
+      color: "fg.default",
       fontSize: 1,
       fontWeight: "bold",
       fontFamily: "sans-serif"
@@ -36,26 +39,26 @@ function DialogHeader({
 
   return /*#__PURE__*/React.createElement(DialogHeaderBase, _extends({
     theme: theme,
-    p: 3
+    p: 3,
+    backgroundColor: backgroundColor
   }, rest), children);
 }
 
 DialogHeader.displayName = "DialogHeader";
 const Overlay = styled.span.withConfig({
   displayName: "Dialog__Overlay",
-  componentId: "dh15lb-2"
-})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:rgba(27,31,35,0.5);}"]);
-const Dialog = forwardRef(({
+  componentId: "sc-1vcjhsg-2"
+})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.primer.canvas.backdrop'));
+const Dialog = /*#__PURE__*/forwardRef(({
   children,
-  onDismiss,
+  onDismiss = noop,
   isOpen,
   initialFocusRef,
   returnFocusRef,
   ...props
 }, forwardedRef) => {
-  const backupRef = useRef(null);
   const overlayRef = useRef(null);
-  const modalRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+  const modalRef = useCombinedRefs(forwardedRef);
   const closeButtonRef = useRef(null);
 
   const onCloseClick = () => {
@@ -79,7 +82,7 @@ const Dialog = forwardRef(({
   });
   return isOpen ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Overlay, {
     ref: overlayRef
-  }), /*#__PURE__*/React.createElement(StyledDialog, _extends({
+  }), /*#__PURE__*/React.createElement(DialogBase, _extends({
     tabIndex: -1,
     ref: modalRef,
     role: "dialog",
@@ -94,31 +97,13 @@ const Dialog = forwardRef(({
     }
   }), children)) : null;
 });
-Dialog.defaultProps = {
-  theme
-};
-Dialog.propTypes = { ...COMMON.propTypes,
-  ...LAYOUT.propTypes,
-  initialFocusRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  isOpen: PropTypes.bool.isRequired,
-  narrow: PropTypes.bool,
-  onDismiss: PropTypes.func.isRequired,
-  ...sx.propTypes,
-  returnFocusRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  theme: PropTypes.object,
-  wide: PropTypes.bool
-};
 DialogHeader.defaultProps = {
-  backgroundColor: 'gray.1',
-  theme
+  backgroundColor: 'canvas.subtle'
 };
-DialogHeader.propTypes = { ...Flex.propTypes
+DialogHeader.propTypes = { ...Box.propTypes
 };
 DialogHeader.displayName = 'Dialog.Header';
 Dialog.displayName = 'Dialog';
-Dialog.Header = DialogHeader;
-export default Dialog;
+export default Object.assign(Dialog, {
+  Header: DialogHeader
+});