@veracity/vui 0.3.2 → 0.5.0

package/dialog/dialog.js

@@ -0,0 +1,122 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = exports.DialogBase = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("../core");
+var modal_1 = require("../modal");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var dialogBody_1 = __importDefault(require("./dialogBody"));
+var dialogCancelButton_1 = __importDefault(require("./dialogCancelButton"));
+var dialogCloseButton_1 = __importDefault(require("./dialogCloseButton"));
+var dialogFooter_1 = __importDefault(require("./dialogFooter"));
+var dialogHeader_1 = __importDefault(require("./dialogHeader"));
+var dialogIcon_1 = __importDefault(require("./dialogIcon"));
+var dialogSubmitButton_1 = __importDefault(require("./dialogSubmitButton"));
+var dialogTitle_1 = __importDefault(require("./dialogTitle"));
+exports.DialogBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbackground-color: white;\n\tborder-radius: md;\n\tbox-shadow: 4;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 16px;\n\tmax-height: calc(100vh - 32px); // full height - margin top/bottom\n\twidth: 100%;\n"], ["\n\tbackground-color: white;\n\tborder-radius: md;\n\tbox-shadow: 4;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 16px;\n\tmax-height: calc(100vh - 32px); // full height - margin top/bottom\n\twidth: 100%;\n"
+    /**
+     * Displays content in a Modal window. Includes required accessibility configuration.
+     * Used for alert messages, small forms or prompts.
+     */
+])));
+/**
+ * Displays content in a Modal window. Includes required accessibility configuration.
+ * Used for alert messages, small forms or prompts.
+ */
+exports.Dialog = (0, core_1.vui)(function (props, ref) {
+    var bodyProp = props.body, cancelButton = props.cancelButton, children = props.children, className = props.className, closeButton = props.closeButton, footer = props.footer, header = props.header, icon = props.icon, id = props.id, isOpen = props.isOpen, modalPropsProp = props.modalProps, onClose = props.onClose, size = props.size, status = props.status, submitButton = props.submitButton, title = props.title, variant = props.variant, rest = __rest(props, ["body", "cancelButton", "children", "className", "closeButton", "footer", "header", "icon", "id", "isOpen", "modalProps", "onClose", "size", "status", "submitButton", "title", "variant"]);
+    var styles = (0, core_1.useStyleConfig)('Dialog', props);
+    var idRef = (0, react_1.useRef)(id !== null && id !== void 0 ? id : (0, utils_1.random)().toString());
+    var _a = __read((0, utils_1.useIds)(idRef.current, ['dialog', 'dialog-body', 'dialog-title']), 3), dialogId = _a[0], bodyId = _a[1], titleId = _a[2];
+    var body = (0, utils_1.isReactText)(bodyProp) ? { children: bodyProp } : bodyProp;
+    var showFooter = Boolean(footer || cancelButton || submitButton);
+    var showHeader = Boolean(header || closeButton || icon || title);
+    var ariaProps = {
+        'aria-describedby': bodyId,
+        'aria-labelledby': titleId
+    };
+    var modalProps = __assign(__assign({}, modalPropsProp), { contentProps: __assign({ alignItems: 'center', justifyContent: 'center' }, modalPropsProp === null || modalPropsProp === void 0 ? void 0 : modalPropsProp.contentProps) });
+    var context = { bodyId: bodyId, icon: icon, isOpen: isOpen, onClose: onClose, size: size, status: status, titleId: titleId, variant: variant };
+    return (react_1.default.createElement(context_1.DialogProvider, { value: context },
+        react_1.default.createElement(modal_1.Modal, __assign({}, { isOpen: isOpen, onClose: onClose }, modalProps),
+            react_1.default.createElement(exports.DialogBase, __assign({ className: (0, utils_1.cs)('vui-dialog', className), id: dialogId, ref: ref, role: "dialog" }, ariaProps, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+                (0, utils_1.isJsx)(header) ? header : showHeader && react_1.default.createElement(dialogHeader_1.default, __assign({}, { closeButton: closeButton, icon: icon, title: title }, header)),
+                (0, utils_1.isJsx)(body) ? body : body && react_1.default.createElement(dialogBody_1.default, __assign({}, body)),
+                (0, utils_1.isJsx)(footer) ? footer : showFooter && react_1.default.createElement(dialogFooter_1.default, __assign({}, { cancelButton: cancelButton, submitButton: submitButton }, footer))))))));
+});
+exports.Dialog.displayName = 'Dialog';
+exports.Dialog.Body = dialogBody_1.default;
+exports.Dialog.CancelButton = dialogCancelButton_1.default;
+exports.Dialog.CloseButton = dialogCloseButton_1.default;
+exports.Dialog.Footer = dialogFooter_1.default;
+exports.Dialog.Header = dialogHeader_1.default;
+exports.Dialog.Icon = dialogIcon_1.default;
+exports.Dialog.SubmitButton = dialogSubmitButton_1.default;
+exports.Dialog.Title = dialogTitle_1.default;
+exports.default = exports.Dialog;
+var templateObject_1;

