@elliemae/ds-modal-slide 3.70.0-next.2 → 3.70.0-next.20

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSModalSlideT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface RequiredProps {\n    getContainer: () => HTMLElement;\n  }\n\n  export interface DefaultProps {\n    isOpen: boolean;\n    centered: boolean;\n    fullWidth: boolean;\n    fadeOut: number;\n    fadeIn: number;\n    overrideHeight: boolean;\n    onClose: () => void;\n  }\n\n  export interface OptionalProps {\n    header?: JSX.Element;\n    footer?: React.ReactNode;\n    children?: React.ReactNode;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;\n}\n\nexport const defaultProps: DSModalSlideT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  fullWidth: false,\n  fadeOut: 1500,\n  fadeIn: 1500,\n  overrideHeight: false,\n  onClose: () => {},\n};\n\nexport const DSModalSlidePropTypes: DSPropTypesSchema<DSModalSlideT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * If the modal slide is centered or not\n   */\n  centered: PropTypes.bool.description('If the modal slide is centered or not'),\n  /**\n   * If the modal slide is visible or not\n   */\n  isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.node]).isRequired.description('Main content of the modal'),\n  /**\n   * If the modal slide takes the full width or not\n   */\n  fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n  /**\n   * If the modal slide has a header, only available for full width option\n   */\n  header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n  /**\n   * If the modal slide has a footer\n   */\n  footer: PropTypes.element.description('If the modal slide has a footer'),\n  /**\n   * Ratio of fade out\n   */\n  fadeOut: PropTypes.number.description('Ratio of fade out'),\n  /**\n   * Ratio of fade in\n   */\n  fadeIn: PropTypes.number.description('Ratio of fade in'),\n  /**\n   * Override the panel height to scroll height of the container\n   */\n  overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n  getContainer: PropTypes.func.description('Should return the container of the modal slide').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the modal slide'),\n  onClose: PropTypes.func.description('On modal slide close callback'),\n};\n\nexport const DSModalSlidePropTypesSchema =\n  DSModalSlidePropTypes as unknown as React.WeakValidationMap<DSModalSlideT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AAgChE,MAAM,eAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,UAAU,UAAU,KAAK,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAI5E,QAAQ,UAAU,KAAK,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA,EAIzE,UAAU,UAAU,UAAU,CAAC,UAAU,IAAI,CAAC,EAAE,WAAW,YAAY,2BAA2B;AAAA;AAAA;AAAA;AAAA,EAIlG,WAAW,UAAU,KAAK,YAAY,gDAAgD;AAAA;AAAA;AAAA;AAAA,EAItF,QAAQ,UAAU,QAAQ,YAAY,uEAAuE;AAAA;AAAA;AAAA;AAAA,EAI7G,QAAQ,UAAU,QAAQ,YAAY,iCAAiC;AAAA;AAAA;AAAA;AAAA,EAIvE,SAAS,UAAU,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAIzD,QAAQ,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAIvD,gBAAgB,UAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,cAAc,UAAU,KAAK,YAAY,gDAAgD,EAAE;AAAA,EAC3F,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACtG,SAAS,UAAU,KAAK,YAAY,+BAA+B;AACrE;AAEO,MAAM,8BACX;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSModalSlideName, MODAL_SLIDE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSModalSlideT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface RequiredProps {\n    getContainer: () => HTMLElement;\n  }\n\n  export interface DefaultProps {\n    isOpen: boolean;\n    centered: boolean;\n    fullWidth: boolean;\n    fadeOut: number;\n    fadeIn: number;\n    overrideHeight: boolean;\n    onClose: () => void;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSModalSlideName, typeof MODAL_SLIDE_SLOTS> {\n    header?: React.ReactElement;\n    footer?: React.ReactNode;\n    children?: React.ReactNode;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;\n}\n\nexport const defaultProps: DSModalSlideT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  fullWidth: false,\n  fadeOut: 1500,\n  fadeIn: 1500,\n  overrideHeight: false,\n  onClose: () => {},\n};\n\nexport declare namespace DSModalSlideT {\n  export type SlotFunctionArguments = {\n    dsModalslideRoot: () => object;\n    dsModalslideOverlay: () => object;\n    dsModalslideContent: () => object;\n    dsModalslideActualContent: () => object;\n    dsModalslideHeaderSeparator: () => object;\n    dsModalslideFooterSeparator: () => object;\n    dsModalslideContentWrapper: () => object;\n    dsModalslideGridContent: () => object;\n  };\n}\n\nexport const DSModalSlidePropTypes: DSPropTypesSchema<DSModalSlideT.Props> = {\n  ...getPropsPerSlotPropTypes(DSModalSlideName, MODAL_SLIDE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * If the modal slide is centered or not\n   */\n  centered: PropTypes.bool.description('If the modal slide is centered or not'),\n  /**\n   * If the modal slide is visible or not\n   */\n  isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.node]).isRequired.description('Main content of the modal'),\n  /**\n   * If the modal slide takes the full width or not\n   */\n  fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n  /**\n   * If the modal slide has a header, only available for full width option\n   */\n  header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n  /**\n   * If the modal slide has a footer\n   */\n  footer: PropTypes.element.description('If the modal slide has a footer'),\n  /**\n   * Ratio of fade out\n   */\n  fadeOut: PropTypes.number.description('Ratio of fade out'),\n  /**\n   * Ratio of fade in\n   */\n  fadeIn: PropTypes.number.description('Ratio of fade in'),\n  /**\n   * Override the panel height to scroll height of the container\n   */\n  overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n  getContainer: PropTypes.func.description('Should return the container of the modal slide').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the modal slide'),\n  onClose: PropTypes.func.description('On modal slide close callback'),\n};\n\nexport const DSModalSlidePropTypesSchema =\n  DSModalSlidePropTypes as unknown as React.WeakValidationMap<DSModalSlideT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,yBAAyB;AAiC7C,MAAM,eAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS,MAAM;AAAA,EAAC;AAClB;AAeO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,UAAU,UAAU,KAAK,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAI5E,QAAQ,UAAU,KAAK,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA,EAIzE,UAAU,UAAU,UAAU,CAAC,UAAU,IAAI,CAAC,EAAE,WAAW,YAAY,2BAA2B;AAAA;AAAA;AAAA;AAAA,EAIlG,WAAW,UAAU,KAAK,YAAY,gDAAgD;AAAA;AAAA;AAAA;AAAA,EAItF,QAAQ,UAAU,QAAQ,YAAY,uEAAuE;AAAA;AAAA;AAAA;AAAA,EAI7G,QAAQ,UAAU,QAAQ,YAAY,iCAAiC;AAAA;AAAA;AAAA;AAAA,EAIvE,SAAS,UAAU,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAIzD,QAAQ,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAIvD,gBAAgB,UAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,cAAc,UAAU,KAAK,YAAY,gDAAgD,EAAE;AAAA,EAC3F,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACtG,SAAS,UAAU,KAAK,YAAY,+BAA+B;AACrE;AAEO,MAAM,8BACX;",
   "names": []
 }

