@availity/mui-dialog 0.1.12 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-dialog@0.1.12...@availity/mui-dialog@0.2.0) (2024-12-09)
+
+### Dependency Updates
+
+* `mui-block-ui` updated to version `0.1.12`
+* `mui-form-utils` updated to version `0.1.12`
+* `mui-menu` updated to version `0.1.12`
+* `mui-alert` updated to version `0.1.12`
+* `mui-button` updated to version `0.1.12`
+* `mui-icon` updated to version `0.1.12`
+* `mui-textfield` updated to version `0.1.12`
+
+### Features
+
+* **mui-dialog:** add styles, alert icons, and close button ([7efdbdf](https://github.com/Availity/element/commit/7efdbdf41cca4365d196f5bab6797a07824e2c3a))
+
 ## [0.1.12](https://github.com/Availity/element/compare/@availity/mui-dialog@0.1.11...@availity/mui-dialog@0.1.12) (2024-10-31)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -1,13 +1,21 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_styles from '@mui/material/styles';
 import { DialogProps as DialogProps$1 } from '@mui/material/Dialog';
+import { IconButtonProps } from '@availity/mui-button';
 import { DialogActionsProps as DialogActionsProps$1 } from '@mui/material/DialogActions';
 import { DialogContentProps as DialogContentProps$1 } from '@mui/material/DialogContent';
 import { DialogContentTextProps as DialogContentTextProps$1 } from '@mui/material/DialogContentText';
 import { DialogTitleProps as DialogTitleProps$1 } from '@mui/material/DialogTitle';
+import { AlertIcons } from '@availity/mui-alert';
 
-type DialogProps = Omit<DialogProps$1, 'BackdropComponent' | 'BackdropProps' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'> & {
+type DialogProps = Omit<DialogProps$1, 'BackdropComponent' | 'BackdropProps' | 'components' | 'componentsProps' | 'container' | 'disableEnforceFocus' | 'disableEscapeKeyDown' | 'disablePortal' | 'disableRestoreFocus' | 'onBackdropClick' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'> & {
     children?: React.ReactNode;
+    /** If `true` the Close icon button is shown. */
+    closeButton?: boolean;
 };
-declare const Dialog: ({ children, ...rest }: DialogProps) => JSX.Element;
+declare const CloseButtonSlot: _emotion_styled.StyledComponent<Pick<Omit<IconButtonProps, "children" | "title">, "className" | "style" | "classes" | "action" | "disabled" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "color" | "content" | "translate" | "size" | "variant" | "ref" | "form" | "slot" | "key" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "edge"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
+declare const Dialog: ({ children, closeButton, onClose, ...rest }: DialogProps) => JSX.Element;
 
 interface DialogActionsProps extends DialogActionsProps$1 {
     children?: React.ReactNode;
@@ -24,9 +32,11 @@ interface DialogContentTextProps extends DialogContentTextProps$1 {
 }
 declare const DialogContentText: ({ children, ...rest }: DialogContentTextProps) => JSX.Element;
 
-interface DialogTitleProps extends DialogTitleProps$1 {
+type DialogTitleProps = {
     children?: React.ReactNode;
-}
-declare const DialogTitle: ({ children, ...rest }: DialogTitleProps) => JSX.Element;
+    /** The corresponding severity for the Alert Icon, if `undefined`/`false` no icon is displayed */
+    icon?: keyof typeof AlertIcons;
+} & Omit<DialogTitleProps$1, 'variantMapping'>;
+declare const DialogTitle: ({ children, component, icon, variant, ...rest }: DialogTitleProps) => JSX.Element;
 
-export { Dialog, DialogActions, type DialogActionsProps, DialogContent, type DialogContentProps, DialogContentText, type DialogContentTextProps, type DialogProps, DialogTitle, type DialogTitleProps };
+export { CloseButtonSlot, Dialog, DialogActions, type DialogActionsProps, DialogContent, type DialogContentProps, DialogContentText, type DialogContentTextProps, type DialogProps, DialogTitle, type DialogTitleProps };

package/dist/index.d.ts

@@ -1,13 +1,21 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_styles from '@mui/material/styles';
 import { DialogProps as DialogProps$1 } from '@mui/material/Dialog';
+import { IconButtonProps } from '@availity/mui-button';
 import { DialogActionsProps as DialogActionsProps$1 } from '@mui/material/DialogActions';
 import { DialogContentProps as DialogContentProps$1 } from '@mui/material/DialogContent';
 import { DialogContentTextProps as DialogContentTextProps$1 } from '@mui/material/DialogContentText';
 import { DialogTitleProps as DialogTitleProps$1 } from '@mui/material/DialogTitle';
+import { AlertIcons } from '@availity/mui-alert';
 
-type DialogProps = Omit<DialogProps$1, 'BackdropComponent' | 'BackdropProps' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'> & {
+type DialogProps = Omit<DialogProps$1, 'BackdropComponent' | 'BackdropProps' | 'components' | 'componentsProps' | 'container' | 'disableEnforceFocus' | 'disableEscapeKeyDown' | 'disablePortal' | 'disableRestoreFocus' | 'onBackdropClick' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'> & {
     children?: React.ReactNode;
+    /** If `true` the Close icon button is shown. */
+    closeButton?: boolean;
 };
-declare const Dialog: ({ children, ...rest }: DialogProps) => JSX.Element;
+declare const CloseButtonSlot: _emotion_styled.StyledComponent<Pick<Omit<IconButtonProps, "children" | "title">, "className" | "style" | "classes" | "action" | "disabled" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "color" | "content" | "translate" | "size" | "variant" | "ref" | "form" | "slot" | "key" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "edge"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
+declare const Dialog: ({ children, closeButton, onClose, ...rest }: DialogProps) => JSX.Element;
 
 interface DialogActionsProps extends DialogActionsProps$1 {
     children?: React.ReactNode;
@@ -24,9 +32,11 @@ interface DialogContentTextProps extends DialogContentTextProps$1 {
 }
 declare const DialogContentText: ({ children, ...rest }: DialogContentTextProps) => JSX.Element;
 
-interface DialogTitleProps extends DialogTitleProps$1 {
+type DialogTitleProps = {
     children?: React.ReactNode;
-}
-declare const DialogTitle: ({ children, ...rest }: DialogTitleProps) => JSX.Element;
+    /** The corresponding severity for the Alert Icon, if `undefined`/`false` no icon is displayed */
+    icon?: keyof typeof AlertIcons;
+} & Omit<DialogTitleProps$1, 'variantMapping'>;
+declare const DialogTitle: ({ children, component, icon, variant, ...rest }: DialogTitleProps) => JSX.Element;
 
-export { Dialog, DialogActions, type DialogActionsProps, DialogContent, type DialogContentProps, DialogContentText, type DialogContentTextProps, type DialogProps, DialogTitle, type DialogTitleProps };
+export { CloseButtonSlot, Dialog, DialogActions, type DialogActionsProps, DialogContent, type DialogContentProps, DialogContentText, type DialogContentTextProps, type DialogProps, DialogTitle, type DialogTitleProps };

package/dist/index.js

@@ -59,6 +59,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CloseButtonSlot: () => CloseButtonSlot,
   Dialog: () => Dialog,
   DialogActions: () => DialogActions,
   DialogContent: () => DialogContent,
@@ -69,10 +70,29 @@ module.exports = __toCommonJS(src_exports);
 
 // src/lib/Dialog.tsx
 var import_Dialog = __toESM(require("@mui/material/Dialog"));
+var import_styles = require("@mui/material/styles");
+var import_mui_button = require("@availity/mui-button");
+var import_mui_icon = require("@availity/mui-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
+var CloseButton = (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.CloseIcon, { fontSize: "xsmall" }) }));
+var CloseButtonSlot = (0, import_styles.styled)(CloseButton, {
+  name: "MuiDialog",
+  slot: "AvCloseButton",
+  overridesResolver: (props, styles) => styles.avCloseButton
+})({
+  position: "absolute",
+  top: ".5rem",
+  right: ".5rem",
+  "~ .MuiDialogTitle-root": {
+    marginRight: "3.5rem"
+  }
+});
 var Dialog = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default, __spreadProps(__spreadValues({}, rest), { children }));
