@laerdal/life-react-components 1.2.2-dev.9.full → 1.3.0

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":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAAQC,MAAR,EAAgBC,UAAhB,QAAiC,WAAjC;AAEA,SAAQC,aAAR,EAAuBC,KAAvB,EAA8BC,IAA9B,QAAyC,kCAAzC;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,UAA5B,EAAwCC,kBAAxC,EAA4DC,WAA5D,QAA8E,WAA9E;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SACEC,iBADF,EAEEC,kBAFF,EAGEC,MAHF,EAIEC,SAJF,EAKEC,WALF,EAMEC,iBANF,EAOEC,iBAPF,QAQO,eARP;AAUA,SAAQC,SAAR,QAAwB,aAAxB;AAuBA,OAAO,MAAMC,WAAmD,GAAG,CAAC;AAClEC,EAAAA,IADkE;AAElEC,EAAAA,WAFkE;AAGlEC,EAAAA,uBAHkE;AAIlEC,EAAAA,KAJkE;AAKlEC,EAAAA,QALkE;AAMlEC,EAAAA,OANkE;AAOlEC,EAAAA,UAPkE;AAQlEC,EAAAA,WARkE;AASlEC,EAAAA,YATkE;AAUlEC,EAAAA,OAVkE;AAWlEC,EAAAA,QAXkE;AAYlEC,EAAAA,IAZkE;AAalEC,EAAAA;AAbkE,CAAD,KAc7D;AACJ,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCpC,KAAK,CAACqC,QAAN,CAAwB,KAAxB,CAAtC;;AAEA,QAAMC,WAAW,GAAG,MAAM;AACxB,YAAQhB,IAAR;AACE,WAAKX,IAAI,CAAC4B,KAAV;AACE,eAAO,OAAP;;AACF,WAAK5B,IAAI,CAAC6B,KAAV;AACE,eAAO,OAAP;;AACF,WAAK7B,IAAI,CAAC8B,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,QAAMC,WAAW,GAAG,MAAM;AACxB,YAAQpB,IAAR;AACE,WAAKX,IAAI,CAAC4B,KAAV;AACE,eAAO,OAAP;;AACF,WAAK5B,IAAI,CAAC6B,KAAV;AACE,eAAO,OAAP;;AACF,WAAK7B,IAAI,CAAC8B,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,QAAME,cAAc,GAAG,MAAM;AAC3B,YAAQrB,IAAR;AACE,WAAKX,IAAI,CAAC4B,KAAV;AACE,eAAO,GAAP;;AACF,WAAK5B,IAAI,CAAC8B,MAAV;AACE,eAAO,GAAP;;AACF,WAAK9B,IAAI,CAAC6B,KAAV;AACE,eAAO,GAAP;;AACF;AACE,eAAO,GAAP;AARJ;AAUD,GAXD;;AAaA,QAAMI,eAAe,GAAG,MAAM;AAC5B,YAAQtB,IAAR;AACE,WAAKX,IAAI,CAAC4B,KAAV;AACE,eAAO,MAAP;;AACF,WAAK5B,IAAI,CAAC8B,MAAV;AACE,eAAO,MAAP;;AACF,WAAK9B,IAAI,CAAC6B,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,MAAP;AARJ;AAUD,GAXD;;AAaA,QAAMK,UAAU,GAAG,MAAM;AACvB,YAAQvB,IAAR;AACE,WAAKX,IAAI,CAAC4B,KAAV;AACE,eAAO,eAAP;;AACF,WAAK5B,IAAI,CAAC8B,MAAV;AACE,eAAO,gBAAP;;AACF,WAAK9B,IAAI,CAAC6B,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,gBAAP;AARJ;AAUD,GAXD;;AAaA,QAAMM,UAAU,GAAG,CAACrB,KAAD,EAAgBH,IAAhB,KAAgC;AACjD,YAAQA,IAAR;AACE,WAAKX,IAAI,CAAC4B,KAAV;AACE,4BAAO,oBAAC,UAAD;AAAY,UAAA,SAAS,EAAE9B,kBAAkB,CAACsC;AAA1C,WAAiDtB,KAAjD,CAAP;;AACF,WAAKd,IAAI,CAAC8B,MAAV;AACE,4BAAO,oBAAC,UAAD;AAAY,UAAA,SAAS,EAAEhC,kBAAkB,CAACsC;AAA1C,WAAiDtB,KAAjD,CAAP;;AACF,WAAKd,IAAI,CAAC6B,KAAV;AACE,4BAAO,oBAAC,WAAD;AAAa,UAAA,SAAS,EAAE/B,kBAAkB,CAACsC;AAA3C,WAAkDtB,KAAlD,CAAP;;AACF;AACE,4BAAO,oBAAC,UAAD;AAAY,UAAA,SAAS,EAAEhB,kBAAkB,CAACsC;AAA1C,WAAiDtB,KAAjD,CAAP;AARJ;AAUD,GAXD;;AAaA,QAAMuB,gBAAgB,GAAIC,OAAD,IAAkB;AACzC,wBACE,oBAAC,kBAAD;AAAoB,MAAA,QAAQ,EAAE,CAAC,CAACvB,QAAhC;AAA0C,MAAA,IAAI,EAAEJ;AAAhD,oBACE,oBAAC,UAAD;AAAY,MAAA,OAAO,EAAC,WAApB;AAAgC,MAAA,KAAK,EAAC,UAAtC;AAAiD,MAAA,MAAM,EAAE,MAAM2B,OAAO,EAAtE;AAA0E,MAAA,YAAY,EAAE;AAAxF,oBACE,oBAAC,KAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAE3C,MAAM,CAAC4C;AAAjC,MADF,CADF,CADF;AAOD,GARD;;AAUA,QAAMC,eAAe,GAAG,MAAM;AAC5B,QAAIvB,UAAJ,EAAgB;AACd,0BACE,oBAAC,iBAAD;AAAmB,QAAA,QAAQ,EAAE,CAAC,CAACF,QAA/B;AAAyC,QAAA,IAAI,EAAEJ;AAA/C,sBACE,oBAAC,UAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,MAAM,EAAE,MAAMM,UAAU,EAAzE;AAA6E,QAAA,YAAY,EAAE;AAA3F,sBACE,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAC,MAApB;AAA2B,QAAA,KAAK,EAAEtB,MAAM,CAAC4C;AAAzC,QADF,CADF,CADF;AAOD;AACF,GAVD;;AAYAvB,EAAAA,OAAO,EAAEyB,OAAT;AACA,QAAMC,cAAc,GAAG1B,OAAO,EAAE2B,IAAT,CAAcC,CAAC,IAAIA,CAAC,CAACC,QAAF,KAAe,MAAlC,CAAvB;AACA7B,EAAAA,OAAO,EAAEyB,OAAT;AAEA,sBACE,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAE7B,WAA3B;AAAwC,IAAA,UAAU,EAAEC,uBAApD;AAA6E,IAAA,QAAQ,EAAEc,WAAW,EAAlG;AAAsG,IAAA,QAAQ,EAAEI,WAAW,EAA3H;AAA+H,IAAA,WAAW,EAAC,MAA3I;AAAkJ,IAAA,OAAO,EAAEG,UAAU;AAArK,kBACE,oBAAC,MAAD,qBACE;AAAM,IAAA,QAAQ,EAAEf;AAAhB,KACGJ,QAAQ,iBACP,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAEJ,IAAzB;AAA+B,IAAA,MAAM,EAAEqB,cAAc,EAArD;AAAyD,IAAA,YAAY,EAAEC,eAAe;AAAtF,kBACE;AAAK,IAAA,GAAG,EAAElB,QAAV;AAAoB,IAAA,GAAG,EAAC;AAAxB,IADF,EAEGyB,eAAe,EAFlB,EAGGH,gBAAgB,CAACnB,WAAD,CAHnB,CAFJ,eAQE,oBAAC,iBAAD,QACG,CAACH,QAAD,IAAayB,eAAe,EAD/B,EAEG1B,KAAK,IAAIqB,UAAU,CAACrB,KAAD,EAAQH,IAAR,CAFtB,EAGGS,OAAO,iBACN;AAAK,IAAA,EAAE,EAAC;AAAR,kBACE;AAAK,IAAA,WAAW,EAAE,MAAMK,cAAc,CAAC,IAAD,CAAtC;AAA8C,IAAA,UAAU,EAAE,MAAMA,cAAc,CAAC,KAAD;AAA9E,kBACE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAE9B,MAAM,CAACmD;AAAhC,IADF,CADF,EAIGtB,WAAW,iBAAI,kCAAOJ,OAAP,CAJlB,CAJJ,EAWG,CAACL,QAAD,IAAasB,gBAAgB,CAACnB,WAAD,CAXhC,CARF,eAsBE,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEP;AAAjB,KAAwBU,QAAxB,CAtBF,EAwBIC,IAAI,iBAAI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEA,IAAjB;AAAuB,IAAA,KAAK,EAAEC,KAA9B;AAAqC,IAAA,IAAI,EAAEZ;AAA3C,IAxBZ,eA0BE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAEA;AAAnB,KACKK,OAAO,EAAE+B,GAAT,CAAa,CAACC,CAAD,EAAIC,CAAJ,kBACV,oBAAC,MAAD;AAAQ,IAAA,GAAG,EAAED,CAAC,CAACE,EAAF,IAAQD,CAArB;AACQ,IAAA,EAAE,EAAED,CAAC,CAACE,EADd;AAEQ,IAAA,QAAQ,EAAEF,CAAC,CAACG,QAFpB;AAGQ,IAAA,OAAO,EAAEH,CAAC,CAACI,OAHnB;AAIQ,IAAA,IAAI,EAAEzC,IAJd;AAKQ,IAAA,OAAO,EAAEqC,CAAC,CAACK,MALnB;AAMQ,IAAA,IAAI,EAAEL,CAAC,CAACM,IANhB;AAOQ,IAAA,OAAO,EAAEN,CAAC,CAACO,OAPnB;AAQQ,IAAA,KAAK,EACHP,CAAC,CAACH,QAAF,KAAe,MAAf,GACI;AACAW,MAAAA,KAAK,EAAE,CAAC,CADR;AAEAC,MAAAA,WAAW,EAAET,CAAC,KAAKN,cAAN,GAAuB,MAAvB,GAAgCgB;AAF7C,KADJ,GAKIA;AAdd,KAgBGV,CAAC,CAACW,IAhBL,CADH,CADL,CA1BF,CADF,CADF,CADF;AAuDD,CA9KM;;AAbL/C,EAAAA,W;AACAC,EAAAA,uB;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,O;AAXAqC,IAAAA,M;AACAM,IAAAA,I;AACAd,IAAAA,Q,aAAW,M,EAAS,O;;AAUpBzB,EAAAA,O;AACAH,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAG,EAAAA,I;AACAC,EAAAA,K;;AAmLF,eAAeb,WAAf","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","ModalHoverModifier","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  ModalHoverModifier\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      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" 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      </ModalHoverModifier>\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            {leftFooterAction && LeftFooterAction(leftFooterAction)}\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          </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,42 @@ export const Column = styled.div`
   height: 100%;
 `;
 export const ModalTitleSection = styled.section`
+  word-break: break-word;
   display: flex;
-  div#tooltip {
-    margin-left: 12px;
+  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;
+`;
+export const ModalHoverModifier = styled.div`
+  button:hover {
+    cursor: help !important;
   }
 `;
 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 +81,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 +89,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 +114,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) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","CloseButtonWrapper","hasImage","Small","Large","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types'\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; 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 - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 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    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          `\n        : css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          `\n        : css`\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          `}\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{state:string, size?:string}>`\n  background-color: ${(props)=> getBackgroundColor(props.state)};\n  font-size: ${(props)=> (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  margin-bottom: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display:block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props)=> getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n`;\n\nexport const getBackgroundColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_100;\n    case 'warning': return COLORS.warning_100;\n    case 'critical': return COLORS.critical_100;\n    default: return COLORS.primary_100;\n  }\n}\n\nexport const getNoteMessageColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_700;\n    case 'warning': return COLORS.warning_700;\n    case 'critical': return COLORS.critical_700;\n    default: return COLORS.primary_700;\n  }\n}"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","Small","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; 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 - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 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    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/esm/Modals/ModalTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ModalTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ModalTypes.js"}