package/dialog/dialog.types.d.ts

@@ -0,0 +1,47 @@
+import { ReactText } from 'react';
+import { BoxProps } from '../box';
+import { ButtonProps, IconButtonProps } from '../button';
+import { HeadingProps } from '../heading';
+import { IconProp, IconProps } from '../icon';
+import { ModalProps } from '../modal';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { PropsOf } from '../utils';
+export declare type DialogBodyProps = PropsOf<'div', BoxProps>;
+export declare type DialogCancelButtonProps = PropsOf<'button', ButtonProps>;
+export declare type DialogCloseButtonProps = PropsOf<'button', IconButtonProps>;
+export declare type DialogContext = Pick<DialogProps, 'icon' | 'isOpen' | 'onClose' | 'size' | 'status' | 'variant'> & {
+    bodyId?: string;
+    titleId?: string;
+};
+export declare type DialogFooterProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'cancelButton' | 'submitButton'>>;
+export declare type DialogHeaderProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'closeButton' | 'icon' | 'title'>>;
+export declare type DialogIconProps = PropsOf<'svg', IconProps>;
+export declare type DialogProps = SystemProps & ThemingProps<'Dialog'> & Pick<ModalProps, 'isOpen' | 'onClose'> & {
+    /** Socket for the main Dialog content. */
+    body?: ReactText | DialogBodyProps | JSX.Element;
+    /** Socket for a cancel button in the Dialog Footer. */
+    cancelButton?: DialogCancelButtonProps | JSX.Element;
+    /** Socket for a close icon button in the Dialog Header. */
+    closeButton?: boolean | DialogCloseButtonProps | JSX.Element;
+    /** Socket for a footer with buttons below Dialog Body. */
+    footer?: DialogFooterProps | JSX.Element;
+    /** Socket for a header with title and icon above the Dialog Body */
+    header?: DialogHeaderProps | JSX.Element;
+    /** Socket for a custom icon in the Dialog Header. */
+    icon?: IconProp | DialogIconProps | JSX.Element;
+    /** Props passed to the internal Modal component. */
+    modalProps?: ModalProps;
+    /** Adds an icon for a given status, such as error or warning. */
+    status?: DialogStatus;
+    /** Socket for a submit button in the Dialog Footer. */
+    submitButton?: DialogSubmitButtonProps | JSX.Element;
+    /** Socket for a title in the Dialog Header. */
+    title?: HeadingProps['text'] | DialogTitleProps | JSX.Element;
+};
+export declare type DialogStatus = 'danger' | 'error' | 'info' | 'warning';
+export declare type DialogStatusMapping = Record<string, {
+    iconProps: IconProps;
+}>;
+export declare type DialogSubmitButtonProps = PropsOf<'button', ButtonProps>;
+export declare type DialogTitleProps = PropsOf<'h4', HeadingProps>;

package/dialog/dialogBody.d.ts

