@elliemae/ds-dialog 2.0.0-next.13 → 2.0.0-rc.12

package/cjs/DSDialog.js

@@ -18,6 +18,7 @@ var styles = require('./styles.js');
 var propTypes = require('./propTypes.js');
 var defaultProps = require('./defaultProps.js');
 var utils = require('./utils.js');
+var DSDialogDatatestid = require('./DSDialogDatatestid.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,7 +30,7 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 var _FixedBody;
 
-const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus"];
+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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -37,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const DSDialog = props => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, DSDialogWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
 
   const {
     children,
@@ -45,7 +46,8 @@ const DSDialog = props => {
     onClickOutside,
     centered,
     size,
-    removeAutoFocus
+    removeAutoFocus,
+    zIndex
   } = propsWithDefault,
         rest = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
 
@@ -65,7 +67,9 @@ const DSDialog = props => {
   if (isOpen) {
     return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
       onClick: handleOutsideClick,
-      "data-portalbg": true
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
+      zIndex: zIndex
     }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {})), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
       role: "dialog",
       "aria-modal": true,
@@ -75,6 +79,7 @@ const DSDialog = props => {
     }, utils.getSpaceProps(rest)), {}, {
       size: size,
       centered: centered,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
       children: children
     }))), document.getElementsByTagName('body')[0]);
   }

package/cjs/DSDialogDatatestid.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSDialogDatatestid = {
+  CONTAINER: 'ds-dialog-container',
+  BACKGROUND: 'ds-dialog-background'
+};
+
+exports.DSDialogDatatestid = DSDialogDatatestid;

package/cjs/DSDialogTypes.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/defaultProps.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var utils = require('./utils.js');
+
+const noop = () => {};
+
 const defaultProps = {
   isOpen: false,
   centered: false,
-  size: 'default',
+  size: utils.DSDialogSizes.DEFAULT,
   removeAutoFocus: false,
-  onClickOutside: () => {}
+  onClickOutside: noop,
+  zIndex: 10
 };
 
 exports.defaultProps = defaultProps;

package/cjs/index.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSDialog = require('./DSDialog.js');
+var DSDialogDatatestid = require('./DSDialogDatatestid.js');
+var utils = require('./utils.js');
 var styles = require('./styles.js');
 
 
 
 exports.DSDialog = DSDialog.DSDialog;
 exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
+exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
+exports.DSDialogSizes = utils.DSDialogSizes;
 exports.DSDialogAddon = styles.DSDialogAddon;
 exports.DSDialogBody = styles.DSDialogBody;
 exports.DSDialogDefaultLayout = styles.DSDialogDefaultLayout;

package/cjs/propTypes.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
+var utils = require('./utils.js');
 
 /* eslint-disable max-len */
 const propTypes = {
   isOpen: reactDesc.PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
   children: reactDesc.PropTypes.node.description('Nested components.').isRequired,
   centered: reactDesc.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
+  size: reactDesc.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT),
   removeAutoFocus: reactDesc.PropTypes.bool.description('Removes focus in the Dialog container when is open. If you want to focus an specific element in the Dialog, it should be set to true.').defaultValue(false),
   onClickOutside: reactDesc.PropTypes.func.description('Callback that should be used to close the modal when the user clicks outside. Cb also triggers when the user press ESC key for accessibility purposes.').defaultValue(() => {})
 };

package/cjs/styles.js

@@ -6,6 +6,7 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var styledSystem = require('styled-system');
+var utils = require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,47 +14,44 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject;
-const allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
-};
 const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  body {\n    overflow: hidden;\n  }\n"])));
 const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-0"
-})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;"]);
+})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex;
+});
 const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-1"
-})(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:scroll;", " &:focus{outline:none;}"], _ref => {
+})(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:auto;", " &:focus{outline:none;}"], _ref2 => {
   let {
     centered
-  } = _ref;
-  return centered ? 'auto' : '20vh auto auto auto';
-}, _ref2 => {
-  let {
-    size
   } = _ref2;
-  return allSizes[size];
+  return centered ? 'auto' : '20vh auto auto auto';
 }, _ref3 => {
   let {
-    theme
+    size
   } = _ref3;
-  return theme.colors.neutral[500];
+  return utils.allSizes[size];
 }, _ref4 => {
   let {
     theme
   } = _ref4;
+  return theme.colors.neutral[500];
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.colors.neutral['000'];
 }, styledSystem.space);
 const DSDialogTitle = /*#__PURE__*/styled__default["default"].h3.withConfig({
   componentId: "sc-106vqwv-2"
-})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref5 => {
+})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.fontSizes.title[700];
 });
 const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
