@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/esm/Paginator/Paginator.js

@@ -0,0 +1,215 @@
+import _pt from "prop-types";
+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 } 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;
+  justify-content: center;
+
+  ${BREAKPOINTS.MEDIUM} {
+    width: 75%;
+  }
+`;
+const Items = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+`;
+const Item = styled.li`
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+
+    ${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;
+    box-shadow: none;
+    &:hover {
+      color: ${COLORS.primary_800};
+      background-color: ${COLORS.primary_20};
+    }
+    &:active {
+      color: ${COLORS.primary_700};
+      background-color: ${COLORS.primary_100};
+    }
+  }
+`;
+const Dots = styled(Item)`
+  cursor: not-allowed;
+  &:after{
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+    content: '...';
+  }
+`;
+const ItemContent = styled('div')`
+  text-align:center;
+  display: flex;
+  justify-content: center;
+  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 = ({
+  up = true,
+  target = '',
+  disabled = false,
+  page,
+  onPageChange,
+  id
+}) => {
+  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 = ({
+  pageCount = 1,
+  currentPage = 1,
+  baseUrl = '',
+  onPageChange
+}) => {
+  const pages = [];
+  let from = 2;
+  let to = 4;
+  if (pageCount === 0) return null;
+
+  if (pageCount > 1) {
+    if (currentPage >= 4 && currentPage <= pageCount - 2) {
+      from = currentPage - 1;
+      to = currentPage + 1;
+    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {
+      from = pageCount - 3;
+      to = pageCount - 1;
+    }
+
+    if (to > pageCount) {
+      to = pageCount;
+    }
+
+    for (let i = from; i <= to; i += 1) {
+      pages.push(i);
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Items, null, /*#__PURE__*/React.createElement(Step, {
+    up: false,
+    target: `${baseUrl}/${currentPage - 1}`,
+    page: currentPage - 1,
+    disabled: currentPage === 1,
+    onPageChange: () => {
+      if (onPageChange) onPageChange(currentPage - 1);
+    },
+    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, {
+    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, {
+    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, {
+    className: currentPage === pageCount ? 'active' : ''
+  }, /*#__PURE__*/React.createElement("span", null, pageCount)))), /*#__PURE__*/React.createElement(Step, {
+    up: true,
+    target: `${baseUrl}/${currentPage + 1}`,
+    page: currentPage + 1,
+    disabled: currentPage === pageCount,
+    onPageChange: () => {
+      if (onPageChange) onPageChange(currentPage + 1);
+    },
+    id: "paginator-right"
+  })));
+};
+
+Paginator.propTypes = {
+  pageCount: _pt.number.isRequired,
+  currentPage: _pt.number.isRequired,
+  baseUrl: _pt.string.isRequired,
+  onPageChange: _pt.func
+};
+export default Paginator;
+//# sourceMappingURL=Paginator.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,46 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Paginator } from '../index';
+import { Router } from 'react-router';
+import { createMemoryHistory } from 'history';
+import 'jest-styled-components';
+jest.mock('react-router-dom', () => _objectSpread(_objectSpread({}, jest.requireActual('react-router-dom')), {}, {
+  useLocation: () => ({
+    pathname: 'localhost:3000/test'
+  })
+}));
+describe('<Paginator />', () => {
+  it('Renders Paginator', async () => {
+    const history = createMemoryHistory();
+    const route = '/1';
+    history.push(route);
+    const {
+      queryByText,
+      container
+    } = render( /*#__PURE__*/React.createElement(Router, {
+      history: history
+    }, /*#__PURE__*/React.createElement(Paginator, {
+      pageCount: 6,
+      currentPage: 1,
+      baseUrl: "",
+      onPageChange: () => {}
+    })));
+    expect(queryByText('1')).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
+
+    container.querySelector('#paginator-right')?.click();
+    expect(history.location.pathname).toBe('/2'); // Click directly on 6. Expect to be taken to /6
+
+    queryByText('6')?.click();
+    expect(history.location.pathname).toBe('/6');
+  });
+});
+//# sourceMappingURL=Paginator.test.js.map

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

@@ -0,0 +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","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/Paginator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Paginator/index.ts"],"names":["Paginator"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AAEA,SAASA,SAAT","sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"file":"index.js"}

package/dist/esm/Services/functions.js

@@ -0,0 +1,12 @@
+export function createUUID() {
+  let dt = new Date().getTime(); // eslint-disable-next-line func-names
+
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    // eslint-disable-next-line no-bitwise
+    const r = (dt + Math.random() * 16) % 16 | 0;
+    dt = Math.floor(dt / 16); // eslint-disable-next-line no-bitwise
+
+    return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
+  });
+}
+//# sourceMappingURL=functions.js.map

package/dist/esm/Services/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Services/functions.ts"],"names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"mappings":"AAAA,OAAO,SAASA,UAAT,GAAsB;AAC3B,MAAIC,EAAE,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAT,CAD2B,CAE3B;;AACA,SAAO,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAASC,CAAT,EAAY;AACzE;AACA,UAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAL,KAAgB,EAAtB,IAA4B,EAA5B,GAAiC,CAA3C;AACAP,IAAAA,EAAE,GAAGM,IAAI,CAACE,KAAL,CAAWR,EAAE,GAAG,EAAhB,CAAL,CAHyE,CAIzE;;AACA,WAAO,CAACI,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAL,GAAY,GAA7B,EAAkCI,QAAlC,CAA2C,EAA3C,CAAP;AACD,GANM,CAAP;AAOD","sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"file":"functions.js"}

package/dist/esm/SkipToContent/SkipToContent.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentSStyling } from '../styles/typography';
+const SkipToContentLink = styled.a`
+  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}
+  
+  text-decoration: underline;
+`;
+const SkipToContentWrapper = styled.div`
+  text-decoration: none;
+  z-index: -1000;
+  height: 0px;
+  overflow-x: hidden;
+
+  &:focus-within {
+    height: auto;
+    padding: 16px;
+    z-index: 100000;
+
+    background: ${COLORS.accent2_200};
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+const SkipToContent = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(SkipToContentWrapper, null, /*#__PURE__*/React.createElement(SkipToContentLink, {
+    href: "#main"
+  }, children));
+};
+
+export default SkipToContent;
+//# sourceMappingURL=SkipToContent.js.map