package/dist/esm/styled.js

@@ -82,7 +82,10 @@ const StyledContent = styled("div", { name: DSModalSlideName, slot: MODAL_SLIDE_
   animation: ${(props) => props.disappearing ? contentAnimationOut : contentAnimationIn}
     calc(${(props) => props.disappearing ? props.fadeOut / 2 : props.fadeIn / 2} * 1ms) linear;
 `;
-const StyledGridContent = styled(Grid)`
+const StyledGridContent = styled(Grid, {
+  name: DSModalSlideName,
+  slot: MODAL_SLIDE_SLOTS.GRID_CONTENT
+})`
   height: 100%;
   width: 100%;
   max-height: 100%;
@@ -138,7 +141,18 @@ const HeaderWrapper = styled("div", { name: DSModalSlideName, slot: MODAL_HEADER
   overflow: hidden;
   padding: ${(props) => props.theme.space.xxs} ${(props) => props.theme.space.xs};
 `;
-const StyledSeparator = styled(DSSeparatorV2, { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.SEPARATOR })`
+const StyledHeaderSeparator = styled(DSSeparatorV2, {
+  name: DSModalSlideName,
+  slot: MODAL_SLIDE_SLOTS.HEADER_SEPARATOR
+})``;
+const StyledFooterSeparator = styled(DSSeparatorV2, {
+  name: DSModalSlideName,
+  slot: MODAL_SLIDE_SLOTS.FOOTER_SEPARATOR
+})``;
+const StyledToolbarSeparator = styled(DSSeparatorV2, {
+  name: DSModalSlideName,
+  slot: MODAL_HEADER_SLOTS.TOOLBAR_SEPARATOR
+})`
   height: 33%;
   background: ${(props) => props.theme.colors.neutral["300"]};
 `;
@@ -173,14 +187,16 @@ export {
   StyledConfirmButton,
   StyledContent,
   StyledContentWrapper,
+  StyledFooterSeparator,
   StyledFooterWrapper,
   StyledGridContent,
   StyledHeader,
   StyledHeaderLeftSide,
+  StyledHeaderSeparator,
   StyledModalWrapper,
   StyledOverlay,
   StyledRejectButton,
-  StyledSeparator,
-  StyledTitle
+  StyledTitle,
+  StyledToolbarSeparator
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -1,7 +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 { DSButtonV3 } 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 { DSTypography } from '@elliemae/ds-typography';\nimport { DSModalSlideName, MODAL_SLIDE_SLOTS } from './constants/index.js';\nimport { MODAL_FOOTER_SLOTS } from './parts/DSModalFooter/constants/index.js';\nimport { MODAL_HEADER_SLOTS } from './parts/DSModalHeader/constants/index.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: MODAL_SLIDE_SLOTS.ROOT,\n})<{ height: string | number }>`\n  position: absolute;\n  display: flex;\n  height: calc(${(props) => props.height} * 1px);\n  width: 100%;\n  top: 0;\n  left: 0;\n  z-index: 10;\n`;\n\nexport const StyledOverlay = styled('div', {\n  name: DSModalSlideName,\n  slot: MODAL_SLIDE_SLOTS.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: MODAL_SLIDE_SLOTS.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`;\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(DSTypography, { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.TITLE })`\n  font-size: 1.3846rem;\n  color: neutral-700;\n  white-space: normal;\n  word-break: break-word;\n`;\n\nexport const StyledHeaderLeftSide = styled('div', {\n  name: DSModalSlideName,\n  slot: MODAL_HEADER_SLOTS.HEADER_LEFT_SIDE,\n})`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  text-align: left;\n`;\n\nexport const StyledActualContent = styled('div', { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.ACTUAL_CONTENT })`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledHeader = styled('div', { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.HEADER })`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n`;\n\nexport const StyledFooterWrapper = styled('div', { name: DSModalSlideName, slot: MODAL_FOOTER_SLOTS.FOOTER_WRAPPER })`\n  width: 100%;\n  height: auto;\n  display: flex;\n  flex-wrap: wrap;\n  text-align: left;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.61538rem 1.23077rem 0 0;\n  .em-ds-button {\n    margin-left: 1.23077rem;\n  }\n`;\n\nexport const HeaderWrapper = styled('div', { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.HEADER_WRAPPER })`\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  align-items: flex-start;\n  overflow: hidden;\n  padding: ${(props) => props.theme.space.xxs} ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledSeparator = styled(DSSeparatorV2, { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.SEPARATOR })`\n  height: 33%;\n  background: ${(props) => props.theme.colors.neutral['300']};\n`;\n\nexport const StyledCloseButton = styled(DSButtonV3, {\n  name: DSModalSlideName,\n  slot: MODAL_HEADER_SLOTS.CLOSE_BUTTON,\n})``;\n\nexport const StyledContentWrapper = styled(Grid, { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.CONTENT_WRAPPER })`\n  overflow: auto;\n  &:focus,\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand['600']};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledRejectButton = styled(DSButtonV3, {\n  name: DSModalSlideName,\n  slot: MODAL_FOOTER_SLOTS.REJECT_BUTTON,\n})`\n  margin-bottom: 0.61538rem;\n`;\n\nexport const StyledConfirmButton = styled(DSButtonV3, {\n  name: DSModalSlideName,\n  slot: MODAL_FOOTER_SLOTS.CONFIRM_BUTTON,\n})`\n  margin-bottom: 0.61538rem;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV3 } 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 { DSTypography } from '@elliemae/ds-typography';\nimport { DSModalSlideName, MODAL_SLIDE_SLOTS } from './constants/index.js';\nimport { MODAL_FOOTER_SLOTS } from './parts/DSModalFooter/constants/index.js';\nimport { MODAL_HEADER_SLOTS } from './parts/DSModalHeader/constants/index.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: MODAL_SLIDE_SLOTS.ROOT,\n})<{ height: string | number }>`\n  position: absolute;\n  display: flex;\n  height: calc(${(props) => props.height} * 1px);\n  width: 100%;\n  top: 0;\n  left: 0;\n  z-index: 10;\n`;\n\nexport const StyledOverlay = styled('div', {\n  name: DSModalSlideName,\n  slot: MODAL_SLIDE_SLOTS.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: MODAL_SLIDE_SLOTS.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`;\n\nexport const StyledGridContent = styled(Grid, {\n  name: DSModalSlideName,\n  slot: MODAL_SLIDE_SLOTS.GRID_CONTENT,\n})`\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(DSTypography, { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.TITLE })`\n  font-size: 1.3846rem;\n  color: neutral-700;\n  white-space: normal;\n  word-break: break-word;\n`;\n\nexport const StyledHeaderLeftSide = styled('div', {\n  name: DSModalSlideName,\n  slot: MODAL_HEADER_SLOTS.HEADER_LEFT_SIDE,\n})`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  text-align: left;\n`;\n\nexport const StyledActualContent = styled('div', { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.ACTUAL_CONTENT })`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledHeader = styled('div', { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.HEADER })`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n`;\n\nexport const StyledFooterWrapper = styled('div', { name: DSModalSlideName, slot: MODAL_FOOTER_SLOTS.FOOTER_WRAPPER })`\n  width: 100%;\n  height: auto;\n  display: flex;\n  flex-wrap: wrap;\n  text-align: left;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.61538rem 1.23077rem 0 0;\n  .em-ds-button {\n    margin-left: 1.23077rem;\n  }\n`;\n\nexport const HeaderWrapper = styled('div', { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.HEADER_WRAPPER })`\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  align-items: flex-start;\n  overflow: hidden;\n  padding: ${(props) => props.theme.space.xxs} ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledHeaderSeparator = styled(DSSeparatorV2, {\n  name: DSModalSlideName,\n  slot: MODAL_SLIDE_SLOTS.HEADER_SEPARATOR,\n})``;\n\nexport const StyledFooterSeparator = styled(DSSeparatorV2, {\n  name: DSModalSlideName,\n  slot: MODAL_SLIDE_SLOTS.FOOTER_SEPARATOR,\n})``;\n\nexport const StyledToolbarSeparator = styled(DSSeparatorV2, {\n  name: DSModalSlideName,\n  slot: MODAL_HEADER_SLOTS.TOOLBAR_SEPARATOR,\n})`\n  height: 33%;\n  background: ${(props) => props.theme.colors.neutral['300']};\n`;\n\nexport const StyledCloseButton = styled(DSButtonV3, {\n  name: DSModalSlideName,\n  slot: MODAL_HEADER_SLOTS.CLOSE_BUTTON,\n})``;\n\nexport const StyledContentWrapper = styled(Grid, { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.CONTENT_WRAPPER })`\n  overflow: auto;\n  &:focus,\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand['600']};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledRejectButton = styled(DSButtonV3, {\n  name: DSModalSlideName,\n  slot: MODAL_FOOTER_SLOTS.REJECT_BUTTON,\n})`\n  margin-bottom: 0.61538rem;\n`;\n\nexport const StyledConfirmButton = styled(DSButtonV3, {\n  name: DSModalSlideName,\n  slot: MODAL_FOOTER_SLOTS.CONFIRM_BUTTON,\n})`\n  margin-bottom: 0.61538rem;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/typescript-testing/slot-props.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+const SlotPropsAsObj = {
+  dsModalslideRoot: { "aria-label": "just a typescript test" },
+  dsModalslideOverlay: { "aria-label": "just a typescript test" },
+  dsModalslideContent: { "aria-label": "just a typescript test" },
+  dsModalslideActualContent: { "aria-label": "just a typescript test" },
+  dsModalslideHeaderSeparator: { "aria-label": "just a typescript test" },
+  dsModalslideFooterSeparator: { "aria-label": "just a typescript test" },
+  dsModalslideContentWrapper: { "aria-label": "just a typescript test" },
+  dsModalslideGridContent: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsModalslideRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsModalslideOverlay: () => ({ "aria-label": "just a typescript test" }),
+  dsModalslideContent: () => ({ "aria-label": "just a typescript test" }),
+  dsModalslideActualContent: () => ({ "aria-label": "just a typescript test" }),
+  dsModalslideHeaderSeparator: () => ({ "aria-label": "just a typescript test" }),
+  dsModalslideFooterSeparator: () => ({ "aria-label": "just a typescript test" }),
+  dsModalslideContentWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsModalslideGridContent: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nimport type { DSModalSlideT } from '../react-desc-prop-types.js';\nimport type { DSModalSlideName, MODAL_SLIDE_SLOTS } from '../constants/index.js';\n\nconst SlotPropsAsObj: Partial<DSModalSlideT.Props> = {\n  dsModalslideRoot: { 'aria-label': 'just a typescript test' },\n  dsModalslideOverlay: { 'aria-label': 'just a typescript test' },\n  dsModalslideContent: { 'aria-label': 'just a typescript test' },\n  dsModalslideActualContent: { 'aria-label': 'just a typescript test' },\n  dsModalslideHeaderSeparator: { 'aria-label': 'just a typescript test' },\n  dsModalslideFooterSeparator: { 'aria-label': 'just a typescript test' },\n  dsModalslideContentWrapper: { 'aria-label': 'just a typescript test' },\n  dsModalslideGridContent: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSModalSlideT.SlotFunctionArguments = {\n  dsModalslideRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsModalslideOverlay: () => ({ 'aria-label': 'just a typescript test' }),\n  dsModalslideContent: () => ({ 'aria-label': 'just a typescript test' }),\n  dsModalslideActualContent: () => ({ 'aria-label': 'just a typescript test' }),\n  dsModalslideHeaderSeparator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsModalslideFooterSeparator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsModalslideContentWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsModalslideGridContent: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSModalSlideName, typeof MODAL_SLIDE_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACOvB,MAAM,iBAA+C;AAAA,EACnD,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,qBAAqB,EAAE,cAAc,yBAAyB;AAAA,EAC9D,qBAAqB,EAAE,cAAc,yBAAyB;AAAA,EAC9D,2BAA2B,EAAE,cAAc,yBAAyB;AAAA,EACpE,6BAA6B,EAAE,cAAc,yBAAyB;AAAA,EACtE,6BAA6B,EAAE,cAAc,yBAAyB;AAAA,EACtE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,yBAAyB,EAAE,cAAc,yBAAyB;AACpE;AAEA,MAAM,uBAA4D;AAAA,EAChE,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,qBAAqB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACrE,qBAAqB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACrE,2BAA2B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3E,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7E,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAC3E;AAEA,MAAM,6CAEF;",
+  "names": []
+}

package/dist/types/constants/index.d.ts

@@ -1,17 +1,21 @@
 export declare const DSModalSlideName = "DSModalslide";
 export declare const MODAL_SLIDE_SLOTS: {
-    ROOT: string;
-    OVERLAY: string;
-    CONTENT: string;
-    ACTUAL_CONTENT: string;
-    SEPARATOR: string;
-    CONTENT_WRAPPER: string;
+    readonly ROOT: "root";
+    readonly OVERLAY: "overlay";
+    readonly CONTENT: "content";
+    readonly ACTUAL_CONTENT: "actual-content";
+    readonly HEADER_SEPARATOR: "header-separator";
+    readonly FOOTER_SEPARATOR: "footer-separator";
+    readonly CONTENT_WRAPPER: "content-wrapper";
+    readonly GRID_CONTENT: "grid-content";
 };
 export declare const MODAL_SLIDE_DATA_TESTID: {
-    ROOT: `ds-modalslide-${string}`;
-    OVERLAY: `ds-modalslide-${string}`;
-    CONTENT: `ds-modalslide-${string}`;
-    ACTUAL_CONTENT: `ds-modalslide-${string}`;
-    SEPARATOR: `ds-modalslide-${string}`;
-    CONTENT_WRAPPER: `ds-modalslide-${string}`;
+    GRID_CONTENT: string;
+    ROOT: "ds-modalslide-root";
+    OVERLAY: "ds-modalslide-overlay";
+    CONTENT: "ds-modalslide-content";
+    ACTUAL_CONTENT: "ds-modalslide-actual-content";
+    HEADER_SEPARATOR: "ds-modalslide-header-separator";
+    FOOTER_SEPARATOR: "ds-modalslide-footer-separator";
+    CONTENT_WRAPPER: "ds-modalslide-content-wrapper";
 };

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

@@ -1,4 +1,6 @@
 import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { DSModalSlideName, MODAL_FOOTER_SLOTS } from './constants/index.js';
 export declare namespace DSModalFooterT {
     interface RequiredProps {
     }
@@ -15,7 +17,12 @@ export declare namespace DSModalFooterT {
             applyAriaDisabled?: boolean;
         };
     }
-    interface OptionalProps {
+    type SlotFunctionArguments = {
+        dsModalslideConfirmButton: () => object;
+        dsModalslideRejectButton: () => object;
+        dsModalslideFooterWrapper: () => object;
+    };
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSModalSlideName, typeof MODAL_FOOTER_SLOTS> {
         onConfirm?: () => void;
         onReject?: () => void;
     }

package/dist/types/parts/DSModalHeader/constants/index.d.ts

@@ -6,6 +6,7 @@ export declare const MODAL_HEADER_SLOTS: {
     readonly HEADER_LEFT_SIDE: "header-left-side";
     readonly HEADER: "header";
     readonly HEADER_WRAPPER: "header-wrapper";
+    readonly TOOLBAR_SEPARATOR: "toolbar-separator";
     readonly CLOSE_BUTTON: "close-button";
 };
 export declare const MODAL_HEADER_DATA_TESTID: {
@@ -14,4 +15,5 @@ export declare const MODAL_HEADER_DATA_TESTID: {
     HEADER_LEFT_SIDE: "ds-modalslide-header-left-side";
     HEADER: "ds-modalslide-header";
     HEADER_WRAPPER: "ds-modalslide-header-wrapper";
+    TOOLBAR_SEPARATOR: "ds-modalslide-toolbar-separator";
 };

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

@@ -11,6 +11,14 @@ export declare namespace DSModalHeaderT {
         headingLevel: DSTypographyT.HeadingVariants;
         modalTitleId: string;
     }
+    type SlotFunctionArguments = {
+        dsModalslideTitle: () => object;
+        dsModalslideHeaderLeftSide: () => object;
+        dsModalslideHeader: () => object;
+        dsModalslideHeaderWrapper: () => object;
+        dsModalslideToolbarSeparator: () => object;
+        dsModalslideCloseButton: () => object;
+    };
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSModalSlideName, typeof MODAL_HEADER_SLOTS> {
         toolbar?: React.ReactNode;
         innerRef?: React.MutableRefObject<HTMLButtonElement | null> | React.RefCallback<HTMLButtonElement>;

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

@@ -1,4 +1,6 @@
 import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { DSModalSlideName, MODAL_SLIDE_SLOTS } from './constants/index.js';
 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;
@@ -14,8 +16,8 @@ export declare namespace DSModalSlideT {
         overrideHeight: boolean;
         onClose: () => void;
     }
-    interface OptionalProps {
-        header?: JSX.Element;
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSModalSlideName, typeof MODAL_SLIDE_SLOTS> {
+        header?: React.ReactElement;
         footer?: React.ReactNode;
         children?: React.ReactNode;
         innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;
@@ -24,5 +26,17 @@ export declare namespace DSModalSlideT {
     type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;
 }
 export declare const defaultProps: DSModalSlideT.DefaultProps;
+export declare namespace DSModalSlideT {
+    type SlotFunctionArguments = {
+        dsModalslideRoot: () => object;
+        dsModalslideOverlay: () => object;
+        dsModalslideContent: () => object;
+        dsModalslideActualContent: () => object;
+        dsModalslideHeaderSeparator: () => object;
+        dsModalslideFooterSeparator: () => object;
+        dsModalslideContentWrapper: () => object;
+        dsModalslideGridContent: () => object;
+    };
+}
 export declare const DSModalSlidePropTypes: DSPropTypesSchema<DSModalSlideT.Props>;
 export declare const DSModalSlidePropTypesSchema: React.WeakValidationMap<DSModalSlideT.Props>;

package/dist/types/styled.d.ts

@@ -21,7 +21,21 @@ export declare const StyledActualContent: import("styled-components").StyledComp
 export declare const StyledHeader: 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<{
+export declare const StyledHeaderSeparator: import("styled-components").StyledComponent<{
+    (props: import("@elliemae/ds-separator").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").DSSeparatorV2T.Props): JSX.Element;
+    displayName: string;
+}>, never>;
+export declare const StyledFooterSeparator: import("styled-components").StyledComponent<{
+    (props: import("@elliemae/ds-separator").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").DSSeparatorV2T.Props): JSX.Element;
+    displayName: string;
+}>, never>;
+export declare const StyledToolbarSeparator: import("styled-components").StyledComponent<{
     (props: import("@elliemae/ds-separator").DSSeparatorV2T.Props): JSX.Element;
     displayName: string;
 }, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<{

package/dist/types/tests/DSModalSlide.a11y.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSModalSlide.api.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSModalSlide.data-testid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSModalSlide.events.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSModalSlide.exports.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSModalSlide.get-owner-props-arguments.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSModalSlide.keyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/typescript-testing/slot-props.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-modal-slide",
-  "version": "3.70.0-next.2",
+  "version": "3.70.0-next.20",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Modal Slide",
   "files": [
@@ -36,18 +36,18 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.70.0-next.2",
-    "@elliemae/ds-grid": "3.70.0-next.2",
-    "@elliemae/ds-separator": "3.70.0-next.2",
-    "@elliemae/ds-icons": "3.70.0-next.2",
-    "@elliemae/ds-props-helpers": "3.70.0-next.2",
-    "@elliemae/ds-system": "3.70.0-next.2"
+    "@elliemae/ds-grid": "3.70.0-next.20",
+    "@elliemae/ds-button-v2": "3.70.0-next.20",
+    "@elliemae/ds-icons": "3.70.0-next.20",
+    "@elliemae/ds-props-helpers": "3.70.0-next.20",
+    "@elliemae/ds-separator": "3.70.0-next.20",
+    "@elliemae/ds-system": "3.70.0-next.20"
   },
   "devDependencies": {
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.2",
-    "@elliemae/ds-test-utils": "3.70.0-next.2"
+    "@elliemae/ds-test-utils": "3.70.0-next.20",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.20"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",