@laerdal/life-react-components 1.6.0 → 1.7.0-dev.2

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","Z_INDEXES","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focus","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}
+{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","Z_INDEXES","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focus","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}

package/dist/Modals/ModalContainer.cjs

@@ -133,8 +133,9 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
-      var overflow = this.GetOverflow(modalOverflow);
-      var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
+      var overflow = this.GetOverflow(modalOverflow); // should be at least z-index of modal and below z-index of toast
+
+      var zIndexValue = Math.min(Math.max(zIndex, +_zIndexes.Z_INDEXES.modal), +_zIndexes.Z_INDEXES.toast - 1);
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,

package/dist/Modals/ModalContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const zIndexValue = zIndex < 1060 ? 1060 : zIndex >=1070 ? 1069 : zIndex;\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}

package/dist/Modals/ModalContainer.js

@@ -109,8 +109,9 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
-      var overflow = this.GetOverflow(modalOverflow);
-      var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
+      var overflow = this.GetOverflow(modalOverflow); // should be at least z-index of modal and below z-index of toast
+
+      var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,

package/dist/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const zIndexValue = zIndex < 1060 ? 1060 : zIndex >=1070 ? 1069 : zIndex;\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/Modals/ModalContent.cjs

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _index = require("./index");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Tooltips = require("../Tooltips");
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _HyperLink = require("../HyperLink");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["icon"],
+    _excluded2 = ["text", "variant", "action"],
+    _excluded3 = ["text", "variant", "action"],
+    _excluded4 = ["action", "text"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px\n"])));
+
+var HeaderTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
+
+var HeaderNote = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+
+var HeaderActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n"])));
+
+var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), _Tooltips.TooltipContainer);
+
+var Content = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+
+var FooterLeftContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+
+var FooterLeftNote = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var FooterLeftLink = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500));
+
+var FooterRightContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 8px;\n  margin-left: auto;\n"])));
+
+var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
+
+var Wrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"])), Header, HeaderText, HeaderTitle, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), HeaderNote, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, (0, _styles.ComponentXLStyling)(_styles.ComponentTextStyle.Bold, null), HeaderNote, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer);
+
+var ModalContent = function ModalContent(props) {
+  var _props$size, _props$footerActions;
+
+  var tooltip = function tooltip() {
+    return !!props.tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltips.TooltipWrapper, {
+      delay: "0s",
+      size: _types.Size.XSmall,
+      align: "center",
+      position: "bottom",
+      withArrow: false,
+      label: props.tooltip,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        style: {
+          cursor: 'help'
+        },
+        action: function action() {},
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
+          size: "24px",
+          color: _styles.COLORS.neutral_600
+        })
+      })
+    });
+  };
+
+  var headerActions = function headerActions() {
+    var _props$headerActions;
+
+    return (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.map(function (action, index) {
+      var icon = action.icon,
+          rest = (0, _objectWithoutProperties2.default)(action, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
+        children: icon
+      }), action.id || index);
+    });
+  };
+
+  var getLeftActionIconElement = function getLeftActionIconElement() {
+    var _props$leftFooterActi, _props$leftFooterActi2;
+
+    return !!((_props$leftFooterActi = props.leftFooterAction) !== null && _props$leftFooterActi !== void 0 && _props$leftFooterActi.icon) && /*#__PURE__*/_react.default.cloneElement((_props$leftFooterActi2 = props.leftFooterAction) === null || _props$leftFooterActi2 === void 0 ? void 0 : _props$leftFooterActi2.icon, {
+      size: props.size === _types.Size.Small ? '20px' : props.size === _types.Size.Large ? '28px' : '24px'
+    });
+  };
+
+  var leftFooterAction = function leftFooterAction() {
+    if (!props.leftFooterAction) return null;
+
+    switch (props.leftFooterAction.actionType) {
+      case 'button':
+        {
+          var _ref = props.leftFooterAction,
+              text = _ref.text,
+              variant = _ref.variant,
+              action = _ref.action,
+              rest = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, rest), {}, {
+            size: props.size,
+            onClick: action,
+            variant: variant !== null && variant !== void 0 ? variant : 'secondary',
+            children: text
+          }));
+        }
+
+      case 'hyperlink':
+        {
+          var _ref2 = props.leftFooterAction,
+              _text = _ref2.text,
+              _variant = _ref2.variant,
+              _action = _ref2.action,
+              _rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLeftLink, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({}, _rest), {}, {
+              variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
+              onClick: function onClick(e) {
+                if (_action) {
+                  e.preventDefault();
+
+                  _action(e);
+                }
+              },
+              children: [getLeftActionIconElement(), _text]
+            }))
+          });
+        }
+
+      case 'note':
+        {
+          var _text2 = props.leftFooterAction.text;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterLeftNote, {
+            children: [getLeftActionIconElement(), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: _text2
+            })]
+          });
+        }
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ModalContainer, {
+    showModal: props.isModalOpen,
+    closeModal: props.closeAction,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+      className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderText, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderTitle, {
+            children: props.title
+          }), !!props.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderNote, {
+            children: props.note
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderActions, {
+          children: [tooltip(), headerActions(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            id: 'content-modal-close-button',
+            variant: "secondary",
+            shape: "circular",
+            action: props.closeAction,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+              size: "24px",
+              color: _styles.COLORS.neutral_600
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+        children: props.children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLeftContainer, {
+          children: leftFooterAction()
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterRightContainer, {
+          children: (_props$footerActions = props.footerActions) === null || _props$footerActions === void 0 ? void 0 : _props$footerActions.map(function (item, index) {
+            var action = item.action,
+                text = item.text,
+                rest = (0, _objectWithoutProperties2.default)(item, _excluded4);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, rest), {}, {
+              onClick: action,
+              size: props.size,
+              onKeyDown: function onKeyDown(a) {
+                return (a.key === 'Enter' || a.key === ' ') && action(a);
+              },
+              children: text
+            }), rest.id || index);
+          })
+        })]
+      })]
+    })
+  });
+};
+
+ModalContent.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  closeAction: _propTypes.default.func.isRequired,
+  title: _propTypes.default.string.isRequired,
+  note: _propTypes.default.string,
+  headerActions: _propTypes.default.array,
+  footerActions: _propTypes.default.array,
+  tooltip: _propTypes.default.string,
+  yOffset: _propTypes.default.number,
+  zIndex: _propTypes.default.number
+};
+var _default = ModalContent;
+exports.default = _default;
+//# sourceMappingURL=ModalContent.cjs.map

package/dist/Modals/ModalContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modals/ModalContent.tsx"],"names":["HeaderText","styled","div","HeaderTitle","ComponentTextStyle","Bold","COLORS","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","yOffset","zIndex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {Close, Help} from '../icons/systemicons/SystemIcons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"file":"ModalContent.cjs"}

package/dist/Modals/ModalContent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Size } from '../types';
+import { ButtonAction, IconButtonAction, LeftFooterAction } from './ModalTypes';
+interface ModalContentProps {
+    size?: Size.Small | Size.Medium | Size.Large;
+    isModalOpen: boolean;
+    closeAction: () => void;
+    title: string;
+    note?: string;
+    headerActions?: IconButtonAction[];
+    footerActions?: ButtonAction[];
+    leftFooterAction?: LeftFooterAction;
+    tooltip?: string;
+    yOffset?: number;
+    zIndex?: number;
+}
+declare const ModalContent: React.FC<ModalContentProps>;
+export default ModalContent;