@@ -0,0 +1,9 @@
+import { DialogBodyProps } from './dialog.types';
+/**
+ * Shows the main content between the Dialog Header and Footer.
+ * It becomes scrollable when content does not fit vertically. Borders are shown automatically.
+ * Receives more horizontal padding when Dialog has icon, so align text with title.
+ * Receives id linked to aria-describedby on the Dialog for accessibility.
+ */
+export declare const DialogBody: import("../core").VuiComponent<"div", DialogBodyProps>;
+export default DialogBody;

package/dialog/dialogBody.js

@@ -0,0 +1,85 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogBody = void 0;
+var react_1 = __importStar(require("react"));
+var box_1 = require("../box");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/**
+ * Shows the main content between the Dialog Header and Footer.
+ * It becomes scrollable when content does not fit vertically. Borders are shown automatically.
+ * Receives more horizontal padding when Dialog has icon, so align text with title.
+ * Receives id linked to aria-describedby on the Dialog for accessibility.
+ */
+exports.DialogBody = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var _b = (_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}, bodyId = _b.bodyId, icon = _b.icon, status = _b.status;
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    var _c = __read((0, react_1.useState)(false), 2), isScrolled = _c[0], setIsScrolled = _c[1];
+    var bodyRef = (0, react_1.useRef)(null);
+    // Observe size changes of the body to detect if it becomes vertically scrollable
+    var observerRef = (0, react_1.useRef)(new ResizeObserver(function () {
+        if (bodyRef.current) {
+            var _a = bodyRef.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
+            setIsScrolled(scrollHeight > clientHeight);
+        }
+    }));
+    (0, react_1.useEffect)(function () {
+        var _a;
+        bodyRef.current && ((_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.observe(bodyRef.current));
+    }, []);
+    // If body can be scrolled vertically, add dividing lines on top and bottom
+    var borderProps = isScrolled ? { borderColor: 'grey.30' } : {};
+    // Add more body padding when custom or status icon is displayed
+    var paddingProps = (icon !== null && icon !== void 0 ? icon : status) !== undefined ? { px: 8 } : { px: 3 };
+    return (react_1.default.createElement(box_1.Box, __assign({ borderBottom: "1px solid transparent", borderTop: "1px solid transparent", className: "vui-dialogBody", column: true, id: bodyId, overflowY: "auto", pb: 2, pt: 1.5, ref: (0, utils_1.mergeRefs)(ref, bodyRef) }, borderProps, paddingProps, styles.body, props)));
+});
+exports.DialogBody.displayName = 'DialogBody';
+exports.default = exports.DialogBody;

package/dialog/dialogCancelButton.d.ts

@@ -0,0 +1,4 @@
+import { DialogCancelButtonProps } from './dialog.types';
+/** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */
+export declare const DialogCancelButton: import("../core").VuiComponent<"button", DialogCancelButtonProps>;
+export default DialogCancelButton;

package/dialog/dialogCancelButton.js

@@ -0,0 +1,30 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogCancelButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("../button");
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */
+exports.DialogCancelButton = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var onClose = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).onClose;
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    return (react_1.default.createElement(button_1.LineButton, __assign({ className: "vui-dialogCancelButton", onClick: onClose, ref: ref }, styles.cancelButton, props)));
+});
+exports.DialogCancelButton.displayName = 'DialogCancelButton';
+exports.default = exports.DialogCancelButton;

package/dialog/dialogCloseButton.d.ts

@@ -0,0 +1,4 @@
+import { DialogCloseButtonProps } from './dialog.types';
+/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
+export declare const DialogCloseButton: import("../core").VuiComponent<"button", DialogCloseButtonProps>;
+export default DialogCloseButton;

package/dialog/dialogCloseButton.js

@@ -0,0 +1,30 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogCloseButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("../button");
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
+exports.DialogCloseButton = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var onClose = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).onClose;
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    return (react_1.default.createElement(button_1.CloseButton, __assign({ activeBg: "grey.30", className: "vui-dialogCloseButton", color: "grey.80", hoverBg: "grey.20", onClick: onClose, position: "absolute", ref: ref, right: 16, size: "sm", top: 16 }, styles.closeButton, props)));
+});
+exports.DialogCloseButton.displayName = 'DialogCloseButton';
+exports.default = exports.DialogCloseButton;

