@primer/components 0.0.0-2021983515 → 0.0.0-2022530194733

package/lib/Dialog/ConfirmationDialog.js

@@ -1,191 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useConfirm = useConfirm;
-exports.ConfirmationDialog = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _focusZone = require("../behaviors/focusZone");
-
-var _constants = require("../constants");
-
-var _Dialog = require("../Dialog/Dialog");
-
-var _useFocusZone = require("../hooks/useFocusZone");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
-const StyledConfirmationHeader = _styledComponents.default.header.withConfig({
-  displayName: "ConfirmationDialog__StyledConfirmationHeader",
-  componentId: "sc-1ub32x2-0"
-})(["padding:", ";display:flex;flex-direction:row;"], (0, _constants.get)('space.2'));
-
-const StyledTitle = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "ConfirmationDialog__StyledTitle",
-  componentId: "sc-1ub32x2-1"
-})(["font-size:", ";font-weight:", ";padding:6px ", ";flex-grow:1;"], (0, _constants.get)('fontSizes.3'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('space.2'));
-
-const ConfirmationHeader = ({
-  title,
-  onClose,
-  dialogLabelId
-}) => {
-  const onCloseClick = (0, _react.useCallback)(() => {
-    onClose('close-button');
-  }, [onClose]);
-  return /*#__PURE__*/_react.default.createElement(StyledConfirmationHeader, null, /*#__PURE__*/_react.default.createElement(StyledTitle, {
-    id: dialogLabelId
-  }, title), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.CloseButton, {
-    onClose: onCloseClick
-  }));
-};
-
-ConfirmationHeader.displayName = "ConfirmationHeader";
-const StyledConfirmationBody = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "ConfirmationDialog__StyledConfirmationBody",
-  componentId: "sc-1ub32x2-2"
-})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.fg.muted'));
-
-const ConfirmationBody = ({
-  children
-}) => {
-  return /*#__PURE__*/_react.default.createElement(StyledConfirmationBody, null, children);
-};
-
-ConfirmationBody.displayName = "ConfirmationBody";
-const StyledConfirmationFooter = (0, _styledComponents.default)(_Box.default).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:", " ", " ", ";"], (0, _constants.get)('space.2'), (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'));
-
-const ConfirmationFooter = ({
-  footerButtons
-}) => {
-  const {
-    containerRef: footerRef
-  } = (0, _useFocusZone.useFocusZone)({
-    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.Tab,
-    focusInStrategy: 'closest'
-  }); // Must have exactly 2 buttons!
-
-  return /*#__PURE__*/_react.default.createElement(StyledConfirmationFooter, {
-    ref: footerRef
-  }, /*#__PURE__*/_react.default.createElement(_Dialog.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.
- */
-const ConfirmationDialog = props => {
-  const {
-    onClose,
-    title,
-    cancelButtonContent = 'Cancel',
-    confirmButtonContent = 'OK',
-    confirmButtonType = 'normal',
-    children
-  } = props;
-  const onCancelButtonClick = (0, _react.useCallback)(() => {
-    onClose('cancel');
-  }, [onClose]);
-  const onConfirmButtonClick = (0, _react.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.default.createElement(_Dialog.Dialog, {
-    onClose: onClose,
-    title: title,
-    footerButtons: footerButtons,
-    role: "alertdialog",
-    width: "medium",
-    renderHeader: ConfirmationHeader,
-    renderBody: ConfirmationBody,
-    renderFooter: ConfirmationFooter
-  }, children);
-};
-
-exports.ConfirmationDialog = ConfirmationDialog;
-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.default.unmountComponentAtNode(hostElement);
-
-      if (gesture === 'confirm') {
-        resolve(true);
-      } else {
-        resolve(false);
-      }
-    };
-
-    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, themeProps, /*#__PURE__*/_react.default.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.
- */
-
-
-function useConfirm() {
-  const {
-    theme,
-    colorMode,
-    dayScheme,
-    nightScheme
-  } = (0, _ThemeProvider.useTheme)();
-  const result = (0, _react.useCallback)(options => {
-    const themeProps = {
-      theme,
-      colorMode,
-      dayScheme,
-      nightScheme
-    };
-    return confirm(themeProps, options);
-  }, [theme, colorMode, dayScheme, nightScheme]);
-  return result;
-}

package/lib/Dialog/Dialog.d.ts

@@ -1,167 +0,0 @@
-import React from 'react';
-import { ButtonProps } from '../Button';
-import { SxProp } from '../sx';
-/**
- * Props that characterize a button to be rendered into the footer of
- * a Dialog.
- */
-export declare type DialogButtonProps = ButtonProps & {
-    /**
-     * The type of Button element to use
-     */
-    buttonType?: 'normal' | 'primary' | 'danger';
-    /**
-     * The Button's inner text
-     */
-    content: React.ReactNode;
-    /**
-     * If true, and if this is the only button with autoFocus set to true,
-     * focus this button automatically when the dialog appears.
-     */
-    autoFocus?: boolean;
-    /**
-     * A reference to the rendered Button’s DOM node, used together with
-     * `autoFocus` for `focusTrap`’s `initialFocus`.
-     */
-    ref?: React.RefObject<HTMLButtonElement>;
-};
-/**
- * Props to customize the rendering of the Dialog.
- */
-export interface DialogProps {
-    /**
-     * Title of the Dialog. Also serves as the aria-label for this Dialog.
-     */
-    title?: React.ReactNode;
-    /**
-     * The Dialog's subtitle. Optional. Rendered below the title in smaller
-     * type with less contrast. Also serves as the aria-describedby for this
-     * Dialog.
-     */
-    subtitle?: React.ReactNode;
-    /**
-     * Provide a custom renderer for the dialog header. This content is
-     * rendered directly into the dialog body area, full bleed from edge
-     * to edge, top to the start of the body element.
-     *
-     * Warning: using a custom renderer may violate Primer UX principles.
-     */
-    renderHeader?: React.FunctionComponent<DialogHeaderProps>;
-    /**
-     * Provide a custom render function for the dialog body. This content is
-     * rendered directly into the dialog body area, full bleed from edge to
-     * edge, header to footer.
-     *
-     * Warning: using a custom renderer may violate Primer UX principles.
-     */
-    renderBody?: React.FunctionComponent<DialogProps>;
-    /**
-     * Provide a custom render function for the dialog footer. This content is
-     * rendered directly into the dialog footer area, full bleed from edge to
-     * edge, end of the body element to bottom.
-     *
-     * Warning: using a custom renderer may violate Primer UX principles.
-     */
-    renderFooter?: React.FunctionComponent<DialogProps>;
-    /**
-     * Specifies the buttons to be rendered in the Dialog footer.
-     */
-    footerButtons?: DialogButtonProps[];
-    /**
-     * This method is invoked when a gesture to close the dialog is used (either
-     * an Escape key press or clicking the "X" in the top-right corner). The
-     * gesture argument indicates the gesture that was used to close the dialog
-     * (either 'close-button' or 'escape').
-     */
-    onClose: (gesture: 'close-button' | 'escape') => void;
-    /**
-     * Default: "dialog". The ARIA role to assign to this dialog.
-     * @see https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
-     * @see https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
-     */
-    role?: 'dialog' | 'alertdialog';
-    /**
-     * The width of the dialog.
-     * small: 296px
-     * medium: 320px
-     * large: 480px
-     * xlarge: 640px
-     */
-    width?: DialogWidth;
-    /**
-     * The height of the dialog.
-     * small: 296x480
-     * large: 480x640
-     * auto: variable based on contents
-     */
-    height?: DialogHeight;
-}
-/**
- * Props that are passed to a component that serves as a dialog header
- */
-export interface DialogHeaderProps extends DialogProps {
-    /**
-     * ID of the element that will be used as the `aria-labelledby` attribute on the
-     * dialog. This ID should be set to the element that renders the dialog's title.
-     */
-    dialogLabelId: string;
-    /**
-     * ID of the element that will be used as the `aria-describedby` attribute on the
-     * dialog. This ID should be set to the element that renders the dialog's subtitle.
-     */
-    dialogDescriptionId: string;
-}
-declare const heightMap: {
-    readonly small: "480px";
-    readonly large: "640px";
-    readonly auto: "auto";
-};
-declare const widthMap: {
-    readonly small: "296px";
-    readonly medium: "320px";
-    readonly large: "480px";
-    readonly xlarge: "640px";
-};
-export declare type DialogWidth = keyof typeof widthMap;
-export declare type DialogHeight = keyof typeof heightMap;
-/**
- * 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 declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Header: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp & {
-        as: string;
-    }, "as">;
-    Title: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
-    Subtitle: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
-    Body: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
-    Footer: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp & {
-        as: string;
-    }, "as">;
-    Buttons: React.FC<{
-        buttons: DialogButtonProps[];
-    }>;
-    CloseButton: React.FC<{
-        onClose: () => void;
-    }>;
-};
-export {};

package/lib/Dialog/Dialog.js

@@ -1,304 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dialog = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Button = _interopRequireWildcard(require("../Button"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _constants = require("../constants");
-
-var _hooks = require("../hooks");
-
-var _useFocusTrap = require("../hooks/useFocusTrap");
-
-var _sx = _interopRequireDefault(require("../sx"));
-
-var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _useFocusZone = require("../hooks/useFocusZone");
-
-var _focusZone = require("../behaviors/focusZone");
-
-var _Portal = _interopRequireDefault(require("../Portal"));
-
-var _useCombinedRefs = require("../hooks/useCombinedRefs");
-
-var _ssr = require("@react-aria/ssr");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
-const ANIMATION_DURATION = '200ms';
-/**
- * Props that characterize a button to be rendered into the footer of
- * a Dialog.
- */
-
-const Backdrop = (0, _styledComponents.default)('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, (0, _constants.get)('animation.easeOutCubic'));
-const heightMap = {
-  small: '480px',
-  large: '640px',
-  auto: 'auto'
-};
-const widthMap = {
-  small: '296px',
-  medium: '320px',
-  large: '480px',
-  xlarge: '640px'
-};
-
-const StyledDialog = _styledComponents.default.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);}}", ";", ";", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.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, (0, _constants.get)('animation.easeOutCubic'), _constants.COMMON, _constants.POSITION, _sx.default);
-
-const DefaultHeader = ({
-  dialogLabelId,
-  title,
-  subtitle,
-  dialogDescriptionId,
-  onClose
-}) => {
-  const onCloseClick = (0, _react.useCallback)(() => {
-    onClose('close-button');
-  }, [onClose]);
-  return /*#__PURE__*/_react.default.createElement(Dialog.Header, null, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    display: "flex"
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    display: "flex",
-    px: 2,
-    py: "6px",
-    flexDirection: "column",
-    flexGrow: 1
-  }, /*#__PURE__*/_react.default.createElement(Dialog.Title, {
-    id: dialogLabelId
-  }, title !== null && title !== void 0 ? title : 'Dialog'), subtitle && /*#__PURE__*/_react.default.createElement(Dialog.Subtitle, {
-    id: dialogDescriptionId
-  }, subtitle)), /*#__PURE__*/_react.default.createElement(Dialog.CloseButton, {
-    onClose: onCloseClick
-  })));
-};
-
-DefaultHeader.displayName = "DefaultHeader";
-
-const DefaultBody = ({
-  children
-}) => {
-  return /*#__PURE__*/_react.default.createElement(Dialog.Body, null, children);
-};
-
-DefaultBody.displayName = "DefaultBody";
-
-const DefaultFooter = ({
-  footerButtons
-}) => {
-  const {
-    containerRef: footerRef
-  } = (0, _useFocusZone.useFocusZone)({
-    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.Tab,
-    focusInStrategy: 'closest'
-  });
-  return footerButtons ? /*#__PURE__*/_react.default.createElement(Dialog.Footer, {
-    ref: footerRef
-  }, /*#__PURE__*/_react.default.createElement(Dialog.Buttons, {
-    buttons: footerButtons
-  })) : null;
-};
-
-const _Dialog = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) => {
-  const {
-    title = 'Dialog',
-    subtitle = '',
-    renderHeader,
-    renderBody,
-    renderFooter,
-    onClose,
-    role = 'dialog',
-    width = 'xlarge',
-    height = 'auto',
-    footerButtons = []
-  } = props;
-  const dialogLabelId = (0, _ssr.useSSRSafeId)();
-  const dialogDescriptionId = (0, _ssr.useSSRSafeId)();
-  const autoFocusedFooterButtonRef = (0, _react.useRef)(null);
-
-  for (const footerButton of footerButtons) {
-    if (footerButton.autoFocus) {
-      footerButton.ref = autoFocusedFooterButtonRef;
-    }
-  }
-
-  const defaultedProps = { ...props,
-    title,
-    subtitle,
-    role,
-    dialogLabelId,
-    dialogDescriptionId
-  };
-  const dialogRef = (0, _react.useRef)(null);
-  const combinedRef = (0, _useCombinedRefs.useCombinedRefs)(dialogRef, forwardedRef);
-  const backdropRef = (0, _react.useRef)(null);
-  (0, _useFocusTrap.useFocusTrap)({
-    containerRef: dialogRef,
-    restoreFocusOnCleanUp: true,
-    initialFocusRef: autoFocusedFooterButtonRef
-  });
-  (0, _hooks.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Portal.default, null, /*#__PURE__*/_react.default.createElement(Backdrop, {
-    ref: backdropRef
-  }, /*#__PURE__*/_react.default.createElement(StyledDialog, {
-    width: width,
-    height: height,
-    ref: combinedRef,
-    role: role,
-    "aria-labelledby": dialogLabelId,
-    "aria-describedby": dialogDescriptionId
-  }, header, body, footer))));
-});
-
-_Dialog.displayName = 'Dialog';
-const Header = (0, _styledComponents.default)(_Box.default).attrs({
-  as: 'header'
-}).withConfig({
-  displayName: "Dialog__Header",
-  componentId: "sc-11pkgky-2"
-})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.2'));
-const Title = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "Dialog__Title",
-  componentId: "sc-11pkgky-3"
-})(["font-size:", ";font-weight:", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
-const Subtitle = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "Dialog__Subtitle",
-  componentId: "sc-11pkgky-4"
-})(["font-size:", ";margin-top:", ";color:", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'));
-const Body = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "Dialog__Body",
-  componentId: "sc-11pkgky-5"
-})(["flex-grow:1;overflow:auto;padding:", ";"], (0, _constants.get)('space.3'));
-const Footer = (0, _styledComponents.default)(_Box.default).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;}}"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.3'), (0, _constants.get)('space.1'));
-const buttonTypes = {
-  normal: _Button.default,
-  primary: _Button.ButtonPrimary,
-  danger: _Button.ButtonDanger
-};
-
-const Buttons = ({
-  buttons
-}) => {
-  var _buttons$find;
-
-  const autoFocusRef = (0, _hooks.useProvidedRefOrCreate)((_buttons$find = buttons.find(button => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref);
-  let autoFocusCount = 0;
-  const [hasRendered, setHasRendered] = (0, _react.useState)(0);
-  (0, _react.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.default.createElement(_react.default.Fragment, null, buttons.map((dialogButtonProps, index) => {
-    const {
-      content,
-      buttonType = 'normal',
-      autoFocus = false,
-      ...buttonProps
-    } = dialogButtonProps;
-    const ButtonElement = buttonTypes[buttonType];
-    return /*#__PURE__*/_react.default.createElement(ButtonElement, _extends({
-      key: index
-    }, buttonProps, {
-      ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null
-    }), content);
-  }));
-};
-
-const DialogCloseButton = (0, _styledComponents.default)(_Button.default).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;"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'));
-
-const CloseButton = ({
-  onClose
-}) => {
-  return /*#__PURE__*/_react.default.createElement(DialogCloseButton, {
-    "aria-label": "Close",
-    onClick: onClose
-  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.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.
- */
-const Dialog = Object.assign(_Dialog, {
-  Header,
-  Title,
-  Subtitle,
-  Body,
-  Footer,
-  Buttons,
-  CloseButton
-});
-exports.Dialog = Dialog;