@laerdal/life-react-components 0.0.280-dev.1 → 0.0.280-dev.12.full

package/dist/js/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,2GAErB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAA/D;AAAA,CAFgB,EAGrB,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAjD;AAAA,CAHgB,CAAlB;;;AAMP,IAAMC,WAAW,OAAGC,qBAAH,0PACKC,eAAOC,WADZ,EAEqBD,eAAOE,WAF5B,EAGNF,eAAOG,WAHD,CAAjB;AAQO,IAAMC,4BAA4B,OAAGL,qBAAH,yNACKC,eAAOK,WADZ,EAEEL,eAAOK,WAFT,EAGHL,eAAOK,WAHJ,CAAlC;;AAKP,IAAMC,uBAAuB,OAAGP,qBAAH,yNACiBC,eAAOO,YADxB,EAEcP,eAAOO,YAFrB,EAGSP,eAAOO,YAHhB,CAA7B;AAKA,IAAMC,kBAAkB,OAAGT,qBAAH,yNACsBC,eAAOS,WAD7B,EAEmBT,eAAOS,WAF1B,EAGcT,eAAOS,WAHrB,CAAxB;AAKO,IAAMC,eAAe,OAAGX,qBAAH,kLAArB;;;AAKP,IAAMY,iBAAiB,GAAGnB,0BAAOoB,KAAV,+iEAcP,UAAAlB,KAAK;AAAA,SAAKA,KAAK,CAACmB,aAAN,GAAsB,MAAtB,mCAAwDb,eAAOE,WAA/D,CAAL;AAAA,CAdE,EA+BVF,eAAOG,WA/BG,EAkCnBW,oBAAYC,MAlCO,EA6DZf,eAAOgB,KA7DK,EA+DnB,UAAAtB,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAlC;AAAA,CA/Dc,EAgEnB,UAAAJ,KAAK;AAAA,SAAKA,KAAK,CAACuB,uBAAN,GAAgCb,4BAAhC,GAA+D,EAApE;AAAA,CAhEc,EAiEnB,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACwB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAA1D;AAAA,CAjEc,EAkEnB,UAAAZ,KAAK;AAAA,SAAKA,KAAK,CAACyB,YAAN,GAAqBX,kBAArB,GAA0C,EAA/C;AAAA,CAlEc,EAmEnB,UAAAd,KAAK;AAAA,SAAKA,KAAK,CAAC0B,UAAN,GAAmBV,eAAnB,GAAqC,EAA1C;AAAA,CAnEc,EAsECV,eAAOC,WAtER,EA2EVD,eAAOE,WA3EG,EA8EyBF,eAAOqB,WA9EhC,EA+EsBrB,eAAOqB,WA/E7B,EAgFiBrB,eAAOqB,WAhFxB,EAoGyBrB,eAAOsB,WApGhC,EAqGsBtB,eAAOsB,WArG7B,EAsGiBtB,eAAOsB,WAtGxB,EA0GyBtB,eAAOqB,WA1GhC,EA2GsBrB,eAAOqB,WA3G7B,EA4GiBrB,eAAOqB,WA5GxB,CAAvB;;;AAwHA,IAAME,iBAAiB,OAAGxB,qBAAH,4XAAvB;;;AAmBO,IAAMyB,YAAY,GAAGhC,0BAAOiC,IAAV,8LACdzB,eAAO0B,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGnC,0BAAOC,GAAV,iWAIhBqB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMa,cAAc,GAAG,+BAAOD,OAAP,CAAH,4FAChB3B,eAAO6B,WADS,CAApB;;AAGA,IAAMC,YAAY,GAAG,+BAAOH,OAAP,CAAH,4FACd3B,eAAO0B,YADO,CAAlB;;AAGA,IAAMK,iBAAiB,GAAG,+BAAOJ,OAAP,CAAH,4FACnB3B,eAAOG,WADY,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\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`;\nexport const tabbedHereStyle = css`\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  tabbedHere?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: ${props => (props.withoutBorder ? 'none' : `inset 0px 0px 0px 1px ${COLORS.neutral_300}`)};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${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      font-size: 18px;\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\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  ${props => (props.tabbedHere ? tabbedHereStyle : '')}\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 {\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  &.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\nconst ValidationStyling = css`\n  &.error-msg {\n    line-height: 14px;\n    font-size: 13px;\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    color: #e76468;\n    font-weight: 700;\n    font-size: 13px;\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: 5px;\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"],"file":"styling.js"}
+{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,2GAErB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAA/D;AAAA,CAFgB,EAGrB,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAjD;AAAA,CAHgB,CAAlB;;;AAMP,IAAMC,WAAW,OAAGC,qBAAH,0PACKC,eAAOC,WADZ,EAEqBD,eAAOE,WAF5B,EAGNF,eAAOG,WAHD,CAAjB;AAQO,IAAMC,4BAA4B,OAAGL,qBAAH,yNACKC,eAAOK,WADZ,EAEEL,eAAOK,WAFT,EAGHL,eAAOK,WAHJ,CAAlC;;AAKP,IAAMC,uBAAuB,OAAGP,qBAAH,yNACiBC,eAAOO,YADxB,EAEcP,eAAOO,YAFrB,EAGSP,eAAOO,YAHhB,CAA7B;AAKA,IAAMC,kBAAkB,OAAGT,qBAAH,yNACsBC,eAAOS,WAD7B,EAEmBT,eAAOS,WAF1B,EAGcT,eAAOS,WAHrB,CAAxB;AAKO,IAAMC,eAAe,OAAGX,qBAAH,kLAArB;;;AAKP,IAAMY,iBAAiB,GAAGnB,0BAAOoB,KAAV,+jEAenB,UAAClB,KAAD;AAAA,SACAA,KAAK,CAACmB,aAAN,oJAKiDb,eAAOE,WALxD,6DAM2CF,eAAOE,WANlD,wDAOsCF,eAAOE,WAP7C,MADA;AAAA,CAfmB,EAwCVF,eAAOG,WAxCG,EA2CnBW,oBAAYC,MA3CO,EAsEZf,eAAOgB,KAtEK,EAwEnB,UAAAtB,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAlC;AAAA,CAxEc,EAyEnB,UAAAJ,KAAK;AAAA,SAAKA,KAAK,CAACuB,uBAAN,GAAgCb,4BAAhC,GAA+D,EAApE;AAAA,CAzEc,EA0EnB,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACwB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAA1D;AAAA,CA1Ec,EA2EnB,UAAAZ,KAAK;AAAA,SAAKA,KAAK,CAACyB,YAAN,GAAqBX,kBAArB,GAA0C,EAA/C;AAAA,CA3Ec,EA4EnB,UAAAd,KAAK;AAAA,SAAKA,KAAK,CAAC0B,UAAN,GAAmBV,eAAnB,GAAqC,EAA1C;AAAA,CA5Ec,EA+ECV,eAAOC,WA/ER,EAoFVD,eAAOE,WApFG,EAuFyBF,eAAOqB,WAvFhC,EAwFsBrB,eAAOqB,WAxF7B,EAyFiBrB,eAAOqB,WAzFxB,EA6GyBrB,eAAOsB,WA7GhC,EA8GsBtB,eAAOsB,WA9G7B,EA+GiBtB,eAAOsB,WA/GxB,EAmHyBtB,eAAOqB,WAnHhC,EAoHsBrB,eAAOqB,WApH7B,EAqHiBrB,eAAOqB,WArHxB,CAAvB;;;AAiIA,IAAME,iBAAiB,OAAGxB,qBAAH,4XAAvB;;;AAmBO,IAAMyB,YAAY,GAAGhC,0BAAOiC,IAAV,8LACdzB,eAAO0B,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGnC,0BAAOC,GAAV,iWAIhBqB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMa,cAAc,GAAG,+BAAOD,OAAP,CAAH,4FAChB3B,eAAO6B,WADS,CAApB;;AAGA,IAAMC,YAAY,GAAG,+BAAOH,OAAP,CAAH,4FACd3B,eAAO0B,YADO,CAAlB;;AAGA,IAAMK,iBAAiB,GAAG,+BAAOJ,OAAP,CAAH,4FACnB3B,eAAOG,WADY,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\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`;\nexport const tabbedHereStyle = css`\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  tabbedHere?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\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_300};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${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      font-size: 18px;\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\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  ${props => (props.tabbedHere ? tabbedHereStyle : '')}\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 {\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  &.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\nconst ValidationStyling = css`\n  &.error-msg {\n    line-height: 14px;\n    font-size: 13px;\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    color: #e76468;\n    font-weight: 700;\n    font-size: 13px;\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: 5px;\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"],"file":"styling.js"}

package/dist/js/Modals/Modal.js

@@ -41,6 +41,8 @@ var StyledButton = (0, _styledComponents.default)(_Button.IconButton)(_templateO
 var ModalCloseButton = function ModalCloseButton(_ref) {
   var onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement(StyledButton, {
+    variant: "secondary",
+    shape: "square",
     action: onClick
   }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
     size: "24px",

package/dist/js/Modals/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","IconButton","ModalCloseButton","onClick","COLORS","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,MAAM,GAAGC,0BAAOC,GAAV,kKAAZ;;AAOA,IAAMC,YAAY,GAAG,+BAAOC,kBAAP,CAAH,2FAAlB;;AAIO,IAAMC,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,oBAAC,YAAD;AAAc,IAAA,MAAM,EAAEA;AAAtB,kBACE,oBAAC,kBAAD;AAAO,IAAA,IAAI,EAAC,MAAZ;AAAmB,IAAA,KAAK,EAAEC,eAAOC;AAAjC,IADF,CADF;AAKD,CANM;;;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,MAAD,QAASA,QAAT,CAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,wBAAD,QAAcA,QAAd,CAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,sBAAD,QAAYA,QAAZ,CAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,wBAAD,QAAcA,QAAd,CAA9B;AAAA,CAAf;;eAEeD,K","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","IconButton","ModalCloseButton","onClick","COLORS","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,MAAM,GAAGC,0BAAOC,GAAV,kKAAZ;;AAOA,IAAMC,YAAY,GAAG,+BAAOC,kBAAP,CAAH,2FAAlB;;AAIO,IAAMC,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA;AAAzD,kBACE,oBAAC,kBAAD;AAAO,IAAA,IAAI,EAAC,MAAZ;AAAmB,IAAA,KAAK,EAAEC,eAAOC;AAAjC,IADF,CADF;AAKD,CANM;;;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,MAAD,QAASA,QAAT,CAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,wBAAD,QAAcA,QAAd,CAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,sBAAD,QAAYA,QAAZ,CAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,wBAAD,QAAcA,QAAd,CAA9B;AAAA,CAAf;;eAEeD,K","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}

package/dist/js/Modals/ModalDialog.js

@@ -128,6 +128,8 @@ var ModalDialog = function ModalDialog(_ref) {
 
   var ModalCloseButton = function ModalCloseButton(onClick) {
     return /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
       action: onClick,
       borderRadius: 48
     }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
@@ -139,6 +141,8 @@ var ModalDialog = function ModalDialog(_ref) {
   var ModalBackButton = function ModalBackButton() {
     if (backButton) {
       return /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
         action: function action() {
           return backButton();
         },

package/dist/js/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["StyledModalHeader","ModalHeader","props","height","Column","styled","div","ModalFooterButtons","ModalTitleSection","section","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","getMaxWidth","getImageHeight","ModalCloseButton","onClick","COLORS","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalBody, ModalFooter, ModalTitle } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst StyledModalHeader = styled(ModalHeader)<{ size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - 24}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    left: 0;\n  }\n  button:only-of-type {\n    right: 0;\n    left: unset;\n  }\n`;\n\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst ModalFooterButtons = styled.div`\n  button + button {\n    margin-left: 8px;\n  }\n  button + button {\n    margin-left: 8px;\n  }\n`;\n\nconst ModalTitleSection = styled.section`\n  display: flex;\n  div:not(:first-child) {\n    margin-left: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n    top: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    position: unset;\n    margin-top: -12px;\n  }\n  button:only-of-type {\n    position: absolute;\n    right: 0;\n    left: unset;\n    margin-right: 0;\n  }\n`;\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <IconButton action={onClick} borderRadius={48}>\n        <Close size=\"24px\" color={COLORS.black} />\n      </IconButton>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <IconButton action={() => backButton()} borderRadius={48}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\">\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader height={getImageHeight()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && <ModalTitle>{title}</ModalTitle>}\n            {tooltip && (\n              <div>\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody>{body}</ModalBody>\n\n          <ModalFooter>\n            <ModalFooterButtons>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["StyledModalHeader","ModalHeader","props","height","Column","styled","div","ModalFooterButtons","ModalTitleSection","section","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","getMaxWidth","getImageHeight","ModalCloseButton","onClick","COLORS","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalBody, ModalFooter, ModalTitle } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst StyledModalHeader = styled(ModalHeader)<{ size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - 24}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    left: 0;\n  }\n  button:only-of-type {\n    right: 0;\n    left: unset;\n  }\n`;\n\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst ModalFooterButtons = styled.div`\n  button + button {\n    margin-left: 8px;\n  }\n  button + button {\n    margin-left: 8px;\n  }\n`;\n\nconst ModalTitleSection = styled.section`\n  display: flex;\n  div:not(:first-child) {\n    margin-left: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n    top: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    position: unset;\n    margin-top: -12px;\n  }\n  button:only-of-type {\n    position: absolute;\n    right: 0;\n    left: unset;\n    margin-right: 0;\n  }\n`;\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={onClick} borderRadius={48}>\n        <Close size=\"24px\" color={COLORS.black} />\n      </IconButton>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\">\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader height={getImageHeight()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && <ModalTitle>{title}</ModalTitle>}\n            {tooltip && (\n              <div>\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody>{body}</ModalBody>\n\n          <ModalFooter>\n            <ModalFooterButtons>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/js/Switcher/MobileSwitcherMenu.js

@@ -65,12 +65,16 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
     role: "menu",
     "aria-labelledby": "UserMenuButton"
   }, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    shape: "circular",
     action: clickMenuAction,
     isInMobileMenu: true
   }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
     size: "24px",
     color: _styles.COLORS.neutral_600
   })), /*#__PURE__*/React.createElement("h3", null, header), /*#__PURE__*/React.createElement(_CommonStyles.Right, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    shape: "circular",
     action: clickMenuAction,
     isInMobileMenu: true
   }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {

package/dist/js/Switcher/MobileSwitcherMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAGC,0BAAOC,EAAV,+gBAGYC,eAAOC,KAHnB,EAMaC,sBANb,EAOKA,sBAPL,EAeNC,oBAAYC,KAfN,EAwBNC,wBAxBM,CAAV;;AA2BA,IAAMC,WAAW,GAAGR,0BAAOS,EAAV,uNAAjB;;AAWA,IAAMC,eAAe,GAAGV,0BAAOC,EAAV,oLAMjBU,wCANiB,CAArB;;AASA,IAAMC,GAAG,GAAGZ,0BAAOa,GAAV,8aAKEX,eAAOY,WALT,CAAT;;AAmBA,IAAMC,SAAS,GAAGf,0BAAOgB,IAAV,qLAEOd,eAAOe,UAFd,CAAf;;AAeA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAkE;AAAA,MAA/DC,MAA+D,QAA/DA,MAA+D;AAAA,MAAvDC,cAAuD,QAAvDA,cAAuD;AAAA,MAAvCC,eAAuC,QAAvCA,eAAuC;AAAA,MAAtBC,QAAsB,QAAtBA,QAAsB;AAC3FC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBN,QAAAA,eAAe;AAChB;AACF;;AAEDO,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACJ,eAAD,CAXH;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAE,mBAAM,CAAE,CAAvB;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,uBAAgB;AAArD,kBACE,oBAAC,GAAD,qBACE,oBAAC,kBAAD;AAAY,IAAA,MAAM,EAAEA,eAApB;AAAqC,IAAA,cAAc,EAAE;AAArD,kBACE,oBAAC,0BAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,KAAK,EAAEnB,eAAOY;AAAzC,IADF,CADF,eAIE,gCAAKK,MAAL,CAJF,eAKE,oBAAC,mBAAD,qBACE,oBAAC,kBAAD;AAAY,IAAA,MAAM,EAAEE,eAApB;AAAqC,IAAA,cAAc,EAAE;AAArD,kBACE,oBAAC,kBAAD;AAAO,IAAA,IAAI,EAAC;AAAZ,IADF,CADF,CALF,CADF,EAYGC,QAAQ,IAAI,CAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAES,MAAV,IAAmB,CAA/B,iBACC,oBAAC,WAAD,qBACE,oBAAC,SAAD,QAAYX,cAAZ,CADF,eAEE,oBAAC,eAAD,QACGE,QADH,aACGA,QADH,uBACGA,QAAQ,CAAEU,GAAV,CAAc,UAACC,OAAD;AAAA,wBACb,oBAAC,yBAAD;AAAkB,MAAA,GAAG,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAhC;AAAoC,MAAA,KAAK,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,KAApD;AAA2D,MAAA,IAAI,EAAEF,OAAO,CAACG;AAAzE,MADa;AAAA,GAAd,CADH,CAFF,CAbJ,CADF;AAyBD,CAvCD;;;AANEjB,EAAAA,M;AACAC,EAAAA,c;AACAC,EAAAA,e;AACAC,EAAAA,Q;;eA4CaJ,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, scrollBarStyling } from '../styles';\n\nimport { UserMenuItem } from '../types';\nimport { IconButton } from '../Button';\nimport { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';\nimport { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    font-weight: normal;\n    font-size: 16px;\n    color: inherit;\n    margin-left: 24px;\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
+{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAGC,0BAAOC,EAAV,+gBAGYC,eAAOC,KAHnB,EAMaC,sBANb,EAOKA,sBAPL,EAeNC,oBAAYC,KAfN,EAwBNC,wBAxBM,CAAV;;AA2BA,IAAMC,WAAW,GAAGR,0BAAOS,EAAV,uNAAjB;;AAWA,IAAMC,eAAe,GAAGV,0BAAOC,EAAV,oLAMjBU,wCANiB,CAArB;;AASA,IAAMC,GAAG,GAAGZ,0BAAOa,GAAV,8aAKEX,eAAOY,WALT,CAAT;;AAmBA,IAAMC,SAAS,GAAGf,0BAAOgB,IAAV,qLAEOd,eAAOe,UAFd,CAAf;;AAeA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAkE;AAAA,MAA/DC,MAA+D,QAA/DA,MAA+D;AAAA,MAAvDC,cAAuD,QAAvDA,cAAuD;AAAA,MAAvCC,eAAuC,QAAvCA,eAAuC;AAAA,MAAtBC,QAAsB,QAAtBA,QAAsB;AAC3FC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBN,QAAAA,eAAe;AAChB;AACF;;AAEDO,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACJ,eAAD,CAXH;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAE,mBAAM,CAAE,CAAvB;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,uBAAgB;AAArD,kBACE,oBAAC,GAAD,qBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEA,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,0BAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,KAAK,EAAEnB,eAAOY;AAAzC,IADF,CADF,eAIE,gCAAKK,MAAL,CAJF,eAKE,oBAAC,mBAAD,qBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEE,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,kBAAD;AAAO,IAAA,IAAI,EAAC;AAAZ,IADF,CADF,CALF,CADF,EAYGC,QAAQ,IAAI,CAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAES,MAAV,IAAmB,CAA/B,iBACC,oBAAC,WAAD,qBACE,oBAAC,SAAD,QAAYX,cAAZ,CADF,eAEE,oBAAC,eAAD,QACGE,QADH,aACGA,QADH,uBACGA,QAAQ,CAAEU,GAAV,CAAc,UAACC,OAAD;AAAA,wBACb,oBAAC,yBAAD;AAAkB,MAAA,GAAG,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAhC;AAAoC,MAAA,KAAK,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,KAApD;AAA2D,MAAA,IAAI,EAAEF,OAAO,CAACG;AAAzE,MADa;AAAA,GAAd,CADH,CAFF,CAbJ,CADF;AAyBD,CAvCD;;;AANEjB,EAAAA,M;AACAC,EAAAA,c;AACAC,EAAAA,e;AACAC,EAAAA,Q;;eA4CaJ,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, scrollBarStyling } from '../styles';\n\nimport { UserMenuItem } from '../types';\nimport { IconButton } from '../Button';\nimport { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';\nimport { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    font-weight: normal;\n    font-size: 16px;\n    color: inherit;\n    margin-left: 24px;\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}

package/dist/js/Table/Table.js

@@ -416,6 +416,8 @@ var Table = function Table(_ref) {
             color: column.colorFn(row, column.key)
           }
         }, row[column.key]) : column.isIcon && column.icon ? /*#__PURE__*/React.createElement(_index3.IconButton, {
+          variant: "secondary",
+          shape: "circular",
           useTransparentBackground: true,
           action: function action(event) {
             return onIconClick(row, column.key, event);
@@ -458,6 +460,8 @@ var Table = function Table(_ref) {
     }, total === 0 ? 0 : from, "-", to, " of ", total), /*#__PURE__*/React.createElement("div", {
       className: "controls"
     }, /*#__PURE__*/React.createElement(_index3.IconButton, {
+      variant: "secondary",
+      shape: "circular",
       action: function action() {
         return previousPage();
       },
@@ -466,6 +470,8 @@ var Table = function Table(_ref) {
       size: "24",
       color: _styles.COLORS.neutral_600
     })), /*#__PURE__*/React.createElement(_index3.IconButton, {
+      variant: "secondary",
+      shape: "circular",
       action: function action() {
         return nextPage();
       },

package/dist/js/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","rowClick","linkClick","iconClick","previousPageClick","nextPageClick","rowsPerPageChange","triggerSortingChange","title","columns","rows","remotePagination","pagination","showLoadingIndicator","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","useEffect","tmpFilteredRows","filterAndSortRows","length","rowsFrom","rowsTo","slice","filter","row","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","map","tmpColumn","sortable","undefined","previousPage","nextPage","changeRowsPerPage","value","parseInt","renderHeader","COLORS","neutral_600","width","justify","name","onLinkClick","event","stopPropagation","onIconClick","onRowClick","selectedText","window","getSelection","toString","renderBody","index","colorFn","color","maxWidth","shortenText","isLink","isIcon","icon","icons","size","className","customContent","renderFooter","rowsPerPageValues"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remotePagination) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remotePagination) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remotePagination, pagination, rows]);\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    // Let's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(value));\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size=\"small\"\n                      variant=\"text\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size=\"medium\" color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}
+{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","rowClick","linkClick","iconClick","previousPageClick","nextPageClick","rowsPerPageChange","triggerSortingChange","title","columns","rows","remotePagination","pagination","showLoadingIndicator","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","useEffect","tmpFilteredRows","filterAndSortRows","length","rowsFrom","rowsTo","slice","filter","row","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","map","tmpColumn","sortable","undefined","previousPage","nextPage","changeRowsPerPage","value","parseInt","renderHeader","COLORS","neutral_600","width","justify","name","onLinkClick","event","stopPropagation","onIconClick","onRowClick","selectedText","window","getSelection","toString","renderBody","index","colorFn","color","maxWidth","shortenText","isLink","isIcon","icon","icons","size","className","customContent","renderFooter","rowsPerPageValues"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remotePagination) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remotePagination) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remotePagination, pagination, rows]);\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    // Let's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(value));\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size=\"small\"\n                      variant=\"text\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size=\"medium\" color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}

package/dist/js/Tabs/Tabs.js

@@ -87,7 +87,7 @@ var getBottomMargin = function getBottomMargin(size) {
   }
 };
 
-var Nav = _styledComponents.default.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 20px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 20px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 20px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) {
+var Nav = _styledComponents.default.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) {
   return getHeight(props.size);
 }, function (props) {
   return getFontSize(props.size);

package/dist/js/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["getHeight","size","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;;;;;;;;;AAOA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,IAAD,EAAkB;AAClC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACD,IAAD,EAAkB;AACpC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACF,IAAD,EAAkB;AACrC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMG,eAAe,GAAG,SAAlBA,eAAkB,CAACH,IAAD,EAAkB;AACxC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,KAAP;;AACF,SAAK,OAAL;AACE,aAAO,KAAP;;AACF;AACE,aAAO,KAAP;AARJ;AAUD,CAXD;;AAaA,IAAMI,GAAG,GAAGC,0BAAOC,GAAV,4bAKK,UAACC,KAAD;AAAA,SAAWR,SAAS,CAACQ,KAAK,CAACP,IAAP,CAApB;AAAA,CALL,EAaQ,UAACO,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACP,IAAP,CAAtB;AAAA,CAbR,EAcK,UAACO,KAAD;AAAA,SAAWL,YAAY,CAACK,KAAK,CAACP,IAAP,CAAvB;AAAA,CAdL,EAc8C,UAACO,KAAD;AAAA,SAAWJ,eAAe,CAACI,KAAK,CAACP,IAAP,CAA1B;AAAA,CAd9C,EAiBQ,UAACO,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACP,IAAP,CAAtB;AAAA,CAjBR,CAAT;;AA0BA,IAAMQ,IAAwC,GAAG,SAA3CA,IAA2C;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaT,IAAb,QAAaA,IAAb;AAAA,sBAC/C,oBAAC,GAAD;AAAK,IAAA,IAAI,EAAC,SAAV;AAAoB,IAAA,IAAI,EAAEA;AAA1B,KACGS,QADH,CAD+C;AAAA,CAAjD;;;AAlFEA,EAAAA,Q;AACAT,EAAAA,I;;eAuFaQ,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\ntype TabsProps = {\n  children?: any;\n  size: string;\n};\n\nconst getHeight = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '48px';\n    case 'medium':\n      return '56px';\n    case 'large':\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '16px';\n    case 'medium':\n      return '18px';\n    case 'large':\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '6px';\n    case 'medium':\n      return '10px';\n    case 'large':\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '2px';\n    case 'medium':\n      return '3px';\n    case 'large':\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 20px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 20px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 20px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["getHeight","size","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;;;;;;;;;AAOA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,IAAD,EAAkB;AAClC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACD,IAAD,EAAkB;AACpC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACF,IAAD,EAAkB;AACrC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMG,eAAe,GAAG,SAAlBA,eAAkB,CAACH,IAAD,EAAkB;AACxC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,KAAP;;AACF,SAAK,OAAL;AACE,aAAO,KAAP;;AACF;AACE,aAAO,KAAP;AARJ;AAUD,CAXD;;AAaA,IAAMI,GAAG,GAAGC,0BAAOC,GAAV,4bAKK,UAACC,KAAD;AAAA,SAAWR,SAAS,CAACQ,KAAK,CAACP,IAAP,CAApB;AAAA,CALL,EAaQ,UAACO,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACP,IAAP,CAAtB;AAAA,CAbR,EAcK,UAACO,KAAD;AAAA,SAAWL,YAAY,CAACK,KAAK,CAACP,IAAP,CAAvB;AAAA,CAdL,EAc8C,UAACO,KAAD;AAAA,SAAWJ,eAAe,CAACI,KAAK,CAACP,IAAP,CAA1B;AAAA,CAd9C,EAiBQ,UAACO,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACP,IAAP,CAAtB;AAAA,CAjBR,CAAT;;AA0BA,IAAMQ,IAAwC,GAAG,SAA3CA,IAA2C;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaT,IAAb,QAAaA,IAAb;AAAA,sBAC/C,oBAAC,GAAD;AAAK,IAAA,IAAI,EAAC,SAAV;AAAoB,IAAA,IAAI,EAAEA;AAA1B,KACGS,QADH,CAD+C;AAAA,CAAjD;;;AAlFEA,EAAAA,Q;AACAT,EAAAA,I;;eAuFaQ,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\ntype TabsProps = {\n  children?: any;\n  size: string;\n};\n\nconst getHeight = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '48px';\n    case 'medium':\n      return '56px';\n    case 'large':\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '16px';\n    case 'medium':\n      return '18px';\n    case 'large':\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '6px';\n    case 'medium':\n      return '10px';\n    case 'large':\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '2px';\n    case 'medium':\n      return '3px';\n    case 'large':\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}

package/dist/js/Toasters/Toast.js

@@ -73,7 +73,7 @@ var ActionButtons = _styledComponents.default.div(_templateObject4 || (_template
 
 var CloseButton = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ", ";\n  }\n\n  & div svg path {\n    fill: ", ";\n  }\n\n  &.", " {\n    & div svg path {\n      fill: ", ";\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.neutral_600);
 
-var TextContainer = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 20px;\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])), _styles.TYPOGRAPHY.fontFamily);
+var TextContainer = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 20px;\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n  \n  a {\n    display: contents;\n    text-decoration: none;\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n"])), _styles.TYPOGRAPHY.fontFamily);
 
 var IconContainer = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: -8px;\n"])));
 
@@ -196,11 +196,15 @@ var Toast = function Toast(_ref) {
   })), opts.showCloseButton && /*#__PURE__*/React.createElement(CloseButton, {
     className: "close-button ".concat(theme)
   }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    useTransparentBackground: true,
     action: function action(event) {
       return setShouldRemove(true);
     }
   }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
-    size: "24px"
+    size: "24px",
+    color: _styles.COLORS.neutral_600
   }))), !!opts.autoClose && /*#__PURE__*/React.createElement(Loader, {
     className: "loader ".concat(theme),
     duration: (_opts$delay = opts.delay) !== null && _opts$delay !== void 0 ? _opts$delay : 0

package/dist/js/Toasters/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","TYPOGRAPHY","fontFamily","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Button, IconButton } from '../Button';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  & a {\n    color: ${COLORS.white};\n    font-weight: bold;\n  }\n\n  color: ${COLORS.white};\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      color: ${COLORS.black};\n      font-weight: bold;\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-family: ${TYPOGRAPHY.fontFamily};\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 20px;\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  setTimeout(() => elementRef?.current?.focus());\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={'small'}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}
+{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","TYPOGRAPHY","fontFamily","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Button, IconButton } from '../Button';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  & a {\n    color: ${COLORS.white};\n    font-weight: bold;\n  }\n\n  color: ${COLORS.white};\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      color: ${COLORS.black};\n      font-weight: bold;\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-family: ${TYPOGRAPHY.fontFamily};\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 20px;\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n  \n  a {\n    display: contents;\n    text-decoration: none;\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  setTimeout(() => elementRef?.current?.focus());\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={'small'}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}