+  var _b = _a, { children, closeButton = true, onClose } = _b, rest = __objRest(_b, ["children", "closeButton", "onClose"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, __spreadProps(__spreadValues({ onClose }, rest), { children: [
+    closeButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseButtonSlot, { onClick: onClose }) : null,
+    children
+  ] }));
 };
 
 // src/lib/DialogActions.tsx
@@ -101,13 +121,29 @@ var DialogContentText = (_a) => {
 
 // src/lib/DialogTitle.tsx
 var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
+var import_mui_alert = require("@availity/mui-alert");
+var import_styles2 = require("@mui/material/styles");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var AlertIcon = (0, import_styles2.styled)("div", {
+  name: "MuiDialogTitle",
+  slot: "AvIcon",
+  overridesResolver: (props, styles) => styles.avIcon
+})({
+  display: "inline-flex",
+  fontSize: "inherit",
+  marginRight: ".5rem",
+  verticalAlign: "text-bottom"
+});
 var DialogTitle = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_DialogTitle.default, __spreadProps(__spreadValues({}, rest), { children }));
+  var _b = _a, { children, component = "h2", icon, variant = "h5" } = _b, rest = __objRest(_b, ["children", "component", "icon", "variant"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_DialogTitle.default, __spreadProps(__spreadValues({ component, variant }, rest), { children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlertIcon, { children: import_mui_alert.AlertIcons[icon] }) : null,
+    children
+  ] }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CloseButtonSlot,
   Dialog,
   DialogActions,
   DialogContent,

package/dist/index.mjs

@@ -32,10 +32,29 @@ var __objRest = (source, exclude) => {
 
 // src/lib/Dialog.tsx
 import MuiDialog from "@mui/material/Dialog";
-import { jsx } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { IconButton } from "@availity/mui-button";
+import { CloseIcon } from "@availity/mui-icon";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CloseButton = (args) => /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "xsmall" }) }));
+var CloseButtonSlot = styled(CloseButton, {
+  name: "MuiDialog",
+  slot: "AvCloseButton",
+  overridesResolver: (props, styles) => styles.avCloseButton
+})({
+  position: "absolute",
+  top: ".5rem",
+  right: ".5rem",
+  "~ .MuiDialogTitle-root": {
+    marginRight: "3.5rem"
+  }
+});
 var Dialog = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(MuiDialog, __spreadProps(__spreadValues({}, rest), { children }));
