@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full

package/dist/esm/Paginator/Paginator.js

@@ -44,34 +44,30 @@ const Item = styled.li`
       outline-width: 0;
     }
   }
+
   & > a:hover {
     color: ${COLORS.primary_800};
     background-color: ${COLORS.primary_20};
-    border-bottom: 3px solid transparent;
     box-shadow: none;
   }
   & > a:active {
     color: ${COLORS.primary_700};
     background-color: ${COLORS.primary_100};
-    border-bottom: 3px solid transparent;
     box-shadow: none;
   }
 
   & > a.active {
     color: ${COLORS.neutral_800};
-    border-bottom: 3px solid ${COLORS.primary_500};
     background-color: ${COLORS.neutral_20};
     cursor: default;
     box-shadow: none;
     &:hover {
       color: ${COLORS.primary_800};
       background-color: ${COLORS.primary_20};
-      border-bottom: 3px solid ${COLORS.primary_500};
     }
     &:active {
       color: ${COLORS.primary_700};
       background-color: ${COLORS.primary_100};
-      border-bottom: 3px solid ${COLORS.primary_500};
     }
   }
 `;
@@ -79,6 +75,20 @@ const Dots = styled(Item)`
   padding-top: 1%;
   cursor: not-allowed;
 `;
+const ItemContent = styled('div')`
+  width: 100%;
+  text-align:center;
+  display: table-cell;
+  vertical-align:middle;
+`;
+const ItemSelected = styled('div')`
+  justify-content: center;
+  margin: 0 20%;
+  border-radius: 4px;
+  text-align: center;
+  height: 4px;
+  background-color: ${COLORS.primary_500}
+`;
 
 const Step = ({
   up = true,
@@ -155,7 +165,7 @@ const Paginator = ({
     onClick: () => {
       if (onPageChange) onPageChange(1);
     }
-  }, "1")), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/React.createElement(Dots, null, /*#__PURE__*/React.createElement(MoreHorizontal, {
+  }, /*#__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, {
     key: page
@@ -164,14 +174,14 @@ const Paginator = ({
     onClick: () => {
       if (onPageChange) onPageChange(page);
     }
-  }, page))), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/React.createElement(Dots, null, /*#__PURE__*/React.createElement(MoreHorizontal, {
+  }, /*#__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, {
     to: `${baseUrl}/${pageCount}`,
     onClick: () => {
       if (onPageChange) onPageChange(pageCount);
     }
-  }, pageCount)), /*#__PURE__*/React.createElement(Step, {
+  }, /*#__PURE__*/React.createElement(ItemContent, null, /*#__PURE__*/React.createElement("span", null, pageCount), currentPage === pageCount && /*#__PURE__*/React.createElement(ItemSelected, null)))), /*#__PURE__*/React.createElement(Step, {
     up: true,
     target: `${baseUrl}/${currentPage + 1}`,
     page: currentPage + 1,

package/dist/esm/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronLeft","ChevronRight","MoreHorizontal","ComponentMStyling","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","primary_800","primary_20","primary_700","primary_100","neutral_800","primary_500","neutral_20","Dots","Step","up","target","disabled","page","onPageChange","testId","cursor","neutral_300","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    border-bottom: 3px solid transparent;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ${COLORS.neutral_800};\n    border-bottom: 3px solid ${COLORS.primary_500};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  padding-top: 1%;\n  cursor: not-allowed;\n`;\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  testId,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  testId?: string;\n}) => {\n  if (disabled)\n    return (\n      <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n        {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n      </Item>\n    );\n  return (\n    <Item data-testid={`${testId}_Enabled`}>\n      <NavLink\n        to={target}\n        onClick={() => {\n          if (onPageChange) onPageChange(page);\n        }}>\n        {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n      </NavLink>\n    </Item>\n  );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step\n          up={false}\n          target={`${baseUrl}/${currentPage - 1}`}\n          page={currentPage - 1}\n          disabled={currentPage === 1}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage - 1);\n          }}\n          testId=\"Test-StepLeft\"\n        />\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n              1\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n              {page}\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n              {pageCount}\n            </NavLink>\n          </Item>\n        )}\n        <Step\n          up\n          target={`${baseUrl}/${currentPage + 1}`}\n          page={currentPage + 1}\n          disabled={currentPage === pageCount}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage + 1);\n          }}\n          testId=\"Test-StepRight\"\n        />\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}
+{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronLeft","ChevronRight","MoreHorizontal","ComponentMStyling","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","primary_800","primary_20","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","ItemSelected","primary_500","Step","up","target","disabled","page","onPageChange","testId","cursor","neutral_300","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAQC,WAAR,EAAqBC,YAArB,EAAmCC,cAAnC,QAAwD,kCAAxD;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,SAAS,GAAGT,MAAM,CAACU,GAAI;AAC7B;AACA;AACA;AACA;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB;AACA;AACA,CARA;AAUA,MAAMC,KAAK,GAAGZ,MAAM,CAACa,EAAG;AACxB;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,IAAI,GAAGd,MAAM,CAACe,EAAG;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,iBAAiB,CAACJ,kBAAkB,CAACY,OAApB,EAA6Bb,MAAM,CAACc,WAApC,CAAiD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAad,MAAM,CAACe,WAAY;AAChC,wBAAwBf,MAAM,CAACgB,UAAW;AAC1C;AACA;AACA;AACA,aAAahB,MAAM,CAACiB,WAAY;AAChC,wBAAwBjB,MAAM,CAACkB,WAAY;AAC3C;AACA;AACA;AACA;AACA,aAAalB,MAAM,CAACmB,WAAY;AAChC,wBAAwBnB,MAAM,CAACoB,UAAW;AAC1C;AACA;AACA;AACA,eAAepB,MAAM,CAACe,WAAY;AAClC,0BAA0Bf,MAAM,CAACgB,UAAW;AAC5C;AACA;AACA,eAAehB,MAAM,CAACiB,WAAY;AAClC,0BAA0BjB,MAAM,CAACkB,WAAY;AAC7C;AACA;AACA,CAlDA;AAoDA,MAAMG,IAAI,GAAGxB,MAAM,CAACc,IAAD,CAAO;AAC1B;AACA;AACA,CAHA;AAKA,MAAMW,WAAW,GAAGzB,MAAM,CAAC,KAAD,CAAQ;AAClC;AACA;AACA;AACA;AACA,CALA;AAMA,MAAM0B,YAAY,GAAG1B,MAAM,CAAC,KAAD,CAAQ;AACnC;AACA;AACA;AACA;AACA;AACA,sBAAsBG,MAAM,CAACwB,WAAY;AACzC,CAPA;;AAgBA,MAAMC,IAAI,GAAG,CAAC;AACZC,EAAAA,EAAE,GAAG,IADO;AAEZC,EAAAA,MAAM,GAAG,EAFG;AAGZC,EAAAA,QAAQ,GAAG,KAHC;AAIZC,EAAAA,IAJY;AAKZC,EAAAA,YALY;AAMZC,EAAAA;AANY,CAAD,KAcP;AACJ,MAAIH,QAAJ,EACE,oBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE;AAAEI,MAAAA,MAAM,EAAE;AAAV,KAAb;AAAwC,mBAAc,GAAED,MAAO;AAA/D,KACGL,EAAE,gBAAG,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,IAAnB;AAAwB,IAAA,KAAK,EAAE1B,MAAM,CAACiC;AAAtC,IAAH,gBAA2D,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,IAAlB;AAAuB,IAAA,KAAK,EAAEjC,MAAM,CAACiC;AAArC,IADhE,CADF;AAKF,sBACE,oBAAC,IAAD;AAAM,mBAAc,GAAEF,MAAO;AAA7B,kBACE,oBAAC,OAAD;AACE,IAAA,EAAE,EAAEJ,MADN;AAEE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIG,YAAJ,EAAkBA,YAAY,CAACD,IAAD,CAAZ;AACnB;AAJH,KAKGH,EAAE,gBAAG,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAAH,gBAAgC,oBAAC,WAAD,OALrC,CADF,CADF;AAWD,CAhCD;;AAkCA,MAAMQ,SAAS,GAAG,CAAC;AAAEC,EAAAA,SAAS,GAAG,CAAd;AAAiBC,EAAAA,WAAW,GAAG,CAA/B;AAAkCC,EAAAA,OAAO,GAAG,EAA5C;AAAgDP,EAAAA;AAAhD,CAAD,KAAoF;AACpG,QAAMQ,KAAK,GAAG,EAAd;AACA,MAAIC,IAAI,GAAG,CAAX;AACA,MAAIC,EAAE,GAAG,CAAT;AACA,MAAIL,SAAS,KAAK,CAAlB,EAAqB,OAAO,IAAP;;AAErB,MAAIA,SAAS,GAAG,CAAhB,EAAmB;AACjB,QAAIC,WAAW,IAAI,CAAf,IAAoBA,WAAW,IAAID,SAAS,GAAG,CAAnD,EAAsD;AACpDI,MAAAA,IAAI,GAAGH,WAAW,GAAG,CAArB;AACAI,MAAAA,EAAE,GAAGJ,WAAW,GAAG,CAAnB;AACD,KAHD,MAGO,IAAID,SAAS,GAAG,CAAZ,GAAgB,CAAhB,IAAqBC,WAAW,GAAGD,SAAS,GAAG,CAAnD,EAAsD;AAC3DI,MAAAA,IAAI,GAAGJ,SAAS,GAAG,CAAnB;AACAK,MAAAA,EAAE,GAAGL,SAAS,GAAG,CAAjB;AACD;;AACD,QAAIK,EAAE,GAAGL,SAAT,EAAoB;AAClBK,MAAAA,EAAE,GAAGL,SAAL;AACD;;AACD,SAAK,IAAIM,CAAC,GAAGF,IAAb,EAAmBE,CAAC,IAAID,EAAxB,EAA4BC,CAAC,IAAI,CAAjC,EAAoC;AAClCH,MAAAA,KAAK,CAACI,IAAN,CAAWD,CAAX;AACD;AACF;;AAED,sBACE,oBAAC,SAAD,qBACE,oBAAC,KAAD,qBACE,oBAAC,IAAD;AACE,IAAA,EAAE,EAAE,KADN;AAEE,IAAA,MAAM,EAAG,GAAEJ,OAAQ,IAAGD,WAAW,GAAG,CAAE,EAFxC;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,CAHtB;AAIE,IAAA,QAAQ,EAAEA,WAAW,KAAK,CAJ5B;AAKE,IAAA,YAAY,EAAE,MAAM;AAClB,UAAIN,YAAJ,EAAkBA,YAAY,CAACM,WAAW,GAAG,CAAf,CAAZ;AACnB,KAPH;AAQE,IAAA,MAAM,EAAC;AART,IADF,EAWGE,KAAK,CAACK,SAAN,CAAgBC,IAAI,IAAIA,IAAI,KAAK,CAAjC,MAAwC,CAAC,CAAzC,iBACC,oBAAC,IAAD,qBACE,oBAAC,OAAD;AACE,IAAA,EAAE,EAAG,GAAEP,OAAQ,IADjB;AAEE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIP,YAAJ,EAAkBA,YAAY,CAAC,CAAD,CAAZ;AACnB;AAJH,kBAKI,oBAAC,WAAD,qBACC,sCADD,EAEEM,WAAW,KAAK,CAAhB,iBAAqB,oBAAC,YAAD,OAFvB,CALJ,CADF,CAZJ,EAyBGA,WAAW,IAAI,CAAf,IAAoBD,SAAS,GAAG,CAAhC,IAAqCA,SAArC,IAAkDG,KAAK,CAACK,SAAN,CAAgBC,IAAI,IAAIA,IAAI,KAAK,CAAjC,MAAwC,CAAC,CAA3F,iBACC,oBAAC,IAAD,qBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAE5C,MAAM,CAACc;AAA9B,IADF,CA1BJ,EA8BGwB,KAAK,CAACO,GAAN,CAAUhB,IAAI,iBACb,oBAAC,IAAD;AAAM,IAAA,GAAG,EAAEA;AAAX,kBACE,oBAAC,OAAD;AACE,IAAA,EAAE,EAAG,GAAEQ,OAAQ,IAAGR,IAAK,EADzB;AAEE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIC,YAAJ,EAAkBA,YAAY,CAACD,IAAD,CAAZ;AACnB;AAJH,kBAKI,oBAAC,WAAD,qBACC,kCAAOA,IAAP,CADD,EAEEO,WAAW,KAAKP,IAAhB,iBAAwB,oBAAC,YAAD,OAF1B,CALJ,CADF,CADD,CA9BH,EA4CGM,SAAS,GAAG,CAAZ,IAAiBC,WAAW,IAAID,SAAS,GAAG,CAA5C,iBACC,oBAAC,IAAD,qBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAEnC,MAAM,CAACc;AAA9B,IADF,CA7CJ,EAiDGwB,KAAK,CAACK,SAAN,CAAgBC,IAAI,IAAIA,IAAI,KAAKT,SAAjC,MAAgD,CAAC,CAAjD,IAAsDA,SAAS,KAAK,CAApE,iBACC,oBAAC,IAAD,qBACE,oBAAC,OAAD;AACE,IAAA,EAAE,EAAG,GAAEE,OAAQ,IAAGF,SAAU,EAD9B;AAEE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIL,YAAJ,EAAkBA,YAAY,CAACK,SAAD,CAAZ;AACnB;AAJH,kBAKI,oBAAC,WAAD,qBACC,kCAAOA,SAAP,CADD,EAEEC,WAAW,KAAKD,SAAhB,iBAA6B,oBAAC,YAAD,OAF/B,CALJ,CADF,CAlDJ,eA+DE,oBAAC,IAAD;AACE,IAAA,EAAE,MADJ;AAEE,IAAA,MAAM,EAAG,GAAEE,OAAQ,IAAGD,WAAW,GAAG,CAAE,EAFxC;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,CAHtB;AAIE,IAAA,QAAQ,EAAEA,WAAW,KAAKD,SAJ5B;AAKE,IAAA,YAAY,EAAE,MAAM;AAClB,UAAIL,YAAJ,EAAkBA,YAAY,CAACM,WAAW,GAAG,CAAf,CAAZ;AACnB,KAPH;AAQE,IAAA,MAAM,EAAC;AART,IA/DF,CADF,CADF;AA8ED,CApGD;;;AAxCED,EAAAA,S;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAP,EAAAA,Y;;AA2IF,eAAeI,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    border-bottom: 3px solid transparent;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n\n  & > a:hover {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  padding-top: 1%;\n  cursor: not-allowed;\n`;\n\nconst ItemContent = styled('div')`\n  width: 100%;\n  text-align:center;\n  display: table-cell;\n  vertical-align:middle;\n`\nconst ItemSelected = styled('div')`\n  justify-content: center;\n  margin: 0 20%;\n  border-radius: 4px;\n  text-align: center;\n  height: 4px;\n  background-color: ${COLORS.primary_500}\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  testId,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  testId?: string;\n}) => {\n  if (disabled)\n    return (\n      <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n        {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n      </Item>\n    );\n  return (\n    <Item data-testid={`${testId}_Enabled`}>\n      <NavLink\n        to={target}\n        onClick={() => {\n          if (onPageChange) onPageChange(page);\n        }}>\n        {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n      </NavLink>\n    </Item>\n  );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step\n          up={false}\n          target={`${baseUrl}/${currentPage - 1}`}\n          page={currentPage - 1}\n          disabled={currentPage === 1}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage - 1);\n          }}\n          testId=\"Test-StepLeft\"\n        />\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent>\n                 <span>1</span>\n                 {currentPage === 1 && <ItemSelected />}\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent>\n                 <span>{page}</span>\n                 {currentPage === page && <ItemSelected />}\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent>\n                 <span>{pageCount}</span>\n                 {currentPage === pageCount && <ItemSelected />}\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step\n          up\n          target={`${baseUrl}/${currentPage + 1}`}\n          page={currentPage + 1}\n          disabled={currentPage === pageCount}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage + 1);\n          }}\n          testId=\"Test-StepRight\"\n        />\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

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

@@ -34,7 +34,7 @@ describe('<Paginator />', () => {
     expect(queryByText('1')).toBeDefined();
     expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();
     expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();
-    expect(queryByText('6')).toHaveProperty('href'); // Click on stepper to the right. Expect to be taken from 1 to 2
+    expect(queryByText('6')).toBeDefined(); // Click on stepper to the right. Expect to be taken from 1 to 2
 
     getByTestId('Test-StepRight_Enabled').children[0].click();
     expect(history.location.pathname).toBe('/2'); // Click directly on 6. Expect to be taken to /6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Paginator/__tests__/Paginator.test.tsx"],"names":["React","render","Paginator","Router","createMemoryHistory","jest","mock","requireActual","useLocation","pathname","describe","it","history","route","push","queryByText","getByTestId","expect","toBeDefined","toHaveProperty","children","click","location","toBe"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAgC,OAAhC;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,SAAT,QAA0B,UAA1B;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,mBAAT,QAAoC,SAApC;AACA,OAAO,wBAAP;AAEAC,IAAI,CAACC,IAAL,CAAU,kBAAV,EAA8B,sCACzBD,IAAI,CAACE,aAAL,CAAmB,kBAAnB,CADyB;AAE5BC,EAAAA,WAAW,EAAE,OAAO;AAClBC,IAAAA,QAAQ,EAAE;AADQ,GAAP;AAFe,EAA9B;AAOAC,QAAQ,CAAC,eAAD,EAAkB,MAAM;AAC9BC,EAAAA,EAAE,CAAC,mBAAD,EAAsB,YAAY;AAClC,UAAMC,OAAO,GAAGR,mBAAmB,EAAnC;AACA,UAAMS,KAAK,GAAG,IAAd;AACAD,IAAAA,OAAO,CAACE,IAAR,CAAaD,KAAb;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+Bf,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAEW;AAAjB,oBACE,oBAAC,SAAD;AAAW,MAAA,SAAS,EAAE,CAAtB;AAAyB,MAAA,WAAW,EAAE,CAAtC;AAAyC,MAAA,OAAO,EAAC,EAAjD;AAAoD,MAAA,YAAY,EAAE,MAAM,CAAE;AAA1E,MADF,CADyC,CAA3C;AAKAK,IAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBI,cAAzB,CAAwC,MAAxC,EAZkC,CAclC;;AACCH,IAAAA,WAAW,CAAC,wBAAD,CAAX,CAAsCI,QAAtC,CAA+C,CAA/C,CAAD,CAAmEC,KAAnE;AACAJ,IAAAA,MAAM,CAACL,OAAO,CAACU,QAAR,CAAiBb,QAAlB,CAAN,CAAkCc,IAAlC,CAAuC,IAAvC,EAhBkC,CAkBlC;;AACAR,IAAAA,WAAW,CAAC,GAAD,CAAX,EAAkBM,KAAlB;AACAJ,IAAAA,MAAM,CAACL,OAAO,CAACU,QAAR,CAAiBb,QAAlB,CAAN,CAAkCc,IAAlC,CAAuC,IAAvC;AACD,GArBC,CAAF;AAsBD,CAvBO,CAAR","sourcesContent":["import React, { useState } from 'react';\nimport { render } from '@testing-library/react';\nimport { Paginator } from '../index';\nimport { Router } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport 'jest-styled-components';\n\njest.mock('react-router-dom', () => ({\n  ...jest.requireActual('react-router-dom'),\n  useLocation: () => ({\n    pathname: 'localhost:3000/test',\n  }),\n}));\n\ndescribe('<Paginator />', () => {\n  it('Renders Paginator', async () => {\n    const history = createMemoryHistory();\n    const route = '/1';\n    history.push(route);\n    const { queryByText, getByTestId } = render(\n      <Router history={history}>\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\n      </Router>,\n    );\n    expect(queryByText('1')).toBeDefined();\n    expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();\n    expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();\n    expect(queryByText('6')).toHaveProperty('href');\n\n    // Click on stepper to the right. Expect to be taken from 1 to 2\n    (getByTestId('Test-StepRight_Enabled').children[0] as HTMLElement).click();\n    expect(history.location.pathname).toBe('/2');\n\n    // Click directly on 6. Expect to be taken to /6\n    queryByText('6')?.click();\n    expect(history.location.pathname).toBe('/6');\n  });\n});\n"],"file":"Paginator.test.js"}
+{"version":3,"sources":["../../../../src/Paginator/__tests__/Paginator.test.tsx"],"names":["React","render","Paginator","Router","createMemoryHistory","jest","mock","requireActual","useLocation","pathname","describe","it","history","route","push","queryByText","getByTestId","expect","toBeDefined","children","click","location","toBe"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAgC,OAAhC;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,SAAT,QAA0B,UAA1B;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,mBAAT,QAAoC,SAApC;AACA,OAAO,wBAAP;AAEAC,IAAI,CAACC,IAAL,CAAU,kBAAV,EAA8B,sCACzBD,IAAI,CAACE,aAAL,CAAmB,kBAAnB,CADyB;AAE5BC,EAAAA,WAAW,EAAE,OAAO;AAClBC,IAAAA,QAAQ,EAAE;AADQ,GAAP;AAFe,EAA9B;AAOAC,QAAQ,CAAC,eAAD,EAAkB,MAAM;AAC9BC,EAAAA,EAAE,CAAC,mBAAD,EAAsB,YAAY;AAClC,UAAMC,OAAO,GAAGR,mBAAmB,EAAnC;AACA,UAAMS,KAAK,GAAG,IAAd;AACAD,IAAAA,OAAO,CAACE,IAAR,CAAaD,KAAb;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+Bf,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAEW;AAAjB,oBACE,oBAAC,SAAD;AAAW,MAAA,SAAS,EAAE,CAAtB;AAAyB,MAAA,WAAW,EAAE,CAAtC;AAAyC,MAAA,OAAO,EAAC,EAAjD;AAAoD,MAAA,YAAY,EAAE,MAAM,CAAE;AAA1E,MADF,CADyC,CAA3C;AAKAK,IAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB,GAZkC,CAclC;;AACCF,IAAAA,WAAW,CAAC,wBAAD,CAAX,CAAsCG,QAAtC,CAA+C,CAA/C,CAAD,CAAmEC,KAAnE;AACAH,IAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC,EAhBkC,CAkBlC;;AACAP,IAAAA,WAAW,CAAC,GAAD,CAAX,EAAkBK,KAAlB;AACAH,IAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC;AACD,GArBC,CAAF;AAsBD,CAvBO,CAAR","sourcesContent":["import React, { useState } from 'react';\nimport { render } from '@testing-library/react';\nimport { Paginator } from '../index';\nimport { Router } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport 'jest-styled-components';\n\njest.mock('react-router-dom', () => ({\n  ...jest.requireActual('react-router-dom'),\n  useLocation: () => ({\n    pathname: 'localhost:3000/test',\n  }),\n}));\n\ndescribe('<Paginator />', () => {\n  it('Renders Paginator', async () => {\n    const history = createMemoryHistory();\n    const route = '/1';\n    history.push(route);\n    const { queryByText, getByTestId } = render(\n      <Router history={history}>\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\n      </Router>,\n    );\n    expect(queryByText('1')).toBeDefined();\n    expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();\n    expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();\n    expect(queryByText('6')).toBeDefined();\n\n    // Click on stepper to the right. Expect to be taken from 1 to 2\n    (getByTestId('Test-StepRight_Enabled').children[0] as HTMLElement).click();\n    expect(history.location.pathname).toBe('/2');\n\n    // Click directly on 6. Expect to be taken to /6\n    queryByText('6')?.click();\n    expect(history.location.pathname).toBe('/6');\n  });\n});\n"],"file":"Paginator.test.js"}

package/dist/esm/Table/Table.js

@@ -10,6 +10,7 @@ import { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } f
 import { SystemIcons as icons } from '../icons/index';
 import { DropdownFilter } from '../Dropdown/index';
 import { IconButton, Button } from '../Button/index';
+import { Size } from '../types';
 /**
  * Import custom styles.
  */
@@ -327,7 +328,7 @@ const Table = ({
       className: `${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `,
       title: column.shortenText && row[column.key]
     }, column.isLink && row[column.key] ? /*#__PURE__*/React.createElement(Button, {
-      size: "small",
+      size: Size.Small,
       variant: "text",
       onClick: event => onLinkClick(row, column.key, event),
       style: column.colorFn && {

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

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

package/dist/esm/Tabs/TabLink.js

@@ -33,7 +33,7 @@ const StyledTabLink = styled(NavLink)`
   }
 
   &.active {
-    background-color: ${COLORS.white};
+    background-color: ${COLORS.neutral_20};
   }
   &.active:hover {
     background-color: ${COLORS.primary_20};

package/dist/esm/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","COLORS","StyledTabLink","neutral_600","props","disabled","neutral_100","white","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapper","div","NotificationDot","critical_500","TopWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: column;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.white};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  margin: 0 0 0 20px;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst NotificationDot = styled.div`\n  position: absolute;\n  right: 12px;\n  top: calc(50% - 12px);\n  background-color: ${COLORS.critical_500};\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  border: 2px solid ${COLORS.white};\n  margin: 6px;\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TopWrapper>\n        <span>{requiredLine}</span>\n        {showNotificationDot && <NotificationDot data-testid=\"NotificationDot\" />}\n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapper>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapper>\n      ) : optionalLine ? (\n        <div>\n          <span>{optionalLine}</span>\n        </div>\n      ) : (\n        <></>\n      )}\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
+{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","COLORS","StyledTabLink","neutral_600","props","disabled","neutral_100","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapper","div","NotificationDot","critical_500","TopWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: column;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  margin: 0 0 0 20px;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst NotificationDot = styled.div`\n  position: absolute;\n  right: 12px;\n  top: calc(50% - 12px);\n  background-color: ${COLORS.critical_500};\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  border: 2px solid ${COLORS.white};\n  margin: 6px;\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TopWrapper>\n        <span>{requiredLine}</span>\n        {showNotificationDot && <NotificationDot data-testid=\"NotificationDot\" />}\n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapper>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapper>\n      ) : optionalLine ? (\n        <div>\n          <span>{optionalLine}</span>\n        </div>\n      ) : (\n        <></>\n      )}\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/esm/Toasters/Toast.js

@@ -11,6 +11,7 @@ import styled, { keyframes } from 'styled-components';
 import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
 import { BOXSHADOWS, COLORS } from '../styles';
 import { Close } from '../icons/systemicons/SystemIcons';
+import { Size } from '../types';
 import { Button, IconButton } from '../Button';
 import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
 const LoaderAnimationKeyframes = keyframes`
@@ -261,7 +262,7 @@ const Toast = ({
   }, opts.icon && /*#__PURE__*/React.createElement(IconContainer, null, opts.icon), /*#__PURE__*/React.createElement(TextContainer, {
     className: 'description'
   }, content), opts.action && /*#__PURE__*/React.createElement(ActionButtons, null, opts.action.map((action, i) => /*#__PURE__*/React.createElement(Button, {
-    size: 'small',
+    size: Size.Small,
     variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
     colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
     key: i,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Button","IconButton","ComponentSStyling","ComponentTextStyle","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  & a {\n    color: ${COLORS.white};\n    font-weight: bold;\n  }\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      color: ${COLORS.black};\n      font-weight: bold;\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n\n  a {\n    display: contents;\n    text-decoration: none;\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  setTimeout(() => elementRef?.current?.focus());\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={'small'}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}
+{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AACA,SAASC,eAAT,EAA0BC,UAA1B,EAAsCC,mBAAtC,EAA2DC,aAA3D,QAAgF,UAAhF;AACA,SAASC,UAAT,EAAqBC,MAArB,QAA+C,WAA/C;AACA,SAASC,KAAT,QAAsB,kCAAtB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,WAAnC;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AAEA,MAAMC,wBAAwB,GAAGb,SAAU;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;AASA,MAAMc,MAAM,GAAGf,MAAM,CAACgB,GAA0B;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,wBAAyB,IAAIG,KAAD,IAAWA,KAAK,CAACC,QAAS;AACrE;AACA,MAAMf,UAAU,CAACA,UAAU,CAACgB,KAAZ,CAAmB;AACnC,4CAA4CZ,MAAM,CAACa,WAAY,SAAQb,MAAM,CAACc,WAAY;AAC1F;AACA;AACA;AACA,MAAMlB,UAAU,CAACA,UAAU,CAACmB,KAAZ,CAAmB;AACnC,4CAA4Cf,MAAM,CAACgB,WAAY,SAAQhB,MAAM,CAACiB,KAAM;AACpF;AACA;AACA;AACA,MAAMrB,UAAU,CAACA,UAAU,CAACsB,IAAZ,CAAkB;AAClC,4CAA4ClB,MAAM,CAACmB,WAAY,SAAQnB,MAAM,CAACoB,WAAY;AAC1F;AACA;AACA;AACA,MAAMxB,UAAU,CAACA,UAAU,CAACyB,KAAZ,CAAmB;AACnC,4CAA4CrB,MAAM,CAACsB,WAAY,SAAQtB,MAAM,CAACuB,WAAY;AAC1F;AACA;AACA;AACA,MAAM3B,UAAU,CAACA,UAAU,CAAC4B,MAAZ,CAAoB;AACpC,4CAA4CxB,MAAM,CAACyB,WAAY,SAAQzB,MAAM,CAAC0B,WAAY;AAC1F;AACA;AACA;AACA,MAAM9B,UAAU,CAACA,UAAU,CAAC+B,GAAZ,CAAiB;AACjC,4CAA4C3B,MAAM,CAAC4B,YAAa,SAAQ5B,MAAM,CAAC6B,YAAa;AAC5F;AACA;AACA,CAxCA;AA0CA,MAAMC,SAAS,GAAGrC,MAAM,CAACgB,GAAqI;AAC9J,gBAAgBV,UAAU,CAACgC,YAAa;AACxC;AACA;AACA,eAAgBrB,KAAD,IAAWA,KAAK,CAACsB,SAAN,CAAgBtC,SAAU,IAAIgB,KAAD,IAAWA,KAAK,CAACsB,SAAN,CAAgBrB,QAAS,IAAID,KAAD,IAAWA,KAAK,CAACsB,SAAN,CAAgBC,MAAO;AAChI,eAAgBvB,KAAD,IAAWA,KAAK,CAACsB,SAAN,CAAgBE,SAAU;AACpD;AACA;AACA;AACA,eAAgBxB,KAAD,IAAYA,KAAK,CAACyB,SAAN,GAAkB,GAAlB,GAAwB,MAAQ,IAAIzB,KAAD,IAAYA,KAAK,CAAC0B,UAAN,GAAmB,KAAnB,GAA2B,GAAK;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAapC,MAAM,CAACiB,KAAM;AAC1B;AACA;AACA;AACA,IAAIZ,iBAAiB,CAACC,kBAAkB,CAAC+B,OAApB,EAA6BrC,MAAM,CAACiB,KAApC,CAA2C;AAChE;AACA,MAAMrB,UAAU,CAACA,UAAU,CAACgB,KAAZ,CAAmB;AACnC,wBAAwBZ,MAAM,CAACc,WAAY;AAC3C;AACA;AACA,MAAMlB,UAAU,CAACA,UAAU,CAACmB,KAAZ,CAAmB;AACnC,wBAAwBf,MAAM,CAACiB,KAAM;AACrC,aAAajB,MAAM,CAACsC,KAAM;AAC1B;AACA;AACA,eAAetC,MAAM,CAACsC,KAAM;AAC5B;AACA;AACA;AACA;AACA,MAAM1C,UAAU,CAACA,UAAU,CAACsB,IAAZ,CAAkB;AAClC,wBAAwBlB,MAAM,CAACoB,WAAY;AAC3C;AACA;AACA,MAAMxB,UAAU,CAACA,UAAU,CAACyB,KAAZ,CAAmB;AACnC,wBAAwBrB,MAAM,CAACuB,WAAY;AAC3C;AACA;AACA,MAAM3B,UAAU,CAACA,UAAU,CAAC4B,MAAZ,CAAoB;AACpC,wBAAwBxB,MAAM,CAAC0B,WAAY;AAC3C;AACA;AACA,MAAM9B,UAAU,CAACA,UAAU,CAAC+B,GAAZ,CAAiB;AACjC,wBAAwB3B,MAAM,CAAC6B,YAAa;AAC5C;AACA,CA3DA;AA6DA,MAAMU,aAAa,GAAG9C,MAAM,CAACgB,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,MAAM+B,WAAW,GAAG/C,MAAM,CAACgB,GAAI;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAYT,MAAM,CAACiB,KAAM;AACzB;AACA;AACA;AACA,YAAYjB,MAAM,CAACiB,KAAM;AACzB;AACA;AACA,MAAMrB,UAAU,CAACA,UAAU,CAACmB,KAAZ,CAAmB;AACnC;AACA,cAAcf,MAAM,CAACyC,WAAY;AACjC;AACA;AACA,CAxBA;AA0BA,MAAMC,aAAa,GAAGjD,MAAM,CAACkD,IAAK;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAbA;AAeA,MAAMC,aAAa,GAAGnD,MAAM,CAACkD,IAAK;AAClC;AACA,CAFA;AA0BA,MAAME,eAA6B,GAAG;AACpCC,EAAAA,KAAK,EAAElD,UAAU,CAACgB,KADkB;AAEpCmC,EAAAA,SAAS,EAAE,IAFyB;AAGpCC,EAAAA,KAAK,EAAE,IAH6B;AAIpCC,EAAAA,eAAe,EAAE,KAJmB;AAKpCC,EAAAA,QAAQ,EAAEpD,aAAa,CAACqD,OALY;AAMpCC,EAAAA,SAAS,EAAEvD,mBAAmB,CAACwD;AANK,CAAtC;;AASA,MAAMC,KAAK,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,MAAX;AAAmBC,EAAAA,OAAO,GAAGZ,eAA7B;AAA8Ca,EAAAA;AAA9C,CAAD,KAAmE;AAC/E,QAAMC,SAAS,GAAGnE,KAAK,CAACoE,MAAN,EAAlB;AACAD,EAAAA,SAAS,CAACE,OAAV,GAAoBL,MAApB;AAEA,QAAMM,UAAU,GAAGtE,KAAK,CAACoE,MAAN,CAAkB,IAAlB,CAAnB;AAEA,QAAM,CAACG,YAAD,EAAeC,eAAf,IAAkCxE,KAAK,CAACyE,QAAN,CAAe,KAAf,CAAxC;AACA,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B3E,KAAK,CAACyE,QAAN,CAAkD;AAAEG,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAAlD,CAApC;;AAEA,QAAMC,IAAI,mCAAQzB,eAAR,GAA4BY,OAA5B,CAAV;;AAEAjE,EAAAA,KAAK,CAAC+E,SAAN,CAAgB,MAAM;AACpB,QAAID,IAAI,EAAEvB,SAAV,EAAqB;AACnB;AACA,YAAMyB,EAAE,GAAGC,UAAU,CAAC,MAAMT,eAAe,CAAC,IAAD,CAAtB,EAA8BM,IAAI,CAACtB,KAAnC,CAArB;AACA,aAAO,MAAM0B,YAAY,CAACF,EAAD,CAAzB;AACD;;AACD,WAAOG,SAAP;AACD,GAPD,EAOG,EAPH;AASAnF,EAAAA,KAAK,CAAC+E,SAAN,CAAgB,MAAM;AACpB,QAAIR,YAAJ,EAAkB;AAChB;AACA,YAAMS,EAAE,GAAGC,UAAU,CAAC,MAAMd,SAAS,CAACE,OAAV,EAAP,EAA4B,GAA5B,CAArB;AACA,aAAO,MAAMa,YAAY,CAACF,EAAD,CAAzB;AACD;AACF,GAND,EAMG,CAACT,YAAD,CANH;AAQAvE,EAAAA,KAAK,CAAC+E,SAAN,CAAgB,MAAM;AACpBJ,IAAAA,aAAa,CAAC;AAAEE,MAAAA,MAAM,EAAEP,UAAU,CAACD,OAAX,EAAoBe,YAA9B;AAA4CR,MAAAA,KAAK,EAAEN,UAAU,CAACD,OAAX,EAAoBgB;AAAvE,KAAD,CAAb;AACD,GAFD,EAEG,EAFH;AAIA,QAAM7C,SAAS,GAAG8C,UAAU,CAACf,YAAY,GAAG,OAAH,GAAa,OAA1B,CAA5B;AACA,QAAMgB,SAAS,GAAG/C,SAAS,CAACsC,IAAI,CAAClB,SAAL,IAAkBvD,mBAAmB,CAACwD,GAAvC,CAA3B;AAEA,QAAM2B,KAAK,GAAGd,UAAU,CAACG,MAAX,GAAoBU,SAAS,CAACE,UAA5C;AACA,QAAMC,GAAG,GAAGhB,UAAU,CAACG,MAAX,GAAoBU,SAAS,CAACI,QAA1C;AACA,QAAMC,KAAK,GAAGlB,UAAU,CAACE,KAAX,GAAmBW,SAAS,CAACM,SAA3C;AACA,QAAMC,GAAG,GAAGpB,UAAU,CAACE,KAAX,GAAmBW,SAAS,CAACQ,OAAzC;AAEA,MAAIC,IAAI,GAAG;AACT7E,IAAAA,QAAQ,EAAEqB,SAAS,CAACrB,QADX;AAETsB,IAAAA,MAAM,EAAED,SAAS,CAACC,MAFT;AAGTC,IAAAA,SAAS,EAAG,cAAagD,GAAI,gBAAeI,GAAI,GAHvC;AAIT5F,IAAAA,SAAS,EAAEA,SAAU;AACzB;AACA,kCAAkCsF,KAAM,kBAAiBI,KAAM;AAC/D;AACA;AACA,kCAAkCF,GAAI,kBAAiBI,GAAI;AAC3D;AAVa,GAAX;;AAaA,MAAI,CAACpB,UAAU,CAACG,MAAhB,EAAwB;AACtBmB,IAAAA,IAAI,mCACCA,IADD,GAEC;AACDtD,MAAAA,SAAS,EAAE,yCADV;AAEDxC,MAAAA,SAAS,EAAEA,SAAU;AAFpB,KAFD,CAAJ;AAOD;;AAED,QAAM+F,KAAK,GAAG7F,UAAU,CAAC0E,IAAI,CAACxB,KAAL,IAAclD,UAAU,CAACgB,KAA1B,CAAxB;AAEA6D,EAAAA,UAAU,CAAC,MAAMX,UAAU,EAAED,OAAZ,EAAqB6B,KAArB,EAAP,CAAV;AAEA,sBACE,oBAAC,SAAD;AAAW,mBAAahC,MAAxB;AAAgC,IAAA,SAAS,EAAE8B,IAA3C;AAAiD,IAAA,GAAG,EAAE1B,UAAtD;AAAkE,IAAA,UAAU,EAAE,CAAC,CAACQ,IAAI,CAACvB,SAArF;AAAgG,IAAA,SAAS,EAAE0C,KAA3G;AAAkH,IAAA,SAAS,EAAE,CAAC,CAACnB,IAAI,CAACrB,eAApI;AAAqJ,IAAA,QAAQ,EAAE,CAAC;AAAhK,KACGqB,IAAI,CAACqB,IAAL,iBAAa,oBAAC,aAAD,QAAgBrB,IAAI,CAACqB,IAArB,CADhB,eAEE,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAE;AAA1B,KAA0CpC,OAA1C,CAFF,EAGGe,IAAI,CAACsB,MAAL,iBACC,oBAAC,aAAD,QACGtB,IAAI,CAACsB,MAAL,CAAYC,GAAZ,CAAgB,CAACD,MAAD,EAASE,CAAT,kBACf,oBAAC,MAAD;AACE,IAAA,IAAI,EAAE5F,IAAI,CAAC6F,KADb;AAEE,IAAA,OAAO,EAAEH,MAAM,CAACI,IAAP,KAAgBrG,eAAe,CAACsG,SAAhC,GAA4C,WAA5C,GAA0D,SAFrE;AAGE,IAAA,UAAU,EAAE3B,IAAI,CAACxB,KAAL,KAAelD,UAAU,CAACmB,KAA1B,GAAkC,MAAlC,GAA2C,MAHzD;AAIE,IAAA,GAAG,EAAE+E,CAJP;AAKE,IAAA,OAAO,EAAE,MAAM;AACb9B,MAAAA,eAAe,CAAC,IAAD,CAAf;AACA4B,MAAAA,MAAM,CAACM,OAAP;AACD,KARH;AASE,IAAA,SAAS,EAAE;AATb,KAUGN,MAAM,CAACO,KAVV,CADD,CADH,CAJJ,EAqBG7B,IAAI,CAACrB,eAAL,iBACC,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAG,gBAAewC,KAAM;AAA9C,kBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,wBAAwB,MAAzE;AAA0E,IAAA,MAAM,EAAGW,KAAD,IAAWpC,eAAe,CAAC,IAAD;AAA5G,kBACE,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAC,MAAZ;AAAmB,IAAA,KAAK,EAAEhE,MAAM,CAACyC;AAAjC,IADF,CADF,CAtBJ,EA4BG,CAAC,CAAC6B,IAAI,CAACvB,SAAP,iBAAoB,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAG,UAAS0C,KAAM,EAAnC;AAAsC,IAAA,QAAQ,EAAEnB,IAAI,CAACtB,KAAL,IAAc;AAA9D,IA5BvB,CADF;AAgCD,CAnGD;;;AAfEQ,EAAAA,M;AACAD,EAAAA,O;AACAE,EAAAA,O;AAhBAV,IAAAA,S;AACAC,IAAAA,K;AACAC,IAAAA,e;AACA2C,IAAAA,M;AACEO,MAAAA,K;AACAD,MAAAA,O;;AAKFP,IAAAA,I;;AAOAjC,EAAAA,M;;AAiHF,eAAeJ,KAAf;AAEA,MAAMwB,UAAU,GAAG;AACjBuB,EAAAA,KAAK,EAAE;AACLpE,IAAAA,MAAM,EAAE,mCADH;AAELtB,IAAAA,QAAQ,EAAE,OAFL;AAGL,KAACd,mBAAmB,CAACwD,GAArB,GAA2B;AACzB4B,MAAAA,UAAU,EAAE,CAAC,CADY;AAEzBE,MAAAA,QAAQ,EAAE,CAFe;AAGzBE,MAAAA,SAAS,EAAE,CAHc;AAIzBE,MAAAA,OAAO,EAAE;AAJgB,KAHtB;AASL,KAAC1F,mBAAmB,CAACyG,MAArB,GAA8B;AAC5BrB,MAAAA,UAAU,EAAE,CADgB;AAE5BE,MAAAA,QAAQ,EAAE,CAFkB;AAG5BE,MAAAA,SAAS,EAAE,CAHiB;AAI5BE,MAAAA,OAAO,EAAE;AAJmB,KATzB;AAeL,KAAC1F,mBAAmB,CAAC0G,IAArB,GAA4B;AAC1BtB,MAAAA,UAAU,EAAE,CADc;AAE1BE,MAAAA,QAAQ,EAAE,CAFgB;AAG1BE,MAAAA,SAAS,EAAE,CAAC,CAHc;AAI1BE,MAAAA,OAAO,EAAE;AAJiB,KAfvB;AAqBL,KAAC1F,mBAAmB,CAAC2G,KAArB,GAA6B;AAC3BvB,MAAAA,UAAU,EAAE,CADe;AAE3BE,MAAAA,QAAQ,EAAE,CAFiB;AAG3BE,MAAAA,SAAS,EAAE,CAHgB;AAI3BE,MAAAA,OAAO,EAAE;AAJkB;AArBxB,GADU;AA6BjBkB,EAAAA,KAAK,EAAE;AACLxE,IAAAA,MAAM,EAAE,qCADH;AAELtB,IAAAA,QAAQ,EAAE,OAFL;AAGL,KAACd,mBAAmB,CAACwD,GAArB,GAA2B;AACzB4B,MAAAA,UAAU,EAAE,CADa;AAEzBE,MAAAA,QAAQ,EAAE,CAAC,CAFc;AAGzBE,MAAAA,SAAS,EAAE,CAHc;AAIzBE,MAAAA,OAAO,EAAE;AAJgB,KAHtB;AASL,KAAC1F,mBAAmB,CAACyG,MAArB,GAA8B;AAC5BrB,MAAAA,UAAU,EAAE,CADgB;AAE5BE,MAAAA,QAAQ,EAAE,CAFkB;AAG5BE,MAAAA,SAAS,EAAE,CAHiB;AAI5BE,MAAAA,OAAO,EAAE;AAJmB,KATzB;AAeL,KAAC1F,mBAAmB,CAAC0G,IAArB,GAA4B;AAC1BtB,MAAAA,UAAU,EAAE,CADc;AAE1BE,MAAAA,QAAQ,EAAE,CAFgB;AAG1BE,MAAAA,SAAS,EAAE,CAHe;AAI1BE,MAAAA,OAAO,EAAE,CAAC;AAJgB,KAfvB;AAqBL,KAAC1F,mBAAmB,CAAC2G,KAArB,GAA6B;AAC3BvB,MAAAA,UAAU,EAAE,CADe;AAE3BE,MAAAA,QAAQ,EAAE,CAFiB;AAG3BE,MAAAA,SAAS,EAAE,CAHgB;AAI3BE,MAAAA,OAAO,EAAE;AAJkB;AArBxB;AA7BU,CAAnB","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  & a {\n    color: ${COLORS.white};\n    font-weight: bold;\n  }\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      color: ${COLORS.black};\n      font-weight: bold;\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n\n  a {\n    display: contents;\n    text-decoration: none;\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  setTimeout(() => elementRef?.current?.focus());\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}

package/dist/esm/types.js

@@ -1,3 +1,11 @@
+export let Size;
+
+(function (Size) {
+  Size["Small"] = "small";
+  Size["Medium"] = "medium";
+  Size["Large"] = "large";
+})(Size || (Size = {}));
+
 export let ToastColor;
 
 (function (ToastColor) {

package/dist/esm/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types.ts"],"names":["ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":"AA8BA,WAAYA,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AASZ,WAAYC,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAKZ,WAAYC,aAAZ;;WAAYA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;GAAAA,a,KAAAA,a;;AASZ,WAAYC,mBAAZ;;WAAYA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;GAAAA,mB,KAAAA,mB","sourcesContent":["export interface Product {\n  id: string;\n  name: string;\n  type: string;\n  image: string;\n}\n\nexport interface NavOption {\n  label: string;\n  to: string;\n  disabled?: boolean;\n  exact?: boolean;\n  onClick?: () => void;\n}\n\nexport interface NavButton {\n  label: string;\n  action: any;\n  disabled?: boolean;\n}\n\nexport interface ActionOptions {\n  search?: () => void;\n  apps?: () => void;\n  language?: () => void;\n  notification?: () => void;\n  settings?: () => void;\n  user?: () => void;\n}\n\nexport enum ToastColor {\n  BLACK,\n  WHITE,\n  BLUE,\n  GREEN,\n  ORANGE,\n  RED,\n}\n\nexport enum ToastActionType{\n  PRIMARY,\n  SECONDARY\n}\n\nexport enum ToastPosition {\n  TOPLEFT,\n  TOPMIDDLE,\n  TOPRIGHT,\n  BOTTOMLEFT,\n  BOTTOMMIDDLE,\n  BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection{\n  TOP,\n  BOTTOM,\n  LEFT,\n  RIGHT\n}\n\nexport interface SwitcherNavItem {\n  label: string;\n  url: string;\n  disabled?: boolean;\n  Icon?: any;\n  as?: any;\n  testId?: string;\n}\n\nexport interface UserMenuItem {\n  label: string;\n  to: string;\n  icon: any;\n  isExternal?: boolean;\n  onClick?: () => void;\n}\n\nexport interface ListRowDropdownOption {\n  key?: string;\n  label: string;\n  action: any;\n}\n\nexport interface NavLink {\n  label: string;\n  to: string;\n  target?: string;\n}\n\nexport interface NavSection {\n  header: string;\n  links: NavLink[];\n}\n\nexport interface NavOptions {\n  sections: NavSection[];\n}\n"],"file":"types.js"}
+{"version":3,"sources":["../../src/types.ts"],"names":["Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":"AAOA,WAAYA,IAAZ;;WAAYA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;GAAAA,I,KAAAA,I;;AA6BZ,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AASZ,WAAYC,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAKZ,WAAYC,aAAZ;;WAAYA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;GAAAA,a,KAAAA,a;;AASZ,WAAYC,mBAAZ;;WAAYA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;GAAAA,mB,KAAAA,mB","sourcesContent":["export interface Product {\n  id: string;\n  name: string;\n  type: string;\n  image: string;\n}\n\nexport enum Size {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\nexport interface NavOption {\n  label: string;\n  to: string;\n  disabled?: boolean;\n  exact?: boolean;\n  onClick?: () => void;\n}\n\nexport interface NavButton {\n  label: string;\n  action: any;\n  disabled?: boolean;\n}\n\nexport interface ActionOptions {\n  search?: () => void;\n  apps?: () => void;\n  language?: () => void;\n  notification?: () => void;\n  settings?: () => void;\n  user?: () => void;\n}\n\nexport enum ToastColor {\n  BLACK,\n  WHITE,\n  BLUE,\n  GREEN,\n  ORANGE,\n  RED,\n}\n\nexport enum ToastActionType{\n  PRIMARY,\n  SECONDARY\n}\n\nexport enum ToastPosition {\n  TOPLEFT,\n  TOPMIDDLE,\n  TOPRIGHT,\n  BOTTOMLEFT,\n  BOTTOMMIDDLE,\n  BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection{\n  TOP,\n  BOTTOM,\n  LEFT,\n  RIGHT\n}\n\nexport interface SwitcherNavItem {\n  label: string;\n  url: string;\n  disabled?: boolean;\n  Icon?: any;\n  as?: any;\n  testId?: string;\n}\n\nexport interface UserMenuItem {\n  label: string;\n  to: string;\n  icon: any;\n  isExternal?: boolean;\n  onClick?: () => void;\n}\n\nexport interface ListRowDropdownOption {\n  key?: string;\n  label: string;\n  action: any;\n}\n\nexport interface NavLink {\n  label: string;\n  to: string;\n  target?: string;\n}\n\nexport interface NavSection {\n  header: string;\n  links: NavLink[];\n}\n\nexport interface NavOptions {\n  sections: NavSection[];\n}\n"],"file":"types.js"}