@elliemae/ds-modal-slide 3.60.0-next.38 → 3.60.0-next.39

package/dist/cjs/parts/DSModalFooter/DSModalFooter.js

@@ -45,7 +45,6 @@ const DSModalFooter = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledFooterWrapper,
     {
-      className: "em-ds-modal-slide__footer-wrapper",
       "aria-label": "Modal Slide Footer",
       getOwnerProps,
       getOwnerPropsArguments,
@@ -54,8 +53,8 @@ const DSModalFooter = (props) => {
           import_styled.StyledRejectButton,
           {
             buttonType: "outline",
-            className: "action-reject",
             onClick: onReject,
+            "data-testid": import_constants.MODAL_FOOTER_DATA_TESTID.REJECT_BUTTON,
             ...rejectProps,
             ml: "xs",
             getOwnerProps,
@@ -67,7 +66,7 @@ const DSModalFooter = (props) => {
           import_styled.StyledConfirmButton,
           {
             buttonType: "filled",
-            className: "action-confirm",
+            "data-testid": import_constants.MODAL_FOOTER_DATA_TESTID.CONFIRM_BUTTON,
             onClick: onConfirm,
             ...confirmProps,
             ml: "xs",

package/dist/cjs/parts/DSModalFooter/DSModalFooter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSModalFooter/DSModalFooter.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSModalFooterT, DSModalFooterPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledFooterWrapper, StyledRejectButton, StyledConfirmButton } from '../../styled.js';\nimport { DSModalFooterName } from './constants/index.js';\nimport { useModalFooter } from './config/useModalFooter.js';\nconst DSModalFooter = (props: DSModalFooterT.Props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalFooter(props);\n\n  const { confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps } = propsWithDefault;\n\n  return (\n    <StyledFooterWrapper\n      className=\"em-ds-modal-slide__footer-wrapper\"\n      aria-label=\"Modal Slide Footer\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {!!onReject && (\n        <StyledRejectButton\n          buttonType=\"outline\"\n          className=\"action-reject\"\n          onClick={onReject}\n          {...rejectProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {rejectLabel}\n        </StyledRejectButton>\n      )}\n\n      {!!onConfirm && (\n        <StyledConfirmButton\n          buttonType=\"filled\"\n          className=\"action-confirm\"\n          onClick={onConfirm}\n          {...confirmProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {confirmLabel}\n        </StyledConfirmButton>\n      )}\n    </StyledFooterWrapper>\n  );\n};\n\nDSModalFooter.displayName = DSModalFooterName;\nconst DSModalFooterWithSchema = describe(DSModalFooter);\nDSModalFooterWithSchema.propTypes = DSModalFooterPropTypesSchema;\n\nexport { DSModalFooter, DSModalFooterWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAyB;AACzB,mCAAkE;AAClE,oBAA6E;AAC7E,uBAAkC;AAClC,4BAA+B;AAC/B,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,QAAI,sCAAe,KAAK;AAExF,QAAM,EAAE,cAAc,aAAa,WAAW,UAAU,cAAc,YAAY,IAAI;AAEtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,CAAC,YACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS;AAAA,YACR,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAGD,CAAC,CAAC,aACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS;AAAA,YACR,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSModalFooterT, DSModalFooterPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledFooterWrapper, StyledRejectButton, StyledConfirmButton } from '../../styled.js';\nimport { DSModalFooterName, MODAL_FOOTER_DATA_TESTID } from './constants/index.js';\nimport { useModalFooter } from './config/useModalFooter.js';\nconst DSModalFooter = (props: DSModalFooterT.Props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalFooter(props);\n\n  const { confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps } = propsWithDefault;\n\n  return (\n    <StyledFooterWrapper\n      aria-label=\"Modal Slide Footer\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {!!onReject && (\n        <StyledRejectButton\n          buttonType=\"outline\"\n          onClick={onReject}\n          data-testid={MODAL_FOOTER_DATA_TESTID.REJECT_BUTTON}\n          {...rejectProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {rejectLabel}\n        </StyledRejectButton>\n      )}\n\n      {!!onConfirm && (\n        <StyledConfirmButton\n          buttonType=\"filled\"\n          data-testid={MODAL_FOOTER_DATA_TESTID.CONFIRM_BUTTON}\n          onClick={onConfirm}\n          {...confirmProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {confirmLabel}\n        </StyledConfirmButton>\n      )}\n    </StyledFooterWrapper>\n  );\n};\n\nDSModalFooter.displayName = DSModalFooterName;\nconst DSModalFooterWithSchema = describe(DSModalFooter);\nDSModalFooterWithSchema.propTypes = DSModalFooterPropTypesSchema;\n\nexport { DSModalFooter, DSModalFooterWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAyB;AACzB,mCAAkE;AAClE,oBAA6E;AAC7E,uBAA4D;AAC5D,4BAA+B;AAC/B,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,QAAI,sCAAe,KAAK;AAExF,QAAM,EAAE,cAAc,aAAa,WAAW,UAAU,cAAc,YAAY,IAAI;AAEtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,CAAC,YACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,SAAS;AAAA,YACT,eAAa,0CAAyB;AAAA,YACrC,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAGD,CAAC,CAAC,aACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,eAAa,0CAAyB;AAAA,YACtC,SAAS;AAAA,YACR,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/parts/DSModalFooter/constants/index.js

@@ -43,5 +43,11 @@ const MODAL_FOOTER_SLOTS = {
   REJECT_BUTTON: "reject-button",
   FOOTER_WRAPPER: "footer-wrapper"
 };
-const MODAL_FOOTER_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(import_constants.DSModalSlideName, MODAL_FOOTER_SLOTS);
+const MODAL_FOOTER_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(import_constants.DSModalSlideName, MODAL_FOOTER_SLOTS),
+  // legacy test ids - keeping them around to avoid breaking changes
+  //    https://jira.elliemae.io/browse/PUI-18013
+  REJECT_BUTTON: "modal-footer-reject-btn",
+  CONFIRM_BUTTON: "modal-footer-confirm-btn"
+};
 //# sourceMappingURL=index.js.map

package/dist/cjs/parts/DSModalFooter/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSModalFooter/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSModalSlideName } from '../../../constants/index.js';\nexport { DSModalSlideName };\n\nexport const DSModalFooterName = 'DSModalFooter';\n\nexport const MODAL_FOOTER_SLOTS = {\n  CONFIRM_BUTTON: 'confirm-button',\n  REJECT_BUTTON: 'reject-button',\n  FOOTER_WRAPPER: 'footer-wrapper',\n} as const;\n\nexport const MODAL_FOOTER_DATA_TESTID = slotObjectToDataTestIds(DSModalSlideName, MODAL_FOOTER_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAiC;AAG1B,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAClB;AAEO,MAAM,+BAA2B,0CAAwB,mCAAkB,kBAAkB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSModalSlideName } from '../../../constants/index.js';\nexport { DSModalSlideName };\n\nexport const DSModalFooterName = 'DSModalFooter';\n\nexport const MODAL_FOOTER_SLOTS = {\n  CONFIRM_BUTTON: 'confirm-button',\n  REJECT_BUTTON: 'reject-button',\n  FOOTER_WRAPPER: 'footer-wrapper',\n} as const;\n\nexport const MODAL_FOOTER_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSModalSlideName, MODAL_FOOTER_SLOTS),\n  // legacy test ids - keeping them around to avoid breaking changes\n  //    https://jira.elliemae.io/browse/PUI-18013\n  REJECT_BUTTON: 'modal-footer-reject-btn',\n  CONFIRM_BUTTON: 'modal-footer-confirm-btn',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAiC;AAG1B,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAClB;AAEO,MAAM,2BAA2B;AAAA,EACtC,OAAG,0CAAwB,mCAAkB,kBAAkB;AAAA;AAAA;AAAA,EAG/D,eAAe;AAAA,EACf,gBAAgB;AAClB;",
   "names": []
 }

package/dist/cjs/parts/DSModalHeader/DSModalHeader.js

@@ -50,33 +50,16 @@ const DSModalHeader = (props) => {
       getOwnerProps,
       getOwnerPropsArguments,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_styled.StyledHeaderLeftSide,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeaderLeftSide, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeader, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledTitle,
           {
-            className: "em-ds-modal-slide__header-left-side",
+            id: modalTitleId,
+            variant: headingLevel,
             getOwnerProps,
             getOwnerPropsArguments,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styled.StyledHeader,
-              {
-                className: "em-ds-modal-slide__header",
-                getOwnerProps,
-                getOwnerPropsArguments,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_styled.StyledTitle,
-                  {
-                    id: modalTitleId,
-                    variant: headingLevel,
-                    className: "em-ds-modal-slide__title",
-                    getOwnerProps,
-                    getOwnerPropsArguments,
-                    children: title
-                  }
-                )
-              }
-            )
+            children: title
           }
-        ),
+        ) }) }),
         toolbar,
         toolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparator, { isVertical: true }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -89,7 +72,7 @@ const DSModalHeader = (props) => {
             innerRef,
             getOwnerProps,
             getOwnerPropsArguments,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Close, { "aria-label": "Close modal slide", size: "s" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Close, { "aria-label": "Close modal slide", size: "s", color: ["brand-primary", "600"] })
           }
         )
       ]