+  var _b = _a, { children, closeButton = true, onClose } = _b, rest = __objRest(_b, ["children", "closeButton", "onClose"]);
+  return /* @__PURE__ */ jsxs(MuiDialog, __spreadProps(__spreadValues({ onClose }, rest), { children: [
+    closeButton ? /* @__PURE__ */ jsx(CloseButtonSlot, { onClick: onClose }) : null,
+    children
+  ] }));
 };
 
 // src/lib/DialogActions.tsx
@@ -64,12 +83,28 @@ var DialogContentText = (_a) => {
 
 // src/lib/DialogTitle.tsx
 import MuiDialogTitle from "@mui/material/DialogTitle";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { AlertIcons } from "@availity/mui-alert";
+import { styled as styled2 } from "@mui/material/styles";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var AlertIcon = styled2("div", {
+  name: "MuiDialogTitle",
+  slot: "AvIcon",
+  overridesResolver: (props, styles) => styles.avIcon
+})({
+  display: "inline-flex",
+  fontSize: "inherit",
+  marginRight: ".5rem",
+  verticalAlign: "text-bottom"
+});
 var DialogTitle = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx5(MuiDialogTitle, __spreadProps(__spreadValues({}, rest), { children }));
+  var _b = _a, { children, component = "h2", icon, variant = "h5" } = _b, rest = __objRest(_b, ["children", "component", "icon", "variant"]);
+  return /* @__PURE__ */ jsxs2(MuiDialogTitle, __spreadProps(__spreadValues({ component, variant }, rest), { children: [
+    icon ? /* @__PURE__ */ jsx5(AlertIcon, { children: AlertIcons[icon] }) : null,
+    children
+  ] }));
 };
 export {
+  CloseButtonSlot,
   Dialog,
   DialogActions,
   DialogContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-dialog",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "description": "Availity MUI Dialog Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -31,9 +31,16 @@
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
+  "dependencies": {
+    "@availity/mui-alert": "0.7.0",
+    "@availity/mui-button": "0.6.12",
+    "@availity/mui-icon": "0.11.1"
+  },
   "devDependencies": {
-    "@availity/mui-button": "0.6.11",
+    "@availity/mui-block-ui": "0.1.16",
+    "@availity/mui-form-utils": "0.15.1",
     "@availity/mui-layout": "0.2.0",
+    "@availity/mui-menu": "0.2.12",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/Dialog.stories.tsx

@@ -2,6 +2,11 @@
 import { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@availity/mui-button';
+import { BlockUi } from '@availity/mui-block-ui';
+import { SelectChangeEvent, FormControlLabel, Switch } from '@availity/mui-form-utils';
+import { Box, Grid } from '@availity/mui-layout';
+import { MenuItem } from '@availity/mui-menu';
+import { TextField } from '@availity/mui-textfield';
 
 import { Dialog, DialogProps } from './Dialog';
 import { DialogActions } from './DialogActions';
@@ -17,6 +22,30 @@ const meta: Meta<typeof Dialog> = {
 
 export default meta;
 
+const MockDialogProps = {
+  disableAutoFocus: true,
+  disableEnforceFocus: true,
+  disableEscapeKeyDown: true,
+  disablePortal: true,
+  disableRestoreFocus: true,
+  disableScrollLock: true,
+  hideBackdrop: true,
+  keepMounted: true,
+  onClose: ()=>null,
+  open: true,
+  sx: {
+    position: 'relative',
+    '.MuiDialog-container': {
+      alignItems: 'normal',
+      justifyContent: 'normal'
+    },
+    '.MuiDialog-paper': {
+      margin: 0
+    },
+
+  }
+}
+
 export const _Dialog: StoryObj<typeof Dialog> = {
   render: (args: DialogProps) => {
     const [open, setOpen] = useState(args.open);
@@ -37,7 +66,7 @@ export const _Dialog: StoryObj<typeof Dialog> = {
       <>
         <Button onClick={handleOpen}>Open Dialog</Button>
         <Dialog {...args} open={open} onClose={handleClose} aria-labelledby="alert-dialog-title">
-          <DialogTitle id="alert-dialog-title" component="h1">
+          <DialogTitle id="alert-dialog-title">
             Availity Dialog
           </DialogTitle>
           <DialogContent>
@@ -60,3 +89,213 @@ export const _Dialog: StoryObj<typeof Dialog> = {
     open: false,
   },
 };
+export const _DialogDisplay: StoryObj<typeof Dialog> = {
+  render: (args: DialogProps) => (
+    <Dialog {...MockDialogProps} {...args}>
+      <DialogTitle id="alert-dialog-title">
+        Availity Dialog
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>Dialog Content Text</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={()=>null} color="secondary">
+          Disagree
+        </Button>
+        <Button onClick={()=>null} autoFocus>
+          Agree
+        </Button>
+      </DialogActions>
+    </Dialog>
+  ),
+  args: {
+    disableAutoFocus: true,
+    disableScrollLock: true,
+    hideBackdrop: true,
+    onClose: ()=>null,
+    open: true,
+  }
+};
+
+export const _Sizes: StoryObj<typeof Dialog> = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [fullWidth, setFullWidth] = useState(true);
+    const [maxWidth, setMaxWidth] = useState<DialogProps['maxWidth']>('sm');
+
+    const handleClickOpen = () => {
+      setOpen(true);
+    };
+
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+    const handleMaxWidthChange = (event: SelectChangeEvent<typeof maxWidth>) => {
+      setMaxWidth(
+        // @ts-expect-error autofill of arbitrary value is not handled.
+        event.target.value,
+      );
+    };
+
+    const handleFullWidthChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setFullWidth(event.target.checked);
+    };
+
+    return (
+      <>
+        <Button onClick={handleClickOpen}>
+          Open max-width dialog
+        </Button>
+        <Dialog
+          fullWidth={fullWidth}
+          maxWidth={maxWidth}
+          open={open}
+          onClose={handleClose}
+        >
+          <DialogTitle>Optional sizes</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              You can set my maximum width and whether to adapt or not.
+            </DialogContentText>
+            <Box
+              component="form"
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                m: 'auto',
+                width: 'fit-content',
+              }}
+            >
+              <FormControlLabel
+                sx={{ mt: 1 }}
+                control={
+                  <Switch checked={fullWidth} onChange={handleFullWidthChange} />
+                }
+                label="Full width"
+              />
+              <TextField value={maxWidth} select SelectProps={{ onChange: handleMaxWidthChange }} label="max-width" name="max-width" margin="normal">
+                  <MenuItem value={false as any}>false</MenuItem>
+                  <MenuItem value="xs">xs</MenuItem>
+                  <MenuItem value="sm">sm</MenuItem>
+                  <MenuItem value="md">md</MenuItem>
+                  <MenuItem value="lg">lg</MenuItem>
+                  <MenuItem value="xl">xl</MenuItem>
+              </TextField>
+            </Box>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose}>Close</Button>
+          </DialogActions>
+        </Dialog>
+      </>
+    );
+  }
+};
+
+/** The loader should only display over the central dialog content */
+export const _Loading: StoryObj<typeof Dialog> = {
+  render: () => (
+    <Dialog {...MockDialogProps} fullWidth>
+      <DialogTitle id="alert-dialog-title">
+        Availity Dialog
+      </DialogTitle>
+      <DialogContent>
+        <BlockUi blocking message="Loading">
+          <DialogContentText>
+            Dialog Content Text
+
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sem mauris, sollicitudin sit amet lacus vel, sollicitudin tincidunt mi. Mauris risus nisi, sagittis id augue sit amet, venenatis volutpat dui. Etiam commodo vel lectus eget ornare. Donec laoreet urna eu velit condimentum viverra. Curabitur ut pulvinar ipsum, vitae laoreet nulla. Nam in nisl sit amet leo dignissim tempor. Donec imperdiet est odio, ac aliquam libero eleifend at. Pellentesque tempor semper nulla vel fermentum. Pellentesque viverra, neque vel laoreet sollicitudin, massa lacus ultricies lectus, quis rutrum odio orci vitae turpis. Donec rhoncus dui nec ex porta, vel porta odio suscipit.
+          </DialogContentText>
+        </BlockUi>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={()=>null} color="secondary">
+          Disagree
+        </Button>
+        <Button onClick={()=>null} autoFocus>
+          Agree
+        </Button>
+      </DialogActions>
+    </Dialog>
+  ),
+};
+
+export const _WithAlertIcons: StoryObj<typeof Dialog> = {
+  render: () => (
+    <Grid container direction="row" spacing={2} flexWrap="wrap">
+      <Grid>
+        <Dialog {...MockDialogProps}>
+          <DialogTitle id="alert-dialog-title" icon="info">
+            Info
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>Dialog Content Text</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={()=>null} color="secondary">
+              Disagree
+            </Button>
+            <Button onClick={()=>null} autoFocus>
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Grid>
+      <Grid>
+        <Dialog {...MockDialogProps}>
+          <DialogTitle id="alert-dialog-title" icon="success">
+            Success
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>Dialog Content Text</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={()=>null} color="secondary">
+              Disagree
+            </Button>
+            <Button onClick={()=>null} autoFocus>
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Grid>
+      <Grid>
+        <Dialog {...MockDialogProps}>
+          <DialogTitle id="alert-dialog-title" icon="warning">
+            Warning
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>Dialog Content Text</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={()=>null} color="secondary">
+              Disagree
+            </Button>
+            <Button onClick={()=>null} autoFocus>
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Grid>
+      <Grid>
+        <Dialog {...MockDialogProps}>
+          <DialogTitle id="alert-dialog-title" icon="error">
+            Error
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>Dialog Content Text</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={()=>null} color="secondary">
+              Disagree
+            </Button>
+            <Button onClick={()=>null} autoFocus>
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Grid>
+    </Grid>
+  ),
+};