@@ -61,33 +59,33 @@ const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
 })([""]);
 const DSDialogHeader = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-4"
-})(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", ""], _ref6 => {
+})(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", ""], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.space.m;
-}, _ref7 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.space.xs;
 }, DSDialogTitle, DSDialogAddon, DSDialogAddon, styledSystem.space);
 const DSDialogSeparator = /*#__PURE__*/styled__default["default"].hr.attrs(() => ({
   'aria-hidden': true
 })).withConfig({
   componentId: "sc-106vqwv-5"
-})(["margin:0;border-top:1px solid ", ";"], _ref8 => {
+})(["margin:0;border-top:1px solid ", ";"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.colors.neutral['080'];
 });
 const DSDialogBody = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-6"
-})(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref9 => {
+})(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.space.xs;
 }, styledSystem.layout, styledSystem.space, styledSystem.flexbox);
 const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withConfig({
@@ -95,36 +93,36 @@ const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withCo
 })(["margin:0;"]);
 const DSDialogSecondaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-106vqwv-8"
-})(["margin:0;color:", ";"], _ref10 => {
+})(["margin:0;color:", ";"], _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.colors.neutral[500];
 });
 const DSDialogDefaultLayout = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-9"
-})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref11 => {
+})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.space.xxs;
 }, DSDialogSecondaryMessage);
 const DSDialogFooter = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-10"
-})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref12 => {
+})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.space.xxs;
-}, _ref13 => {
+}, _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.space.m;
-}, _ref14 => {
+}, _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.space.xs;
 }, styledSystem.space, styledSystem.flexbox);
 

package/cjs/utils.js

@@ -11,5 +11,25 @@ const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_
   let [key] = _ref;
   return /^[pm][xytblr]?$/.exec(key);
 }));
+const DSDialogSizes = {
+  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'
+};
 
+exports.DSDialogSizes = DSDialogSizes;
+exports.DSDialogSizesArrayValues = DSDialogSizesArrayValues;
+exports.allSizes = allSizes;
 exports.getSpaceProps = getSpaceProps;

package/esm/DSDialog.js

@@ -14,11 +14,12 @@ import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styl
 import { propTypes } from './propTypes.js';
 import { defaultProps } from './defaultProps.js';
 import { getSpaceProps } from './utils.js';
+import { DSDialogDatatestid } from './DSDialogDatatestid.js';
 import { jsx } from 'react/jsx-runtime';
 
 var _FixedBody;
 
-const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus"];
+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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -26,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const DSDialog = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSDialogWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
 
   const {
     children,
@@ -34,7 +35,8 @@ const DSDialog = props => {
     onClickOutside,
     centered,
     size,
-    removeAutoFocus
+    removeAutoFocus,
+    zIndex
   } = propsWithDefault,
         rest = _objectWithoutProperties(propsWithDefault, _excluded);
 
@@ -54,7 +56,9 @@ const DSDialog = props => {
   if (isOpen) {
     return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
       onClick: handleOutsideClick,
-      "data-portalbg": true
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.BACKGROUND,
+      zIndex: zIndex
     }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {})), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
       role: "dialog",
       "aria-modal": true,
@@ -64,6 +68,7 @@ const DSDialog = props => {
     }, getSpaceProps(rest)), {}, {
       size: size,
       centered: centered,
+      "data-testid": DSDialogDatatestid.CONTAINER,
       children: children
     }))), document.getElementsByTagName('body')[0]);
   }

package/esm/DSDialogDatatestid.js

@@ -0,0 +1,6 @@
+const DSDialogDatatestid = {
+  CONTAINER: 'ds-dialog-container',
+  BACKGROUND: 'ds-dialog-background'
+};
+
+export { DSDialogDatatestid };

package/esm/DSDialogTypes.js

@@ -0,0 +1 @@
+

package/esm/defaultProps.js

@@ -1,9 +1,14 @@
+import { DSDialogSizes } from './utils.js';
+
+const noop = () => {};
+
 const defaultProps = {
   isOpen: false,
   centered: false,
-  size: 'default',
+  size: DSDialogSizes.DEFAULT,
   removeAutoFocus: false,
-  onClickOutside: () => {}
+  onClickOutside: noop,
+  zIndex: 10
 };
 
 export { defaultProps };

package/esm/index.js

@@ -1,2 +1,4 @@
 export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
+export { DSDialogDatatestid } from './DSDialogDatatestid.js';
+export { DSDialogSizes } from './utils.js';
 export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';

package/esm/propTypes.js

