@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/Button/ButtonTableList.js

@@ -7,12 +7,8 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,17 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ButtonTableList = _styledComponents.default.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.gray.6'), (0, _constants.get)('colors.gray.6'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), _sx.default);
 
-ButtonTableList.defaultProps = {
-  theme: _theme.default
-};
-ButtonTableList.propTypes = {
-  theme: _propTypes.default.object,
-  ..._sx.default.propTypes,
-  ..._constants.COMMON.propTypes,
-  ..._constants.TYPOGRAPHY.propTypes,
-  ..._constants.LAYOUT.propTypes
-};
 var _default = ButtonTableList;
 exports.default = _default;

package/lib/Button/index.js

@@ -9,113 +9,63 @@ Object.defineProperty(exports, "default", {
     return _Button.default;
   }
 });
-Object.defineProperty(exports, "ButtonProps", {
-  enumerable: true,
-  get: function () {
-    return _Button.ButtonProps;
-  }
-});
 Object.defineProperty(exports, "ButtonDanger", {
   enumerable: true,
   get: function () {
     return _ButtonDanger.default;
   }
 });
-Object.defineProperty(exports, "ButtonDangerProps", {
-  enumerable: true,
-  get: function () {
-    return _ButtonDanger.ButtonDangerProps;
-  }
-});
 Object.defineProperty(exports, "ButtonGroup", {
   enumerable: true,
   get: function () {
     return _ButtonGroup.default;
   }
 });
-Object.defineProperty(exports, "ButtonGroupProps", {
-  enumerable: true,
-  get: function () {
-    return _ButtonGroup.ButtonGroupProps;
-  }
-});
 Object.defineProperty(exports, "ButtonOutline", {
   enumerable: true,
   get: function () {
     return _ButtonOutline.default;
   }
 });
-Object.defineProperty(exports, "ButtonOutlineProps", {
-  enumerable: true,
-  get: function () {
-    return _ButtonOutline.ButtonOutlineProps;
-  }
-});
 Object.defineProperty(exports, "ButtonPrimary", {
   enumerable: true,
   get: function () {
     return _ButtonPrimary.default;
   }
 });
-Object.defineProperty(exports, "ButtonPrimaryProps", {
-  enumerable: true,
-  get: function () {
-    return _ButtonPrimary.ButtonPrimaryProps;
-  }
-});
 Object.defineProperty(exports, "ButtonInvisible", {
   enumerable: true,
   get: function () {
     return _ButtonInvisible.default;
   }
 });
-Object.defineProperty(exports, "ButtonInvisibleProps", {
-  enumerable: true,
-  get: function () {
-    return _ButtonInvisible.ButtonInvisibleProps;
-  }
-});
 Object.defineProperty(exports, "ButtonTableList", {
   enumerable: true,
   get: function () {
     return _ButtonTableList.default;
   }
 });
-Object.defineProperty(exports, "ButtonTableListProps", {
-  enumerable: true,
-  get: function () {
-    return _ButtonTableList.ButtonTableListProps;
-  }
-});
 Object.defineProperty(exports, "ButtonClose", {
   enumerable: true,
   get: function () {
     return _ButtonClose.default;
   }
 });
-Object.defineProperty(exports, "ButtonCloseProps", {
-  enumerable: true,
-  get: function () {
-    return _ButtonClose.ButtonCloseProps;
-  }
-});
-
-var _Button = _interopRequireWildcard(require("./Button"));
 
-var _ButtonDanger = _interopRequireWildcard(require("./ButtonDanger"));
+var _Button = _interopRequireDefault(require("./Button"));
 
-var _ButtonGroup = _interopRequireWildcard(require("./ButtonGroup"));
+var _ButtonDanger = _interopRequireDefault(require("./ButtonDanger"));
 
-var _ButtonOutline = _interopRequireWildcard(require("./ButtonOutline"));
+var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
 
-var _ButtonPrimary = _interopRequireWildcard(require("./ButtonPrimary"));
+var _ButtonOutline = _interopRequireDefault(require("./ButtonOutline"));
 
-var _ButtonInvisible = _interopRequireWildcard(require("./ButtonInvisible"));
+var _ButtonPrimary = _interopRequireDefault(require("./ButtonPrimary"));
 
