@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/NotificationDot/index.ts"],"names":["default","NotificationDot"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C","sourcesContent":["export { default as NotificationDot } from './NotificationDot';"],"file":"index.js"}

package/dist/esm/Paginator/Paginator.js

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

@@ -1 +0,0 @@
-{"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';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {ComponentMStyling} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useHistory} from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      z-index: ${Z_INDEXES.focus};\r\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\r\n      outline-width: 0;\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${COLORS.primary_800};\r\n    background-color: ${COLORS.primary_20};\r\n    box-shadow: none;\r\n  }\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.primary_700};\r\n    background-color: ${COLORS.primary_100};\r\n    box-shadow: none;\r\n  }\r\n  & > a.active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.neutral_800};\r\n    background-color: ${COLORS.neutral_20};\r\n    cursor: default;\r\n    box-shadow: none;\r\n    &:hover {\r\n      color: ${COLORS.primary_800};\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    &:active {\r\n      color: ${COLORS.primary_700};\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.active:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${COLORS.primary_500}\r\n  }\r\n  &.active:hover:after{\r\n    background-color: ${COLORS.primary_700}\r\n  }\r\n  &.active:active:after{\r\n    background-color: ${COLORS.primary_800}\r\n  }\r\n`\r\n\r\ntype PaginatorProps = {\r\n  pageCount: number;\r\n  currentPage: number;\r\n  baseUrl: string;\r\n  onPageChange?: (page: number) => void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void;\r\n  id?: string;\r\n}) => {\r\n  const history = useHistory();\r\n\r\n  const handleButtonClick = () => {\r\n    history.push(target);\r\n    onPageChange && onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <ChevronRight/> : <ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage - 1);\r\n              }}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/1`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(1);\r\n              }}>\r\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <NavLink\r\n              to={`${baseUrl}/${page}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(page);\r\n              }}>\r\n                <ItemContent className={currentPage === page ? 'active' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/${pageCount}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(pageCount);\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage + 1);\r\n              }}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"file":"Paginator.js"}

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

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

@@ -1 +0,0 @@
-{"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';\r\nimport { render } from '@testing-library/react';\r\nimport { Paginator } from '../index';\r\nimport { Router } from 'react-router';\r\nimport { createMemoryHistory } from 'history';\r\nimport 'jest-styled-components';\r\n\r\njest.mock('react-router-dom', () => ({\r\n  ...jest.requireActual('react-router-dom'),\r\n  useLocation: () => ({\r\n    pathname: 'localhost:3000/test',\r\n  }),\r\n}));\r\n\r\ndescribe('<Paginator />', () => {\r\n  it('Renders Paginator', async () => {\r\n    const history = createMemoryHistory();\r\n    const route = '/1';\r\n    history.push(route);\r\n    const { queryByText, container } = render(\r\n      <Router history={history}>\r\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\r\n      </Router>,\r\n    );\r\n\r\n    expect(queryByText('1')).toBeDefined();\r\n    expect(container.querySelector('#paginator-left')).toBeDefined();\r\n    expect(container.querySelector('#paginator-right')).toBeDefined();\r\n    expect(queryByText('6')).toBeDefined();\r\n\r\n    // Click on stepper to the right. Expect to be taken from 1 to 2\r\n    (container.querySelector('#paginator-right') as HTMLElement)?.click();\r\n    expect(history.location.pathname).toBe('/2');\r\n\r\n    // Click directly on 6. Expect to be taken to /6\r\n    queryByText('6')?.click();\r\n    expect(history.location.pathname).toBe('/6');\r\n  });\r\n});\r\n"],"file":"Paginator.test.js"}

package/dist/esm/Paginator/index.js

@@ -1,3 +0,0 @@
-import Paginator from './Paginator';
-export { Paginator };
-//# sourceMappingURL=index.js.map

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

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

package/dist/esm/QuizButton/QuizButton.js

