@elliemae/ds-dialog 3.0.0-next.0 → 3.0.0-next.4

package/dist/cjs/styles.js

@@ -0,0 +1,153 @@
+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
+});
+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;
+    ${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;` : ``}
+  }
+`;
+const StyledDialogBackground = import_styled_components.default.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 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;
+  line-height: 28px;
+  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}
+  ${import_styled_components2.sizing}
+`;
+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};
+
+  ${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

package/dist/cjs/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface FixedBodyT {\n  bodyInfo: DSDialogInternalsT.BodyInfoT;\n}\n\ninterface StyledDialogBackgroundT {\n  zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n  size: DSDialogT.Sizes;\n  centered: boolean;\n}\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n  body {\n    overflow: hidden;\n    ${({ bodyInfo }) =>\n      bodyInfo.overflow\n        ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;`\n        : ``}\n  }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n  width: ${({ size }) => allSizes[size]};\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  overflow-y: auto;\n  ${space}\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const DSDialogTitle = styled.h3`\n  font-size: ${({ theme }) => theme.fontSizes.title[700]};\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: 28px;\n  margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled.div`\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 10px ${({ theme }) => theme.space.xs};\n  & ${DSDialogTitle} + ${DSDialogAddon} {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ${DSDialogAddon}:only-child {\n    justify-self: flex-end;\n  }\n  ${space}\n  ${sizing}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n  margin: 0;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled.div`\n  padding: ${({ theme }) => theme.space.xs};\n  overflow-y: auto;\n\n  ${layout}\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n  margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n  margin: 0;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n\n  ${DSDialogSecondaryMessage} {\n    text-align: center;\n  }\n`;\n\nexport const DSDialogFooter = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 0 ${({ theme }) => theme.space.xs};\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAkC;AAClC,gCAAiD;AACjD,mBAAyB;AAiBlB,MAAM,YAAY;AAAA;AAAA;AAAA,MAGnB,CAAC,EAAE,eACH,SAAS,WACL,wBAAwB,SAAS,kBAAkB,SAAS,iCAC5D;AAAA;AAAA;AAIH,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,sBAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEhD;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,gBAAgB,iCAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,iCAAO;AAE7B,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA;AAGG,MAAM,oBAAoB,iCAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,0BAE/C,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,iCAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,iCAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA;",
+  "names": []
+}

package/dist/cjs/utils.js