package/dialog/dialogFooter.d.ts

@@ -0,0 +1,4 @@
+import { DialogFooterProps } from './dialog.types';
+/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
+export declare const DialogFooter: import("../core").VuiComponent<"div", DialogFooterProps>;
+export default DialogFooter;

package/dialog/dialogFooter.js

@@ -0,0 +1,45 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogFooter = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = require("../box");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var dialogCancelButton_1 = __importDefault(require("./dialogCancelButton"));
+var dialogSubmitButton_1 = __importDefault(require("./dialogSubmitButton"));
+/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
+exports.DialogFooter = (0, core_1.vui)(function (props, ref) {
+    var cancelButton = props.cancelButton, children = props.children, submitButton = props.submitButton, rest = __rest(props, ["cancelButton", "children", "submitButton"]);
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    return (react_1.default.createElement(box_1.Box, __assign({ className: "vui-dialogFooter", justifyContent: "flex-end", p: 3, pt: 2, ref: ref }, styles.footer, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        (0, utils_1.isJsx)(cancelButton) ? cancelButton : cancelButton && react_1.default.createElement(dialogCancelButton_1.default, __assign({}, cancelButton)),
+        (0, utils_1.isJsx)(submitButton) ? submitButton : submitButton && react_1.default.createElement(dialogSubmitButton_1.default, __assign({}, submitButton))))));
+});
+exports.DialogFooter.displayName = 'DialogFooter';
+exports.default = exports.DialogFooter;

package/dialog/dialogHeader.d.ts

@@ -0,0 +1,4 @@
+import { DialogHeaderProps } from './dialog.types';
+/** Shows title, status icon and close button above the Dialog Body. */
+export declare const DialogHeader: import("../core").VuiComponent<"div", DialogHeaderProps>;
+export default DialogHeader;

package/dialog/dialogHeader.js

@@ -0,0 +1,53 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = require("../box");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var dialogCloseButton_1 = __importDefault(require("./dialogCloseButton"));
+var dialogIcon_1 = __importDefault(require("./dialogIcon"));
+var dialogTitle_1 = __importDefault(require("./dialogTitle"));
+/** Shows title, status icon and close button above the Dialog Body. */
+exports.DialogHeader = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var children = props.children, closeButton = props.closeButton, iconProp = props.icon, titleProp = props.title, rest = __rest(props, ["children", "closeButton", "icon", "title"]);
+    var _b = (_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}, onClose = _b.onClose, status = _b.status;
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    var icon = (0, utils_1.isString)(iconProp) ? { name: iconProp } : iconProp;
+    var showCloseButton = Boolean(closeButton !== undefined ? closeButton : onClose);
+    var showIcon = Boolean(icon || status);
+    var title = (0, utils_1.isReactText)(titleProp) ? { text: titleProp } : titleProp;
+    return (react_1.default.createElement(box_1.Box, __assign({ className: "vui-dialogHeader", icon: icon, pb: 1.5, pl: 3, position: "relative", pr: 8, pt: 3, ref: ref }, styles.header, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        (0, utils_1.isJsx)(icon) ? icon : showIcon && react_1.default.createElement(dialogIcon_1.default, __assign({}, icon)),
+        (0, utils_1.isJsx)(title) ? title : title && react_1.default.createElement(dialogTitle_1.default, __assign({}, title)),
+        (0, utils_1.isJsx)(closeButton) ? closeButton : showCloseButton && react_1.default.createElement(dialogCloseButton_1.default, null)))));
+});
+exports.DialogHeader.displayName = 'DialogHeader';
+exports.default = exports.DialogHeader;

package/dialog/dialogIcon.d.ts

@@ -0,0 +1,4 @@
+import { DialogIconProps } from './dialog.types';
+/** Shows an icon based on a given status. Optionally, can be a custom icon. */
+export declare const DialogIcon: import("../core").VuiComponent<"svg", DialogIconProps>;
+export default DialogIcon;

