@laerdal/life-react-components 1.2.2-dev.1.full → 1.2.2-dev.11.full

package/dist/esm/Paginator/Paginator.js

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

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","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":"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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\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"}
+{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useHistory","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","focus","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","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} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useHistory} from 'react-router';\nimport {IconButton} from '../Button';\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: 48px;\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\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      z-index: ${Z_INDEXES.focus};\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    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    box-shadow: none;\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.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  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\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  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const history = useHistory();\n\n  const handleButtonClick = () => {\n    history.push(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\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 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              id=\"paginator-left\"/>\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 className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\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 className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\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 className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

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

@@ -22,7 +22,7 @@ describe('<Paginator />', () => {
     history.push(route);
     const {
       queryByText,
-      getByTestId
+      container
     } = render( /*#__PURE__*/React.createElement(Router, {
       history: history
     }, /*#__PURE__*/React.createElement(Paginator, {
@@ -32,11 +32,11 @@ describe('<Paginator />', () => {
       onPageChange: () => {}
     })));
     expect(queryByText('1')).toBeDefined();
-    expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();
-    expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();
+    expect(container.querySelector('#paginator-left')).toBeDefined();
+    expect(container.querySelector('#paginator-right')).toBeDefined();
     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();
+    container.querySelector('#paginator-right')?.click();
     expect(history.location.pathname).toBe('/2'); // Click directly on 6. Expect to be taken to /6
 
     queryByText('6')?.click();

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","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"}
+{"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","container","expect","toBeDefined","querySelector","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,QAA6Bf,MAAM,eACvC,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,CADuC,CAAzC;AAMAK,IAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB;AACAD,IAAAA,MAAM,CAACD,SAAS,CAACG,aAAV,CAAwB,iBAAxB,CAAD,CAAN,CAAmDD,WAAnD;AACAD,IAAAA,MAAM,CAACD,SAAS,CAACG,aAAV,CAAwB,kBAAxB,CAAD,CAAN,CAAoDD,WAApD;AACAD,IAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB,GAbkC,CAelC;;AACCF,IAAAA,SAAS,CAACG,aAAV,CAAwB,kBAAxB,CAAD,EAA8DC,KAA9D;AACAH,IAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC,EAjBkC,CAmBlC;;AACAP,IAAAA,WAAW,CAAC,GAAD,CAAX,EAAkBK,KAAlB;AACAH,IAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC;AACD,GAtBC,CAAF;AAuBD,CAxBO,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, container } = render(\n      <Router history={history}>\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\n      </Router>,\n    );\n\n    expect(queryByText('1')).toBeDefined();\n    expect(container.querySelector('#paginator-left')).toBeDefined();\n    expect(container.querySelector('#paginator-right')).toBeDefined();\n    expect(queryByText('6')).toBeDefined();\n\n    // Click on stepper to the right. Expect to be taken from 1 to 2\n    (container.querySelector('#paginator-right') 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/Switcher/MobileSwitcherMenu.js

@@ -7,6 +7,7 @@ import { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';
 import { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';
 import SwitcherMenuItem from './SwitcherMenuItem';
 import { ComponentSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 const Menu = styled.ul`
   list-style: none;
   margin: 0;
@@ -17,7 +18,7 @@ const Menu = styled.ul`
   animation: ${flowDown} 0.2s ease-in-out;
   position: absolute;
   border-radius: 4px;
-  z-index: 100;
+  z-index: ${Z_INDEXES.off_canvas};
   height: 100%;
   width: 320px;
   padding-inline-start: 0;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","SwitcherMenuItem","ComponentSStyling","Menu","ul","white","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
+{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","SwitcherMenuItem","ComponentSStyling","Z_INDEXES","Menu","ul","white","off_canvas","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}

package/dist/esm/Switcher/SwitcherMenuItem.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentTextStyle } from '../styles';
 import { ComponentMStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 const StyledSwitcherItem = styled.div`
   padding: 16px 25px;
   margin: 0 2px;
@@ -32,6 +33,7 @@ const StyledSwitcherItem = styled.div`
   }
 
   &.active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
     font-weight: bold;
     color: ${COLORS.neutral_800};
 
@@ -50,6 +52,7 @@ const StyledSwitcherItem = styled.div`
   }
 
   &:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
     color: ${COLORS.primary_600};
     background-color: ${COLORS.primary_20};
 
@@ -59,6 +62,7 @@ const StyledSwitcherItem = styled.div`
   }
 
   &:active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
     color: ${COLORS.primary_800};
     background-color: ${COLORS.primary_100};
     box-shadow: none;
@@ -73,6 +77,7 @@ const StyledSwitcherItem = styled.div`
   }
 
   &:focus:not(.disabled) {
+    z-index: ${Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     outline: none;
   }

package/dist/esm/Switcher/SwitcherMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","StyledSwitcherItem","div","Regular","neutral_600","neutral_800","primary_500","neutral_300","neutral_100","primary_600","primary_20","primary_800","primary_100","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIF,iBAAiB,CAACD,kBAAkB,CAACI,OAApB,EAA6BL,MAAM,CAACM,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaN,MAAM,CAACO,WAAY;AAChC;AACA;AACA,0BAA0BP,MAAM,CAACQ,WAAY;AAC7C;AACA;AACA;AACA,cAAcR,MAAM,CAACO,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaP,MAAM,CAACS,WAAY;AAChC,wBAAwBT,MAAM,CAACU,WAAY;AAC3C;AACA;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC,wBAAwBX,MAAM,CAACY,UAAW;AAC1C;AACA;AACA,cAAcZ,MAAM,CAACW,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaX,MAAM,CAACa,WAAY;AAChC,wBAAwBb,MAAM,CAACc,WAAY;AAC3C;AACA;AACA;AACA,0BAA0Bd,MAAM,CAACQ,WAAY;AAC7C;AACA;AACA;AACA,cAAcR,MAAM,CAACa,WAAY;AACjC;AACA;AACA;AACA;AACA,8BAA8Bb,MAAM,CAACQ,WAAY;AACjD;AACA;AACA,CA1EA;AA4EA,MAAMO,CAAC,GAAGhB,MAAM,CAACiB,CAAE,EAAnB;;AAEA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,GAAT;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,IAAxB;AAA8BC,EAAAA,EAAE,GAAGP,CAAnC;AAAsCQ,EAAAA;AAAtC,CAAD,kBACvB,oBAAC,kBAAD;AACE,EAAA,OAAO,EAAE,MAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EADhD;AAEE,EAAA,EAAE,EAAEG,EAFN;AAGE,EAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,EAAA,MAAM,EAAC,SAJT;AAKE,EAAA,GAAG,EAAED,KALP;AAME,EAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,iBAAaG;AAPf,GAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,EAAA,IAAI,EAAC,MAAX;AAAkB,EAAA,KAAK,EAAC;AAAxB,EARX,EASGH,KATH,CADF;;AAcA,eAAeD,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}
+{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","Z_INDEXES","StyledSwitcherItem","div","Regular","neutral_600","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,kBAAkB,GAAGL,MAAM,CAACM,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,iBAAiB,CAACD,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,SAAS,CAACK,MAAO;AAChC;AACA,aAAaR,MAAM,CAACS,WAAY;AAChC;AACA;AACA,0BAA0BT,MAAM,CAACU,WAAY;AAC7C;AACA;AACA;AACA,cAAcV,MAAM,CAACS,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaT,MAAM,CAACW,WAAY;AAChC,wBAAwBX,MAAM,CAACY,WAAY;AAC3C;AACA;AACA;AACA,eAAeT,SAAS,CAACU,KAAM;AAC/B,aAAab,MAAM,CAACc,WAAY;AAChC,wBAAwBd,MAAM,CAACe,UAAW;AAC1C;AACA;AACA,cAAcf,MAAM,CAACc,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACK,MAAO;AAChC,aAAaR,MAAM,CAACgB,WAAY;AAChC,wBAAwBhB,MAAM,CAACiB,WAAY;AAC3C;AACA;AACA;AACA,0BAA0BjB,MAAM,CAACU,WAAY;AAC7C;AACA;AACA;AACA,cAAcV,MAAM,CAACgB,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeb,SAAS,CAACe,KAAM;AAC/B,8BAA8BlB,MAAM,CAACU,WAAY;AACjD;AACA;AACA,CA9EA;AAgFA,MAAMS,CAAC,GAAGpB,MAAM,CAACqB,CAAE,EAAnB;;AAEA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,GAAT;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,IAAxB;AAA8BC,EAAAA,EAAE,GAAGP,CAAnC;AAAsCQ,EAAAA;AAAtC,CAAD,kBACvB,oBAAC,kBAAD;AACE,EAAA,OAAO,EAAE,MAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EADhD;AAEE,EAAA,EAAE,EAAEG,EAFN;AAGE,EAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,EAAA,MAAM,EAAC,SAJT;AAKE,EAAA,GAAG,EAAED,KALP;AAME,EAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,iBAAaG;AAPf,GAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,EAAA,IAAI,EAAC,MAAX;AAAkB,EAAA,KAAK,EAAC;AAAxB,EARX,EASGH,KATH,CADF;;AAcA,eAAeD,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}

package/dist/esm/Tabs/HorizontalTabs.js

@@ -14,7 +14,8 @@ import { COLORS, ComponentTextStyle } from '../styles';
  */
 
 import styled from 'styled-components';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography'; // Add custom styles
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes'; // Add custom styles
 
 const HorizontalTabContainer = styled.div`
   width: 100%;
@@ -25,8 +26,7 @@ const HorizontalTabContainer = styled.div`
 const TabSideFill = styled.div`
   position: absolute;
   border-bottom: 1px solid ${COLORS.neutral_100};
-  height: Calc(100% - 1px);
-  z-index: 1;
+  bottom: 0;
   width: 100%;
 
   &.fill {
@@ -37,7 +37,6 @@ const TabButton = styled.button`
   color: ${COLORS.neutral_800};
   border: none;
   background-color: transparent;
-  z-index: 2;
   cursor: pointer;
   padding: 0px;
 
@@ -55,6 +54,7 @@ const TabButton = styled.button`
   }
 
   &:hover {
+    z-index: ${Z_INDEXES.hover};
     div {
       background: ${COLORS.primary_20};
       color: ${COLORS.primary_700};
@@ -67,8 +67,14 @@ const TabButton = styled.button`
       }
     }
   }
+  &.selected{
+    z-index: ${Z_INDEXES.active};
+  }
   
   &:focus {
+    z-index: ${Z_INDEXES.focus};
+    outline: none;
+    
     div {
       color: ${COLORS.primary_800};
       box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["React","COLORS","ComponentTextStyle","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","Regular","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F,C,CAEA;;AACA,MAAMC,sBAAsB,GAAGL,MAAM,CAACM,GAAI;AAC1C;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGP,MAAM,CAACM,GAAI;AAC/B;AACA,6BAA6BR,MAAM,CAACU,WAAY;AAChD;AACA;AACA;AACA;AACA;AACA,kBAAkBV,MAAM,CAACW,KAAM;AAC/B;AACA,CAVA;AAYA,MAAMC,SAAS,GAAGV,MAAM,CAACW,MAAO;AAChC,WAAWb,MAAM,CAACc,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBd,MAAM,CAACe,WAAY;AACpC;AACA;AACA,iBAAiBf,MAAM,CAACe,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBf,MAAM,CAACgB,UAAW;AACtC,eAAehB,MAAM,CAACiB,WAAY;AAClC;AACA;AACA,gCAAgCjB,MAAM,CAACiB,WAAY;AACnD;AACA,iCAAiCjB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,eAAeV,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBV,MAAM,CAACgB,UAAW;AACtC,eAAehB,MAAM,CAACiB,WAAY;AAClC;AACA;AACA,gCAAgCjB,MAAM,CAACiB,WAAY;AACnD;AACA,iCAAiCjB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,KAAM;AACvC,8BAA8BX,MAAM,CAACqB,WAAY;AACjD;AACA,+BAA+BrB,MAAM,CAACU,WAAY;AAClD,gCAAgCV,MAAM,CAACU,WAAY;AACnD;AACA;AACA;AACA,eAAeV,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,oBAAoBV,MAAM,CAACsB,WAAY;AACvC,eAAetB,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeV,MAAM,CAACe,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,iBAAiBf,MAAM,CAACe,WAAY;AACpC;AACA;AACA;AACA;AACA,QAAQT,kBAAkB,CAACL,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACJ,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQnB,iBAAiB,CAACH,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,iBAAiB,CAACF,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA,CA7IA,C,CA+IA;;AAkBA,MAAMC,cAAc,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,SAAxB;AAAmCC,EAAAA;AAAnC,CAAD,KAA0E;AAC/F;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAIC,EAAD,IAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,sBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAG,GAAER,QAAQ,GAAG,MAAH,GAAY,EAAG;AAAlD,IADF,EAEGD,IAAI,CAACU,GAAL,CAAS,CAACC,GAAD,EAAqBC,KAArB,kBACR,oBAAC,SAAD;AACE,IAAA,GAAG,EAAG,GAAED,GAAI,IAAGC,KAAM,EADvB;AAEE,IAAA,KAAK,EAAEV,SAAS,GAAG;AAAEW,MAAAA,KAAK,EAAG,GAAE,MAAMb,IAAI,CAACc,MAAO;AAA9B,KAAH,GAAwC,EAF1D;AAGE,IAAA,SAAS,EAAG,QAAOf,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG,EAH9F;AAIE,IAAA,OAAO,EAAE,MAAM,CAACL,GAAG,CAACK,QAAL,IAAiBZ,WAAW,CAACO,GAAG,CAACN,EAAL;AAJ7C,kBAKE;AAAK,IAAA,SAAS,EAAG,QAAON,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG;AAAjG,KACGL,GAAG,CAACM,KADP,CALF,CADD,CAFH,CADF;AAgBD,CA/BD;;;AAhBElB,EAAAA,I,aAcwB,I,EAAO,G,EAAM,G,EAAM,G;AAb3CC,EAAAA,I;AAOAiB,IAAAA,K;AACAF,IAAAA,Q;AACAV,IAAAA,E;AACAW,IAAAA,Q;;AATAf,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;AA6CF,eAAeL,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  z-index: 2;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  \n  &:focus {\n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
+{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["React","COLORS","ComponentTextStyle","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","hover","primary_20","primary_700","active","focus","primary_800","focus_25","primary_500","primary_100","Regular","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F;AACA,SAAQC,SAAR,QAAwB,qBAAxB,C,CAEA;;AACA,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAI;AAC1C;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGR,MAAM,CAACO,GAAI;AAC/B;AACA,6BAA6BT,MAAM,CAACW,WAAY;AAChD;AACA;AACA;AACA;AACA,kBAAkBX,MAAM,CAACY,KAAM;AAC/B;AACA,CATA;AAWA,MAAMC,SAAS,GAAGX,MAAM,CAACY,MAAO;AAChC,WAAWd,MAAM,CAACe,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBf,MAAM,CAACgB,WAAY;AACpC;AACA;AACA,iBAAiBhB,MAAM,CAACgB,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA,eAAeT,SAAS,CAACU,KAAM;AAC/B;AACA,oBAAoBjB,MAAM,CAACkB,UAAW;AACtC,eAAelB,MAAM,CAACmB,WAAY;AAClC;AACA;AACA,gCAAgCnB,MAAM,CAACmB,WAAY;AACnD;AACA,iCAAiCnB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeJ,SAAS,CAACa,MAAO;AAChC;AACA;AACA;AACA,eAAeb,SAAS,CAACc,KAAM;AAC/B;AACA;AACA;AACA,eAAerB,MAAM,CAACsB,WAAY;AAClC,iCAAiCtB,MAAM,CAACuB,QAAS,iBAAgBvB,MAAM,CAACqB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCrB,MAAM,CAACsB,WAAY;AACnD;AACA,iCAAiCtB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBX,MAAM,CAACkB,UAAW;AACtC,eAAelB,MAAM,CAACmB,WAAY;AAClC;AACA;AACA,gCAAgCnB,MAAM,CAACmB,WAAY;AACnD;AACA,iCAAiCnB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,0BAA0BX,MAAM,CAACY,KAAM;AACvC,8BAA8BZ,MAAM,CAACwB,WAAY;AACjD;AACA,+BAA+BxB,MAAM,CAACW,WAAY;AAClD,gCAAgCX,MAAM,CAACW,WAAY;AACnD;AACA;AACA;AACA,eAAeX,MAAM,CAACsB,WAAY;AAClC,iCAAiCtB,MAAM,CAACuB,QAAS,iBAAgBvB,MAAM,CAACqB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCrB,MAAM,CAACsB,WAAY;AACnD;AACA,iCAAiCtB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,oBAAoBX,MAAM,CAACyB,WAAY;AACvC,eAAezB,MAAM,CAACsB,WAAY;AAClC,iCAAiCtB,MAAM,CAACuB,QAAS,iBAAgBvB,MAAM,CAACqB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCrB,MAAM,CAACsB,WAAY;AACnD;AACA,iCAAiCtB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeX,MAAM,CAACgB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,iBAAiBhB,MAAM,CAACgB,WAAY;AACpC;AACA;AACA;AACA;AACA,QAAQV,kBAAkB,CAACL,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQrB,iBAAiB,CAACJ,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQtB,iBAAiB,CAACH,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQvB,iBAAiB,CAACF,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA,CAnJA,C,CAqJA;;AAkBA,MAAMC,cAAc,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,SAAxB;AAAmCC,EAAAA;AAAnC,CAAD,KAA0E;AAC/F;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAIC,EAAD,IAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,sBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAG,GAAER,QAAQ,GAAG,MAAH,GAAY,EAAG;AAAlD,IADF,EAEGD,IAAI,CAACU,GAAL,CAAS,CAACC,GAAD,EAAqBC,KAArB,kBACR,oBAAC,SAAD;AACE,IAAA,GAAG,EAAG,GAAED,GAAI,IAAGC,KAAM,EADvB;AAEE,IAAA,KAAK,EAAEV,SAAS,GAAG;AAAEW,MAAAA,KAAK,EAAG,GAAE,MAAMb,IAAI,CAACc,MAAO;AAA9B,KAAH,GAAwC,EAF1D;AAGE,IAAA,SAAS,EAAG,QAAOf,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG,EAH9F;AAIE,IAAA,OAAO,EAAE,MAAM,CAACL,GAAG,CAACK,QAAL,IAAiBZ,WAAW,CAACO,GAAG,CAACN,EAAL;AAJ7C,kBAKE;AAAK,IAAA,SAAS,EAAG,QAAON,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG;AAAjG,KACGL,GAAG,CAACM,KADP,CALF,CADD,CAFH,CADF;AAgBD,CA/BD;;;AAhBElB,EAAAA,I,aAcwB,I,EAAO,G,EAAM,G,EAAM,G;AAb3CC,EAAAA,I;AAOAiB,IAAAA,K;AACAF,IAAAA,Q;AACAV,IAAAA,E;AACAW,IAAAA,Q;;AATAf,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;AA6CF,eAAeL,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n    \n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/esm/Tabs/TabLink.js

@@ -4,6 +4,7 @@ import { NavLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { NotificationDot } from '../NotificationDot';
 import { COLORS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
 const StyledTabLink = styled(NavLink)`
   display: flex;
   flex-direction: row;
@@ -25,6 +26,7 @@ const StyledTabLink = styled(NavLink)`
   }
 
   &:focus {
+    z-index: ${Z_INDEXES.focus};
     background-color: ${COLORS.white};
     box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
     outline: none;
@@ -35,24 +37,31 @@ const StyledTabLink = styled(NavLink)`
   }
 
   &.active {
+    z-index: ${Z_INDEXES.active};
     background-color: ${COLORS.neutral_20};
   }
+
   &.active:hover {
     background-color: ${COLORS.primary_20};
   }
+
   &.active:focus {
     background-color: ${COLORS.white};
   }
 
   &:hover {
+    z-index: ${Z_INDEXES.hover};
     background-color: ${COLORS.primary_20};
     color: ${COLORS.primary_600};
   }
+
   &:active {
+    z-index: ${Z_INDEXES.active};
     box-shadow: none;
     background-color: ${COLORS.primary_100};
     color: ${COLORS.primary_800};
   }
+
   &.active {
     &::after {
       position: absolute;
@@ -63,17 +72,16 @@ const StyledTabLink = styled(NavLink)`
       left: -1px;
       background-color: ${COLORS.primary_500};
 
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
+      border-radius: 2px;
     }
   }
+
   &.active:hover {
     &::after {
       background-color: ${COLORS.primary_600};
     }
   }
+
   &.active:active {
     background-color: ${COLORS.primary_100};
 
@@ -81,12 +89,15 @@ const StyledTabLink = styled(NavLink)`
       background-color: ${COLORS.primary_800};
     }
   }
+
   &:disabled {
     box-shadow: none;
     background-color: ${COLORS.white};
+
     span {
       color: ${COLORS.neutral_300};
     }
+
     &::after {
       background-color: ${COLORS.white};
     }