@elliemae/ds-modal-slide 3.25.0-rc.1 → 3.26.0-next.2

package/dist/esm/styled.js

@@ -0,0 +1,193 @@
+import * as React from "react";
+import { DSButtonV2 } from "@elliemae/ds-button-v2";
+import { Grid } from "@elliemae/ds-grid";
+import { DSSeparatorV2 } from "@elliemae/ds-separator";
+import { styled, kfrm } from "@elliemae/ds-system";
+import { DSModalSlideName, DSModalSlideSlots } from "./DSModalSlideDefinitions.js";
+const overlayAnimation = kfrm`{
+    0% {
+      background: rgba(37, 41, 47, 0);
+    }
+    100% {
+      background: rgba(37, 41, 47, 0.25);
+    }
+}`;
+const overlayAnimationOut = kfrm`{
+    0% {
+      background: rgba(37, 41, 47, 0.25);
+    }
+    100% {
+      background: rgba(37, 41, 47, 0);
+    }
+}`;
+const contentAnimationOut = kfrm`{
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+}`;
+const contentAnimationIn = kfrm`{
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+}`;
+const StyledModalWrapper = styled("div", {
+  name: DSModalSlideName,
+  slot: DSModalSlideSlots.ROOT
+})`
+  position: absolute;
+  display: flex;
+  height: calc(${(props) => props.height} * 1px);
+  width: 100%;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  .em-ds-modal-v2__modal-wrapper {
+    flex: 1;
+    padding: 2.46rem 0;
+  }
+
+  .em-ds-modal-v2__modal-title {
+    max-width: 80%;
+    margin: 0 auto;
+  }
+`;
+const StyledOverlay = styled("div", {
+  name: DSModalSlideName,
+  slot: DSModalSlideSlots.OVERLAY
+})`
+  height: 100%;
+  width: 100%;
+  background: rgba(37, 41, 47, 0.25);
+  display: flex;
+  animation: ${(props) => props.disappearing ? overlayAnimationOut : overlayAnimation}
+    calc(${(props) => props.disappearing ? props.fadeOut : props.fadeIn} * 1ms) linear;
+
+  ${(props) => props.showing && `display: flex;
+     height: 100%;`}
+`;
+const StyledContent = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.CONTENT })`
+  height: calc(${(props) => props.height} * 1px);
+  background: neutral-000;
+  box-shadow:
+    0 6px 20px 0 rgba(0, 0, 0, 0.24),
+    0 8px 17px 0 rgba(0, 0, 0, 0.19);
+  width: calc(${(props) => props.width} * 1%);
+  margin-left: auto;
+  align-items: center;
+  flex-direction: column;
+  display: flex;
+  overflow-y: auto;
+  border: 1px solid neutral-300;
+  border-left: 2px solid neutral-300;
+  animation: ${(props) => props.disappearing ? contentAnimationOut : contentAnimationIn}
+    calc(${(props) => props.disappearing ? props.fadeOut / 2 : props.fadeIn / 2} * 1ms) linear;
+  .em-ds-separator-wrapper {
+    margin-top: unset;
+  }
+`;
+const StyledGridContent = styled(Grid)`
+  height: 100%;
+  width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+`;
+const StyledTitle = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.TITLE })``;
+const StyledHeaderLeftSide = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER_LEFT_SIDE })`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  padding: 0.61538rem 1.23077rem 0.61538rem 0;
+  height: 3.69231rem;
+
+  .em-ds-button {
+    .em-ds-icon {
+      fill: brand-primary-600;
+    }
+  }
+  .close-button {
+    padding-left: 18px;
+  }
+`;
+const StyledActualContent = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.ACTUAL_CONTENT })`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledHeader = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER })`
+  padding: 0 1.23077rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  ${StyledTitle} {
+    font-size: 1.3846rem;
+    color: neutral-700;
+  }
+`;
+const StyledFooter = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.FOOTER })``;
+const StyledFooterWrapper = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.FOOTER_WRAPPER })`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.61538rem 1.23077rem 0.61538rem 0;
+  height: 3.69231rem;
+  .em-ds-button {
+    margin-left: 1.23077rem;
+  }
+`;
+const HeaderWrapper = styled("div", { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER_WRAPPER })`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  height: 48px;
+  overflow: hidden;
+`;
+const StyledSeparator = styled(DSSeparatorV2, { name: DSModalSlideName, slot: DSModalSlideSlots.SEPARATOR })`
+  padding: ${(props) => props.theme.space.xs} 0;
+  position: initial;
+  margin: none;
+`;
+const StyledCloseButton = styled(DSButtonV2, { name: DSModalSlideName, slot: DSModalSlideSlots.CLOSE_BUTTON })`
+  margin: ${(props) => props.theme.space.xs};
+`;
+const StyledContentWrapper = styled(Grid, { name: DSModalSlideName, slot: DSModalSlideSlots.CONTENT_WRAPPER })`
+  overflow: auto;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.colors.brand["600"]};
+    outline-offset: -1px;
+  }
+`;
+export {
+  HeaderWrapper,
+  StyledActualContent,
+  StyledCloseButton,
+  StyledContent,
+  StyledContentWrapper,
+  StyledFooter,
+  StyledFooterWrapper,
+  StyledGridContent,
+  StyledHeader,
+  StyledHeaderLeftSide,
+  StyledModalWrapper,
+  StyledOverlay,
+  StyledSeparator,
+  StyledTitle
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSeparatorV2 } from '@elliemae/ds-separator';\nimport { styled, kfrm } from '@elliemae/ds-system';\nimport { DSModalSlideName, DSModalSlideSlots } from './DSModalSlideDefinitions.js';\n\nconst overlayAnimation = kfrm`{\n    0% {\n      background: rgba(37, 41, 47, 0);\n    }\n    100% {\n      background: rgba(37, 41, 47, 0.25);\n    }\n}`;\n\nconst overlayAnimationOut = kfrm`{\n    0% {\n      background: rgba(37, 41, 47, 0.25);\n    }\n    100% {\n      background: rgba(37, 41, 47, 0);\n    }\n}`;\n\nconst contentAnimationOut = kfrm`{\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n}`;\n\nconst contentAnimationIn = kfrm`{\n    0% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n}`;\n\nexport const StyledModalWrapper = styled('div', {\n  name: DSModalSlideName,\n  slot: DSModalSlideSlots.ROOT,\n})<{ height: string | number }>`\n  position: absolute;\n  display: flex;\n  height: calc(${(props) => props.height} * 1px);\n  width: 100%;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  z-index: 10;\n\n  .em-ds-modal-v2__modal-wrapper {\n    flex: 1;\n    padding: 2.46rem 0;\n  }\n\n  .em-ds-modal-v2__modal-title {\n    max-width: 80%;\n    margin: 0 auto;\n  }\n`;\n\nexport const StyledOverlay = styled('div', {\n  name: DSModalSlideName,\n  slot: DSModalSlideSlots.OVERLAY,\n})<{ disappearing: boolean; showing: boolean; fadeIn: number; fadeOut: number }>`\n  height: 100%;\n  width: 100%;\n  background: rgba(37, 41, 47, 0.25);\n  display: flex;\n  animation: ${(props) => (props.disappearing ? overlayAnimationOut : overlayAnimation)}\n    calc(${(props) => (props.disappearing ? props.fadeOut : props.fadeIn)} * 1ms) linear;\n\n  ${(props) =>\n    props.showing &&\n    `display: flex;\n     height: 100%;`}\n`;\n\nexport const StyledContent = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.CONTENT })<{\n  height: number | string;\n  width: number | string;\n  disappearing: boolean;\n  fadeIn: number;\n  fadeOut: number;\n}>`\n  height: calc(${(props) => props.height} * 1px);\n  background: neutral-000;\n  box-shadow:\n    0 6px 20px 0 rgba(0, 0, 0, 0.24),\n    0 8px 17px 0 rgba(0, 0, 0, 0.19);\n  width: calc(${(props) => props.width} * 1%);\n  margin-left: auto;\n  align-items: center;\n  flex-direction: column;\n  display: flex;\n  overflow-y: auto;\n  border: 1px solid neutral-300;\n  border-left: 2px solid neutral-300;\n  animation: ${(props) => (props.disappearing ? contentAnimationOut : contentAnimationIn)}\n    calc(${(props) => (props.disappearing ? props.fadeOut / 2 : props.fadeIn / 2)} * 1ms) linear;\n  .em-ds-separator-wrapper {\n    margin-top: unset;\n  }\n`;\n\nexport const StyledGridContent = styled(Grid)`\n  height: 100%;\n  width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n`;\n\nexport const StyledTitle = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.TITLE })``;\n\nexport const StyledHeaderLeftSide = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER_LEFT_SIDE })`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  text-align: left;\n  padding: 0.61538rem 1.23077rem 0.61538rem 0;\n  height: 3.69231rem;\n\n  .em-ds-button {\n    .em-ds-icon {\n      fill: brand-primary-600;\n    }\n  }\n  .close-button {\n    padding-left: 18px;\n  }\n`;\n\nexport const StyledActualContent = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.ACTUAL_CONTENT })`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledHeader = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER })`\n  padding: 0 1.23077rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ${StyledTitle} {\n    font-size: 1.3846rem;\n    color: neutral-700;\n  }\n`;\n\nexport const StyledFooter = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.FOOTER })``;\n\nexport const StyledFooterWrapper = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.FOOTER_WRAPPER })`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  text-align: left;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.61538rem 1.23077rem 0.61538rem 0;\n  height: 3.69231rem;\n  .em-ds-button {\n    margin-left: 1.23077rem;\n  }\n`;\n\nexport const HeaderWrapper = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER_WRAPPER })`\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  align-items: center;\n  height: 48px;\n  overflow: hidden;\n`;\n\nexport const StyledSeparator = styled(DSSeparatorV2, { name: DSModalSlideName, slot: DSModalSlideSlots.SEPARATOR })`\n  padding: ${(props) => props.theme.space.xs} 0;\n  position: initial;\n  margin: none;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSModalSlideName, slot: DSModalSlideSlots.CLOSE_BUTTON })`\n  margin: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledContentWrapper = styled(Grid, { name: DSModalSlideName, slot: DSModalSlideSlots.CONTENT_WRAPPER })`\n  overflow: auto;\n  &:focus,\n  &:focus-visible {\n    outline: 1px solid ${({ theme }) => theme.colors.brand['600']};\n    outline-offset: -1px;\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,QAAQ,YAAY;AAC7B,SAAS,kBAAkB,yBAAyB;AAEpD,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS5B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS5B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpB,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,iBAGgB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkB3B,MAAM,gBAAgB,OAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc,CAAC,UAAW,MAAM,eAAe,sBAAsB;AAAA,WAC3D,CAAC,UAAW,MAAM,eAAe,MAAM,UAAU,MAAM;AAAA;AAAA,IAE9D,CAAC,UACD,MAAM,WACN;AAAA;AAAA;AAIG,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,QAAQ,CAAC;AAAA,iBAOrF,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKlB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQlB,CAAC,UAAW,MAAM,eAAe,sBAAsB;AAAA,WAC3D,CAAC,UAAW,MAAM,eAAe,MAAM,UAAU,IAAI,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAMxE,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,MAAM,CAAC;AAE3F,MAAM,uBAAuB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkB/G,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,eAAe,CAAC;AAAA;AAAA;AAAA;AAK5G,MAAM,eAAe,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMhG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,eAAe,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,OAAO,CAAC;AAE7F,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc5G,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAStG,MAAM,kBAAkB,OAAO,eAAe,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,UAAU,CAAC;AAAA,aACrG,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAKnC,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA,YACxG,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGlC,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI3F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/types/DSModalSlide.d.ts

@@ -1,44 +1,11 @@
 import React from 'react';
 import ModalHeader from './components/Header.js';
 import ModalFooter from './components/Footer.js';
+import { type DSModalSlideT } from './react-desc-prop-types.js';
 declare const DSModalSlide: {
-    (props: any): React.ReactPortal | null;
-    propTypes: {
-        /**
-         * If the modal slide is centered or not
-         */
-        centered: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * If the modal slide is visible or not
-         */
-        isOpen: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Main content of the modal
-         */
-        children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * If the modal slide takes the full width or not
-         */
-        fullWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * If the modal slide has a header, only available for full width option
-         */
-        header: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Ratio of fade out
-         */
-        fadeOut: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Ratio of fade in
-         */
-        fadeIn: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Override the panel height to scroll height of the container
-         */
-        overrideHeight: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    };
+    (props: DSModalSlideT.Props): React.ReactPortal | null;
     displayName: string;
 };
-declare const DSModalSlideWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<any>;
+declare const DSModalSlideWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSModalSlideT.Props>;
 export { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };
 export default DSModalSlide;

package/dist/types/DSModalSlideDefinitions.d.ts

@@ -0,0 +1,19 @@
+export declare const DSModalSlideName = "DSModalSlide";
+export declare const DSModalSlideSlots: {
+    ROOT: string;
+    OVERLAY: string;
+    CONTENT: string;
+    TITLE: string;
+    HEADER_LEFT_SIDE: string;
+    ACTUAL_CONTENT: string;
+    HEADER: string;
+    FOOTER: string;
+    FOOTER_WRAPPER: string;
+    HEADER_WRAPPER: string;
+    SEPARATOR: string;
+    CLOSE_BUTTON: string;
+    CONTENT_WRAPPER: string;
+};
+export declare const DSModalSlideDataTestIds: {
+    CLOSE_BUTTON: string;
+};

package/dist/types/components/Footer.d.ts

@@ -1,55 +1,8 @@
+import { type DSModalSlideT } from '../react-desc-prop-types.js';
 declare const ModalFooter: {
-    ({ confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps, }: {
-        confirmLabel?: string | undefined;
-        rejectLabel?: string | undefined;
-        onConfirm: any;
-        onReject: any;
-        confirmProps?: {
-            disabled: boolean;
-        } | undefined;
-        rejectProps?: {
-            disabled: boolean;
-        } | undefined;
-    }): import("react/jsx-runtime.js").JSX.Element;
-    propTypes: {
-        /**
-         * Confirm Label
-         */
-        confirmLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Reject Label
-         */
-        rejectLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Callback
-         */
-        onConfirm: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Callback
-         */
-        onReject: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Extra DSButton props for confirm btn.
-         */
-        confirmProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /**
-         * Extra DSButton props for reject btn.
-         */
-        rejectProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    };
+    (props: DSModalSlideT.FooterProps): import("react/jsx-runtime.js").JSX.Element;
     displayName: string;
 };
-declare const DSModalSlideFooterWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
-    confirmLabel?: string | undefined;
-    rejectLabel?: string | undefined;
-    onConfirm: any;
-    onReject: any;
-    confirmProps?: {
-        disabled: boolean;
-    } | undefined;
-    rejectProps?: {
-        disabled: boolean;
-    } | undefined;
-}>;
+declare const DSModalSlideFooterWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSModalSlideT.FooterProps>;
 export { DSModalSlideFooterWithSchema };
 export default ModalFooter;

package/dist/types/components/Header.d.ts

@@ -1,26 +1,8 @@
+import { type DSModalSlideT } from '../react-desc-prop-types.js';
 declare const ModalHeader: {
-    ({ innerRef, title: headerTitle, onClose, toolbar }: {
-        innerRef?: null | undefined;
-        title?: string | undefined;
-        onClose?: (() => null) | undefined;
-        toolbar?: null | undefined;
-    }): import("react/jsx-runtime.js").JSX.Element;
-    propTypes: {
-        /** on modal close callback */
-        onClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /** modal toolbar component */
-        toolbar: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        /** modal title */
-        title: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    };
+    (props: DSModalSlideT.HeaderProps): import("react/jsx-runtime.js").JSX.Element;
     displayName: string;
 };
-declare const DSModalSlideHeaderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
-    innerRef?: null | undefined;
-    title?: string | undefined;
-    onClose?: (() => null) | undefined;
-    toolbar?: null | undefined;
-}>;
+declare const DSModalSlideHeaderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSModalSlideT.HeaderProps>;
 export { DSModalSlideHeaderWithSchema };
 export default ModalHeader;

package/dist/types/index.d.ts

@@ -2,3 +2,4 @@ export * from './DSModalSlide.js';
 export { default } from './DSModalSlide.js';
 export { DSModalSlideHeaderWithSchema } from './components/Header.js';
 export { DSModalSlideFooterWithSchema } from './components/Footer.js';
+export type { DSModalSlideT } from './react-desc-prop-types.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+export declare namespace DSModalSlideT {
+    type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;
+    type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;
+    interface RequiredProps {
+        getContainer: () => HTMLElement;
+    }
+    interface DefaultProps {
+        isOpen: boolean;
+        centered: boolean;
+        fullWidth: boolean;
+        fadeOut: number;
+        fadeIn: number;
+        overrideHeight: boolean;
+    }
+    interface OptionalProps {
+        header: JSX.Element;
+        footer: React.ReactNode;
+        children?: React.ReactNode;
+        innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;
+    }
+    interface FooterRequiredProps {
+    }
+    interface FooterDefaultProps {
+        confirmLabel: string;
+        rejectLabel: string;
+        confirmProps: {
+            disabled: boolean;
+        };
+        rejectProps: {
+            disabled: boolean;
+        };
+    }
+    interface FooterOptionalProps {
+        onConfirm: () => void;
+        onReject: () => void;
+    }
+    interface HeaderRequiredProps {
+    }
+    interface HeaderDefaultProps {
+        title: string;
+        onClose: () => void;
+    }
+    interface HeaderOptionalProps {
+        toolbar?: React.ReactNode;
+        innerRef?: React.MutableRefObject<HTMLButtonElement | null> | React.RefCallback<HTMLButtonElement>;
+    }
+    type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;
+    type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;
+    type HeaderProps = PropsT<HeaderDefaultProps, HeaderRequiredProps, HeaderOptionalProps, HTMLButtonElement>;
+    type HeaderInternalProps = InternalPropsT<HeaderDefaultProps, HeaderRequiredProps, HeaderOptionalProps, HTMLButtonElement>;
+    type FooterProps = PropsT<FooterDefaultProps, FooterRequiredProps, FooterOptionalProps, HTMLDivElement>;
+    type FooterInternalProps = InternalPropsT<FooterDefaultProps, FooterRequiredProps, FooterOptionalProps, HTMLDivElement>;
+}
+export declare const defaultProps: DSModalSlideT.DefaultProps;
+export declare const headerDefaultProps: DSModalSlideT.HeaderDefaultProps;
+export declare const footerDefaultProps: DSModalSlideT.FooterDefaultProps;
+export declare const DSModalSlidePropTypes: DSPropTypesSchema<DSModalSlideT.Props>;
+export declare const DSModalSlidePropTypesSchema: import("react").WeakValidationMap<DSModalSlideT.Props>;
+export declare const DSModalSlideHeaderPropTypes: DSPropTypesSchema<DSModalSlideT.HeaderProps>;
+export declare const DSModalSlideHeaderPropTypesSchema: import("react").WeakValidationMap<DSModalSlideT.HeaderProps>;
+export declare const DSModalSlideFooterPropTypes: DSPropTypesSchema<DSModalSlideT.FooterProps>;
+export declare const DSModalSlideFooterPropTypesSchema: import("react").WeakValidationMap<DSModalSlideT.FooterProps>;

package/dist/types/styled.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    height: string | number;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledOverlay: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    disappearing: boolean;
+    showing: boolean;
+    fadeIn: number;
+    fadeOut: number;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    height: number | string;
+    width: number | string;
+    disappearing: boolean;
+    fadeIn: number;
+    fadeOut: number;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledGridContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledHeaderLeftSide: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledActualContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("@elliemae/ds-system").Theme | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledFooter: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledFooterWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<{
+    (props: import("@elliemae/ds-separator/dist/types/v2/react-desc-prop-types.js").DSSeparatorV2T.Props): JSX.Element;
+    displayName: string;
+}, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<{
+    (props: import("@elliemae/ds-separator/dist/types/v2/react-desc-prop-types.js").DSSeparatorV2T.Props): JSX.Element;
+    displayName: string;
+}>, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
+export declare const StyledContentWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-modal-slide",
-  "version": "3.25.0-rc.1",
+  "version": "3.26.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Modal Slide",
   "files": [
@@ -51,18 +51,19 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.25.0-rc.1",
-    "@elliemae/ds-button-v2": "3.25.0-rc.1",
-    "@elliemae/ds-classnames": "3.25.0-rc.1",
-    "@elliemae/ds-icons": "3.25.0-rc.1",
-    "@elliemae/ds-props-helpers": "3.25.0-rc.1",
-    "@elliemae/ds-separator": "3.25.0-rc.1",
-    "@elliemae/ds-system": "3.25.0-rc.1"
+    "@elliemae/ds-classnames": "3.26.0-next.2",
+    "@elliemae/ds-grid": "3.26.0-next.2",
+    "@elliemae/ds-button-v2": "3.26.0-next.2",
+    "@elliemae/ds-separator": "3.26.0-next.2",
+    "@elliemae/ds-system": "3.26.0-next.2",
+    "@elliemae/ds-icons": "3.26.0-next.2",
+    "@elliemae/ds-props-helpers": "3.26.0-next.2"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.25.0-rc.1"
+    "@elliemae/ds-utilities": "3.26.0-next.2",
+    "@elliemae/ds-monorepo-devops": "3.26.0-next.2"
   },
   "peerDependencies": {
     "lodash": "~4.17.21",

package/dist/cjs/components/blocks.js

@@ -1,66 +0,0 @@
-"use strict";
-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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var blocks_exports = {};
-__export(blocks_exports, {
-  ActualContent: () => ActualContent,
-  BreadcrumTitle: () => BreadcrumTitle,
-  Content: () => Content,
-  Footer: () => Footer,
-  FooterWrapper: () => FooterWrapper,
-  Header: () => Header,
-  HeaderLeftSide: () => HeaderLeftSide,
-  Overlay: () => Overlay,
-  Title: () => Title,
-  Wrapper: () => Wrapper
-});
-module.exports = __toCommonJS(blocks_exports);
-var React = __toESM(require("react"));
-var import_ds_classnames = require("@elliemae/ds-classnames");
-const blockName = "modal-slide";
-const Wrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "wrapper", ({ show, centered }) => ({
-  showing: show,
-  disappearing: !show,
-  centered
-}));
-const Overlay = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "overlay", ({ show }) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Content = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "content", ({ show }) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Title = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "title", () => ({}));
-const BreadcrumTitle = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "breadcrum-title", () => ({}));
-const HeaderLeftSide = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "header-left-side", () => ({}));
-const ActualContent = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "actual-content", () => ({}));
-const Header = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "header", () => ({}));
-const Footer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "footer", () => ({}));
-const FooterWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "footer-wrapper", () => ({}));
-//# sourceMappingURL=blocks.js.map

package/dist/cjs/components/blocks.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/blocks.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'modal-slide';\n\nexport const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', ({ show, centered }) => ({\n  showing: show,\n  disappearing: !show,\n  centered,\n}));\n\nexport const Overlay = aggregatedClasses('div')(blockName, 'overlay', ({ show }) => ({\n  showing: show,\n  disappearing: !show,\n}));\n\nexport const Content = aggregatedClasses('div')(blockName, 'content', ({ show }) => ({\n  showing: show,\n  disappearing: !show,\n}));\n\nexport const Title = aggregatedClasses('div')(blockName, 'title', () => ({}));\n\nexport const BreadcrumTitle = aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));\n\nexport const HeaderLeftSide = aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));\n\nexport const ActualContent = aggregatedClasses('div')(blockName, 'actual-content', () => ({}));\nexport const Header = aggregatedClasses('div')(blockName, 'header', () => ({}));\nexport const Footer = aggregatedClasses('div')(blockName, 'footer', () => ({}));\n\nexport const FooterWrapper = aggregatedClasses('div')(blockName, 'footer-wrapper', () => ({}));\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAkC;AAElC,MAAM,YAAY;AAEX,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,MAAM,SAAS,OAAO;AAAA,EAC7F,SAAS;AAAA,EACT,cAAc,CAAC;AAAA,EACf;AACF,EAAE;AAEK,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,KAAK,OAAO;AAAA,EACnF,SAAS;AAAA,EACT,cAAc,CAAC;AACjB,EAAE;AAEK,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,KAAK,OAAO;AAAA,EACnF,SAAS;AAAA,EACT,cAAc,CAAC;AACjB,EAAE;AAEK,MAAM,YAAQ,wCAAkB,KAAK,EAAE,WAAW,SAAS,OAAO,CAAC,EAAE;AAErE,MAAM,qBAAiB,wCAAkB,KAAK,EAAE,WAAW,mBAAmB,OAAO,CAAC,EAAE;AAExF,MAAM,qBAAiB,wCAAkB,KAAK,EAAE,WAAW,oBAAoB,OAAO,CAAC,EAAE;AAEzF,MAAM,oBAAgB,wCAAkB,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,EAAE;AACtF,MAAM,aAAS,wCAAkB,KAAK,EAAE,WAAW,UAAU,OAAO,CAAC,EAAE;AACvE,MAAM,aAAS,wCAAkB,KAAK,EAAE,WAAW,UAAU,OAAO,CAAC,EAAE;AAEvE,MAAM,oBAAgB,wCAAkB,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,EAAE;",
-  "names": []
-}

package/dist/esm/components/blocks.js

@@ -1,36 +0,0 @@
-import * as React from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const blockName = "modal-slide";
-const Wrapper = aggregatedClasses("div")(blockName, "wrapper", ({ show, centered }) => ({
-  showing: show,
-  disappearing: !show,
-  centered
-}));
-const Overlay = aggregatedClasses("div")(blockName, "overlay", ({ show }) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Content = aggregatedClasses("div")(blockName, "content", ({ show }) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Title = aggregatedClasses("div")(blockName, "title", () => ({}));
-const BreadcrumTitle = aggregatedClasses("div")(blockName, "breadcrum-title", () => ({}));
-const HeaderLeftSide = aggregatedClasses("div")(blockName, "header-left-side", () => ({}));
-const ActualContent = aggregatedClasses("div")(blockName, "actual-content", () => ({}));
-const Header = aggregatedClasses("div")(blockName, "header", () => ({}));
-const Footer = aggregatedClasses("div")(blockName, "footer", () => ({}));
-const FooterWrapper = aggregatedClasses("div")(blockName, "footer-wrapper", () => ({}));
-export {
-  ActualContent,
-  BreadcrumTitle,
-  Content,
-  Footer,
-  FooterWrapper,
-  Header,
-  HeaderLeftSide,
-  Overlay,
-  Title,
-  Wrapper
-};
-//# sourceMappingURL=blocks.js.map