@@ -0,0 +1,55 @@
+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)));
+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"
+};
+module.exports = __toCommonJS(utils_exports);
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["type GetSpaceArgsT = Partial<Record<string, string | number>>;\n\nexport const getSpaceProps = (props: GetSpaceArgsT): GetSpaceArgsT =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));\n\nexport const DSDialogSizes = {\n  DEFAULT: 'default' as const,\n  SMALL: 'small' as const,\n  MEDIUM: 'medium' as const,\n  LARGE: 'large' as const,\n  XLARGE: 'x-large' as const,\n  XXLARGE: 'xx-large' as const,\n};\n\nexport const DSDialogSizesArrayValues = Object.values(DSDialogSizes);\n\nexport const allSizes = {\n  default: '576px',\n  small: '320px',\n  medium: '656px',\n  large: '848px',\n  'x-large': '1042px',\n  'xx-large': '1440px',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,OAAO,OAAO,CAAC,CAAC,SAAS,kBAAkB,KAAK;AAE7E,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA;AAGJ,MAAM,2BAA2B,OAAO,OAAO;AAE/C,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/DSDialog.js

@@ -0,0 +1,135 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import ReactDOM from "react-dom";
+import React2, { useCallback, useRef, useEffect, useState, useMemo } from "react";
+import { debounce } from "lodash";
+import {
+  useMemoMergePropsWithDefault,
+  useGetGlobalAttributes,
+  useValidateTypescriptPropTypes,
+  describe
+} 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) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const [bodyInfo, setBodyInfo] = useState({
+    overflow: false,
+    paddingRight: "0px",
+    scrollbarWidth: "0px"
+  });
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
+  const _a = propsWithDefault, { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex } = _a, rest = __objRest(_a, ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"]);
+  const containerRef = useRef(null);
+  const focusContainer = useCallback(() => {
+    const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
+    if (!isContainerOrChildFocused)
+      containerRef.current?.focus?.();
+  }, []);
+  useEffect(() => {
+    document.addEventListener("focusin", focusContainer);
+    return () => document.removeEventListener("focusin", focusContainer);
+  }, [focusContainer]);
+  const handleOutsideClick = useCallback((e) => {
+    if (e.target.dataset.portalbg)
+      onClickOutside();
+  }, [onClickOutside]);
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.key === "Escape")
+      onClose();
+  }, [onClose]);
+  const _b = useGetGlobalAttributes(propsWithDefault, {
+    onClick: handleOutsideClick,
+    onKeyDown: handleOnKeyDown
+  }), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
+  const calculateScrollbar = useCallback(() => {
+    const body = document.getElementsByTagName("body")[0];
+    const { clientWidth } = body;
+    setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { scrollbarWidth: `${window.innerWidth - clientWidth}px` }));
+  }, []);
+  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);
+  useEffect(() => {
+    calculateScrollbar();
+  }, [calculateScrollbar]);
+  useEffect(() => {
+    window.addEventListener("resize", debouncedCalculateScrollbar);
+    return () => {
+      window.removeEventListener("resize", debouncedCalculateScrollbar);
+    };
+  }, [calculateScrollbar, debouncedCalculateScrollbar]);
+  useEffect(() => {
+    if (isOpen) {
+      const body = document.getElementsByTagName("body")[0];
+      const { clientHeight, scrollHeight } = body;
+      const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue("padding-right");
+      setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { overflow: scrollHeight > clientHeight, paddingRight }));
+    } else
+      setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { overflow: false, paddingRight: "0px" }));
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen && !removeAutoFocus)
+      containerRef?.current?.focus();
+  }, [isOpen, removeAutoFocus]);
+  if (isOpen) {
+    return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(StyledDialogBackground, {
+      className,
+      onClick: handleOutsideClick,
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.BACKGROUND,
+      zIndex
+    }, /* @__PURE__ */ React2.createElement(FixedBody, {
+      bodyInfo
+    }), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+      role: "dialog",
+      "aria-modal": true,
+      ref: containerRef,
+      tabIndex: !removeAutoFocus ? 0 : void 0
+    }, getSpaceProps(rest)), {
+      centered,
+      "data-testid": DSDialogDatatestid.CONTAINER
+    }), restOfGlobalAttributes), {
+      size
+    }), children)), document.getElementsByTagName("body")[0]);
+  }
+  return null;
+};
+const DSDialogWithSchema = describe(DSDialog);
+DSDialogWithSchema.propTypes = propTypes;
+export {
+  DSDialog,
+  DSDialogWithSchema
+};
+//# sourceMappingURL=DSDialog.js.map