@@ -1,10 +1,12 @@
 import { PropTypes } from 'react-desc';
+import { DSDialogSizesArrayValues, DSDialogSizes } from './utils.js';
 
 /* eslint-disable max-len */
 const propTypes = {
   isOpen: PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
   children: PropTypes.node.description('Nested components.').isRequired,
   centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
+  size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT),
   removeAutoFocus: PropTypes.bool.description('Removes focus in the Dialog container when is open. If you want to focus an specific element in the Dialog, it should be set to true.').defaultValue(false),
   onClickOutside: PropTypes.func.description('Callback that should be used to close the modal when the user clicks outside. Cb also triggers when the user press ESC key for accessibility purposes.').defaultValue(() => {})
 };

package/esm/styles.js

@@ -2,49 +2,47 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
 import styled from 'styled-components';
 import { createGlobalStyle } from '@elliemae/ds-system';
 import { space, layout, flexbox } from 'styled-system';
+import { allSizes } from './utils.js';
 
 var _templateObject;
-const allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
-};
 const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    overflow: hidden;\n  }\n"])));
 const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-0"
-})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;"]);
+})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex;
+});
 const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-1"
-})(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:scroll;", " &:focus{outline:none;}"], _ref => {
+})(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:auto;", " &:focus{outline:none;}"], _ref2 => {
   let {
     centered
-  } = _ref;
+  } = _ref2;
   return centered ? 'auto' : '20vh auto auto auto';
-}, _ref2 => {
+}, _ref3 => {
   let {
     size
-  } = _ref2;
+  } = _ref3;
   return allSizes[size];
-}, _ref3 => {
+}, _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme.colors.neutral[500];
-}, _ref4 => {
+}, _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.colors.neutral['000'];
 }, space);
 const DSDialogTitle = /*#__PURE__*/styled.h3.withConfig({
   componentId: "sc-106vqwv-2"
-})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref5 => {
+})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.fontSizes.title[700];
 });
 const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
@@ -52,33 +50,33 @@ const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
 })([""]);
 const DSDialogHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-4"
-})(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", ""], _ref6 => {
+})(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", ""], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.space.m;
-}, _ref7 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.space.xs;
 }, DSDialogTitle, DSDialogAddon, DSDialogAddon, space);
 const DSDialogSeparator = /*#__PURE__*/styled.hr.attrs(() => ({
   'aria-hidden': true
 })).withConfig({
   componentId: "sc-106vqwv-5"
-})(["margin:0;border-top:1px solid ", ";"], _ref8 => {
+})(["margin:0;border-top:1px solid ", ";"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.colors.neutral['080'];
 });
 const DSDialogBody = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-6"
-})(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref9 => {
+})(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.space.xs;
 }, layout, space, flexbox);
 const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
@@ -86,36 +84,36 @@ const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
 })(["margin:0;"]);
 const DSDialogSecondaryMessage = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-106vqwv-8"
-})(["margin:0;color:", ";"], _ref10 => {
+})(["margin:0;color:", ";"], _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.colors.neutral[500];
 });
 const DSDialogDefaultLayout = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-9"
-})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref11 => {
+})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.space.xxs;
 }, DSDialogSecondaryMessage);
 const DSDialogFooter = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-10"
-})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref12 => {
+})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.space.xxs;
-}, _ref13 => {
+}, _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.space.m;
-}, _ref14 => {
+}, _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.space.xs;
 }, space, flexbox);
 

package/esm/utils.js

@@ -7,5 +7,22 @@ const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_
   let [key] = _ref;
   return /^[pm][xytblr]?$/.exec(key);
 }));
+const DSDialogSizes = {
+  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'
+};
 
-export { getSpaceProps };
+export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.0.0-next.13",
+  "version": "2.0.0-rc.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -15,10 +15,6 @@
       "import": "./esm/utils.js",
       "require": "./cjs/utils.js"
     },
-    "./types": {
-      "import": "./esm/types/index.d.js",
-      "require": "./cjs/types/index.d.js"
-    },
     "./styles": {
       "import": "./esm/styles.js",
       "require": "./cjs/styles.js"
@@ -27,6 +23,18 @@
       "import": "./esm/propTypes.js",
       "require": "./cjs/propTypes.js"
     },
