@elliemae/ds-dialog 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/styles.js

@@ -1,150 +1,121 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styles_exports = {};
-__export(styles_exports, {
-  DSDialogAddon: () => DSDialogAddon,
-  DSDialogBody: () => DSDialogBody,
-  DSDialogDefaultLayout: () => DSDialogDefaultLayout,
-  DSDialogFooter: () => DSDialogFooter,
-  DSDialogHeader: () => DSDialogHeader,
-  DSDialogPrimaryMessage: () => DSDialogPrimaryMessage,
-  DSDialogSecondaryMessage: () => DSDialogSecondaryMessage,
-  DSDialogSeparator: () => DSDialogSeparator,
-  DSDialogTitle: () => DSDialogTitle,
-  FixedBody: () => FixedBody,
-  StyledDialogBackground: () => StyledDialogBackground,
-  StyledDialogContainer: () => StyledDialogContainer
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('@xstyled/styled-components');
+var utils = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+const FixedBody = styled.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  body {\n    overflow: hidden;\n    \n    ", "\n  }\n"])), _ref => {
+  let {
+    isBodyOverflow
+  } = _ref;
+  return isBodyOverflow ? "padding-right: 15px !important;" : "";
+});
+const StyledDialogBackground = styled__default["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ", ";\n"])), _ref2 => {
+  let {
+    zIndex
+  } = _ref2;
+  return zIndex;
+});
+const StyledDialogContainer = styled__default["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ", ";\n  width: ", ";\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ", ";\n  background: ", ";\n  overflow-y: auto;\n  ", "\n  &:focus {\n    outline: none;\n  }\n"])), _ref3 => {
+  let {
+    centered
+  } = _ref3;
+  return centered ? 'auto' : '20vh auto auto auto';
+}, _ref4 => {
+  let {
+    size
+  } = _ref4;
+  return utils.allSizes[size];
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[500];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral['000'];
+}, styled.space);
+const DSDialogTitle = styled__default["default"].h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  font-size: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 0;\n"])), _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontSizes.title[700];
+});
+const DSDialogAddon = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"]([""])));
+const DSDialogHeader = styled__default["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ", ";\n  padding: 10px ", ";\n  & ", " + ", " {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ", ":only-child {\n    justify-self: flex-end;\n  }\n  ", "\n"])), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space.m;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.space.xs;
+}, DSDialogTitle, DSDialogAddon, DSDialogAddon, styled.space);
+const DSDialogSeparator = styled__default["default"].hr.attrs(() => ({
+  'aria-hidden': true
+}))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  margin: 0;\n  border-top: 1px solid ", ";\n"])), _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral['080'];
+});
+const DSDialogBody = styled__default["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xs;
+}, styled.layout, styled.space, styled.flexboxes, styled.sizing);
+const DSDialogPrimaryMessage = styled__default["default"].h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default["default"](["\n  margin: 0;\n"])));
+const DSDialogSecondaryMessage = styled__default["default"].p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n  margin: 0;\n  color: ", ";\n"])), _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.neutral[500];
 });
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = require("@elliemae/ds-system");
-var import_styled_components2 = require("@xstyled/styled-components");
-var import_utils = require("./utils");
-const FixedBody = import_ds_system.createGlobalStyle`
-  body {
-    overflow: hidden;
-    
-    ${({ isBodyOverflow }) => isBodyOverflow ? `padding-right: 15px !important;` : ``}
-  }
-`;
-const StyledDialogBackground = import_styled_components.default.div`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(37, 41, 47, 50%);
-  overflow-y: auto;
-  z-index: ${({ zIndex }) => zIndex};
-`;
-const StyledDialogContainer = import_styled_components.default.div`
-  height: fit-content;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: ${({ centered }) => centered ? "auto" : "20vh auto auto auto"};
-  width: ${({ size }) => import_utils.allSizes[size]};
-  min-width: 300px;
-  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};
-  background: ${({ theme }) => theme.colors.neutral["000"]};
-  overflow-y: auto;
-  ${import_styled_components2.space}
-  &:focus {
-    outline: none;
-  }
-`;
-const DSDialogTitle = import_styled_components.default.h3`
-  font-size: ${({ theme }) => theme.fontSizes.title[700]};
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin: 0;
-`;
-const DSDialogAddon = import_styled_components.default.div``;
-const DSDialogHeader = import_styled_components.default.div`
-  display: grid;
-  align-items: center;
-  grid-auto-flow: column;
-  min-height: ${({ theme }) => theme.space.m};
-  padding: 10px ${({ theme }) => theme.space.xs};
-  & ${DSDialogTitle} + ${DSDialogAddon} {
-    align-self: flex-start;
-    justify-self: flex-end;
-  }
-  & ${DSDialogAddon}:only-child {
-    justify-self: flex-end;
-  }
-  ${import_styled_components2.space}
-`;
-const DSDialogSeparator = import_styled_components.default.hr.attrs(() => ({ "aria-hidden": true }))`
-  margin: 0;
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
-`;
-const DSDialogBody = import_styled_components.default.div`
-  padding: ${({ theme }) => theme.space.xs};
-  overflow-y: auto;
-  ${import_styled_components2.layout}
-  ${import_styled_components2.space}
-  ${import_styled_components2.flexboxes}
-  ${import_styled_components2.sizing}
-`;
-const DSDialogPrimaryMessage = import_styled_components.default.h3`
-  margin: 0;
-`;
-const DSDialogSecondaryMessage = import_styled_components.default.p`
-  margin: 0;
-  color: ${({ theme }) => theme.colors.neutral[500]};
-`;
-const DSDialogDefaultLayout = import_styled_components.default.div`
-  display: grid;
-  grid-auto-flow: row;
-  justify-items: center;
-  align-items: center;
-  grid-gap: ${({ theme }) => theme.space.xxs};
+const DSDialogDefaultLayout = styled__default["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ", ";\n\n  ", " {\n    text-align: center;\n  }\n"])), _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xxs;
+}, DSDialogSecondaryMessage);
+const DSDialogFooter = styled__default["default"].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ", ";\n  min-height: ", ";\n  padding: 0 ", ";\n  ", "\n  ", "\n  ", "\n"])), _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xxs;
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.m;
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space.xs;
+}, styled.space, styled.flexboxes, styled.sizing);
 
-  ${DSDialogSecondaryMessage} {
-    text-align: center;
-  }
-`;
-const DSDialogFooter = import_styled_components.default.div`
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-content: flex-end;
-  grid-gap: ${({ theme }) => theme.space.xxs};
-  min-height: ${({ theme }) => theme.space.m};
-  padding: 0 ${({ theme }) => theme.space.xs};
-  ${import_styled_components2.space}
-  ${import_styled_components2.flexboxes}
-  ${import_styled_components2.sizing}
-`;
-module.exports = __toCommonJS(styles_exports);
-//# sourceMappingURL=styles.js.map
+exports.DSDialogAddon = DSDialogAddon;
+exports.DSDialogBody = DSDialogBody;
+exports.DSDialogDefaultLayout = DSDialogDefaultLayout;
+exports.DSDialogFooter = DSDialogFooter;
+exports.DSDialogHeader = DSDialogHeader;
+exports.DSDialogPrimaryMessage = DSDialogPrimaryMessage;
+exports.DSDialogSecondaryMessage = DSDialogSecondaryMessage;
+exports.DSDialogSeparator = DSDialogSeparator;
+exports.DSDialogTitle = DSDialogTitle;
+exports.FixedBody = FixedBody;
+exports.StyledDialogBackground = StyledDialogBackground;
+exports.StyledDialogContainer = StyledDialogContainer;