package/src/lib/Dialog.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { Dialog } from './Dialog';
 
 describe('Dialog', () => {
@@ -6,4 +6,28 @@ describe('Dialog', () => {
     const { getByText } = render(<Dialog open>Test</Dialog>);
     expect(getByText('Test')).toBeTruthy();
   });
+
+  test('should render close button when `closeButton` is true', () => {
+    const { getByRole } = render(
+      <Dialog open closeButton/>
+    );
+    expect(getByRole('button')).toBeTruthy();
+  });
+
+  test('should not render close button when `closeButton` is false', () => {
+    const { queryByRole } = render(
+      <Dialog open closeButton={false}/>
+    );
+    expect(queryByRole('button')).toBeNull();
+  });
+
+  test('calls onClose when close button clicked', () => {
+    const handleClose = jest.fn();
+    const { getByRole } = render(
+      <Dialog open onClose={handleClose}/>
+    );
+
+    fireEvent.click(getByRole('button'));
+    expect(handleClose).toHaveBeenCalled();
+  });
 });

package/src/lib/Dialog.tsx

@@ -1,12 +1,38 @@
 import MuiDialog, { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
+import { styled } from '@mui/material/styles';
+import { IconButton, IconButtonProps } from '@availity/mui-button';
+import { CloseIcon } from '@availity/mui-icon';
+
 
 export type DialogProps = Omit<
   MuiDialogProps,
-  'BackdropComponent' | 'BackdropProps' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'
+  'BackdropComponent' | 'BackdropProps' | 'components' | 'componentsProps' | 'container' | 'disableEnforceFocus' | 'disableEscapeKeyDown' | 'disablePortal' | 'disableRestoreFocus' | 'onBackdropClick' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'
 > & {
   children?: React.ReactNode;
+  /** If `true` the Close icon button is shown. */
+  closeButton?: boolean;
 };
 
-export const Dialog = ({ children, ...rest }: DialogProps): JSX.Element => {
-  return <MuiDialog {...rest}>{children}</MuiDialog>;
+const CloseButton = (args: Omit<IconButtonProps, 'children' | 'title'>) => <IconButton title="Close Dialog" color="secondary" {...args}><CloseIcon fontSize="xsmall"/></IconButton>
+
+export const CloseButtonSlot = styled(CloseButton, {
+  name: 'MuiDialog',
+  slot: 'AvCloseButton',
+  overridesResolver: (props, styles) => styles.avCloseButton,
+})({
+  position: "absolute",
+  top: '.5rem',
+  right: '.5rem',
+  "~ .MuiDialogTitle-root": {
+    marginRight: '3.5rem'
+  }
+});
+
+export const Dialog = ({ children, closeButton = true, onClose, ...rest }: DialogProps): JSX.Element => {
+  return (
+    <MuiDialog onClose={onClose} {...rest}>
+      {closeButton ? <CloseButtonSlot onClick={onClose as IconButtonProps['onClick']}/> : null}
+      {children}
+    </MuiDialog>
+  );
 };

package/src/lib/DialogContentText.stories.tsx

@@ -1,11 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { SystemPropsList } from '../../../../data/MuiSystemProperties';
 
 import { DialogContentText, DialogContentTextProps } from './DialogContentText';
 
+/** > As a CSS utility, the `DialogContextText` component also supports all [system properties](https://mui.com/system/properties/). They are omitted for brevity, but can be used as props directly on the component.
+ */
 const meta: Meta<typeof DialogContentText> = {
   title: 'Components/Dialog/DialogContentText',
   component: DialogContentText,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      controls: {
+        exclude: SystemPropsList,
+      },
+    },
+  },
 };
 
 export default meta;

