@longline/aqua-ui 1.0.0

package/services/Dialog/ConfirmDialog.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * Dialog content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Is the Dialog currently open?
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Title to show in confirmation dialog. If not specified, "Confirmation"
+     * @default Confirmation
+     */
+    title?: string;
+    /**
+     * Function to call on close (with a negative reply).
+     */
+    onClose: () => void;
+    /**
+     * Function to call on close (with a positive reply).
+     */
+    onConfirm: () => void;
+}
+/**
+ * A `Dialog.Confirm` is a preset dialog with a title, and a "Yes" and a "No"
+ * button. Clicking "Yes" cals `onConfirm`, and clicking "No" calls `onClose`.
+ */
+declare const ConfirmDialog: {
+    ({ open, title, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
+export { ConfirmDialog, IProps };

package/services/Dialog/ConfirmDialog.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+// Other controls
+import { Dialog } from './Dialog';
+import { PrimaryButton } from '../../controls/PrimaryButton';
+/**
+ * A `Dialog.Confirm` is a preset dialog with a title, and a "Yes" and a "No"
+ * button. Clicking "Yes" cals `onConfirm`, and clicking "No" calls `onClose`.
+ */
+var ConfirmDialog = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.title, title = _c === void 0 ? 'Confirmation' : _c, props = __rest(_a, ["open", "title"]);
+    return React.createElement(Dialog, { open: open, onClose: props.onClose },
+        React.createElement(Dialog.Header, null, title),
+        React.createElement(Dialog.Content, null, props.children),
+        React.createElement(Dialog.Footer, null,
+            React.createElement(PrimaryButton, { negative: true, onClick: props.onConfirm }, "Yes"),
+            React.createElement(PrimaryButton, { onClick: props.onClose }, "No")));
+};
+ConfirmDialog.displayName = "Dialog.Confirm";
+export { ConfirmDialog };

package/services/Dialog/Dialog.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * Dialog content, consisting of `Dialog.Header`, `Dialog.Content` and
+     * `Dialog.Footer` components.
+     */
+    children?: React.ReactNode;
+    /**
+     * Is the Dialog currently open? Calling code must set this property
+     * to false in order to close a Dialog.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Override standard dialog width of 600 pixels (large screens) or
+     * 400 pixels (small screens).
+     * @default 600
+     */
+    width?: number;
+    /**
+     * If set to false, then the Dialog cannot be closed by clicking
+     * outside of it. This is helpful when a Dialog is executing an
+     * asynchronous task and must remain open while doing so.
+     * @default true
+     */
+    canClose?: boolean;
+    /**
+     * This optional callback is called when the user closes the Dialog
+     * window.
+     * @default null
+     */
+    onClose?: () => void;
+}
+/**
+ * A Dialog is an overlay window that is shown when the Dialog’s `open`
+ * attribute is set to `true`. The calling code is responsible for setting
+ * `open` to false when the Dialog should close. The Dialog also calls
+ * `onClose` when the user clicks outside the Dialog (`canClose` can be set
+ * to prevent this behavior).
+ */
+declare const Dialog: {
+    ({ open, canClose, width, ...props }: IProps): React.JSX.Element;
+    /**
+     * Dialog.Header contains dialog header content.
+     */
+    Header: {
+        (props: import("./DialogHeader").IProps): React.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Dialog.Content contains main dialog body content.
+     */
+    Content: {
+        (props: import("./DialogContent").IProps): React.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Dialog.Footer contains dialog footer content.
+     */
+    Footer: {
+        ({ align, ...props }: import("./DialogFooter").IProps): React.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The Dialog component offers a pre-built Dialog.Alert type, with an "OK" button.
+     * The caller provides a title, and any JSX inside the component is used as dialog content.
+     */
+    Alert: {
+        ({ open, title, ...props }: import("./AlertDialog").IAlertDialogProps): React.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The Dialog component offers a pre-built Dialog.Confirm type, with a "Yes" and a "No"
+     * button. The caller provides a title, and any JSX inside the component is used as dialog
+     * content.
+     */
+    Confirm: {
+        ({ open, title, ...props }: import("./ConfirmDialog").IProps): React.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The Dialog component offers a pre-built Dialog.Xhr type, with an "OK" and a "Retry"
+     * button. This dialog can be used when an XHR request fails. It takes an error attribute
+     * with an Axios response object, and reports it to the user.
+     */
+    Xhr: {
+        ({ open, ...props }: import("./XhrDialog").IXhrDialogProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export { Dialog, IProps };

package/services/Dialog/Dialog.js

@@ -0,0 +1,92 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { CSSTransition } from 'react-transition-group';
+// Other controls
+import { DialogBackground } from './DialogBackground';
+import { DialogWindow } from './DialogWindow';
+import { DialogHeader } from './DialogHeader';
+import { DialogContent } from './DialogContent';
+import { DialogFooter } from './DialogFooter';
+import { AlertDialog } from './AlertDialog';
+import { ConfirmDialog } from './ConfirmDialog';
+import { XhrDialog } from './XhrDialog';
+/**
+ * A Dialog is an overlay window that is shown when the Dialog’s `open`
+ * attribute is set to `true`. The calling code is responsible for setting
+ * `open` to false when the Dialog should close. The Dialog also calls
+ * `onClose` when the user clicks outside the Dialog (`canClose` can be set
+ * to prevent this behavior).
+ */
+var Dialog = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.canClose, canClose = _c === void 0 ? true : _c, _d = _a.width, width = _d === void 0 ? 600 : _d, props = __rest(_a, ["open", "canClose", "width"]);
+    var windowRef = React.useRef(null);
+    // Listen for document-wide mousedown event when component mounts.
+    React.useEffect(function () {
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            // Clean up document-wide mousedown event when component unmounts.
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    });
+    // Handle document-wide mousedown event by sending a dialog close event.
+    // When clicking outside of it, a Dialog can close only if its canClose
+    // prop is not set to false.
+    var handleClickOutside = function (event) {
+        var elem = event.target;
+        if (windowRef.current && !windowRef.current.contains(elem) && props.onClose && canClose !== false) {
+            props.onClose();
+        }
+    };
+    // CSS Transition mounts dialog when it is open. When it's closed, 
+    // a Dialog does not appear in the DOM at all.
+    //
+    // For use of CSSTransition, see:
+    // http://reactcommunity.org/react-transition-group/css-transition
+    // and 
+    // https://veerasundar.com/blog/2018/12/how-to-animate-page-transition-in-react-using-styled-components/  
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CSSTransition, { in: open, timeout: 300, unmountOnExit: true, classNames: "fade" },
+            React.createElement(DialogBackground, null)),
+        React.createElement(CSSTransition, { in: open, timeout: 300, unmountOnExit: true, classNames: "fade" },
+            React.createElement(DialogWindow, { width: width, ref: windowRef }, props.children))));
+};
+/**
+ * Dialog.Header contains dialog header content.
+ */
+Dialog.Header = DialogHeader;
+/**
+ * Dialog.Content contains main dialog body content.
+ */
+Dialog.Content = DialogContent;
+/**
+ * Dialog.Footer contains dialog footer content.
+ */
+Dialog.Footer = DialogFooter;
+/**
+ * The Dialog component offers a pre-built Dialog.Alert type, with an "OK" button.
+ * The caller provides a title, and any JSX inside the component is used as dialog content.
+ */
+Dialog.Alert = AlertDialog;
+/**
+ * The Dialog component offers a pre-built Dialog.Confirm type, with a "Yes" and a "No"
+ * button. The caller provides a title, and any JSX inside the component is used as dialog
+ * content.
+ */
+Dialog.Confirm = ConfirmDialog;
+/**
+ * The Dialog component offers a pre-built Dialog.Xhr type, with an "OK" and a "Retry"
+ * button. This dialog can be used when an XHR request fails. It takes an error attribute
+ * with an Axios response object, and reports it to the user.
+ */
+Dialog.Xhr = XhrDialog;
+export { Dialog };

package/services/Dialog/DialogBackground.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+}
+declare const DialogBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { DialogBackground };

package/services/Dialog/DialogBackground.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var DialogBackgroundBase = function (props) {
+    return React.createElement("div", { className: props.className });
+};
+var DialogBackground = styled(DialogBackgroundBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #000;\n  opacity:     0.5;\n\n  /* CSSTransition classes */\n  &.fade-enter {\n    opacity: 0;\n  }\n  &.fade-enter-active {\n    opacity: 0.5;\n    transition: opacity 0.3s ease;\n  }\n  &.fade-exit {\n    opacity: 0.5;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }  \n"], ["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #000;\n  opacity:     0.5;\n\n  /* CSSTransition classes */\n  &.fade-enter {\n    opacity: 0;\n  }\n  &.fade-enter-active {\n    opacity: 0.5;\n    transition: opacity 0.3s ease;\n  }\n  &.fade-exit {\n    opacity: 0.5;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }  \n"])));
+export { DialogBackground };
+var templateObject_1;

package/services/Dialog/DialogContent.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Dialog content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Maximum height in _percentage_ of screen height before a scrollbar is
+     * added. Defaults to 70.
+     * @default 70
+     */
+    maxHeight?: number;
+}
+/**
+ * `Dialog.Content` is a content block for a `Dialog` component. The content
+ * will auto-scroll when it is taller than 70% of the viewport. This percentage
+ * can be adjusted with the `maxHeight` prop.
+ */
+declare const DialogContent: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
+export { DialogContent, IProps };

package/services/Dialog/DialogContent.js

@@ -0,0 +1,38 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var DialogContentBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var DialogContentStyled = styled(DialogContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:   relative;\n  padding:    0 20px 24px 20px;\n  max-height: ", "vh;\n  overflow-y: auto;  \n"], ["\n  position:   relative;\n  padding:    0 20px 24px 20px;\n  max-height: ", "vh;\n  overflow-y: auto;  \n"
+    /**
+     * `Dialog.Content` is a content block for a `Dialog` component. The content
+     * will auto-scroll when it is taller than 70% of the viewport. This percentage
+     * can be adjusted with the `maxHeight` prop.
+     */
+])), function (p) { var _a; return (_a = p.maxHeight) !== null && _a !== void 0 ? _a : 70; });
+/**
+ * `Dialog.Content` is a content block for a `Dialog` component. The content
+ * will auto-scroll when it is taller than 70% of the viewport. This percentage
+ * can be adjusted with the `maxHeight` prop.
+ */
+var DialogContent = function (props) {
+    return React.createElement(DialogContentStyled, __assign({}, props));
+};
+DialogContent.displayName = "Dialog.Content";
+export { DialogContent };
+var templateObject_1;

package/services/Dialog/DialogFooter.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Footer content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional alignment of items in the Dialog footer. Defaults to `end`.
+     * @default end
+     */
+    align?: 'start' | 'end' | 'space-between';
+}
+/**
+ * A `Dialog.Footer` is the footer of a `Dialog` component. It is intended
+ * to contain button controls. These are displayed using a flex container,
+ * where the `align` prop may be used to align them left, right or center.
+ */
+declare const DialogFooter: {
+    ({ align, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
+export { DialogFooter, IProps };

package/services/Dialog/DialogFooter.js

@@ -0,0 +1,50 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var DialogFooterBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var DialogFooterStyled = styled(DialogFooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n  justify-content: ", ";\n  padding: 0 20px 0 20px;\n  height: 80px;\n  background-color: ", ";\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n  justify-content: ", ";\n  padding: 0 20px 0 20px;\n  height: 80px;\n  background-color: ", ";\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"
+    /**
+     * A `Dialog.Footer` is the footer of a `Dialog` component. It is intended
+     * to contain button controls. These are displayed using a flex container,
+     * where the `align` prop may be used to align them left, right or center.
+     */
+])), function (p) { return p.align; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
+/**
+ * A `Dialog.Footer` is the footer of a `Dialog` component. It is intended
+ * to contain button controls. These are displayed using a flex container,
+ * where the `align` prop may be used to align them left, right or center.
+ */
+var DialogFooter = function (_a) {
+    var _b = _a.align, align = _b === void 0 ? 'end' : _b, props = __rest(_a, ["align"]);
+    return React.createElement(DialogFooterStyled, __assign({ align: align }, props));
+};
+DialogFooter.displayName = "Dialog.Footer";
+export { DialogFooter };
+var templateObject_1;

package/services/Dialog/DialogHeader.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Header content.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A `Dialog.Header` is the header of a `Dialog` component. It can contain
+ * any JSX.
+ */
+declare const DialogHeader: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
+export { DialogHeader, IProps };

package/services/Dialog/DialogHeader.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var DialogHeaderBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var DialogHeaderStyled = styled(DialogHeaderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 24px 20px 24px 20px;\n  font: ", ";\n"], ["\n  padding: 24px 20px 24px 20px;\n  font: ", ";\n"
+    /**
+     * A `Dialog.Header` is the header of a `Dialog` component. It can contain
+     * any JSX.
+     */
+])), function (p) { return p.theme.font.headingMedium; });
+/**
+ * A `Dialog.Header` is the header of a `Dialog` component. It can contain
+ * any JSX.
+ */
+var DialogHeader = function (props) {
+    return React.createElement(DialogHeaderStyled, __assign({}, props));
+};
+DialogHeader.displayName = "Dialog.Header";
+export { DialogHeader };
+var templateObject_1;