package/dist/esm/DSDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialog.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState, WeakValidationMap, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element | null => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.Props>(props, defaultProps);\n  const [bodyInfo, setBodyInfo] = useState<DSDialogInternalsT.BodyInfoT>({\n    overflow: false,\n    paddingRight: '0px',\n    scrollbarWidth: '0px',\n  });\n\n  useValidateTypescriptPropTypes<DSDialogT.Props>(propsWithDefault, propTypes);\n\n  const { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex, ...rest } =\n    propsWithDefault;\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const focusContainer = useCallback(() => {\n    const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n    if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('focusin', focusContainer);\n    return () => document.removeEventListener('focusin', focusContainer);\n  }, [focusContainer]);\n\n  const handleOutsideClick = useCallback(\n    (e: React.MouseEvent) => {\n      if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n    },\n    [onClickOutside],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    },\n    [onClose],\n  );\n\n  const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(propsWithDefault, {\n    onClick: handleOutsideClick,\n    onKeyDown: handleOnKeyDown,\n  });\n\n  const calculateScrollbar = useCallback(() => {\n    const body = document.getElementsByTagName('body')[0];\n    const { clientWidth } = body;\n    setBodyInfo((prev) => ({ ...prev, scrollbarWidth: `${window.innerWidth - clientWidth}px` }));\n  }, []);\n\n  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n  useEffect(() => {\n    calculateScrollbar();\n  }, [calculateScrollbar]);\n\n  useEffect(() => {\n    window.addEventListener('resize', debouncedCalculateScrollbar);\n    return () => {\n      window.removeEventListener('resize', debouncedCalculateScrollbar);\n    };\n  }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n  useEffect(() => {\n    if (isOpen) {\n      const body = document.getElementsByTagName('body')[0];\n      const { clientHeight, scrollHeight } = body;\n      const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue('padding-right');\n\n      setBodyInfo((prev) => ({ ...prev, overflow: scrollHeight > clientHeight, paddingRight }));\n    } else setBodyInfo((prev) => ({ ...prev, overflow: false, paddingRight: '0px' }));\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (isOpen && !removeAutoFocus) containerRef?.current?.focus();\n  }, [isOpen, removeAutoFocus]);\n\n  if (isOpen) {\n    return ReactDOM.createPortal(\n      <StyledDialogBackground\n        className={className}\n        onClick={handleOutsideClick}\n        data-portalbg\n        data-testid={DSDialogDatatestid.BACKGROUND}\n        zIndex={zIndex}\n      >\n        <FixedBody bodyInfo={bodyInfo} />\n        <StyledDialogContainer\n          role=\"dialog\"\n          aria-modal\n          ref={containerRef}\n          tabIndex={!removeAutoFocus ? 0 : undefined}\n          {...getSpaceProps(rest as Record<string, string | number>)}\n          centered={centered}\n          data-testid={DSDialogDatatestid.CONTAINER}\n          {...restOfGlobalAttributes}\n          size={size}\n        >\n          {children}\n        </StyledDialogContainer>\n      </StyledDialogBackground>,\n      document.getElementsByTagName('body')[0],\n    );\n  }\n\n  return null;\n};\n\nconst DSDialogWithSchema = describe<DSDialogT.Props>(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAIA,MAAM,WAAW,CAAC,UAA+C;AAC/D,QAAM,mBAAmB,6BAA8C,OAAO;AAC9E,QAAM,CAAC,UAAU,eAAe,SAAuC;AAAA,IACrE,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA;AAGlB,iCAAgD,kBAAkB;AAElE,QACE,uBADM,YAAU,QAAQ,gBAAgB,SAAS,UAAU,MAAM,iBAAiB,WAClF,IAD6F,iBAC7F,IAD6F,CAAvF,YAAU,UAAQ,kBAAgB,WAAS,YAAU,QAAM,mBAAiB;AAGpF,QAAM,eAAe,OAA8B;AAEnD,QAAM,iBAAiB,YAAY,MAAM;AACvC,UAAM,4BAA4B,aAAa,SAAS,SAAS,SAAS;AAC1E,QAAI,CAAC;AAA2B,mBAAa,SAAS;AAAA,KACrD;AAEH,YAAU,MAAM;AACd,aAAS,iBAAiB,WAAW;AACrC,WAAO,MAAM,SAAS,oBAAoB,WAAW;AAAA,KACpD,CAAC;AAEJ,QAAM,qBAAqB,YACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU;AAAA,KAErD,CAAC;AAGH,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU;AAAA,KAE1B,CAAC;AAGH,QAAiD,4BAAuB,kBAAkB;AAAA,IACxF,SAAS;AAAA,IACT,WAAW;AAAA,MAFL,gBAAyC,IAA3B,mCAA2B,IAA3B,CAAd;AAKR,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,OAAO,SAAS,qBAAqB,QAAQ;AACnD,UAAM,EAAE,gBAAgB;AACxB,gBAAY,CAAC,SAAU,iCAAK,OAAL,EAAW,gBAAgB,GAAG,OAAO,aAAa;AAAA,KACxE;AAEH,QAAM,8BAA8B,QAAQ,MAAM,SAAS,oBAAoB,MAAM,CAAC;AAEtF,YAAU,MAAM;AACd;AAAA,KACC,CAAC;AAEJ,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU;AAClC,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU;AAAA;AAAA,KAEtC,CAAC,oBAAoB;AAExB,YAAU,MAAM;AACd,QAAI,QAAQ;AACV,YAAM,OAAO,SAAS,qBAAqB,QAAQ;AACnD,YAAM,EAAE,cAAc,iBAAiB;AACvC,YAAM,eAAe,OAAO,iBAAiB,MAAM,OAAO,iBAAiB;AAE3E,kBAAY,CAAC,SAAU,iCAAK,OAAL,EAAW,UAAU,eAAe,cAAc;AAAA;AACpE,kBAAY,CAAC,SAAU,iCAAK,OAAL,EAAW,UAAU,OAAO,cAAc;AAAA,KACvE,CAAC;AAEJ,YAAU,MAAM;AACd,QAAI,UAAU,CAAC;AAAiB,oBAAc,SAAS;AAAA,KACtD,CAAC,QAAQ;AAEZ,MAAI,QAAQ;AACV,WAAO,SAAS,aACd,qCAAC,wBAAD;AAAA,MACE;AAAA,MACA,SAAS;AAAA,MACT,iBAAa;AAAA,MACb,eAAa,mBAAmB;AAAA,MAChC;AAAA,OAEA,qCAAC,WAAD;AAAA,MAAW;AAAA,QACX,qCAAC,uBAAD;AAAA,MACE,MAAK;AAAA,MACL,cAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,OAC7B,cAAc,QALpB;AAAA,MAME;AAAA,MACA,eAAa,mBAAmB;AAAA,QAC5B,yBARN;AAAA,MASE;AAAA,QAEC,YAGL,SAAS,qBAAqB,QAAQ;AAAA;AAI1C,SAAO;AAAA;AAGT,MAAM,qBAAqB,SAA0B;AACrD,mBAAmB,YAAY;",
+  "names": []
+}

package/dist/esm/DSDialogDatatestid.js

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

package/dist/esm/DSDialogDatatestid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialogDatatestid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSDialogDatatestid = {\n  CONTAINER: 'ds-dialog-container',\n  BACKGROUND: 'ds-dialog-background',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/defaultProps.js

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

package/dist/esm/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSDialogSizes } from './utils';\nimport type { DSDialogT } from './propTypes';\n\nconst noop = () => {};\n\nexport const defaultProps: DSDialogT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  size: DSDialogSizes.DEFAULT,\n  removeAutoFocus: false,\n  onClickOutside: noop,\n  onClose: noop,\n  zIndex: 10,\n};\n"],
+  "mappings": "AAAA;ACAA;AAGA,MAAM,OAAO,MAAM;AAAA;AAEZ,MAAM,eAAuC;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,cAAc;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { describe } from "react-desc";
+import { globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+import {
+  DSDialogBody,
+  DSDialogHeader,
+  DSDialogFooter,
+  DSDialogSeparator,
+  DSDialogTitle,
+  DSDialogAddon,
+  DSDialogDefaultLayout,
+  DSDialogPrimaryMessage,
+  DSDialogSecondaryMessage
+} from "./styles";
+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 * from "./DSDialog";
+export * from "./DSDialogDatatestid";
+import { DSDialogSizes } from "./utils";
+export {
+  DSDialogAddon,
+  DSDialogAddonWithSchema,
+  DSDialogBody,
+  DSDialogBodyWithSchema,
+  DSDialogDefaultLayout,
+  DSDialogDefaultLayoutWithSchema,
+  DSDialogFooter,
+  DSDialogFooterWithSchema,
+  DSDialogHeader,
+  DSDialogHeaderWithSchema,
+  DSDialogPrimaryMessage,
+  DSDialogPrimaryMessageWithSchema,
+  DSDialogSecondaryMessage,
+  DSDialogSecondaryMessageWithSchema,
+  DSDialogSeparator,
+  DSDialogSeparatorWithSchema,
+  DSDialogSizes,
+  DSDialogTitle,
+  DSDialogTitleWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from 'react-desc';\nimport { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n} from './styles';\n\nDSDialogBody.propTypes = globalAttributesPropTypes;\nDSDialogHeader.propTypes = globalAttributesPropTypes;\nDSDialogFooter.propTypes = globalAttributesPropTypes;\nDSDialogSeparator.propTypes = globalAttributesPropTypes;\nDSDialogTitle.propTypes = globalAttributesPropTypes;\nDSDialogAddon.propTypes = globalAttributesPropTypes;\nDSDialogDefaultLayout.propTypes = globalAttributesPropTypes;\nDSDialogPrimaryMessage.propTypes = globalAttributesPropTypes;\nDSDialogSecondaryMessage.propTypes = globalAttributesPropTypes;\n\nDSDialogBody.displayName = 'DSDialogBody';\nDSDialogHeader.displayName = 'DSDialogHeader';\nDSDialogFooter.displayName = 'DSDialogFooter';\nDSDialogSeparator.displayName = 'DSDialogSeparator';\nDSDialogTitle.displayName = 'DSDialogTitle';\nDSDialogAddon.displayName = 'DSDialogAddon';\nDSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';\nDSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';\nDSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';\n\nconst DSDialogBodyWithSchema = describe(DSDialogBody);\nconst DSDialogHeaderWithSchema = describe(DSDialogHeader);\nconst DSDialogFooterWithSchema = describe(DSDialogFooter);\nconst DSDialogSeparatorWithSchema = describe(DSDialogSeparator);\nconst DSDialogTitleWithSchema = describe(DSDialogTitle);\nconst DSDialogAddonWithSchema = describe(DSDialogAddon);\nconst DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout);\nconst DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage);\nconst DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage);\n\nDSDialogBodyWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogFooterWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogTitleWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;\n\nexport * from './DSDialog';\nexport * from './DSDialogDatatestid';\nexport { DSDialogSizes } from './utils';\nexport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n  DSDialogBodyWithSchema,\n  DSDialogHeaderWithSchema,\n  DSDialogFooterWithSchema,\n  DSDialogSeparatorWithSchema,\n  DSDialogTitleWithSchema,\n  DSDialogAddonWithSchema,\n  DSDialogDefaultLayoutWithSchema,\n  DSDialogPrimaryMessageWithSchema,\n  DSDialogSecondaryMessageWithSchema,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,aAAa,YAAY;AACzB,eAAe,YAAY;AAC3B,eAAe,YAAY;AAC3B,kBAAkB,YAAY;AAC9B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,sBAAsB,YAAY;AAClC,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AAErC,aAAa,cAAc;AAC3B,eAAe,cAAc;AAC7B,eAAe,cAAc;AAC7B,kBAAkB,cAAc;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,sBAAsB,cAAc;AACpC,uBAAuB,cAAc;AACrC,yBAAyB,cAAc;AAEvC,MAAM,yBAAyB,SAAS;AACxC,MAAM,2BAA2B,SAAS;AAC1C,MAAM,2BAA2B,SAAS;AAC1C,MAAM,8BAA8B,SAAS;AAC7C,MAAM,0BAA0B,SAAS;AACzC,MAAM,0BAA0B,SAAS;AACzC,MAAM,kCAAkC,SAAS;AACjD,MAAM,mCAAmC,SAAS;AAClD,MAAM,qCAAqC,SAAS;AAEpD,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AACrC,yBAAyB,YAAY;AACrC,4BAA4B,YAAY;AACxC,wBAAwB,YAAY;AACpC,wBAAwB,YAAY;AACpC,gCAAgC,YAAY;AAC5C,iCAAiC,YAAY;AAC7C,mCAAmC,YAAY;AAE/C;AACA;AACA;",
+  "names": []
+}

package/dist/esm/propTypes.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-props-helpers";
+import { DSDialogSizes, DSDialogSizesArrayValues } from "./utils";
+const propTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
+  isOpen: PropTypes.bool.description("Whether the Dialog is open or not.").defaultValue(false),
+  children: PropTypes.node.description("Nested components.").isRequired,
+  centered: PropTypes.bool.description("Centers the Dialog.").defaultValue(false),
+  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.").defaultValue(() => {
+  }),
+  onClose: PropTypes.func.description("Callback triggered with ESC key.").defaultValue(() => {
+  }),
+  size: PropTypes.oneOf(DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(DSDialogSizes.DEFAULT)
+});
+export {
+  propTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/dist/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { globalAttributesPropTypes, GlobalAttributesT, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils';\n\nexport declare namespace DSDialogT {\n  export type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\n  export interface DefaultProps {\n    isOpen: boolean;\n    centered: boolean;\n    size: Sizes;\n    removeAutoFocus: boolean;\n    zIndex: number;\n    onClickOutside: () => void;\n    onClose: () => void;\n  }\n\n  export interface PropsRequired {\n    children: React.ReactNode;\n  }\n\n  export interface Props\n    extends DefaultProps,\n      PropsRequired,\n      Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'children'> {}\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),\n  children: PropTypes.node.description('Nested components.').isRequired,\n  centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),\n  removeAutoFocus: PropTypes.bool\n    .description(\n      '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.',\n    )\n    .defaultValue(false),\n  onClickOutside: PropTypes.func\n    .description('Callback that should be used to close the modal when the user clicks outside.')\n    .defaultValue(() => {}),\n  onClose: PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),\n  size: PropTypes.oneOf(DSDialogSizesArrayValues)\n    .description(`Dialog's width size.`)\n    .defaultValue(DSDialogSizes.DEFAULT),\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAwBO,MAAM,YAAY,iCACpB,4BADoB;AAAA,EAEvB,QAAQ,UAAU,KAAK,YAAY,sCAAsC,aAAa;AAAA,EACtF,UAAU,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAC3D,UAAU,UAAU,KAAK,YAAY,uBAAuB,aAAa;AAAA,EACzE,iBAAiB,UAAU,KACxB,YACC,yIAED,aAAa;AAAA,EAChB,gBAAgB,UAAU,KACvB,YAAY,iFACZ,aAAa,MAAM;AAAA;AAAA,EACtB,SAAS,UAAU,KAAK,YAAY,oCAAoC,aAAa,MAAM;AAAA;AAAA,EAC3F,MAAM,UAAU,MAAM,0BACnB,YAAY,wBACZ,aAAa,cAAc;AAAA;",
+  "names": []
+}

package/dist/esm/sharedTypes.js

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

package/dist/esm/sharedTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}