@laerdal/life-react-components 1.2.2-dev.2 → 1.2.2-dev.20

package/dist/esm/InputFields/__tests__/QuickSearch.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["React","render","QuickSearch","describe","it","search","searchEntered","queryByText","getByTestId","queryAllByTestId","width","term","expect","classList","contains","toBeTruthy","toBeDefined","length","toBe","click","parentElement","toHaveProperty"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,WAAT,QAA4B,IAA5B;AAEAC,QAAQ,CAAC,iBAAD,EAAoB,MAAM;AAChCC,EAAAA,EAAE,CAAC,sBAAD,EAAyB,YAAY;AACrC,QAAIC,MAAM,GAAG,EAAb;AACA,QAAIC,aAAa,GAAG,KAApB;AACA,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA,WAAf;AAA4BC,MAAAA;AAA5B,QAAiDR,MAAM,eAC3D;AAAK,MAAA,KAAK,EAAE;AAAES,QAAAA,KAAK,EAAE;AAAT;AAAZ,oBACE,oBAAC,WAAD;AACE,MAAA,EAAE,EAAC,aADL;AAEE,MAAA,IAAI,EAAE,OAFR;AAGE,MAAA,WAAW,EAAE,MAAM;AACjBJ,QAAAA,aAAa,GAAG,IAAhB;AACD,OALH;AAME,MAAA,YAAY,EAAE,MAAM;AAClBD,QAAAA,MAAM,GAAG,EAAT;AACD,OARH;AASE,MAAA,aAAa,EAAGM,IAAD,IAAU;AACvBN,QAAAA,MAAM,GAAGM,IAAT;AACD;AAXH,MADF,CAD2D,CAA7D;AAiBAC,IAAAA,MAAM,CAACJ,WAAW,CAAC,kBAAD,CAAX,CAAgCK,SAAhC,CAA0CC,QAA1C,CAAmD,OAAnD,CAAD,CAAN,CAAoEC,UAApE;AACAH,IAAAA,MAAM,CAACJ,WAAW,CAAC,0BAAD,CAAZ,CAAN,CAAgDQ,WAAhD,GArBqC,CAuBrC;;AACAJ,IAAAA,MAAM,CAACH,gBAAgB,CAAC,aAAD,CAAhB,CAAgCQ,MAAjC,CAAN,CAA+CC,IAA/C,CAAoD,CAApD;AACCV,IAAAA,WAAW,CAAC,0BAAD,CAAZ,EAAgEW,KAAhE;AACAP,IAAAA,MAAM,CAACJ,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCQ,WAAnC;AACAJ,IAAAA,MAAM,CAACJ,WAAW,CAAC,kBAAD,CAAX,CAAgCK,SAAhC,CAA0CC,QAA1C,CAAmD,UAAnD,CAAD,CAAN,CAAuEC,UAAvE;AACAH,IAAAA,MAAM,CAACJ,WAAW,CAAC,uBAAD,CAAX,CAAqCY,aAAtC,CAAN,CAA2DC,cAA3D,CAA0E,QAA1E;AACD,GA7BC,CAAF;AA8BD,CA/BO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { QuickSearch } from '..';\n\ndescribe('<QuickSearch />', () => {\n  it('Renders quick search', async () => {\n    let search = '';\n    let searchEntered = false;\n    const { queryByText, getByTestId, queryAllByTestId } = render(\n      <div style={{ width: '400px' }}>\n        <QuickSearch\n          id=\"QuickSearch\"\n          size={'small'}\n          enterSearch={() => {\n            searchEntered = true;\n          }}\n          removeSearch={() => {\n            search = '';\n          }}\n          setSearchTerm={(term) => {\n            search = term;\n          }}\n        />\n      </div>,\n    );\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\n\n    // Test click on icon and check that input field shows\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\n    expect(getByTestId('QuickSearch')).toBeDefined();\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\n  });\n});\n"],"file":"QuickSearch.test.js"}
+{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["React","render","Size","QuickSearch","describe","it","search","searchEntered","queryByText","getByTestId","queryAllByTestId","width","Small","term","expect","classList","contains","toBeTruthy","toBeDefined","length","toBe","click","parentElement","toHaveProperty"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAAQC,IAAR,QAAmB,aAAnB;AACA,OAAO,wBAAP;AACA,SAASC,WAAT,QAA4B,IAA5B;AAEAC,QAAQ,CAAC,iBAAD,EAAoB,MAAM;AAChCC,EAAAA,EAAE,CAAC,sBAAD,EAAyB,YAAY;AACrC,QAAIC,MAAM,GAAG,EAAb;AACA,QAAIC,aAAa,GAAG,KAApB;AACA,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA,WAAf;AAA4BC,MAAAA;AAA5B,QAAiDT,MAAM,eAC3D;AAAK,MAAA,KAAK,EAAE;AAAEU,QAAAA,KAAK,EAAE;AAAT;AAAZ,oBACE,oBAAC,WAAD;AACE,MAAA,EAAE,EAAC,aADL;AAEE,MAAA,IAAI,EAAET,IAAI,CAACU,KAFb;AAGE,MAAA,WAAW,EAAE,MAAM;AACjBL,QAAAA,aAAa,GAAG,IAAhB;AACD,OALH;AAME,MAAA,YAAY,EAAE,MAAM;AAClBD,QAAAA,MAAM,GAAG,EAAT;AACD,OARH;AASE,MAAA,aAAa,EAAGO,IAAD,IAAU;AACvBP,QAAAA,MAAM,GAAGO,IAAT;AACD;AAXH,MADF,CAD2D,CAA7D;AAiBAC,IAAAA,MAAM,CAACL,WAAW,CAAC,kBAAD,CAAX,CAAgCM,SAAhC,CAA0CC,QAA1C,CAAmD,OAAnD,CAAD,CAAN,CAAoEC,UAApE;AACAH,IAAAA,MAAM,CAACL,WAAW,CAAC,0BAAD,CAAZ,CAAN,CAAgDS,WAAhD,GArBqC,CAuBrC;;AACAJ,IAAAA,MAAM,CAACJ,gBAAgB,CAAC,aAAD,CAAhB,CAAgCS,MAAjC,CAAN,CAA+CC,IAA/C,CAAoD,CAApD;AACCX,IAAAA,WAAW,CAAC,0BAAD,CAAZ,EAAgEY,KAAhE;AACAP,IAAAA,MAAM,CAACL,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCS,WAAnC;AACAJ,IAAAA,MAAM,CAACL,WAAW,CAAC,kBAAD,CAAX,CAAgCM,SAAhC,CAA0CC,QAA1C,CAAmD,UAAnD,CAAD,CAAN,CAAuEC,UAAvE;AACAH,IAAAA,MAAM,CAACL,WAAW,CAAC,uBAAD,CAAX,CAAqCa,aAAtC,CAAN,CAA2DC,cAA3D,CAA0E,QAA1E;AACD,GA7BC,CAAF;AA8BD,CA/BO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport {Size} from '../../types';\nimport 'jest-styled-components';\nimport { QuickSearch } from '..';\n\ndescribe('<QuickSearch />', () => {\n  it('Renders quick search', async () => {\n    let search = '';\n    let searchEntered = false;\n    const { queryByText, getByTestId, queryAllByTestId } = render(\n      <div style={{ width: '400px' }}>\n        <QuickSearch\n          id=\"QuickSearch\"\n          size={Size.Small}\n          enterSearch={() => {\n            searchEntered = true;\n          }}\n          removeSearch={() => {\n            search = '';\n          }}\n          setSearchTerm={(term) => {\n            search = term;\n          }}\n        />\n      </div>,\n    );\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\n\n    // Test click on icon and check that input field shows\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\n    expect(getByTestId('QuickSearch')).toBeDefined();\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\n  });\n});\n"],"file":"QuickSearch.test.js"}

package/dist/esm/InputFields/components/SearchBarInput.js

@@ -114,7 +114,6 @@ SearchBarInput.propTypes = {
   placeholder: _pt.string,
   disabled: _pt.bool,
   onKeyDown: _pt.func,
-  size: _pt.oneOf(['small', 'medium']),
   setTabbedHere: _pt.func.isRequired,
   onBlur: _pt.func
 };

package/dist/esm/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/dist/esm/List/ListRow.js

@@ -10,6 +10,7 @@ import { TooltipWrapper } from '../Tooltips';
 import { DropdownButton } from '../Dropdown';
 import { SystemIcons } from '../icons';
 import { Size } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
 const Row = styled.div`
   display: flex;
   flex-direction: row;
@@ -36,18 +37,20 @@ const Row = styled.div`
   &.interactive:hover:not(.in-action):not(.disabled) {
     background-color: ${COLORS.primary_20};
     color: ${COLORS.primary_700};
+    z-index: ${Z_INDEXES.hover};
   }
 
   &.interactive:active:not(.in-action):not(.disabled) {
     background-color: ${COLORS.primary_100};
     color: ${COLORS.primary_800};
     box-shadow: none;
+    z-index: ${Z_INDEXES.active};
   }
 
   &.interactive:focus {
     outline: none;
     box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
-    z-index: 1;
+    z-index: ${Z_INDEXES.focus};
   }
 
   &.disabled {

package/dist/esm/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","inAction","setInAction","useState","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA,MAAMC,GAAG,GAAGZ,MAAM,CAACa,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BZ,MAAM,CAACa,WAAY;AAChD;AACA;AACA;AACA,WAAWb,MAAM,CAACc,WAAY;AAC9B,sBAAsBd,MAAM,CAACe,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBf,MAAM,CAACgB,UAAW;AAC1C,aAAahB,MAAM,CAACiB,WAAY;AAChC;AACA;AACA;AACA,wBAAwBjB,MAAM,CAACkB,WAAY;AAC3C,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAenB,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACH,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACF,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQnB,iBAAiB,CAACD,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AA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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: 1;\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","focus","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","inAction","setInAction","useState","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,GAAG,GAAGb,MAAM,CAACc,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6Bb,MAAM,CAACc,WAAY;AAChD;AACA;AACA;AACA,WAAWd,MAAM,CAACe,WAAY;AAC9B,sBAAsBf,MAAM,CAACgB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBhB,MAAM,CAACiB,UAAW;AAC1C,aAAajB,MAAM,CAACkB,WAAY;AAChC,eAAeP,SAAS,CAACQ,KAAM;AAC/B;AACA;AACA;AACA,wBAAwBnB,MAAM,CAACoB,WAAY;AAC3C,aAAapB,MAAM,CAACqB,WAAY;AAChC;AACA,eAAeV,SAAS,CAACW,MAAO;AAChC;AACA;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACY,KAAM;AAC/B;AACA;AACA;AACA;AACA,eAAevB,MAAM,CAACwB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,iBAAiB,CAACH,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQtB,iBAAiB,CAACF,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;A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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/esm/LoadingIndicator/LoadingIndicator.js

@@ -2,6 +2,7 @@ import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../styles';
+import { Size } from '../types';
 import { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';
 const LoadingWrapper = styled.div`
   height: 100%;
@@ -27,16 +28,16 @@ const LoadingWrapper = styled.div`
 `;
 
 const LoadingIndicator = ({
-  size = 'medium',
+  size = Size.Medium,
   color = COLORS.primary
 }) => {
   switch (size) {
-    case 'medium':
+    case Size.Medium:
       return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(LoadingMedium, {
         color: color
       }));
 
-    case 'small':
+    case Size.Small:
       return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(LoadingSmall, {
         color: color
       }));
@@ -49,7 +50,6 @@ const LoadingIndicator = ({
 };
 
 LoadingIndicator.propTypes = {
-  size: _pt.oneOf(['small', 'medium']),
   color: _pt.string
 };
 export default LoadingIndicator;

package/dist/esm/LoadingIndicator/LoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["React","styled","COLORS","LoadingMedium","LoadingSmall","LoadingWrapper","div","LoadingIndicator","size","color","primary"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,kCAA5C;AAEA,MAAMC,cAAc,GAAGJ,MAAM,CAACK,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CArBA;;AA4BA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,IAAI,GAAG,QAAT;AAAmBC,EAAAA,KAAK,GAAGP,MAAM,CAACQ;AAAlC,CAAD,KAAwE;AAC/F,UAAQF,IAAR;AACE,SAAK,QAAL;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAK,OAAL;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEA;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAJED,EAAAA,I,aAAO,O,EAAU,Q;AACjBC,EAAAA,K;;AA0BF,eAAeF,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: 'small' | 'medium';\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = 'medium', color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case 'medium':\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case 'small':\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.js"}
+{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["React","styled","COLORS","Size","LoadingMedium","LoadingSmall","LoadingWrapper","div","LoadingIndicator","size","Medium","color","primary","Small"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,kCAA5C;AAEA,MAAMC,cAAc,GAAGL,MAAM,CAACM,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CArBA;;AA4BA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,IAAI,GAAGN,IAAI,CAACO,MAAd;AAAsBC,EAAAA,KAAK,GAAGT,MAAM,CAACU;AAArC,CAAD,KAA2E;AAClG,UAAQH,IAAR;AACE,SAAKN,IAAI,CAACO,MAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAKR,IAAI,CAACU,KAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEF;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAHEA,EAAAA,K;;AA0BF,eAAeH,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: Size.Small | Size.Medium;\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case Size.Medium:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.js"}

package/dist/esm/Modals/ModalContainer.js

@@ -9,6 +9,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import ReactModal from 'react-modal';
 import { BOXSHADOWS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
 const ModalContainerStyles = {
   content: {
     top: '50%',
@@ -29,7 +30,7 @@ const ModalContainerStyles = {
 const modalTransitions = `
 .ReactModal__Overlay {
   opacity: 0;
-  z-index: 100;
+  z-index: ${Z_INDEXES.backdrop};
 }
 
 .ReactModal__Overlay--after-open {
@@ -38,6 +39,7 @@ const modalTransitions = `
 }
 
 .ReactModal__Content{
+  z-index: ${Z_INDEXES.modal};
   opacity:0;
   transform: translate(-50%, -50%) scale(1.1, 1.1);
 }
@@ -58,6 +60,11 @@ const modalTransitions = `
   transform: translate(-50%, -50%) scale(1.1, 1.1);
   transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);
 }
+
+.ReactModal__Body--open,
+.ReactModal__Html--open {
+  overflow: hidden;
+}
 `;
 
 class ModalContainer extends React.Component {

package/dist/esm/Modals/ModalContainer.js.map

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

package/dist/esm/Modals/ModalDialog.js

@@ -5,8 +5,10 @@ import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
 import { Size } from '../types';
 import ModalContainer from './ModalContainer';
-import { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';
+import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader } from './ModalStyles';
 import { ModalNote } from './ModalNote';
+import { TooltipWrapper } from '../Tooltips';
+import { HyperLink } from '..';
 export const ModalDialog = ({
   size,
   isModalOpen,
@@ -14,6 +16,7 @@ export const ModalDialog = ({
   title,
   topImage,
   buttons,
+  leftFooterAction,
   backButton,
   closeAction,
   submitAction,
@@ -22,8 +25,6 @@ export const ModalDialog = ({
   note,
   state
 }) => {
-  const [tooltipOpen, setTooltipOpen] = React.useState(false);
-
   const getMinWidth = () => {
     switch (size) {
       case Size.Small:
@@ -124,6 +125,23 @@ export const ModalDialog = ({
     }
   };
 
+  const ModalTootip = tooltip => {
+    return /*#__PURE__*/React.createElement(TooltipWrapper, {
+      size: Size.XSmall,
+      align: "center",
+      position: "top",
+      withArrow: false,
+      label: tooltip
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: () => {}
+    }, /*#__PURE__*/React.createElement(Help, {
+      size: "24px",
+      color: COLORS.neutral_600
+    })));
+  };
+
   const ModalCloseButton = onClick => {
     return /*#__PURE__*/React.createElement(CloseButtonWrapper, {
       hasImage: !!topImage,
@@ -156,9 +174,54 @@ export const ModalDialog = ({
     }
   };
 
-  buttons?.reverse();
-  const lastLeftButton = buttons?.find(a => a.position === 'left');
-  buttons?.reverse();
+  const getLeftActionIconElement = icon => {
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px'
+    });
+  };
+
+  const LeftFooterAction = leftFooterAction => {
+    const {
+      text,
+      actionType,
+      disabled,
+      icon,
+      action
+    } = leftFooterAction;
+
+    switch (actionType) {
+      case 'button':
+        return /*#__PURE__*/React.createElement(Button, {
+          id: 'left-action-button',
+          type: leftFooterAction?.type,
+          disabled: disabled,
+          loading: leftFooterAction?.loading,
+          icon: icon,
+          size: size,
+          onClick: action,
+          variant: leftFooterAction?.variant ?? 'secondary',
+          style: {
+            order: -1,
+            marginRight: 'auto'
+          }
+        }, text);
+
+      case 'hyperlink':
+        return /*#__PURE__*/React.createElement(HyperLink, {
+          id: "left-action-hyperlink",
+          className: "footer-action",
+          href: leftFooterAction.href,
+          disabled: disabled,
+          variant: "default"
+        }, icon && getLeftActionIconElement(icon), text);
+
+      case 'note':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "footer-action note"
+        }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
+    }
+  };
+
   return /*#__PURE__*/React.createElement(ModalContainer, {
     showModal: isModalOpen,
     closeModal: closeModalAndClearInput,
@@ -175,15 +238,9 @@ export const ModalDialog = ({
   }, /*#__PURE__*/React.createElement("img", {
     src: topImage,
     alt: "Modal top"
-  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
-    id: "tooltip"
-  }, /*#__PURE__*/React.createElement("div", {
-    onMouseOver: () => setTooltipOpen(true),
-    onMouseOut: () => setTooltipOpen(false)
-  }, /*#__PURE__*/React.createElement(Help, {
-    size: "24px",
-    color: COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalBody, {
+  }), /*#__PURE__*/React.createElement(ModalHeaderActionsWithImage, {
+    hasBackButton: !!backButton
+  }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalTitleSection, null, /*#__PURE__*/React.createElement(FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalBody, {
     size: size
   }, children), note && /*#__PURE__*/React.createElement(ModalNote, {
     note: note,
@@ -199,23 +256,15 @@ export const ModalDialog = ({
     size: size,
     onClick: b.action,
     type: b.type,
-    variant: b.variant,
-    style: b.position === 'left' ? {
-      order: -1,
-      marginRight: b === lastLeftButton ? 'auto' : undefined
-    } : undefined
-  }, b.text))))));
+    variant: b.variant
+  }, b.text)), leftFooterAction && LeftFooterAction(leftFooterAction)))));
 };
 ModalDialog.propTypes = {
   isModalOpen: _pt.bool.isRequired,
   closeModalAndClearInput: _pt.any.isRequired,
   title: _pt.string,
   topImage: _pt.any,
-  buttons: _pt.arrayOf(_pt.shape({
-    action: _pt.oneOfType([_pt.func, _pt.func]),
-    text: _pt.string.isRequired,
-    position: _pt.oneOf(['left', 'right'])
-  })),
+  buttons: _pt.array,
   tooltip: _pt.string,
   backButton: _pt.func,
   closeAction: _pt.func.isRequired,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalTitleSection","StyledModalHeader","ModalNote","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","backButton","closeAction","submitAction","tooltip","children","note","state","tooltipOpen","setTooltipOpen","useState","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","reverse","lastLeftButton","find","a","position","neutral_600","map","b","i","id","disabled","loading","action","type","variant","order","marginRight","undefined","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SystemIcon, SystemIcons } from '..';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  ModalBody,\n  ModalFooter,\n  ModalTitleSection,\n  StyledModalHeader\n} from './ModalStyles';\n\nimport {ModalNote} from './ModalNote';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n  position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  buttons?.reverse();\n  const lastLeftButton = buttons?.find(a => a.position === 'left');\n  buttons?.reverse();\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\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(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          { note && <ModalNote note={note} state={state} size={size}/> }\n\n          <ModalFooter size={size}>\n              {buttons?.map((b, i) => (\n                  <Button key={b.id || i}\n                          id={b.id}\n                          disabled={b.disabled}\n                          loading={b.loading}\n                          size={size}\n                          onClick={b.action}\n                          type={b.type}\n                          variant={b.variant}\n                          style={\n                            b.position === 'left'\n                              ? {\n                                order: -1,\n                                marginRight: b === lastLeftButton ? 'auto' : undefined\n                              }\n                              : undefined\n                          }>\n                    {b.text}\n                  </Button>\n              ))}\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":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <TooltipWrapper size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n          <Help size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n      </TooltipWrapper>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/esm/Modals/ModalStyles.js

@@ -35,38 +35,37 @@ export const Column = styled.div`
   height: 100%;
 `;
 export const ModalTitleSection = styled.section`
+  word-break: break-word;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
+export const ModalHeaderActionsWithImage = styled.div`
+  display: flex;
+  flex-direction: ${props => !props.hasBackButton ? 'row-reverse' : 'row'};
+  justify-content: space-between;
+  width: 100%;
+  z-index: 1;
+`;
+export const ModalHeaderActions = styled.div`
+  display: flex;
+  margin: -12px -12px 0 0;
+`;
+export const FlexContainer = styled.div`
   display: flex;
-  div#tooltip {
-    margin-left: 12px;
-  }
 `;
 export const CloseButtonWrapper = styled.div`
   button {
     ${props => props.hasImage ? css`
-            position: absolute;
-            right: 0;
-            top: 0;
-            margin: -12px !important;
+            margin: -12px -12px 0 0 !important;
           ` : css`
-            position: absolute;
-            top: 0;
-            right: 0;
             left: unset;
-            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;
           `}
   }
 `;
 export const BackButtonWrapper = styled.div`
   button {
-    ${props => props.hasImage ? css`
-            left: 0;
-            top: 0;
-            position: absolute;
-            margin: -12px 0 0 -12px !important;
-          ` : css`
-            position: unset;
-            margin: -12px 0 0 -12px !important;
-          `}
+    margin: -12px 0 0 -12px !important;
   }
 `;
 export const ModalTitle = styled.h5`
@@ -77,7 +76,7 @@ export const ModalTitle = styled.h5`
 export const ModalNoteSection = styled.section`
   background-color: ${props => getBackgroundColor(props.state)};
   font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
-  margin-top: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px'};
+  margin-top: ${props => props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px'};
   margin-bottom: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px'};
   display: flex;
   flex-direction: row;
@@ -85,7 +84,7 @@ export const ModalNoteSection = styled.section`
   border-radius: 2px;
 
   span {
-    display:block;
+    display: block;
     width: 80%;
     margin-left: 8px;
     color: ${props => getNoteMessageColor(props.state)};
@@ -110,6 +109,19 @@ export const ModalFooter = styled.section`
   justify-content: flex-end;
 
   gap: ${props => props?.size === 'large' ? `16px` : '8px'};
+
+  .footer-action {
+    order: -1;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
+    gap: ${props => props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px'};
+  }
+
+  .footer-action.note {
+    color: ${COLORS.neutral_600};
+  }
 `;
 export const getBackgroundColor = state => {
   switch (state) {