package/dist/esm/NavItem/NavItem.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { COLORS } from '../styles';
 import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 const NavItem = styled.div`
   ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
 
@@ -25,6 +26,7 @@ const NavItem = styled.div`
   }
 
   &.active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
     background-color: ${COLORS.neutral_20};
     color: ${COLORS.neutral_800};
     &:after {
@@ -41,6 +43,7 @@ const NavItem = styled.div`
   }
 
   &:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
     background-color: ${COLORS.primary_20};
     color: ${COLORS.primary_700};
     &:after {
@@ -49,6 +52,7 @@ const NavItem = styled.div`
   }
 
   &:focus:not(.disabled) {
+    z-index: ${Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     outline: none;
     &:after {

package/dist/esm/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","NavItem","div","Regular","neutral_600","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","primary_20","primary_700","primary_500"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AAEA,MAAMC,OAAO,GAAGJ,MAAM,CAACK,GAAI;AAC3B,IAAIH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BL,MAAM,CAACM,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBN,MAAM,CAACO,UAAW;AAC1C,aAAaP,MAAM,CAACQ,WAAY;AAChC;AACA,0BAA0BR,MAAM,CAACS,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaT,MAAM,CAACU,WAAY;AAChC,wBAAwBV,MAAM,CAACW,WAAY;AAC3C;AACA,0BAA0BX,MAAM,CAACW,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBX,MAAM,CAACY,UAAW;AAC1C,aAAaZ,MAAM,CAACa,WAAY;AAChC;AACA,0BAA0Bb,MAAM,CAACS,WAAY;AAC7C;AACA;AACA;AACA;AACA,8BAA8BT,MAAM,CAACc,WAAY;AACjD;AACA;AACA,0BAA0Bd,MAAM,CAACS,WAAY;AAC7C;AACA;AACA,CAtDA;AAwDA,eAAeN,OAAf","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}
+{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItem","div","Regular","neutral_600","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,OAAO,GAAGL,MAAM,CAACM,GAAI;AAC3B,IAAIJ,iBAAiB,CAACC,kBAAkB,CAACI,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,SAAS,CAACK,MAAO;AAChC,wBAAwBR,MAAM,CAACS,UAAW;AAC1C,aAAaT,MAAM,CAACU,WAAY;AAChC;AACA,0BAA0BV,MAAM,CAACW,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaX,MAAM,CAACY,WAAY;AAChC,wBAAwBZ,MAAM,CAACa,WAAY;AAC3C;AACA,0BAA0Bb,MAAM,CAACa,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeV,SAAS,CAACW,KAAM;AAC/B,wBAAwBd,MAAM,CAACe,UAAW;AAC1C,aAAaf,MAAM,CAACgB,WAAY;AAChC;AACA,0BAA0BhB,MAAM,CAACW,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeR,SAAS,CAACc,KAAM;AAC/B,8BAA8BjB,MAAM,CAACkB,WAAY;AACjD;AACA;AACA,0BAA0BlB,MAAM,CAACW,WAAY;AAC7C;AACA;AACA,CAzDA;AA2DA,eAAeP,OAAf","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}

package/dist/esm/NotificationDot/NotificationDot.js

@@ -1,24 +1,25 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
+import { Size } from '../types';
 import { COLORS } from '..';
 const ContentWrapper = styled.div`
-  width: ${props => props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px'};
-  height: ${props => props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px'};
-  padding: ${props => props.size === 'small' ? '3px' : props.size === 'large' ? '4px' : '4px'};
+  width: ${props => props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px'};
+  height: ${props => props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px'};
+  padding: ${props => props.size === Size.Small ? '3px' : props.size === Size.Large ? '4px' : '4px'};
   box-sizing: border-box;
 `;
 const Content = styled.div`
   background-color: ${props => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};
-  height: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
-  width: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
-  border-radius: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
-  border: ${props => props.size === 'small' ? '2px solid ' + COLORS.white : props.size === 'large' ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white};
+  height: ${props => props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px'};
+  width: ${props => props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px'};
+  border-radius: ${props => props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px'};
+  border: ${props => props.size === Size.Small ? '2px solid ' + COLORS.white : props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white};
   box-sizing: border-box;
 `;
 
 const NotificationDot = ({
-  size = 'medium',
+  size = Size.Medium,
   variant,
   testId
 }) => {
@@ -33,7 +34,6 @@ const NotificationDot = ({
 };
 
 NotificationDot.propTypes = {
-  size: _pt.string,
   variant: _pt.oneOf(['critical', 'positive']).isRequired,
   testId: _pt.string
 };

package/dist/esm/NotificationDot/NotificationDot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","COLORS","ContentWrapper","div","props","size","Content","variant","correct_500","critical_500","white","NotificationDot","testId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,IAArB;AAQA,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAuB;AACrD,WAAYC,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAQ;AACnG,YAAaD,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAQ;AACpG,aAAcD,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,KAAzB,GAAkCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,KAAzB,GAAiC,KAAO;AAClG;AACA,CALA;AAOA,MAAMC,OAAO,GAAGN,MAAM,CAACG,GAAuB;AAC9C,sBAAuBC,KAAD,IAAWA,KAAK,CAACG,OAAN,KAAkB,UAAlB,GAA+BN,MAAM,CAACO,WAAtC,GAAoDP,MAAM,CAACQ,YAAa;AACzG,YAAaL,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAQ;AACpG,WAAYD,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAQ;AACnG,mBAAoBD,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAQ;AAC3G,YAAaD,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,eAAeJ,MAAM,CAACS,KAA/C,GAAwDN,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,eAAeJ,MAAM,CAACS,KAA/C,GAAuD,eAAeT,MAAM,CAACS,KAAO;AACnK;AACA,CAPA;;AASA,MAAMC,eAA2D,GAAG,CAAC;AAACN,EAAAA,IAAI,GAAG,QAAR;AAAkBE,EAAAA,OAAlB;AAA2BK,EAAAA;AAA3B,CAAD,KAAwC;AAC1G,sBACE,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEP,IAAtB;AAA4B,IAAA,OAAO,EAAEE;AAArC,kBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEF,IAAf;AAAqB,IAAA,OAAO,EAAEE,OAA9B;AAAuC,mBAAaK;AAApD,IADF,CADF;AAKD,CAND;;;AArBEP,EAAAA,I;AACAE,EAAAA,O,aAAS,U,EAAa,U;AACtBK,EAAAA,M;;AA2BF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: string;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  height: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  padding: ${(props) => props.size === 'small' ? '3px' : (props.size === 'large' ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  width: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border: ${(props) => props.size === 'small' ? '2px solid ' + COLORS.white : (props.size === 'large' ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = 'medium', variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}
+{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","Size","COLORS","ContentWrapper","div","props","size","Small","Large","Content","variant","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,MAAR,QAAqB,IAArB;AAQA,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAuB;AACrD,WAAYC,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AACzG,YAAaH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AAC1G,aAAcH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,KAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,KAA5B,GAAoC,KAAO;AACxG;AACA,CALA;AAOA,MAAMC,OAAO,GAAGT,MAAM,CAACI,GAAuB;AAC9C,sBAAuBC,KAAD,IAAWA,KAAK,CAACK,OAAN,KAAkB,UAAlB,GAA+BR,MAAM,CAACS,WAAtC,GAAoDT,MAAM,CAACU,YAAa;AACzG,YAAaP,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AAC1G,WAAYH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AACzG,mBAAoBH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AACjH,YAAaH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,eAAeL,MAAM,CAACW,KAAlD,GAA2DR,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,eAAeN,MAAM,CAACW,KAAlD,GAA0D,eAAeX,MAAM,CAACW,KAAO;AACzK;AACA,CAPA;;AASA,MAAMC,eAA2D,GAAG,CAAC;AAACR,EAAAA,IAAI,GAAGL,IAAI,CAACc,MAAb;AAAqBL,EAAAA,OAArB;AAA8BM,EAAAA;AAA9B,CAAD,KAA2C;AAC7G,sBACE,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEV,IAAtB;AAA4B,IAAA,OAAO,EAAEI;AAArC,kBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEJ,IAAf;AAAqB,IAAA,OAAO,EAAEI,OAA9B;AAAuC,mBAAaM;AAApD,IADF,CADF;AAKD,CAND;;;AApBEN,EAAAA,O,aAAS,U,EAAa,U;AACtBM,EAAAA,M;;AA2BF,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}

package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import 'jest-styled-components';
 import { NotificationDot } from '..';
+import { Size } from '../../types';
 import COLORS from '../../styles/colors';
 describe('<NotificationDot />', () => {
   it('renders positive small notification dot', async () => {
@@ -9,7 +10,7 @@ describe('<NotificationDot />', () => {
       getByTestId
     } = render( /*#__PURE__*/React.createElement(NotificationDot, {
       variant: "positive",
-      size: "small",
+      size: Size.Small,
       testId: "testId"
     }));
     expect(getByTestId('testId')).toHaveStyleRule('background-color', COLORS.correct_500);
@@ -20,7 +21,7 @@ describe('<NotificationDot />', () => {
       getByTestId
     } = render( /*#__PURE__*/React.createElement(NotificationDot, {
       variant: "critical",
-      size: "large",
+      size: Size.Large,
       testId: "testId"
     }));
     expect(getByTestId('testId')).toHaveStyleRule('background-color', COLORS.critical_500);

package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["React","render","NotificationDot","COLORS","describe","it","getByTestId","expect","toHaveStyleRule","correct_500","white","critical_500"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,eAAT,QAAgC,IAAhC;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AAEAC,QAAQ,CAAC,qBAAD,EAAuB,MAAI;AAC/BC,EAAAA,EAAE,CAAC,yCAAD,EAA4C,YAAY;AACtD,UAAK;AAACC,MAAAA;AAAD,QAAgBL,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,IAAI,EAAC,OAAzC;AAAiD,MAAA,MAAM,EAAC;AAAxD,MADuB,CAA3B;AAGAM,IAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEL,MAAM,CAACM,WAAxE;AACAF,IAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeL,MAAM,CAACO,KAA9E;AACH,GANC,CAAF;AAQAL,EAAAA,EAAE,CAAC,yCAAD,EAA4C,YAAY;AACtD,UAAK;AAACC,MAAAA;AAAD,QAAgBL,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,IAAI,EAAC,OAAzC;AAAiD,MAAA,MAAM,EAAC;AAAxD,MADuB,CAA3B;AAGAM,IAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEL,MAAM,CAACQ,YAAxE;AACAJ,IAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeL,MAAM,CAACO,KAA9E;AACH,GANC,CAAF;AAQAL,EAAAA,EAAE,CAAC,0CAAD,EAA6C,YAAY;AACvD,UAAK;AAACC,MAAAA;AAAD,QAAgBL,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,MAAM,EAAC;AAA3C,MADuB,CAA3B;AAGAM,IAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEL,MAAM,CAACQ,YAAxE;AACAJ,IAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeL,MAAM,CAACO,KAA9E;AACH,GANC,CAAF;AAOH,CAxBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { NotificationDot } from '..';\nimport COLORS from '../../styles/colors';\n\ndescribe('<NotificationDot />',()=>{\n    it('renders positive small notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='positive' size='small' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.correct_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n\n    it('renders critical large notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' size='large' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);\n    });\n\n    it('renders critical medium notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n});"],"file":"NotificationDot.test.js"}
+{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["React","render","NotificationDot","Size","COLORS","describe","it","getByTestId","Small","expect","toHaveStyleRule","correct_500","white","Large","critical_500"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,eAAT,QAAgC,IAAhC;AACA,SAASC,IAAT,QAAqB,aAArB;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AAEAC,QAAQ,CAAC,qBAAD,EAAuB,MAAI;AAC/BC,EAAAA,EAAE,CAAC,yCAAD,EAA4C,YAAY;AACtD,UAAK;AAACC,MAAAA;AAAD,QAAgBN,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,IAAI,EAAEE,IAAI,CAACK,KAA/C;AAAsD,MAAA,MAAM,EAAC;AAA7D,MADuB,CAA3B;AAGAC,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,kBAA9C,EAAiEN,MAAM,CAACO,WAAxE;AACAF,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,QAA9C,EAAwD,eAAeN,MAAM,CAACQ,KAA9E;AACH,GANC,CAAF;AAQAN,EAAAA,EAAE,CAAC,yCAAD,EAA4C,YAAY;AACtD,UAAK;AAACC,MAAAA;AAAD,QAAgBN,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,IAAI,EAAEE,IAAI,CAACU,KAA/C;AAAsD,MAAA,MAAM,EAAC;AAA7D,MADuB,CAA3B;AAGAJ,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,kBAA9C,EAAiEN,MAAM,CAACU,YAAxE;AACAL,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,QAA9C,EAAwD,eAAeN,MAAM,CAACQ,KAA9E;AACH,GANC,CAAF;AAQAN,EAAAA,EAAE,CAAC,0CAAD,EAA6C,YAAY;AACvD,UAAK;AAACC,MAAAA;AAAD,QAAgBN,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,MAAM,EAAC;AAA3C,MADuB,CAA3B;AAGAQ,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,kBAA9C,EAAiEN,MAAM,CAACU,YAAxE;AACAL,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,QAA9C,EAAwD,eAAeN,MAAM,CAACQ,KAA9E;AACH,GANC,CAAF;AAOH,CAxBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { NotificationDot } from '..';\nimport { Size } from '../../types';\nimport COLORS from '../../styles/colors';\n\ndescribe('<NotificationDot />',()=>{\n    it('renders positive small notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='positive' size={Size.Small} testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.correct_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n\n    it('renders critical large notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' size={Size.Large} testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);\n    });\n\n    it('renders critical medium notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n});"],"file":"NotificationDot.test.js"}

package/dist/esm/Paginator/Paginator.js

@@ -3,8 +3,11 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
-import { ChevronLeft, ChevronRight, MoreHorizontal } from '../icons/systemicons/SystemIcons';
+import { ChevronLeft, ChevronRight } from '../icons/systemicons/SystemIcons';
 import { ComponentMStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { useHistory } from 'react-router';
+import { IconButton } from '../Button';
 const Container = styled.nav`
   margin: 20px 0;
   display: flex;
@@ -22,7 +25,7 @@ const Items = styled.ul`
 `;
 const Item = styled.li`
   width: 48px;
-  height: 45px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,29 +37,30 @@ const Item = styled.li`
     width: 100%;
     height: 100%;
     text-decoration: none;
-    border-bottom: 3px solid transparent;
 
     ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
 
     &:focus,
     &:focus-within {
+      z-index: ${Z_INDEXES.focus};
       box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
       outline-width: 0;
     }
   }
-
   & > a:hover {
+    z-index: ${Z_INDEXES.hover};
     color: ${COLORS.primary_800};
     background-color: ${COLORS.primary_20};
     box-shadow: none;
   }
   & > a:active {
+    z-index: ${Z_INDEXES.active};
     color: ${COLORS.primary_700};
     background-color: ${COLORS.primary_100};
     box-shadow: none;
   }
-
   & > a.active {
+    z-index: ${Z_INDEXES.active};
     color: ${COLORS.neutral_800};
     background-color: ${COLORS.neutral_20};
     cursor: default;
@@ -72,22 +76,36 @@ const Item = styled.li`
   }
 `;
 const Dots = styled(Item)`
-  padding-top: 1%;
   cursor: not-allowed;
+  &:after{
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+    content: '...';
+  }
 `;
 const ItemContent = styled('div')`
-  width: 100%;
   text-align:center;
-  display: table-cell;
-  vertical-align:middle;
-`;
-const ItemSelected = styled('div')`
+  display: flex;
   justify-content: center;
-  margin: 0 20%;
-  border-radius: 4px;
-  text-align: center;
-  height: 4px;
-  background-color: ${COLORS.primary_500}
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  
+  &.active:after{
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    width: 32px;
+    border-radius: 4px;
+    height: 4px;
+    background-color: ${COLORS.primary_500}
+  }
+  &.active:hover:after{
+    background-color: ${COLORS.primary_700}
+  }
+  &.active:active:after{
+    background-color: ${COLORS.primary_800}
+  }
 `;
 
 const Step = ({
@@ -96,30 +114,22 @@ const Step = ({
   disabled = false,
   page,
   onPageChange,
-  testId
+  id
 }) => {
-  if (disabled) return /*#__PURE__*/React.createElement(Item, {
-    style: {
-      cursor: 'not-allowed'
-    },
-    "data-testid": `${testId}_Disabled`
-  }, up ? /*#__PURE__*/React.createElement(ChevronRight, {
-    size: "20",
-    color: COLORS.neutral_300
-  }) : /*#__PURE__*/React.createElement(ChevronLeft, {
-    size: "20",
-    color: COLORS.neutral_300
-  }));
-  return /*#__PURE__*/React.createElement(Item, {
-    "data-testid": `${testId}_Enabled`
-  }, /*#__PURE__*/React.createElement(NavLink, {
-    to: target,
-    onClick: () => {
-      if (onPageChange) onPageChange(page);
-    }
-  }, up ? /*#__PURE__*/React.createElement(ChevronRight, {
-    size: "20"
-  }) : /*#__PURE__*/React.createElement(ChevronLeft, null)));
+  const history = useHistory();
+
+  const handleButtonClick = () => {
+    history.push(target);
+    onPageChange && onPageChange(page);
+  };
+
+  return /*#__PURE__*/React.createElement(IconButton, {
+    id: id,
+    action: event => handleButtonClick(),
+    variant: 'secondary',
+    shape: 'circular',
+    disabled: disabled
+  }, up ? /*#__PURE__*/React.createElement(ChevronRight, null) : /*#__PURE__*/React.createElement(ChevronLeft, null));
 };
 
 const Paginator = ({
@@ -159,29 +169,31 @@ const Paginator = ({
     onPageChange: () => {
       if (onPageChange) onPageChange(currentPage - 1);
     },
-    testId: "Test-StepLeft"
+    id: "paginator-left"
   }), pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(NavLink, {
     to: `${baseUrl}/1`,
     onClick: () => {
       if (onPageChange) onPageChange(1);
     }
-  }, /*#__PURE__*/React.createElement(ItemContent, null, /*#__PURE__*/React.createElement("span", null, "1"), currentPage === 1 && /*#__PURE__*/React.createElement(ItemSelected, null)))), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/React.createElement(Dots, null, /*#__PURE__*/React.createElement(MoreHorizontal, {
-    color: COLORS.neutral_600
-  })), pages.map(page => /*#__PURE__*/React.createElement(Item, {
+  }, /*#__PURE__*/React.createElement(ItemContent, {
+    className: currentPage === 1 ? 'active' : ''
+  }, /*#__PURE__*/React.createElement("span", null, "1")))), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/React.createElement(Dots, null), pages.map(page => /*#__PURE__*/React.createElement(Item, {
     key: page
   }, /*#__PURE__*/React.createElement(NavLink, {
     to: `${baseUrl}/${page}`,
     onClick: () => {
       if (onPageChange) onPageChange(page);
     }
-  }, /*#__PURE__*/React.createElement(ItemContent, null, /*#__PURE__*/React.createElement("span", null, page), currentPage === page && /*#__PURE__*/React.createElement(ItemSelected, null))))), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/React.createElement(Dots, null, /*#__PURE__*/React.createElement(MoreHorizontal, {
-    color: COLORS.neutral_600
-  })), pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(NavLink, {
+  }, /*#__PURE__*/React.createElement(ItemContent, {
+    className: currentPage === page ? 'active' : ''
+  }, /*#__PURE__*/React.createElement("span", null, page))))), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/React.createElement(Dots, null), pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(NavLink, {
     to: `${baseUrl}/${pageCount}`,
     onClick: () => {
       if (onPageChange) onPageChange(pageCount);
     }
-  }, /*#__PURE__*/React.createElement(ItemContent, null, /*#__PURE__*/React.createElement("span", null, pageCount), currentPage === pageCount && /*#__PURE__*/React.createElement(ItemSelected, null)))), /*#__PURE__*/React.createElement(Step, {
+  }, /*#__PURE__*/React.createElement(ItemContent, {
+    className: currentPage === pageCount ? 'active' : ''
+  }, /*#__PURE__*/React.createElement("span", null, pageCount)))), /*#__PURE__*/React.createElement(Step, {
     up: true,
     target: `${baseUrl}/${currentPage + 1}`,
     page: currentPage + 1,
@@ -189,7 +201,7 @@ const Paginator = ({
     onPageChange: () => {
       if (onPageChange) onPageChange(currentPage + 1);
     },
-    testId: "Test-StepRight"
+    id: "paginator-right"
   })));
 };