package/cjs/utils.js

@@ -1,55 +1,35 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var utils_exports = {};
-__export(utils_exports, {
-  DSDialogSizes: () => DSDialogSizes,
-  DSDialogSizesArrayValues: () => DSDialogSizesArrayValues,
-  allSizes: () => allSizes,
-  getSpaceProps: () => getSpaceProps
-});
-var React = __toESM(require("react"));
-const getSpaceProps = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+
+const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_ref => {
+  let [key] = _ref;
+  return /^[pm][xytblr]?$/.exec(key);
+}));
 const DSDialogSizes = {
-  DEFAULT: "default",
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large",
-  XLARGE: "x-large",
-  XXLARGE: "xx-large"
+  DEFAULT: 'default',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  XLARGE: 'x-large',
+  XXLARGE: 'xx-large'
 };
 const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
 const allSizes = {
-  default: "576px",
-  small: "320px",
-  medium: "656px",
-  large: "848px",
-  "x-large": "1042px",
-  "xx-large": "1440px"
+  default: '576px',
+  small: '320px',
+  medium: '656px',
+  large: '848px',
+  'x-large': '1042px',
+  'xx-large': '1440px'
 };
-module.exports = __toCommonJS(utils_exports);
-//# sourceMappingURL=utils.js.map
+
+exports.DSDialogSizes = DSDialogSizes;
+exports.DSDialogSizesArrayValues = DSDialogSizesArrayValues;
+exports.allSizes = allSizes;
+exports.getSpaceProps = getSpaceProps;