package/dist/esm/SkipToContent/SkipToContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/SkipToContent/SkipToContent.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentSStyling","SkipToContentLink","a","Bold","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAqD,WAArD;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAIA,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,CAAE;AACnC,IAAIF,iBAAiB,CAACD,kBAAkB,CAACI,IAApB,EAA0BL,MAAM,CAACM,KAAjC,CAAwC;AAC7D;AACA;AACA,CAJA;AAMA,MAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,MAAM,CAACS,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,CAjBA;;AAmBA,MAAMC,aAA0D,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAkB;AACnF,sBACE,oBAAC,oBAAD,qBACE,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC;AAAxB,KAAiCA,QAAjC,CADF,CADF;AAKD,CAND;;AAQA,eAAeD,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n  \n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}

package/dist/esm/SkipToContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/SkipToContent/index.ts"],"names":["default","SkipToContent"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as SkipToContent } from './SkipToContent';\n"],"file":"index.js"}

package/dist/esm/Switcher/MobileSwitcherMenu.js

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,108 @@
+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;
+
+  display: flex;
+  align-items: center;
+  text-align: center;
+  position: relative;
+
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+
+  text-decoration: none;
+
+  svg {
+    margin-right: 16px;
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    bottom: 4px;
+    width: 4px;
+    background-color: transparent;
+    border-radius: 2px;
+  }
+
+  &.active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
+    font-weight: bold;
+    color: ${COLORS.neutral_800};
+
+    &:after {
+      background-color: ${COLORS.primary_500};
+    }
+
+    svg path {
+      fill: ${COLORS.neutral_800};
+    }
+  }
+
+  &.disabled {
+    color: ${COLORS.neutral_300};
+    background-color: ${COLORS.neutral_100};
+  }
+
+  &:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
+    color: ${COLORS.primary_600};
+    background-color: ${COLORS.primary_20};
+
+    svg path {
+      fill: ${COLORS.primary_600};
+    }
+  }
+
+  &:active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
+    color: ${COLORS.primary_800};
+    background-color: ${COLORS.primary_100};
+    box-shadow: none;
+
+    &:after {
+      background-color: ${COLORS.primary_500};
+    }
+
+    svg path {
+      fill: ${COLORS.primary_800};
+    }
+  }
+
+  &: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;
+  }
+`;
+const A = styled.a``;
+
+const SwitcherMenuItem = ({
+  label,
+  url,
+  disabled,
+  Icon,
+  as = A,
+  testId
+}) => /*#__PURE__*/React.createElement(StyledSwitcherItem, {
+  onClick: () => window.location.href = url || '',
+  as: as,
+  href: url || '',
+  target: "_parent",
+  key: label,
+  className: disabled ? 'disabled' : '',
+  "data-testid": testId
+}, Icon && /*#__PURE__*/React.createElement(Icon, {
+  size: "22px",
+  color: "#666666"
+}), label);
+
+export default SwitcherMenuItem;
+//# sourceMappingURL=SwitcherMenuItem.js.map

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

@@ -0,0 +1 @@
+{"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"}