package/src/lib/DialogTitle.stories.tsx

@@ -1,11 +1,21 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { DialogTitle, DialogTitleProps } from './DialogTitle';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { SystemPropsList } from '../../../../data/MuiSystemProperties';
 
+/** > As a CSS utility, the `DialogTitle` component also supports all [system properties](https://mui.com/system/properties/). They are omitted for brevity, but can be used as props directly on the component.
+ */
 const meta: Meta<typeof DialogTitle> = {
   title: 'Components/Dialog/DialogTitle',
   component: DialogTitle,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      controls: {
+        exclude: SystemPropsList,
+      },
+    },
+  },
 };
 
 export default meta;
@@ -16,3 +26,8 @@ export const _DialogTitle: StoryObj<typeof DialogTitle> = {
     children: 'Modal Title',
   },
 };
+
+
+export const _WithIcon: StoryObj<typeof DialogTitle> = {
+  render: () => <DialogTitle icon="info">Info</DialogTitle>,
+};

package/src/lib/DialogTitle.test.tsx

@@ -6,4 +6,18 @@ describe('DialogTitle', () => {
     const { getByText } = render(<DialogTitle>Test</DialogTitle>);
     expect(getByText('Test')).toBeTruthy();
   });
+
+  test('should render an alert icon when value passed to `icon`', () => {
+    const { queryByRole } = render(
+      <DialogTitle icon="info"/>
+    );
+    expect(queryByRole('img', {hidden: true, })).toBeTruthy();
+  });
+
+  test('should not render an alert icon when no value passed to `icon`', () => {
+    const { queryByRole } = render(
+      <DialogTitle/>
+    );
+    expect(queryByRole('img', {hidden: true})).toBeNull();
+  });
 });