@@ -1,297 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-const TextContainer = styled.div`
-  border-radius: 0 8px 8px 0;
-  display: flex;
-  background: ${COLORS.accent1_20};
-  width: 100%;
-
-  transition: background 100ms ease-in-out;
-  align-items: center;
-
-  padding: ${props => props.size === Size.Small ? '6px 8px' : props.size === Size.Large ? '20px 16px' : '12px 16px'};
-  ${props => props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}
-`;
-const TextWrapper = styled.div``;
-const OptionContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  max-width: 65ch;  
-  word-break: break-word;
-
-  min-height: ${props => props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px'};
-  margin-bottom: ${props => props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px'};
-
-  &.selected {
-    .quiz-button-text {
-      background: ${COLORS.accent1_100};
-    }
-    .quiz-button-icon {
-      background: ${COLORS.accent1_200};
-    }
-  }
-  
-  &.disabled {
-    cursor: not-allowed;
-    
-    div.quiz-button-icon {
-      pointer-events: none;
-      background: ${COLORS.neutral_100};
-    }
-    div.quiz-button-text {
-      pointer-events: none;
-      background: ${COLORS.neutral_20};
-      color: ${COLORS.neutral_300};
-    }
-
-    .radio-button-icon, .checkbox-icon {
-      background: transparent;
-    }
-  }
-
-  &.correct {
-    .quiz-button-text {    
-      background: ${COLORS.correct_20};
-    }
-    .quiz-button-icon {
-      background: ${COLORS.correct_400};
-      svg {
-        margin: auto;
-      }
-    }
-  }
-
-  &.incorrect {
-    .quiz-button-text {    
-      background: ${COLORS.critical_20};
-    }
-    .quiz-button-icon {
-      background: ${COLORS.critical_500};
-      svg {
-        margin: auto;
-      }
-    }
-  }
-
-  &.partial {
-    .quiz-button-text {    
-      background: ${COLORS.warning_20};
-    }
-    .quiz-button-icon {
-      background: ${COLORS.warning_400};
-      svg {
-        margin: auto;
-      }
-    }
-  } 
-
-  &:hover {
-    .radio-button-icon, .checkbox-icon {
-      background: transparent !important;
-    }
-  }
-
-  &:focus {
-    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};
-    border-radius: 8px;
-    outline: none;
-
-    .radio-button-icon, .checkbox-icon {
-      background: transparent !important;
-    }
-  }
-
-  &:active {
-    .radio-button-icon, .checkbox-icon {
-      background: transparent !important;
-    }
-  }
-
-  &:hover:not(.disabled):not(.result) {
-    div.quiz-button-icon{
-      background: ${COLORS.accent1_300};
-    }
-    div.quiz-button-text{
-      background: ${props => props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};
-    }
-    
-    .radio-button-icon, .checkbox-icon {
-      background: transparent;
-    }
-  }
-
-  &:focus:not(.disabled):not(.result) {
-    div.quiz-button-icon{
-      background: ${props => props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};
-    }
-    div.quiz-button-text{
-      background: ${props => props.isSelected ? COLORS.accent1_100 : COLORS.accent1_20};
-    }
-
-    .radio-button-icon, .checkbox-icon {
-      background: transparent;
-    }
-  }
-
-  &:active:not(.disabled):not(.result) {
-    div.quiz-button-icon{
-      background: ${COLORS.accent1_400};
-      transition: none;
-    }
-    div.quiz-button-text{
-      background: ${props => props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};
-      transition: none;
-    }
-
-    .radio-button-icon, .checkbox-icon {
-      background: transparent;
-    }
-  }
-`;
-const ButtonContainer = styled.div`
-  border-radius: 8px 0 0 8px;
-  display: flex;
-  background: ${COLORS.accent1_100};
-
-  width: ${props => props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px'};
-
-  transition: background 100ms ease-in-out;
-
-  .quiz-button-result-icon {
-    height: ${props => props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px'};
-    width: ${props => props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px'};
-  }
-
-  .radio-button-icon, .checkbox-icon {
-    margin: auto;
-    min-width: unset;
-    background: transparent;
-
-    &:hover {
-      background: transparent !important;
-    }
-
-    &:focus {
-      background: transparent !important;
-    }
-
-    &:active {
-      background: transparent !important;
-    }
-  }
-
-  .small, .medium, .large {
-    min-height: unset;
-    min-width: unset;
-  }
-
-  .small {
-    .radio-button-icon, .checkbox-icon {
-      svg {
-        height: 16px;
-        width: 16px;
-      }
-    }
-  }
-
-  .medium {
-    .radio-button-icon, .checkbox-icon {
-      svg {
-        height: 24px;
-        width: 24px;
-      }
-    }
-  }
-
-  .large {
-    .radio-button-icon, .checkbox-icon {
-      svg {
-        height: 32px;
-        width: 32px;
-      }
-    }
-  }
-`;
-
-const renderResultContent = resultType => {
-  switch (resultType) {
-    case 'correct':
-      return /*#__PURE__*/React.createElement(SystemIcons.CheckComplete, {
-        color: COLORS.white,
-        className: 'quiz-button-result-icon'
-      });
-
-    case 'incorrect':
-      return /*#__PURE__*/React.createElement(SystemIcons.Close, {
-        color: COLORS.white,
-        className: 'quiz-button-result-icon'
-      });
-
-    default:
-      return /*#__PURE__*/React.createElement(SystemIcons.Close, {
-        color: COLORS.white,
-        className: 'quiz-button-result-icon'
-      });
-  }
-};
-
-const QuizButton = ({
-  text,
-  type,
-  onClick,
-  resultType,
-  id,
-  selected = false,
-  disabled = false,
-  size = Size.Medium
-}) => {
-  return /*#__PURE__*/React.createElement(OptionContainer, {
-    onClick: onClick,
-    isSelected: selected,
-    tabIndex: disabled || resultType ? -1 : 1,
-    onMouseDown: e => e.preventDefault(),
-    size: size,
-    className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : ''),
-    "data-testid": 'container'
-  }, /*#__PURE__*/React.createElement(ButtonContainer, {
-    "data-testid": 'btnContainer',
-    className: 'quiz-button-icon',
-    size: size
-  }, resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/React.createElement(RadioButton, {
-    selected: selected,
-    disabled: disabled,
-    size: size,
-    tabIndexVal: -1,
-    select: () => {},
-    id: id
-  }) : /*#__PURE__*/React.createElement(Checkbox, {
-    selected: selected,
-    disabled: disabled,
-    size: size,
-    tabIndexVal: -1,
-    select: () => {},
-    id: id
-  })), /*#__PURE__*/React.createElement(TextContainer, {
-    "data-testid": 'txtContainer',
-    className: 'quiz-button-text',
-    size: size
-  }, /*#__PURE__*/React.createElement(TextWrapper, {
-    size: size
-  }, text)));
-};
-
-QuizButton.propTypes = {
-  resultType: _pt.oneOf(['correct', 'incorrect', 'partial']),
-  text: _pt.string.isRequired,
-  onClick: _pt.func,
-  id: _pt.string.isRequired,
-  selected: _pt.bool,
-  disabled: _pt.bool,
-  type: _pt.oneOf(['radio', 'checkbox']).isRequired
-};
-export default QuizButton;
-//# sourceMappingURL=QuizButton.js.map

package/dist/esm/QuizButton/QuizButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","OptionContainer","accent1_100","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focus_25","focus","accent1_300","isSelected","accent1_400","ButtonContainer","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","selected","disabled","Medium","e","preventDefault","concat"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,WAA3B,EAAwCC,IAAxC,EAA8CC,WAA9C,QAAiE,IAAjE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,MAAMC,aAAa,GAAGV,MAAM,CAACW,GAAkB;AAC/C;AACA;AACA,gBAAgBT,MAAM,CAACU,UAAW;AAClC;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAK,IAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,SAAxB,GAAmCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,WAAxB,GAAoC,WAAa;AACxG,IAAIH,KAAK,IAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAA0BP,iBAAiB,CAACC,kBAAkB,CAACQ,OAApB,EAA4B,IAA5B,CAA3C,GAAgFJ,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAA0BV,iBAAiB,CAACG,kBAAkB,CAACQ,OAApB,EAA4B,IAA5B,CAA3C,GAA+EV,iBAAiB,CAACE,kBAAkB,CAACQ,OAApB,EAA4B,IAA5B,CAAmC;AAC9N,CAXA;AAaA,MAAMC,WAAW,GAAGlB,MAAM,CAACW,GAAiB,EAA5C;AAEA,MAAMQ,eAAe,GAAGnB,MAAM,CAACW,GAAqC;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBE,KAAK,IAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,MAAxB,GAAgCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,MAAxB,GAA+B,MAAQ;AAC9F,mBAAmBH,KAAK,IAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,MAAxB,GAAgCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,MAAxB,GAA+B,MAAQ;AACjG;AACA;AACA;AACA,oBAAoBd,MAAM,CAACkB,WAAY;AACvC;AACA;AACA,oBAAoBlB,MAAM,CAACmB,WAAY;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,WAAY;AACvC;AACA;AACA;AACA,oBAAoBpB,MAAM,CAACqB,UAAW;AACtC,eAAerB,MAAM,CAACsB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBtB,MAAM,CAACuB,UAAW;AACtC;AACA;AACA,oBAAoBvB,MAAM,CAACwB,WAAY;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBxB,MAAM,CAACyB,WAAY;AACvC;AACA;AACA,oBAAoBzB,MAAM,CAAC0B,YAAa;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB1B,MAAM,CAAC2B,UAAW;AACtC;AACA;AACA,oBAAoB3B,MAAM,CAAC4B,WAAY;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B5B,MAAM,CAAC6B,QAAS,iBAAgB7B,MAAM,CAAC8B,KAAM;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB9B,MAAM,CAAC+B,WAAY;AACvC;AACA;AACA,oBAAoBpB,KAAK,IAAEA,KAAK,CAACqB,UAAN,GAAmBhC,MAAM,CAACmB,WAA1B,GAAyCnB,MAAM,CAACkB,WAAY;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBP,KAAK,IAAEA,KAAK,CAACqB,UAAN,GAAmBhC,MAAM,CAACmB,WAA1B,GAAwCnB,MAAM,CAACkB,WAAY;AACtF;AACA;AACA,oBAAoBP,KAAK,IAAEA,KAAK,CAACqB,UAAN,GAAmBhC,MAAM,CAACkB,WAA1B,GAAyClB,MAAM,CAACU,UAAW;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBV,MAAM,CAACiC,WAAY;AAC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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${COLORS.accent1_20};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{size:Size}>``;\r\n\r\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    .quiz-button-text {\r\n      background: ${COLORS.accent1_100};\r\n    }\r\n    .quiz-button-icon {\r\n      background: ${COLORS.accent1_200};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    div.quiz-button-icon {\r\n      pointer-events: none;\r\n      background: ${COLORS.neutral_100};\r\n    }\r\n    div.quiz-button-text {\r\n      pointer-events: none;\r\n      background: ${COLORS.neutral_20};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    .quiz-button-text {    \r\n      background: ${COLORS.correct_20};\r\n    }\r\n    .quiz-button-icon {\r\n      background: ${COLORS.correct_400};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    .quiz-button-text {    \r\n      background: ${COLORS.critical_20};\r\n    }\r\n    .quiz-button-icon {\r\n      background: ${COLORS.critical_500};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    .quiz-button-text {    \r\n      background: ${COLORS.warning_20};\r\n    }\r\n    .quiz-button-icon {\r\n      background: ${COLORS.warning_400};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  } \r\n\r\n  &:hover {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent !important;\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\r\n    border-radius: 8px;\r\n    outline: none;\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent !important;\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent !important;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result) {\r\n    div.quiz-button-icon{\r\n      background: ${COLORS.accent1_300};\r\n    }\r\n    div.quiz-button-text{\r\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled):not(.result) {\r\n    div.quiz-button-icon{\r\n      background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\r\n    }\r\n    div.quiz-button-text{\r\n      background: ${props=>props.isSelected ? COLORS.accent1_100  : COLORS.accent1_20};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result) {\r\n    div.quiz-button-icon{\r\n      background: ${COLORS.accent1_400};\r\n      transition: none;\r\n    }\r\n    div.quiz-button-text{\r\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n`;\r\n\r\nconst ButtonContainer = styled.div<{size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${COLORS.accent1_100};\r\n\r\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    &:hover {\r\n      background: transparent !important;\r\n    }\r\n\r\n    &:focus {\r\n      background: transparent !important;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent !important;\r\n    }\r\n  }\r\n\r\n  .small, .medium, .large {\r\n    min-height: unset;\r\n    min-width: unset;\r\n  }\r\n\r\n  .small {\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckComplete color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\ntype QuizButtonProps = {\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n  text: string;\r\n  onClick?: (arg:any)=>void;\r\n  id: string;\r\n  selected?: boolean;\r\n  disabled?: boolean;\r\n  size?: Size;\r\n  type: 'radio' | 'checkbox';\r\n}\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, selected=false, disabled=false, size=Size.Medium}) => {\r\n  return (   \r\n    <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 1} onMouseDown={e=>e.preventDefault()} size={size}\r\n        className={'quiz-button '.concat(selected?' selected':'').concat(disabled?' disabled':'').concat(resultType?' result '+resultType:'')}\r\n        data-testid={'container'}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\r\n          <TextWrapper size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;"],"file":"QuizButton.js"}