package/esm/DSDialog.js

@@ -1,65 +1,100 @@
-import * as React from "react";
-import ReactDOM from "react-dom";
-import React2, { useCallback, useRef, useEffect, useState } from "react";
-import { describe } from "react-desc";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { FixedBody, StyledDialogBackground, StyledDialogContainer } from "./styles";
-import { propTypes } from "./propTypes";
-import { defaultProps } from "./defaultProps";
-import { getSpaceProps } from "./utils";
-import { DSDialogDatatestid } from "./DSDialogDatatestid";
-const DSDialog = (props) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import ReactDOM from 'react-dom';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
+import { propTypes } from './propTypes.js';
+import { defaultProps } from './defaultProps.js';
+import { getSpaceProps } from './utils.js';
+import { DSDialogDatatestid } from './DSDialogDatatestid.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSDialog = props => {
+  var _FixedBody;
+
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   const [isBodyOverflow, setIsBodyOverflow] = useState(false);
   useValidateTypescriptPropTypes(propsWithDefault, propTypes);
-  const { children, isOpen, onClickOutside, centered, size, removeAutoFocus, zIndex, ...rest } = propsWithDefault;
+
+  const {
+    children,
+    isOpen,
+    onClickOutside,
+    centered,
+    size,
+    removeAutoFocus,
+    zIndex
+  } = propsWithDefault,
+        rest = _objectWithoutProperties(propsWithDefault, _excluded);
+
   const containerRef = useRef(null);
-  const handleOutsideClick = useCallback((e) => {
-    if (e.target.dataset.portalbg)
-      onClickOutside();
+  const handleOutsideClick = useCallback(e => {
+    if (e.target.dataset.portalbg) onClickOutside();
   }, [onClickOutside]);
-  const handleOnKeyDown = useCallback((e) => {
-    if (e.key === "Escape")
-      onClickOutside();
+  const handleOnKeyDown = useCallback(e => {
+    if (e.key === 'Escape') onClickOutside();
   }, [onClickOutside]);
   useEffect(() => {
-    const body = document.getElementsByTagName("body")[0];
-    const { offsetHeight, scrollHeight } = body;
-    if (!isOpen)
-      return setIsBodyOverflow(false);
+    const body = document.getElementsByTagName('body')[0];
+    const {
+      offsetHeight,
+      scrollHeight
+    } = body;
+    if (!isOpen) return setIsBodyOverflow(false);
     return setIsBodyOverflow(offsetHeight < scrollHeight);
   }, [isOpen]);
   useEffect(() => {
-    if (isOpen && !removeAutoFocus)
-      containerRef?.current?.focus();
+    var _containerRef$current;
+
+    if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
   }, [isOpen, removeAutoFocus]);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {
+    onClick: handleOutsideClick
+  });
+
   if (isOpen) {
-    return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(StyledDialogBackground, {
+    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/jsxs(StyledDialogBackground, _objectSpread(_objectSpread({
       onClick: handleOutsideClick,
       "data-portalbg": true,
       "data-testid": DSDialogDatatestid.BACKGROUND,
-      zIndex
-    }, /* @__PURE__ */ React2.createElement(FixedBody, {
-      isBodyOverflow
-    }), /* @__PURE__ */ React2.createElement(StyledDialogContainer, {
-      role: "dialog",
-      "aria-modal": true,
-      ref: containerRef,
-      tabIndex: !removeAutoFocus ? 0 : void 0,
-      onKeyDown: handleOnKeyDown,
-      ...getSpaceProps(rest),
-      size,
-      centered,
-      "data-testid": DSDialogDatatestid.CONTAINER
-    }, children)), document.getElementsByTagName("body")[0]);
+      zIndex: zIndex
+    }, globalAttributes), {}, {
+      children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
+        isBodyOverflow: isBodyOverflow
+      })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
+        role: "dialog",
+        "aria-modal": true,
+        ref: containerRef,
+        tabIndex: !removeAutoFocus ? 0 : undefined,
+        onKeyDown: handleOnKeyDown
+      }, getSpaceProps(rest)), {}, {
+        size: size,
+        centered: centered,
+        "data-testid": DSDialogDatatestid.CONTAINER,
+        children: children
+      }))]
+    })), document.getElementsByTagName('body')[0]);
   }
+
   return null;
 };
-DSDialog.propTypes = propTypes;
+
 const DSDialogWithSchema = describe(DSDialog);
 DSDialogWithSchema.propTypes = propTypes;