-var _ButtonTableList = _interopRequireWildcard(require("./ButtonTableList"));
+var _ButtonInvisible = _interopRequireDefault(require("./ButtonInvisible"));
 
-var _ButtonClose = _interopRequireWildcard(require("./ButtonClose"));
+var _ButtonTableList = _interopRequireDefault(require("./ButtonTableList"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _ButtonClose = _interopRequireDefault(require("./ButtonClose"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Caret.js

@@ -7,12 +7,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = require("styled-components");
 
 var _styledSystem = require("styled-system");
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const oppositeEdge = {
@@ -57,15 +55,22 @@ const getBorderWidth = (0, _styledSystem.style)({
 });
 
 function Caret(props) {
+  var _props$theme;
+
+  const theme = _react.default.useContext(_styledComponents.ThemeContext);
+
+  const propsWithTheme = { ...props,
+    theme: (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : theme
+  };
   const {
     bg
-  } = getBg(props);
+  } = getBg(propsWithTheme);
   const {
     borderColor
-  } = getBorderColor(props);
+  } = getBorderColor(propsWithTheme);
   const {
     borderWidth
-  } = getBorderWidth(props);
+  } = getBorderWidth(propsWithTheme);
   const {
     size = 8,
     location = 'bottom'
@@ -114,17 +119,9 @@ function Caret(props) {
 Caret.displayName = "Caret";
 Caret.locations = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 Caret.defaultProps = {
-  bg: 'white',
-  borderColor: 'gray.2',
-  borderWidth: 1,
-  theme: _theme.default
-};
-Caret.propTypes = {
-  bg: _propTypes.default.string,
-  borderColor: _propTypes.default.string,
-  borderWidth: _propTypes.default.number,
-  size: _propTypes.default.number,
-  location: _propTypes.default.oneOf(Caret.locations)
+  bg: 'canvas.default',
+  borderColor: 'border.default',
+  borderWidth: 1
 };
 var _default = Caret;
 exports.default = _default;

package/lib/Checkbox.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _hooks = require("./hooks");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 StyledCheckbox = _styledComponents.default.input.withConfig({
+  displayName: "Checkbox__StyledCheckbox",
+  componentId: "i51804-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, _sx.default);
+/**
+ * An accessible, native checkbox component
+ */
+
+
+const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
+  checked,
+  indeterminate,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  ...rest
+}, ref) => {
+  const checkboxRef = (0, _hooks.useProvidedRefOrCreate)(ref);
+  (0, _react.useLayoutEffect)(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate || false;
+    }
+  }, [indeterminate, checked, checkboxRef]);
+  return /*#__PURE__*/_react.default.createElement(StyledCheckbox, _extends({
+    type: "checkbox",
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    ref: ref || checkboxRef,
+    checked: indeterminate ? false : checked,
+    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
+    sx: sxProp,
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
+  }, rest));
+});
+
+Checkbox.displayName = 'Checkbox';
+var _default = Checkbox;
+exports.default = _default;

package/lib/CircleBadge.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
@@ -15,8 +13,6 @@ var _StyledOcticon = _interopRequireDefault(require("./StyledOcticon"));
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _isNumeric = _interopRequireDefault(require("./utils/isNumeric"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,28 +37,14 @@ const sizeStyles = ({
 const CircleBadge = _styledComponents.default.div.withConfig({
   displayName: "CircleBadge",
   componentId: "sc-1lho816-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.white'), (0, _constants.get)('shadows.medium'), _constants.COMMON, sizeStyles, _sx.default);
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('shadows.shadow.medium'), sizeStyles, _sx.default);
 
 const CircleBadgeIcon = (0, _styledComponents.default)(_StyledOcticon.default).withConfig({
   displayName: "CircleBadge__CircleBadgeIcon",
   componentId: "sc-1lho816-1"
 })(["height:auto;max-width:60%;max-height:55%;"]);
 CircleBadge.defaultProps = {
-  inline: false,
-  theme: _theme.default
-};
-CircleBadge.propTypes = {
-  inline: _propTypes.default.bool,
-  size: _propTypes.default.number,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-CircleBadgeIcon.defaultProps = {
-  theme: _theme.default
-};
-CircleBadgeIcon.propTypes = { ..._StyledOcticon.default.propTypes
+  inline: false
 };
 CircleBadgeIcon.displayName = 'CircleBadge.Icon';
 

package/lib/CircleOcticon.js

@@ -7,13 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Flex = _interopRequireDefault(require("./Flex"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _BorderBox = _interopRequireDefault(require("./BorderBox"));
+var _Box = _interopRequireDefault(require("./Box"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,14 +23,18 @@ function CircleOcticon(props) {
     bg,
     ...rest
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_BorderBox.default, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: as,
     bg: bg,
     overflow: "hidden",
     borderWidth: 0,
     size: size,
-    borderRadius: "50%"
-  }, /*#__PURE__*/_react.default.createElement(_Flex.default, _extends({}, rest, {
+    borderRadius: "50%",
+    borderStyle: "solid",
+    borderColor: "border.default"
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    display: "flex"
+  }, rest, {
     alignItems: "center",
     justifyContent: "center"
   }), /*#__PURE__*/_react.default.createElement(IconComponent, {
@@ -45,15 +43,8 @@ function CircleOcticon(props) {
 }
 
 CircleOcticon.displayName = "CircleOcticon";
-CircleOcticon.defaultProps = {
-  theme: _theme.default,
-  ..._Flex.default.defaultProps,
+CircleOcticon.defaultProps = { ..._Box.default.defaultProps,
   size: 32
 };
-CircleOcticon.propTypes = { ..._Flex.default.propTypes,
-  icon: _propTypes.default.elementType.isRequired,
-  size: _propTypes.default.number,
-  theme: _propTypes.default.object
-};
 var _default = CircleOcticon;
 exports.default = _default;

package/lib/CounterLabel.js

@@ -5,16 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const colorStyles = ({
@@ -22,7 +18,7 @@ const colorStyles = ({
   ...props
 }) => {
   return {
-    color: scheme === 'gray-light' ? (0, _constants.get)('colors.gray.9')(props) : scheme === 'gray' ? (0, _constants.get)('colors.white')(props) : (0, _constants.get)('colors.gray.6')(props)
+    color: scheme === 'secondary' ? (0, _constants.get)('colors.fg.default')(props) : scheme === 'primary' ? (0, _constants.get)('colors.fg.onEmphasis')(props) : (0, _constants.get)('colors.fg.default')(props)
   };
 };
 
@@ -31,24 +27,14 @@ const bgStyles = ({
   ...props
 }) => {
   return {
-    backgroundColor: scheme === 'gray-light' ? (0, _constants.get)('colors.blackfade15')(props) : scheme === 'gray' ? (0, _constants.get)('colors.gray.5')(props) : (0, _constants.get)('colors.counter.bg')(props)
+    backgroundColor: scheme === 'secondary' ? (0, _constants.get)('colors.neutral.muted')(props) : scheme === 'primary' ? (0, _constants.get)('colors.neutral.emphasis')(props) : (0, _constants.get)('colors.neutral.muted')(props)
   };
 };
 
 const CounterLabel = _styledComponents.default.span.withConfig({
   displayName: "CounterLabel",
   componentId: "sc-1ubx52d-0"
-})(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";", ";&:empty{display:none;}", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('lineHeights.condensedUltra'), colorStyles, bgStyles, _constants.COMMON, _sx.default);
+})(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('lineHeights.condensedUltra'), colorStyles, bgStyles, _sx.default);
 
-CounterLabel.defaultProps = {
-  theme: _theme.default
-};
-CounterLabel.propTypes = {
-  children: _propTypes.default.node,
-  scheme: _propTypes.default.oneOf(['gray', 'gray-light']),
-  theme: _propTypes.default.object,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = CounterLabel;
 exports.default = _default;

package/lib/Details.js

@@ -7,25 +7,15 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("./constants");
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Details = _styledComponents.default.details.withConfig({
   displayName: "Details",
-  componentId: "sc-1uozfty-0"
-})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], _constants.COMMON, _sx.default);
+  componentId: "ssy9qz-0"
+})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], _sx.default);
 
 Details.displayName = 'Details';
-Details.defaultProps = {
-  theme: _theme.default
-};
-Details.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = Details;
 exports.default = _default;

package/lib/Dialog/ConfirmationDialog.js

@@ -0,0 +1,191 @@
+"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;
+}