package/dialog/dialogIcon.js

@@ -0,0 +1,32 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var icon_1 = require("../icon");
+var consts_1 = require("./consts");
+var context_1 = require("./context");
+/** Shows an icon based on a given status. Optionally, can be a custom icon. */
+exports.DialogIcon = (0, core_1.vui)(function (props, ref) {
+    var _a, _b;
+    var _c = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).status, status = _c === void 0 ? '' : _c;
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    var iconProps = ((_b = consts_1.dialogStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
+    return react_1.default.createElement(icon_1.Icon, __assign({ className: "vui-dialogIcon", mr: 2, ref: ref }, styles.icon, iconProps, props));
+});
+exports.DialogIcon.displayName = 'DialogIcon';
+exports.default = exports.DialogIcon;

package/dialog/dialogSubmitButton.d.ts

@@ -0,0 +1,4 @@
+import { DialogSubmitButtonProps } from './dialog.types';
+/** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
+export declare const DialogSubmitButton: import("../core").VuiComponent<"button", DialogSubmitButtonProps>;
+export default DialogSubmitButton;

package/dialog/dialogSubmitButton.js

@@ -0,0 +1,28 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogSubmitButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("../button");
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
+exports.DialogSubmitButton = (0, core_1.vui)(function (props, ref) {
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    return (react_1.default.createElement(button_1.Button, __assign({ className: "vui-dialogSubmitButton", ml: 2, ref: ref, text: "Submit" }, styles.submitButton, props)));
+});
+exports.DialogSubmitButton.displayName = 'DialogSubmitButton';
+exports.default = exports.DialogSubmitButton;

package/dialog/dialogTitle.d.ts

@@ -0,0 +1,4 @@
+import { DialogTitleProps } from './dialog.types';
+/** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
+export declare const DialogTitle: import("../core").VuiComponent<"h4", DialogTitleProps>;
+export default DialogTitle;

package/dialog/dialogTitle.js

@@ -0,0 +1,30 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogTitle = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var heading_1 = require("../heading");
+var context_1 = require("./context");
+/** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
+exports.DialogTitle = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var titleId = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).titleId;
+    var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
+    return react_1.default.createElement(heading_1.H4, __assign({ className: "vui-dialogTitle", id: titleId, ref: ref }, styles.title, props));
+});
+exports.DialogTitle.displayName = 'DialogTitle';
+exports.default = exports.DialogTitle;

package/dialog/index.d.ts

@@ -0,0 +1,13 @@
+export * from './consts';
+export * from './context';
+export * from './dialog';
+export { default as Dialog } from './dialog';
+export * from './dialog.types';
+export * from './dialogBody';
+export * from './dialogCancelButton';
+export * from './dialogCloseButton';
+export * from './dialogFooter';
+export * from './dialogHeader';
+export * from './dialogIcon';
+export * from './dialogSubmitButton';
+export * from './dialogTitle';

package/dialog/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+__exportStar(require("./consts"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./dialog"), exports);
+var dialog_1 = require("./dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return __importDefault(dialog_1).default; } });
+__exportStar(require("./dialog.types"), exports);
+__exportStar(require("./dialogBody"), exports);
+__exportStar(require("./dialogCancelButton"), exports);
+__exportStar(require("./dialogCloseButton"), exports);
+__exportStar(require("./dialogFooter"), exports);
+__exportStar(require("./dialogHeader"), exports);
+__exportStar(require("./dialogIcon"), exports);
+__exportStar(require("./dialogSubmitButton"), exports);
+__exportStar(require("./dialogTitle"), exports);

package/dialog/theme.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+    };
+    parts: string[];
+    sizes: {
+        md: {
+            container: {
+                maxW: number;
+            };
+        };
+        lg: {
+            container: {
+                maxW: number;
+            };
+        };
+        fullWidth: {};
+    };
+    variants: {};
+};
+export default _default;