-export {
-  DSDialog,
-  DSDialogWithSchema
-};
-//# sourceMappingURL=DSDialog.js.map
+
+export { DSDialog, DSDialogWithSchema };

package/esm/DSDialogDatatestid.js

@@ -1,9 +1,6 @@
-import * as React from "react";
 const DSDialogDatatestid = {
-  CONTAINER: "ds-dialog-container",
-  BACKGROUND: "ds-dialog-background"
+  CONTAINER: 'ds-dialog-container',
+  BACKGROUND: 'ds-dialog-background'
 };
-export {
-  DSDialogDatatestid
-};
-//# sourceMappingURL=DSDialogDatatestid.js.map
+
+export { DSDialogDatatestid };

package/esm/DSDialogInternalTypes.d.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=DSDialogInternalTypes.d.js.map
+

package/esm/DSDialogTypes.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=DSDialogTypes.js.map
+

package/esm/defaultProps.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { DSDialogSizes } from "./utils";
-const noop = () => {
-};
+import { DSDialogSizes } from './utils.js';
+
+const noop = () => {};
+
 const defaultProps = {
   isOpen: false,
   centered: false,
@@ -10,7 +10,5 @@ const defaultProps = {
   onClickOutside: noop,
   zIndex: 10
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/index.js

@@ -1,28 +1,46 @@
-import * as React from "react";
-export * from "./DSDialog";
-export * from "./DSDialogDatatestid";
-import { DSDialogSizes } from "./utils";
-import {
-  DSDialogBody,
-  DSDialogHeader,
-  DSDialogFooter,
-  DSDialogSeparator,
-  DSDialogTitle,
-  DSDialogAddon,
-  DSDialogDefaultLayout,
-  DSDialogPrimaryMessage,
-  DSDialogSecondaryMessage
-} from "./styles";
-export {
-  DSDialogAddon,
-  DSDialogBody,
-  DSDialogDefaultLayout,
-  DSDialogFooter,
-  DSDialogHeader,
-  DSDialogPrimaryMessage,
-  DSDialogSecondaryMessage,
-  DSDialogSeparator,
-  DSDialogSizes,
-  DSDialogTitle
-};
-//# sourceMappingURL=index.js.map
+import { describe } from 'react-desc';
+import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
+import { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage } from './styles.js';
+export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
+export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
+export { DSDialogDatatestid } from './DSDialogDatatestid.js';
+export { DSDialogSizes } from './utils.js';
+
+DSDialogBody.propTypes = globalAttributesPropTypes;
+DSDialogHeader.propTypes = globalAttributesPropTypes;
+DSDialogFooter.propTypes = globalAttributesPropTypes;
+DSDialogSeparator.propTypes = globalAttributesPropTypes;
+DSDialogTitle.propTypes = globalAttributesPropTypes;
+DSDialogAddon.propTypes = globalAttributesPropTypes;
+DSDialogDefaultLayout.propTypes = globalAttributesPropTypes;
+DSDialogPrimaryMessage.propTypes = globalAttributesPropTypes;
+DSDialogSecondaryMessage.propTypes = globalAttributesPropTypes;
+DSDialogBody.displayName = 'DSDialogBody';
+DSDialogHeader.displayName = 'DSDialogHeader';
+DSDialogFooter.displayName = 'DSDialogFooter';
+DSDialogSeparator.displayName = 'DSDialogSeparator';
+DSDialogTitle.displayName = 'DSDialogTitle';
+DSDialogAddon.displayName = 'DSDialogAddon';
+DSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';
+DSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';
+DSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';
+const DSDialogBodyWithSchema = describe(DSDialogBody);
+const DSDialogHeaderWithSchema = describe(DSDialogHeader);
+const DSDialogFooterWithSchema = describe(DSDialogFooter);
+const DSDialogSeparatorWithSchema = describe(DSDialogSeparator);
+const DSDialogTitleWithSchema = describe(DSDialogTitle);
+const DSDialogAddonWithSchema = describe(DSDialogAddon);
+const DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout);
+const DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage);
+const DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage);
+DSDialogBodyWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogFooterWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogTitleWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;
+
+export { DSDialogAddonWithSchema, DSDialogBodyWithSchema, DSDialogDefaultLayoutWithSchema, DSDialogFooterWithSchema, DSDialogHeaderWithSchema, DSDialogPrimaryMessageWithSchema, DSDialogSecondaryMessageWithSchema, DSDialogSeparatorWithSchema, DSDialogTitleWithSchema };