package/dist/cjs/parts/DSModalHeader/DSModalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSModalHeader/DSModalHeader.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Close } from '@elliemae/ds-icons';\nimport { type DSModalHeaderT, DSModalHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { useModalHeader } from './config/useModalHeader.js';\nimport { MODAL_HEADER_DATA_TESTID, DSModalHeaderName } from './constants/index.js';\nimport {\n  StyledHeader,\n  StyledHeaderLeftSide,\n  StyledTitle,\n  HeaderWrapper,\n  StyledSeparator,\n  StyledCloseButton,\n} from '../../styled.js';\n\nconst DSModalHeader: React.ComponentType<DSModalHeaderT.Props> = (props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalHeader(props);\n\n  const { innerRef, title, onClose, toolbar, headingLevel, modalTitleId } = propsWithDefault;\n\n  return (\n    <HeaderWrapper\n      aria-label=\"Modal Slide Header\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledHeaderLeftSide\n        className=\"em-ds-modal-slide__header-left-side\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledHeader\n          className=\"em-ds-modal-slide__header\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledTitle\n            id={modalTitleId}\n            variant={headingLevel}\n            className=\"em-ds-modal-slide__title\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {title}\n          </StyledTitle>\n        </StyledHeader>\n      </StyledHeaderLeftSide>\n\n      {toolbar}\n\n      {toolbar && <StyledSeparator isVertical />}\n\n      <StyledCloseButton\n        data-testid={MODAL_HEADER_DATA_TESTID.CLOSE_BUTTON}\n        aria-label=\"Close modal slide\"\n        buttonType=\"icon\"\n        onClick={onClose}\n        innerRef={innerRef}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Close aria-label=\"Close modal slide\" size=\"s\" />\n      </StyledCloseButton>\n    </HeaderWrapper>\n  );\n};\n\nDSModalHeader.displayName = DSModalHeaderName;\nconst DSModalHeaderWithSchema = describe(DSModalHeader);\nDSModalHeaderWithSchema.propTypes = DSModalHeaderPropTypesSchema;\n\nexport { DSModalHeader, DSModalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AApBJ,8BAAyB;AACzB,sBAAsB;AACtB,mCAAkE;AAClE,4BAA+B;AAC/B,uBAA4D;AAC5D,oBAOO;AAEP,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,QAAI,sCAAe,KAAK;AAExF,QAAM,EAAE,UAAU,OAAO,SAAS,SAAS,cAAc,aAAa,IAAI;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,SAAS;AAAA,oBACT,WAAU;AAAA,oBACV;AAAA,oBACA;AAAA,oBAEC;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEC;AAAA,QAEA,WAAW,4CAAC,iCAAgB,YAAU,MAAC;AAAA,QAExC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,0CAAyB;AAAA,YACtC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YAEA,sDAAC,yBAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA;AAAA,QACjD;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Close } from '@elliemae/ds-icons';\nimport { type DSModalHeaderT, DSModalHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { useModalHeader } from './config/useModalHeader.js';\nimport { MODAL_HEADER_DATA_TESTID, DSModalHeaderName } from './constants/index.js';\nimport {\n  StyledHeader,\n  StyledHeaderLeftSide,\n  StyledTitle,\n  HeaderWrapper,\n  StyledSeparator,\n  StyledCloseButton,\n} from '../../styled.js';\n\nconst DSModalHeader: React.ComponentType<DSModalHeaderT.Props> = (props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalHeader(props);\n\n  const { innerRef, title, onClose, toolbar, headingLevel, modalTitleId } = propsWithDefault;\n\n  return (\n    <HeaderWrapper\n      aria-label=\"Modal Slide Header\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledHeaderLeftSide getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <StyledHeader getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <StyledTitle\n            id={modalTitleId}\n            variant={headingLevel}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {title}\n          </StyledTitle>\n        </StyledHeader>\n      </StyledHeaderLeftSide>\n\n      {toolbar}\n\n      {toolbar && <StyledSeparator isVertical />}\n\n      <StyledCloseButton\n        data-testid={MODAL_HEADER_DATA_TESTID.CLOSE_BUTTON}\n        aria-label=\"Close modal slide\"\n        buttonType=\"icon\"\n        onClick={onClose}\n        innerRef={innerRef}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Close aria-label=\"Close modal slide\" size=\"s\" color={['brand-primary', '600']} />\n      </StyledCloseButton>\n    </HeaderWrapper>\n  );\n};\n\nDSModalHeader.displayName = DSModalHeaderName;\nconst DSModalHeaderWithSchema = describe(DSModalHeader);\nDSModalHeaderWithSchema.propTypes = DSModalHeaderPropTypesSchema;\n\nexport { DSModalHeader, DSModalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AApBJ,8BAAyB;AACzB,sBAAsB;AACtB,mCAAkE;AAClE,4BAA+B;AAC/B,uBAA4D;AAC5D,oBAOO;AAEP,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,QAAI,sCAAe,KAAK;AAExF,QAAM,EAAE,UAAU,OAAO,SAAS,SAAS,cAAc,aAAa,IAAI;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,sCAAqB,eAA8B,wBAClD,sDAAC,8BAAa,eAA8B,wBAC1C;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH,GACF,GACF;AAAA,QAEC;AAAA,QAEA,WAAW,4CAAC,iCAAgB,YAAU,MAAC;AAAA,QAExC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,0CAAyB;AAAA,YACtC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YAEA,sDAAC,yBAAM,cAAW,qBAAoB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAClF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -97,16 +97,6 @@ const StyledModalWrapper = (0, import_ds_system.styled)("div", {
   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 = (0, import_ds_system.styled)("div", {
   name: import_constants.DSModalSlideName,
@@ -138,9 +128,6 @@ const StyledContent = (0, import_ds_system.styled)("div", { name: import_constan
   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 = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   height: 100%;
@@ -163,21 +150,10 @@ const StyledHeaderLeftSide = (0, import_ds_system.styled)("div", {
   slot: import_constants3.MODAL_HEADER_SLOTS.HEADER_LEFT_SIDE
 })`
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
   text-align: left;
-  padding: 0.61538rem 1.23077rem 0.61538rem 0;
-  min-height: 3.69231rem;
-  height: auto;
-
-  .em-ds-button {
-    .em-ds-icon {
-      fill: brand-primary-600;
-    }
-  }
-  .close-button {
-    padding-left: 18px;
-  }
 `;
 const StyledActualContent = (0, import_ds_system.styled)("div", { name: import_constants.DSModalSlideName, slot: import_constants.MODAL_SLIDE_SLOTS.ACTUAL_CONTENT })`
   display: flex;
@@ -206,17 +182,17 @@ const HeaderWrapper = (0, import_ds_system.styled)("div", { name: import_constan
   justify-content: space-between;
   width: 100%;
   align-items: flex-start;
-  min-height: 48px;
-  height: auto;
   overflow: hidden;
+  padding: ${(props) => props.theme.space.xxs} ${(props) => props.theme.space.xs};
 `;
 const StyledSeparator = (0, import_ds_system.styled)(import_ds_separator.DSSeparatorV2, { name: import_constants.DSModalSlideName, slot: import_constants.MODAL_SLIDE_SLOTS.SEPARATOR })`
   height: 33%;
   background: ${(props) => props.theme.colors.neutral["300"]};
 `;
-const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSModalSlideName, slot: import_constants3.MODAL_HEADER_SLOTS.CLOSE_BUTTON })`
-  margin: 0.61538rem ${(props) => props.theme.space.xs};
-`;
+const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSModalSlideName,
+  slot: import_constants3.MODAL_HEADER_SLOTS.CLOSE_BUTTON
+})``;
 const StyledContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSModalSlideName, slot: import_constants.MODAL_SLIDE_SLOTS.CONTENT_WRAPPER })`
   overflow: auto;
   &:focus,

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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  .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: 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  .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(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  display: flex;\n  flex-direction: row;\n  text-align: left;\n  padding: 0.61538rem 1.23077rem 0.61538rem 0;\n  min-height: 3.69231rem;\n  height: auto;\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: 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  min-height: 48px;\n  height: auto;\n  overflow: hidden;\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, { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.CLOSE_BUTTON })`\n  margin: 0.61538rem ${(props) => props.theme.space.xs};\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,0BAA8B;AAC9B,uBAA6B;AAC7B,2BAA6B;AAC7B,uBAAoD;AACpD,IAAAA,oBAAmC;AACnC,IAAAA,oBAAmC;AAEnC,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,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,iBAGgB,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc,CAAC,UAAW,MAAM,eAAe,sBAAsB,gBAAiB;AAAA,WAC5E,CAAC,UAAW,MAAM,eAAe,MAAM,UAAU,MAAM,MAAO;AAAA;AAAA,IAErE,CAAC,UACD,MAAM,WACN;AAAA,mBACe;AAAA;AAGZ,MAAM,oBAAgB,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,QAAQ,CAAC;AAAA,iBAOrF,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQvB,CAAC,UAAW,MAAM,eAAe,sBAAsB,kBAAmB;AAAA,WAC9E,CAAC,UAAW,MAAM,eAAe,MAAM,UAAU,IAAI,MAAM,SAAS,CAAE;AAAA;AAG1E,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrC,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,mCAAkB,MAAM,qCAAmB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnG,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,qCAAmB;AAC3B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,eAAe,CAAC;AAAA;AAAA;AAAA;AAK5G,MAAM,mBAAe,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,qCAAmB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9F,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,qCAAmB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc7G,MAAM,oBAAgB,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,qCAAmB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjG,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAGzE,MAAM,sBAAkB,yBAAO,mCAAe,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,UAAU,CAAC;AAAA;AAAA,gBAElG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGrD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,qCAAmB;AAC3B,CAAC;AAEM,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI3F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAK1D,MAAM,yBAAqB,yBAAO,gCAAY;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,qCAAmB;AAC3B,CAAC;AAAA;AAAA;AAIM,MAAM,0BAAsB,yBAAO,gCAAY;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,qCAAmB;AAC3B,CAAC;AAAA;AAAA;",
   "names": ["import_constants"]
 }