+    "./DSDialogTypes": {
+      "import": "./esm/DSDialogTypes.js",
+      "require": "./cjs/DSDialogTypes.js"
+    },
+    "./DSDialogInternalTypes.d": {
+      "import": "./esm/DSDialogInternalTypes.d.js",
+      "require": "./cjs/DSDialogInternalTypes.d.js"
+    },
+    "./DSDialogDatatestid": {
+      "import": "./esm/DSDialogDatatestid.js",
+      "require": "./cjs/DSDialogDatatestid.js"
+    },
     "./DSDialog": {
       "import": "./esm/DSDialog.js",
       "require": "./cjs/DSDialog.js"
@@ -56,8 +64,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.0.0-next.13",
-    "@elliemae/ds-system": "2.0.0-next.13",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.12",
+    "@elliemae/ds-system": "2.0.0-rc.12",
     "react-desc": "~4.1.3",
     "styled-system": "~5.1.5"
   },

package/types/DSDialog.d.ts

@@ -1,14 +1,30 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 import React from 'react';
-import type { DSDialogPropsT } from './types/index.d';
+import type { DSDialogPropsT } from './DSDialogTypes';
 declare const DSDialog: {
     (props: DSDialogPropsT): React.ReactNode;
     propTypes: {
-        isOpen: any;
-        children: any;
-        centered: any;
-        removeAutoFocus: any;
-        onClickOutside: any;
+        isOpen: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        children: import("react-desc").PropTypesDescValidator;
+        centered: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        size: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        removeAutoFocus: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        onClickOutside: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSDialogWithSchema: any;
+declare const DSDialogWithSchema: {
+    (props?: DSDialogPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSDialog, DSDialogWithSchema };

package/types/DSDialogDatatestid.d.ts

@@ -0,0 +1,4 @@
+export declare const DSDialogDatatestid: {
+    CONTAINER: string;
+    BACKGROUND: string;
+};

package/types/DSDialogTypes.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+export interface DSDialogPropsT {
+    isOpen?: boolean;
+    children: React.ReactNode;
+    onClickOutside?: () => void;
+    size?: Sizes;
+    centered?: boolean;
+    removeAutoFocus?: boolean;
+}

package/types/defaultProps.d.ts

@@ -1,2 +1,2 @@
-import type { DSDialogPropsT } from './types/index.d';
-export declare const defaultProps: Partial<DSDialogPropsT>;
+import type { DSDialogDefaultPropsT } from './DSDialogInternalTypes';
+export declare const defaultProps: DSDialogDefaultPropsT;

package/types/index.d.ts

@@ -1,2 +1,4 @@
 export * from './DSDialog';
+export * from './DSDialogDatatestid';
+export { DSDialogSizes } from './utils';
 export { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage, } from './styles';

package/types/propTypes.d.ts

@@ -1,7 +1,19 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 export declare const propTypes: {
-    isOpen: any;
-    children: any;
-    centered: any;
-    removeAutoFocus: any;
-    onClickOutside: any;
+    isOpen: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    children: import("react-desc").PropTypesDescValidator;
+    centered: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    size: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    removeAutoFocus: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onClickOutside: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
 };

package/types/styles.d.ts

@@ -1,15 +1,15 @@
-import type { StyledDialogContainerT } from './types/index.d';
+import type { StyledDialogContainerT } from './DSDialogInternalTypes';
 export declare const FixedBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", any, StyledDialogContainerT, never>;
-export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", any, {
+export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogContainerT, never>;
+export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, {
     'aria-hidden': true;
 }, "aria-hidden">;
-export declare const DSDialogBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/utils.d.ts

@@ -1,2 +1,19 @@
-import type { GetSpaceArgsT } from './types/index.d';
+import type { GetSpaceArgsT } from './DSDialogInternalTypes';
 export declare const getSpaceProps: (props: GetSpaceArgsT) => GetSpaceArgsT;
+export declare const DSDialogSizes: {
+    readonly DEFAULT: "default";
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+    readonly XLARGE: "x-large";
+    readonly XXLARGE: "xx-large";
+};
+export declare const DSDialogSizesArrayValues: ("default" | "small" | "medium" | "large" | "x-large" | "xx-large")[];
+export declare const allSizes: {
+    default: string;
+    small: string;
+    medium: string;
+    large: string;
+    'x-large': string;
+    'xx-large': string;
+};

package/types/types/index.d.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export declare type sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
-export interface DSDialogPropsT {
-    isOpen?: boolean;
-    children: React.ReactNode;
-    onClickOutside?: () => void;
-    size?: sizes;
-    centered?: boolean;
-    removeAutoFocus?: boolean;
-}
-export interface StyledDialogContainerT {
-    size?: sizes;
-    centered?: boolean;
-}
-export declare type DSDialogPropsWithDefaultT = Required<DSDialogPropsT>;
-export declare type GetSpaceArgsT = Partial<Record<string, string | number>>;