package/services/Dialog/DialogWindow.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    windowRef?: any;
+    width?: number;
+}
+declare const DialogWindow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, never>> & string & Omit<React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
+export { DialogWindow };

package/services/Dialog/DialogWindow.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var DialogWindowBase = React.forwardRef(function (props, ref) {
+    return React.createElement("div", { className: props.className, ref: ref }, props.children);
+});
+var DialogWindow = styled(DialogWindowBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  transform: translateX(-50%) translateY(-50%);\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* CSSTransition classes: */\n  &.fade-enter {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.fade-enter-active {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n  }\n  &.fade-exit {\n    opacity: 1;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n    transition: opacity 0.3s ease, transform 0.3s ease;\n  }\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  transform: translateX(-50%) translateY(-50%);\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* CSSTransition classes: */\n  &.fade-enter {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.fade-enter-active {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n  }\n  &.fade-exit {\n    opacity: 1;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n    transition: opacity 0.3s ease, transform 0.3s ease;\n  }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
+export { DialogWindow };
+var templateObject_1;

package/services/Dialog/XhrDialog.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+interface IXhrDialogProps {
+    /**
+     * Is the Dialog currently open?
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Axios error object.
+     */
+    error: any;
+    /**
+     * Function to call when user selects the 'OK' option. This function will
+     * be responsible for setting `open` to false in order to close the Dialog.
+     */
+    onClose: () => void;
+    /**
+     * Function to call when user selects the 'Retry' option. If not provided,
+     * retry option will not be available.  This function will be responsible
+     * for setting `open` to false in order to close the Dialog.
+     */
+    onRetry?: () => void;
+}
+/**
+ * A `Dialog.Xhr` is a preset dialog that takes an `error` object from an
+ * Axios request. It then displays a human-readable version of this error.
+ * An "OK" button is present that calls `onClose`, and, if `onRetry` is set,
+ * a "Retry" button.
+ */
+declare const XhrDialog: {
+    ({ open, ...props }: IXhrDialogProps): React.JSX.Element;
+    displayName: string;
+};
+export { XhrDialog, IXhrDialogProps };