package/dist/esm/parts/DSModalFooter/DSModalFooter.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
 import { DSModalFooterPropTypesSchema } from "./react-desc-prop-types.js";
 import { StyledFooterWrapper, StyledRejectButton, StyledConfirmButton } from "../../styled.js";
-import { DSModalFooterName } from "./constants/index.js";
+import { DSModalFooterName, MODAL_FOOTER_DATA_TESTID } from "./constants/index.js";
 import { useModalFooter } from "./config/useModalFooter.js";
 const DSModalFooter = (props) => {
   const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalFooter(props);
@@ -11,7 +11,6 @@ const DSModalFooter = (props) => {
   return /* @__PURE__ */ jsxs(
     StyledFooterWrapper,
     {
-      className: "em-ds-modal-slide__footer-wrapper",
       "aria-label": "Modal Slide Footer",
       getOwnerProps,
       getOwnerPropsArguments,
@@ -20,8 +19,8 @@ const DSModalFooter = (props) => {
           StyledRejectButton,
           {
             buttonType: "outline",
-            className: "action-reject",
             onClick: onReject,
+            "data-testid": MODAL_FOOTER_DATA_TESTID.REJECT_BUTTON,
             ...rejectProps,
             ml: "xs",
             getOwnerProps,
@@ -33,7 +32,7 @@ const DSModalFooter = (props) => {
           StyledConfirmButton,
           {
             buttonType: "filled",
-            className: "action-confirm",
+            "data-testid": MODAL_FOOTER_DATA_TESTID.CONFIRM_BUTTON,
             onClick: onConfirm,
             ...confirmProps,
             ml: "xs",

package/dist/esm/parts/DSModalFooter/DSModalFooter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSModalFooter/DSModalFooter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSModalFooterT, DSModalFooterPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledFooterWrapper, StyledRejectButton, StyledConfirmButton } from '../../styled.js';\nimport { DSModalFooterName } from './constants/index.js';\nimport { useModalFooter } from './config/useModalFooter.js';\nconst DSModalFooter = (props: DSModalFooterT.Props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalFooter(props);\n\n  const { confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps } = propsWithDefault;\n\n  return (\n    <StyledFooterWrapper\n      className=\"em-ds-modal-slide__footer-wrapper\"\n      aria-label=\"Modal Slide Footer\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {!!onReject && (\n        <StyledRejectButton\n          buttonType=\"outline\"\n          className=\"action-reject\"\n          onClick={onReject}\n          {...rejectProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {rejectLabel}\n        </StyledRejectButton>\n      )}\n\n      {!!onConfirm && (\n        <StyledConfirmButton\n          buttonType=\"filled\"\n          className=\"action-confirm\"\n          onClick={onConfirm}\n          {...confirmProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {confirmLabel}\n        </StyledConfirmButton>\n      )}\n    </StyledFooterWrapper>\n  );\n};\n\nDSModalFooter.displayName = DSModalFooterName;\nconst DSModalFooterWithSchema = describe(DSModalFooter);\nDSModalFooterWithSchema.propTypes = DSModalFooterPropTypesSchema;\n\nexport { DSModalFooter, DSModalFooterWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAOI,KAPJ;AAXJ,SAAS,gBAAgB;AACzB,SAA8B,oCAAoC;AAClE,SAAS,qBAAqB,oBAAoB,2BAA2B;AAC7E,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,IAAI,eAAe,KAAK;AAExF,QAAM,EAAE,cAAc,aAAa,WAAW,UAAU,cAAc,YAAY,IAAI;AAEtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,CAAC,YACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS;AAAA,YACR,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAGD,CAAC,CAAC,aACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS;AAAA,YACR,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSModalFooterT, DSModalFooterPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledFooterWrapper, StyledRejectButton, StyledConfirmButton } from '../../styled.js';\nimport { DSModalFooterName, MODAL_FOOTER_DATA_TESTID } from './constants/index.js';\nimport { useModalFooter } from './config/useModalFooter.js';\nconst DSModalFooter = (props: DSModalFooterT.Props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalFooter(props);\n\n  const { confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps } = propsWithDefault;\n\n  return (\n    <StyledFooterWrapper\n      aria-label=\"Modal Slide Footer\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {!!onReject && (\n        <StyledRejectButton\n          buttonType=\"outline\"\n          onClick={onReject}\n          data-testid={MODAL_FOOTER_DATA_TESTID.REJECT_BUTTON}\n          {...rejectProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {rejectLabel}\n        </StyledRejectButton>\n      )}\n\n      {!!onConfirm && (\n        <StyledConfirmButton\n          buttonType=\"filled\"\n          data-testid={MODAL_FOOTER_DATA_TESTID.CONFIRM_BUTTON}\n          onClick={onConfirm}\n          {...confirmProps}\n          ml=\"xs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {confirmLabel}\n        </StyledConfirmButton>\n      )}\n    </StyledFooterWrapper>\n  );\n};\n\nDSModalFooter.displayName = DSModalFooterName;\nconst DSModalFooterWithSchema = describe(DSModalFooter);\nDSModalFooterWithSchema.propTypes = DSModalFooterPropTypesSchema;\n\nexport { DSModalFooter, DSModalFooterWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAMI,KANJ;AAXJ,SAAS,gBAAgB;AACzB,SAA8B,oCAAoC;AAClE,SAAS,qBAAqB,oBAAoB,2BAA2B;AAC7E,SAAS,mBAAmB,gCAAgC;AAC5D,SAAS,sBAAsB;AAC/B,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,IAAI,eAAe,KAAK;AAExF,QAAM,EAAE,cAAc,aAAa,WAAW,UAAU,cAAc,YAAY,IAAI;AAEtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,CAAC,YACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,SAAS;AAAA,YACT,eAAa,yBAAyB;AAAA,YACrC,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAGD,CAAC,CAAC,aACD;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,eAAa,yBAAyB;AAAA,YACtC,SAAS;AAAA,YACR,GAAG;AAAA,YACJ,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/parts/DSModalFooter/constants/index.js

@@ -7,7 +7,13 @@ const MODAL_FOOTER_SLOTS = {
   REJECT_BUTTON: "reject-button",
   FOOTER_WRAPPER: "footer-wrapper"
 };
-const MODAL_FOOTER_DATA_TESTID = slotObjectToDataTestIds(DSModalSlideName, MODAL_FOOTER_SLOTS);
+const MODAL_FOOTER_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSModalSlideName, MODAL_FOOTER_SLOTS),
+  // legacy test ids - keeping them around to avoid breaking changes
+  //    https://jira.elliemae.io/browse/PUI-18013
+  REJECT_BUTTON: "modal-footer-reject-btn",
+  CONFIRM_BUTTON: "modal-footer-confirm-btn"
+};
 export {
   DSModalFooterName,
   DSModalSlideName,

package/dist/esm/parts/DSModalFooter/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSModalFooter/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSModalSlideName } from '../../../constants/index.js';\nexport { DSModalSlideName };\n\nexport const DSModalFooterName = 'DSModalFooter';\n\nexport const MODAL_FOOTER_SLOTS = {\n  CONFIRM_BUTTON: 'confirm-button',\n  REJECT_BUTTON: 'reject-button',\n  FOOTER_WRAPPER: 'footer-wrapper',\n} as const;\n\nexport const MODAL_FOOTER_DATA_TESTID = slotObjectToDataTestIds(DSModalSlideName, MODAL_FOOTER_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAG1B,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAClB;AAEO,MAAM,2BAA2B,wBAAwB,kBAAkB,kBAAkB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSModalSlideName } from '../../../constants/index.js';\nexport { DSModalSlideName };\n\nexport const DSModalFooterName = 'DSModalFooter';\n\nexport const MODAL_FOOTER_SLOTS = {\n  CONFIRM_BUTTON: 'confirm-button',\n  REJECT_BUTTON: 'reject-button',\n  FOOTER_WRAPPER: 'footer-wrapper',\n} as const;\n\nexport const MODAL_FOOTER_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSModalSlideName, MODAL_FOOTER_SLOTS),\n  // legacy test ids - keeping them around to avoid breaking changes\n  //    https://jira.elliemae.io/browse/PUI-18013\n  REJECT_BUTTON: 'modal-footer-reject-btn',\n  CONFIRM_BUTTON: 'modal-footer-confirm-btn',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAG1B,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAClB;AAEO,MAAM,2BAA2B;AAAA,EACtC,GAAG,wBAAwB,kBAAkB,kBAAkB;AAAA;AAAA;AAAA,EAG/D,eAAe;AAAA,EACf,gBAAgB;AAClB;",
   "names": []
 }

package/dist/esm/parts/DSModalHeader/DSModalHeader.js

@@ -23,33 +23,16 @@ const DSModalHeader = (props) => {
       getOwnerProps,
       getOwnerPropsArguments,
       children: [
-        /* @__PURE__ */ jsx(
-          StyledHeaderLeftSide,
+        /* @__PURE__ */ jsx(StyledHeaderLeftSide, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(StyledHeader, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
+          StyledTitle,
           {
-            className: "em-ds-modal-slide__header-left-side",
+            id: modalTitleId,
+            variant: headingLevel,
             getOwnerProps,
             getOwnerPropsArguments,
-            children: /* @__PURE__ */ jsx(
-              StyledHeader,
-              {
-                className: "em-ds-modal-slide__header",
-                getOwnerProps,
-                getOwnerPropsArguments,
-                children: /* @__PURE__ */ jsx(
-                  StyledTitle,
-                  {
-                    id: modalTitleId,
-                    variant: headingLevel,
-                    className: "em-ds-modal-slide__title",
-                    getOwnerProps,
-                    getOwnerPropsArguments,
-                    children: title
-                  }
-                )
-              }
-            )
+            children: title
           }
-        ),
+        ) }) }),
         toolbar,
         toolbar && /* @__PURE__ */ jsx(StyledSeparator, { isVertical: true }),
         /* @__PURE__ */ jsx(
@@ -62,7 +45,7 @@ const DSModalHeader = (props) => {
             innerRef,
             getOwnerProps,
             getOwnerPropsArguments,
-            children: /* @__PURE__ */ jsx(Close, { "aria-label": "Close modal slide", size: "s" })
+            children: /* @__PURE__ */ jsx(Close, { "aria-label": "Close modal slide", size: "s", color: ["brand-primary", "600"] })
           }
         )
       ]

package/dist/esm/parts/DSModalHeader/DSModalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSModalHeader/DSModalHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Close } from '@elliemae/ds-icons';\nimport { type DSModalHeaderT, DSModalHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { useModalHeader } from './config/useModalHeader.js';\nimport { MODAL_HEADER_DATA_TESTID, DSModalHeaderName } from './constants/index.js';\nimport {\n  StyledHeader,\n  StyledHeaderLeftSide,\n  StyledTitle,\n  HeaderWrapper,\n  StyledSeparator,\n  StyledCloseButton,\n} from '../../styled.js';\n\nconst DSModalHeader: React.ComponentType<DSModalHeaderT.Props> = (props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalHeader(props);\n\n  const { innerRef, title, onClose, toolbar, headingLevel, modalTitleId } = propsWithDefault;\n\n  return (\n    <HeaderWrapper\n      aria-label=\"Modal Slide Header\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledHeaderLeftSide\n        className=\"em-ds-modal-slide__header-left-side\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledHeader\n          className=\"em-ds-modal-slide__header\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledTitle\n            id={modalTitleId}\n            variant={headingLevel}\n            className=\"em-ds-modal-slide__title\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {title}\n          </StyledTitle>\n        </StyledHeader>\n      </StyledHeaderLeftSide>\n\n      {toolbar}\n\n      {toolbar && <StyledSeparator isVertical />}\n\n      <StyledCloseButton\n        data-testid={MODAL_HEADER_DATA_TESTID.CLOSE_BUTTON}\n        aria-label=\"Close modal slide\"\n        buttonType=\"icon\"\n        onClick={onClose}\n        innerRef={innerRef}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Close aria-label=\"Close modal slide\" size=\"s\" />\n      </StyledCloseButton>\n    </HeaderWrapper>\n  );\n};\n\nDSModalHeader.displayName = DSModalHeaderName;\nconst DSModalHeaderWithSchema = describe(DSModalHeader);\nDSModalHeaderWithSchema.propTypes = DSModalHeaderPropTypesSchema;\n\nexport { DSModalHeader, DSModalHeaderWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBnB,SAeM,KAfN;AApBJ,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAA8B,oCAAoC;AAClE,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B,yBAAyB;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,IAAI,eAAe,KAAK;AAExF,QAAM,EAAE,UAAU,OAAO,SAAS,SAAS,cAAc,aAAa,IAAI;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,SAAS;AAAA,oBACT,WAAU;AAAA,oBACV;AAAA,oBACA;AAAA,oBAEC;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEC;AAAA,QAEA,WAAW,oBAAC,mBAAgB,YAAU,MAAC;AAAA,QAExC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,yBAAyB;AAAA,YACtC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,SAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA;AAAA,QACjD;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Close } from '@elliemae/ds-icons';\nimport { type DSModalHeaderT, DSModalHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { useModalHeader } from './config/useModalHeader.js';\nimport { MODAL_HEADER_DATA_TESTID, DSModalHeaderName } from './constants/index.js';\nimport {\n  StyledHeader,\n  StyledHeaderLeftSide,\n  StyledTitle,\n  HeaderWrapper,\n  StyledSeparator,\n  StyledCloseButton,\n} from '../../styled.js';\n\nconst DSModalHeader: React.ComponentType<DSModalHeaderT.Props> = (props) => {\n  const { propsWithDefault, getOwnerProps, getOwnerPropsArguments } = useModalHeader(props);\n\n  const { innerRef, title, onClose, toolbar, headingLevel, modalTitleId } = propsWithDefault;\n\n  return (\n    <HeaderWrapper\n      aria-label=\"Modal Slide Header\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledHeaderLeftSide getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <StyledHeader getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <StyledTitle\n            id={modalTitleId}\n            variant={headingLevel}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {title}\n          </StyledTitle>\n        </StyledHeader>\n      </StyledHeaderLeftSide>\n\n      {toolbar}\n\n      {toolbar && <StyledSeparator isVertical />}\n\n      <StyledCloseButton\n        data-testid={MODAL_HEADER_DATA_TESTID.CLOSE_BUTTON}\n        aria-label=\"Close modal slide\"\n        buttonType=\"icon\"\n        onClick={onClose}\n        innerRef={innerRef}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Close aria-label=\"Close modal slide\" size=\"s\" color={['brand-primary', '600']} />\n      </StyledCloseButton>\n    </HeaderWrapper>\n  );\n};\n\nDSModalHeader.displayName = DSModalHeaderName;\nconst DSModalHeaderWithSchema = describe(DSModalHeader);\nDSModalHeaderWithSchema.propTypes = DSModalHeaderPropTypesSchema;\n\nexport { DSModalHeader, DSModalHeaderWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBnB,SAOM,KAPN;AApBJ,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAA8B,oCAAoC;AAClE,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B,yBAAyB;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,eAAe,uBAAuB,IAAI,eAAe,KAAK;AAExF,QAAM,EAAE,UAAU,OAAO,SAAS,SAAS,cAAc,aAAa,IAAI;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,wBAAqB,eAA8B,wBAClD,8BAAC,gBAAa,eAA8B,wBAC1C;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH,GACF,GACF;AAAA,QAEC;AAAA,QAEA,WAAW,oBAAC,mBAAgB,YAAU,MAAC;AAAA,QAExC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,yBAAyB;AAAA,YACtC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,SAAM,cAAW,qBAAoB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAClF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/styled.js

@@ -50,16 +50,6 @@ const StyledModalWrapper = styled("div", {
   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,
@@ -91,9 +81,6 @@ const StyledContent = styled("div", { name: DSModalSlideName, slot: MODAL_SLIDE_
   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%;
@@ -116,21 +103,10 @@ const StyledHeaderLeftSide = styled("div", {
   slot: MODAL_HEADER_SLOTS.HEADER_LEFT_SIDE
 })`
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
   text-align: left;
-  padding: 0.61538rem 1.23077rem 0.61538rem 0;
-  min-height: 3.69231rem;
-  height: auto;
-
-  .em-ds-button {
-    .em-ds-icon {
-      fill: brand-primary-600;
-    }
-  }
-  .close-button {
-    padding-left: 18px;
-  }
 `;
 const StyledActualContent = styled("div", { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.ACTUAL_CONTENT })`
   display: flex;
@@ -159,17 +135,17 @@ const HeaderWrapper = styled("div", { name: DSModalSlideName, slot: MODAL_HEADER
   justify-content: space-between;
   width: 100%;
   align-items: flex-start;
-  min-height: 48px;
-  height: auto;
   overflow: hidden;
+  padding: ${(props) => props.theme.space.xxs} ${(props) => props.theme.space.xs};
 `;
 const StyledSeparator = styled(DSSeparatorV2, { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.SEPARATOR })`
   height: 33%;
   background: ${(props) => props.theme.colors.neutral["300"]};
 `;
-const StyledCloseButton = styled(DSButtonV3, { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.CLOSE_BUTTON })`
-  margin: 0.61538rem ${(props) => props.theme.space.xs};
-`;
+const StyledCloseButton = styled(DSButtonV3, {
+  name: DSModalSlideName,
+  slot: MODAL_HEADER_SLOTS.CLOSE_BUTTON
+})``;
 const StyledContentWrapper = styled(Grid, { name: DSModalSlideName, slot: MODAL_SLIDE_SLOTS.CONTENT_WRAPPER })`
   overflow: auto;
   &:focus,

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  .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: 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  .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(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  display: flex;\n  flex-direction: row;\n  text-align: left;\n  padding: 0.61538rem 1.23077rem 0.61538rem 0;\n  min-height: 3.69231rem;\n  height: auto;\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: 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  min-height: 48px;\n  height: auto;\n  overflow: hidden;\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, { name: DSModalSlideName, slot: MODAL_HEADER_SLOTS.CLOSE_BUTTON })`\n  margin: 0.61538rem ${(props) => props.theme.space.xs};\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  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": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,QAAQ,YAAY;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AAEnC,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,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAM,gBAAgB,OAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc,CAAC,UAAW,MAAM,eAAe,sBAAsB,gBAAiB;AAAA,WAC5E,CAAC,UAAW,MAAM,eAAe,MAAM,UAAU,MAAM,MAAO;AAAA;AAAA,IAErE,CAAC,UACD,MAAM,WACN;AAAA,mBACe;AAAA;AAGZ,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,QAAQ,CAAC;AAAA,iBAOrF,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQvB,CAAC,UAAW,MAAM,eAAe,sBAAsB,kBAAmB;AAAA,WAC9E,CAAC,UAAW,MAAM,eAAe,MAAM,UAAU,IAAI,MAAM,SAAS,CAAE;AAAA;AAG1E,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrC,MAAM,cAAc,OAAO,cAAc,EAAE,MAAM,kBAAkB,MAAM,mBAAmB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnG,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAC3B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,eAAe,CAAC;AAAA;AAAA;AAAA;AAK5G,MAAM,eAAe,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,mBAAmB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9F,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,mBAAmB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc7G,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,mBAAmB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjG,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAGzE,MAAM,kBAAkB,OAAO,eAAe,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,UAAU,CAAC;AAAA;AAAA,gBAElG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGrD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAC3B,CAAC;AAEM,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI3F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAK1D,MAAM,qBAAqB,OAAO,YAAY;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAC3B,CAAC;AAAA;AAAA;AAIM,MAAM,sBAAsB,OAAO,YAAY;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAC3B,CAAC;AAAA;AAAA;",
   "names": []
 }

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

@@ -7,7 +7,7 @@ export declare const MODAL_FOOTER_SLOTS: {
     readonly FOOTER_WRAPPER: "footer-wrapper";
 };
 export declare const MODAL_FOOTER_DATA_TESTID: {
-    readonly CONFIRM_BUTTON: "ds-modalslide-confirm-button";
-    readonly REJECT_BUTTON: "ds-modalslide-reject-button";
-    readonly FOOTER_WRAPPER: "ds-modalslide-footer-wrapper";
+    REJECT_BUTTON: string;
+    CONFIRM_BUTTON: string;
+    FOOTER_WRAPPER: "ds-modalslide-footer-wrapper";
 };

package/package.json

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