package/src/lib/DialogTitle.tsx

@@ -1,9 +1,29 @@
 import MuiDialogTitle, { DialogTitleProps as MuiDialogTitleProps } from '@mui/material/DialogTitle';
+import { AlertIcons } from '@availity/mui-alert';
+import { styled } from '@mui/material/styles';
 
-export interface DialogTitleProps extends MuiDialogTitleProps {
+const AlertIcon = styled('div', {
+  name: 'MuiDialogTitle',
+  slot: 'AvIcon',
+  overridesResolver: (props, styles) => styles.avIcon,
+})({
+  display: 'inline-flex',
+  fontSize: 'inherit',
+  marginRight: '.5rem',
+  verticalAlign: 'text-bottom'
+});
+
+export type DialogTitleProps = {
   children?: React.ReactNode;
-}
+  /** The corresponding severity for the Alert Icon, if `undefined`/`false` no icon is displayed */
+  icon?: keyof typeof AlertIcons;
+} & Omit<MuiDialogTitleProps, 'variantMapping'>
 
-export const DialogTitle = ({ children, ...rest }: DialogTitleProps): JSX.Element => {
-  return <MuiDialogTitle {...rest}>{children}</MuiDialogTitle>;
+export const DialogTitle = ({ children, component="h2", icon, variant="h5", ...rest }: DialogTitleProps): JSX.Element => {
+  return (
+    <MuiDialogTitle component={component} variant={variant} {...rest}>
+      {icon ? <AlertIcon>{AlertIcons[icon]}</AlertIcon> : null}
+      {children}
+    </MuiDialogTitle>
+  );
 };