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

package/dist/js/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","Medium","console","log","toString","toLowerCase","concat","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,y7CAQhB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CARW,EAWTC,eAAOC,KAXE,EA4BL,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,WAAN,GAAoBJ,eAAOK,WAA3B,GAAyCL,eAAOM,WAA3F;AAAA,CA5BA,EAsCd,mCAAkBC,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAtCc,EA0Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA1Cc,EA8Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA9Cc,EAqDMD,eAAOS,KArDb,EAsDQT,eAAOG,WAtDf,EAyDHH,eAAOM,WAzDJ,EAgEMN,eAAOU,UAhEb,EAmEHV,eAAOW,WAnEJ,EA0EAX,eAAOY,WA1EP,EA8EHZ,eAAOa,WA9EJ,EAuFPb,eAAOc,WAvFA,EA+FMd,eAAOS,KA/Fb,EAmGLT,eAAOc,WAnGF,CAApB;;AAqHA,IAAMC,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAWMC,GAXN,EAWc;AAAA;;AAAA,MAVhBC,EAUgB,QAVhBA,EAUgB;AAAA,MAThBjB,QASgB,QAThBA,QASgB;AAAA,MARhBkB,MAQgB,QARhBA,MAQgB;AAAA,MAPhBC,KAOgB,QAPhBA,KAOgB;AAAA,MANhBjB,WAMgB,QANhBA,WAMgB;AAAA,MALhBkB,4BAKgB,QALhBA,4BAKgB;AAAA,MAJhBC,QAIgB,QAJhBA,QAIgB;AAAA,MAHhBxB,MAGgB,QAHhBA,MAGgB;AAAA,MAFhByB,IAEgB,QAFhBA,IAEgB;AAAA,MADhBC,YACgB,QADhBA,YACgB;;AACrE,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACL,QAAzB,EAAmC;AACjCH,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMA,MAAM2B,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIN,QAAJ,EAAc;AACZ;AACD;;AACDH,IAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD,GALD;;AAOAsB,EAAAA,IAAI,YAAGA,IAAH,yCAAWM,YAAKC,MAApB;AAEAC,EAAAA,OAAO,CAACC,GAAR,CAAY,WAAZ,EAAyBT,IAAI,CAACU,QAAL,GAAgBC,WAAhB,EAAzB;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEhB,EAArB;AACgB,IAAA,GAAG,EAAED,GADrB;AAEgB,IAAA,QAAQ,EAAEK,QAF1B;AAGgB,IAAA,SAAS,EAAEC,IAAI,CAACU,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCb,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAH3B;AAIgB,IAAA,QAAQ,EAAErB,QAJ1B;AAKgB,IAAA,QAAQ,EAAEqB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAL1C;AAMgB,IAAA,WAAW,EAAEnB,WAN7B;AAOgB,IAAA,MAAM,EAAEL,MAPxB;AAQgB,IAAA,OAAO,EAAE8B,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAE,qBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACU,cAAF,EAAJ;AAAA;AAV9B,kBAWE;AAAK,IAAA,EAAE,EAAElB,EAAT;AAAa,IAAA,SAAS,EAAE;AAAxB,KAEIjB,QAAQ,gBACJ,oBAAC,uBAAD;AAAY,IAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,IAAA,IAAI,EAAC;AAAtF,IADI,GAEJG,YAAY,gBACV,oBAAC,yBAAD;AAAc,IAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,IAAA,IAAI,EAAC;AAAxF,IADU,gBAEV,oBAAC,wBAAD;AAAa,IAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,IAAA,IAAI,EAAC;AAAvF,IANV,CAXF,EAqBID,KAAK,iBAEH;AAAO,IAAA,SAAS,EAAE,OAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGE,KAFH,CAvBN,CADF;AAgCD,CA5DgB,CAAjB;;AAZEF,EAAAA,E;AACAjB,EAAAA,Q;AACAkB,EAAAA,M;AACAC,EAAAA,K;AACAjB,EAAAA,W;AACAmB,EAAAA,Q;AACAxB,EAAAA,M;AAEAuB,EAAAA,4B;AACAG,EAAAA,Y;;eAiEaV,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n\n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       iconPointerEventsTransparent,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  console.log('size prop', size.toString().toLowerCase());\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n\n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       iconPointerEventsTransparent,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/js/InputFields/SearchBar.js

@@ -21,6 +21,10 @@ var _SearchBarInput = _interopRequireDefault(require("./components/SearchBarInpu
 
 var _SearchField = _interopRequireDefault(require("./components/SearchField"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -35,6 +39,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ClearIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n"])));
+
 var SearchBar = function SearchBar(_ref) {
   var id = _ref.id,
       searchTerm = _ref.searchTerm,
@@ -69,16 +77,7 @@ var SearchBar = function SearchBar(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styling.InputWrapper, {
     disabled: disabled,
-    tabIndex: disabled ? -1 : 0,
-    margin: margin,
-    onFocus: function onFocus(e) {
-      var _e$target;
-
-      if (!(e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.id.includes(id)) && !disabled) {
-        setTabbedHere(true);
-        inputRef.current.focus();
-      }
-    }
+    margin: margin
   }, /*#__PURE__*/_react.default.createElement(_SearchField.default, {
     id: "".concat(id, "_main"),
     size: size || '',
@@ -86,7 +85,21 @@ var SearchBar = function SearchBar(_ref) {
     disabled: disabled,
     tabbedHere: tabbedHere,
     validationMessage: validationMessage
-  }, /*#__PURE__*/_react.default.createElement(_SearchBarInput.default, {
+  }, /*#__PURE__*/_react.default.createElement(_styling.SearchIconWrapper, {
+    className: size ? size : '',
+    "aria-label": performSearchLabel
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    id: "".concat(id, "_Search"),
+    variant: "secondary",
+    shape: "circular",
+    action: enterSearch,
+    disabled: disabled,
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? enterSearch(e) : null;
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SystemIcons.Search, {
+    size: "24px"
+  }))), /*#__PURE__*/_react.default.createElement(_SearchBarInput.default, {
     placeholder: disabled ? '' : placeholder,
     ref: inputRef,
     id: id,
@@ -99,38 +112,19 @@ var SearchBar = function SearchBar(_ref) {
     searchTerm: searchTerm,
     onKeyDown: onKeyDown,
     enterSearch: enterSearch
-  }), /*#__PURE__*/_react.default.createElement(_styling.SearchIconWrapper, {
-    className: size ? size : '',
-    role: "button",
-    "aria-label": performSearchLabel,
-    tabIndex: disabled ? -1 : 0
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    id: "".concat(id, "_Search"),
-    variant: "secondary",
-    shape: "circular",
-    action: enterSearch,
-    onKeyPress: function onKeyPress(e) {
-      return isPressingEnter(e) ? enterSearch(e) : null;
-    }
-  }, /*#__PURE__*/_react.default.createElement(_SystemIcons.Search, {
-    size: "24px",
-    color: disabled ? _index.COLORS.neutral_300 : _index.COLORS.neutral_600
-  }))), /*#__PURE__*/_react.default.createElement(_styling.StyledIcon, {
-    className: size ? size : '',
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    hidden: searchTerm === '' || searchTerm === undefined
+  }), /*#__PURE__*/_react.default.createElement(ClearIconWrapper, {
+    className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
   }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     id: "".concat(id, "_Clear"),
     variant: "secondary",
     shape: "circular",
     action: removeSearch,
+    disabled: disabled,
     onKeyPress: function onKeyPress(e) {
       return isPressingEnter(e) ? removeSearch(e) : null;
     }
   }, /*#__PURE__*/_react.default.createElement(_SystemIcons.Clear, {
-    size: "24px",
-    color: disabled ? _index.COLORS.neutral_300 : _index.COLORS.neutral_600
+    size: "24px"
   }))))), validationMessage && /*#__PURE__*/_react.default.createElement(_styling.WarningMessage, {
     className: size || ''
   }, /*#__PURE__*/_react.default.createElement(_SystemIcons.TechnicalWarning, {

package/dist/js/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","React","useRef","useState","tabbedHere","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","target","includes","current","focus","term","COLORS","neutral_300","neutral_600","undefined","warning_400"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAiBA,IAAMA,SAAiD,GAAG,SAApDA,SAAoD,OAapD;AAAA,MAZJC,EAYI,QAZJA,EAYI;AAAA,MAXJC,UAWI,QAXJA,UAWI;AAAA,MAVJC,cAUI,QAVJA,aAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,WAOI,QAPJA,WAOI;AAAA,MANJC,kBAMI,QANJA,kBAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,iBAII,QAJJA,iBAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,yBADJC,MACI;AAAA,MADJA,MACI,4BADK,OACL;;AACJ,MAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAkB,IAAlB,CAAjB;;AACA,wBAAoCD,eAAME,QAAN,CAAwB,KAAxB,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,sBACE,yEACE,6BAAC,qBAAD;AACE,IAAA,QAAQ,EAAEf,QADZ;AAEE,IAAA,QAAQ,EAAEA,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,IAAA,MAAM,EAAEI,MAHV;AAIE,IAAA,OAAO,EAAE,iBAACQ,CAAD,EAAY;AAAA;;AACnB,UAAI,EAACA,CAAD,aAACA,CAAD,4BAACA,CAAC,CAAEI,MAAJ,sCAAC,UAAWvB,EAAX,CAAcwB,QAAd,CAAuBxB,EAAvB,CAAD,KAA+B,CAACO,QAApC,EAA8C;AAC5CU,QAAAA,aAAa,CAAC,IAAD,CAAb;AACAL,QAAAA,QAAQ,CAACa,OAAT,CAAiBC,KAAjB;AACD;AACF;AATH,kBAUE,6BAAC,oBAAD;AAAa,IAAA,EAAE,YAAK1B,EAAL,UAAf;AAA+B,IAAA,IAAI,EAAEU,IAAI,IAAI,EAA7C;AAAiD,IAAA,UAAU,EAAET,UAA7D;AAAyE,IAAA,QAAQ,EAAEM,QAAnF;AAA6F,IAAA,UAAU,EAAES,UAAzG;AAAqH,IAAA,iBAAiB,EAAER;AAAxI,kBACE,6BAAC,uBAAD;AACE,IAAA,WAAW,EAAED,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,IAAA,GAAG,EAAEO,QAFP;AAGE,IAAA,EAAE,EAAEZ,EAHN;AAIE,IAAA,IAAI,EAAEU,IAJR;AAKE,IAAA,QAAQ,EAAEH,QALZ;AAME,IAAA,aAAa,EAAEU,aANjB;AAOE,IAAA,aAAa,EAAE,uBAACU,IAAD;AAAA,aAAkBzB,cAAa,CAACyB,IAAD,CAA/B;AAAA,KAPjB;AAQE,IAAA,UAAU,EAAE1B,UARd;AASE,IAAA,SAAS,EAAEQ,SATb;AAUE,IAAA,WAAW,EAAEN;AAVf,IADF,eAaE,6BAAC,0BAAD;AAAmB,IAAA,SAAS,EAAEO,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,IAAA,IAAI,EAAC,QAArD;AAA8D,kBAAYJ,kBAA1E;AAA8F,IAAA,QAAQ,EAAEC,QAAQ,GAAG,CAAC,CAAJ,GAAQ;AAAxH,kBACE,6BAAC,kBAAD;AAAY,IAAA,EAAE,YAAKP,EAAL,YAAd;AAAgC,IAAA,OAAO,EAAC,WAAxC;AAAoD,IAAA,KAAK,EAAC,UAA1D;AAAqE,IAAA,MAAM,EAAEG,WAA7E;AAA0F,IAAA,UAAU,EAAE,oBAACgB,CAAD;AAAA,aAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBhB,WAAW,CAACgB,CAAD,CAAhC,GAAsC,IAAnD;AAAA;AAAtG,kBACE,6BAAC,mBAAD;AAAY,IAAA,IAAI,EAAC,MAAjB;AAAwB,IAAA,KAAK,EAAEZ,QAAQ,GAAGqB,cAAOC,WAAV,GAAwBD,cAAOE;AAAtE,IADF,CADF,CAbF,eAkBE,6BAAC,mBAAD;AAAY,IAAA,SAAS,EAAEpB,IAAI,GAAGA,IAAH,GAAU,EAArC;AAAyC,IAAA,IAAI,EAAC,QAA9C;AAAuD,IAAA,QAAQ,EAAEH,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAAjF;AAAoF,IAAA,MAAM,EAAEN,UAAU,KAAK,EAAf,IAAqBA,UAAU,KAAK8B;AAAhI,kBACE,6BAAC,kBAAD;AAAY,IAAA,EAAE,YAAK/B,EAAL,WAAd;AAA+B,IAAA,OAAO,EAAC,WAAvC;AAAmD,IAAA,KAAK,EAAC,UAAzD;AAAoE,IAAA,MAAM,EAAEI,YAA5E;AAA0F,IAAA,UAAU,EAAE,oBAACe,CAAD;AAAA,aAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBf,YAAY,CAACe,CAAD,CAAjC,GAAuC,IAApD;AAAA;AAAtG,kBACE,6BAAC,kBAAD;AAAW,IAAA,IAAI,EAAC,MAAhB;AAAuB,IAAA,KAAK,EAAEZ,QAAQ,GAAGqB,cAAOC,WAAV,GAAwBD,cAAOE;AAArE,IADF,CADF,CAlBF,CAVF,CADF,EAoCGtB,iBAAiB,iBAChB,6BAAC,uBAAD;AAAgB,IAAA,SAAS,EAAEE,IAAI,IAAI;AAAnC,kBACE,6BAAC,6BAAD;AAAkB,IAAA,KAAK,EAAEkB,cAAOI,WAAhC;AAA6C,IAAA,SAAS,EAAEtB,IAAI,IAAI;AAAhE,IADF,eAEE,2CAAOF,iBAAP,CAFF,CArCJ,CADF;AA6CD,CAvED;;;AAdER,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,S;AACAC,EAAAA,I,4BAAO,O,EAAU,Q;AACjBC,EAAAA,M;;eA4EaZ,S","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        margin={margin}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={disabled ? -1 : 0}>\n            <IconButton id={`${id}_Search`} variant=\"secondary\" shape=\"circular\" action={enterSearch} onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n            </IconButton>\n          </SearchIconWrapper>\n          <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={disabled ? -1 : 0} hidden={searchTerm === '' || searchTerm === undefined}>\n            <IconButton id={`${id}_Clear`} variant=\"secondary\" shape=\"circular\" action={removeSearch} onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n            </IconButton>\n          </StyledIcon>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
+{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","React","useRef","useState","tabbedHere","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","COLORS","warning_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}

package/dist/js/Modals/ModalContainer.js

@@ -64,7 +64,7 @@ var ModalContainerStyles = {
   }
 }; //override modal classes to define the animations
 
-var modalTransitions = "\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n";
+var modalTransitions = "\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n";
 
 var ModalContainer = /*#__PURE__*/function (_React$Component) {
   _inherits(ModalContainer, _React$Component);

package/dist/js/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/js/NotificationDot/NotificationDot.js

@@ -56,7 +56,7 @@ var NotificationDot = function NotificationDot(_ref) {
   }, /*#__PURE__*/React.createElement(Content, {
     size: size,
     variant: variant,
-    "data-testId": testId
+    "data-testid": testId
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["ContentWrapper","styled","div","props","size","Content","variant","COLORS","correct_500","critical_500","white","NotificationDot","testId"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAQA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CADS,EAER,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAFQ,EAGP,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,KAAzB,GAAkCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,KAAzB,GAAiC,KAA9E;AAAA,CAHO,CAApB;;AAOA,IAAMC,OAAO,GAAGJ,0BAAOC,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACG,OAAN,KAAkB,UAAlB,GAA+BC,SAAOC,WAAtC,GAAoDD,SAAOE,YAAtE;AAAA,CADT,EAED,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAFC,EAGF,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAHE,EAIM,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAJN,EAKD,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,eAAeG,SAAOG,KAA/C,GAAwDP,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,eAAeG,SAAOG,KAA/C,GAAuD,eAAeH,SAAOG,KAAhJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAAwC;AAAA,uBAAtCP,IAAsC;AAAA,MAAtCA,IAAsC,0BAA/B,QAA+B;AAAA,MAArBE,OAAqB,QAArBA,OAAqB;AAAA,MAAZM,MAAY,QAAZA,MAAY;AAC1G,sBACE,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAER,IAAtB;AAA4B,IAAA,OAAO,EAAEE;AAArC,kBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEF,IAAf;AAAqB,IAAA,OAAO,EAAEE,OAA9B;AAAuC,mBAAaM;AAApD,IADF,CADF;AAKD,CAND;;;AArBER,EAAAA,I;AACAE,EAAAA,O,4BAAS,U,EAAa,U;AACtBM,EAAAA,M;;eA2BaD,e","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: string;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  height: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  padding: ${(props) => props.size === 'small' ? '3px' : (props.size === 'large' ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  width: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border: ${(props) => props.size === 'small' ? '2px solid ' + COLORS.white : (props.size === 'large' ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = 'medium', variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testId={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}
+{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["ContentWrapper","styled","div","props","size","Content","variant","COLORS","correct_500","critical_500","white","NotificationDot","testId"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAQA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CADS,EAER,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAFQ,EAGP,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,KAAzB,GAAkCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,KAAzB,GAAiC,KAA9E;AAAA,CAHO,CAApB;;AAOA,IAAMC,OAAO,GAAGJ,0BAAOC,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACG,OAAN,KAAkB,UAAlB,GAA+BC,SAAOC,WAAtC,GAAoDD,SAAOE,YAAtE;AAAA,CADT,EAED,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAFC,EAGF,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAHE,EAIM,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAmCD,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkC,MAAhF;AAAA,CAJN,EAKD,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,eAAeG,SAAOG,KAA/C,GAAwDP,KAAK,CAACC,IAAN,KAAe,OAAf,GAAyB,eAAeG,SAAOG,KAA/C,GAAuD,eAAeH,SAAOG,KAAhJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAAwC;AAAA,uBAAtCP,IAAsC;AAAA,MAAtCA,IAAsC,0BAA/B,QAA+B;AAAA,MAArBE,OAAqB,QAArBA,OAAqB;AAAA,MAAZM,MAAY,QAAZA,MAAY;AAC1G,sBACE,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAER,IAAtB;AAA4B,IAAA,OAAO,EAAEE;AAArC,kBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEF,IAAf;AAAqB,IAAA,OAAO,EAAEE,OAA9B;AAAuC,mBAAaM;AAApD,IADF,CADF;AAKD,CAND;;;AArBER,EAAAA,I;AACAE,EAAAA,O,4BAAS,U,EAAa,U;AACtBM,EAAAA,M;;eA2BaD,e","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: string;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  height: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  padding: ${(props) => props.size === 'small' ? '3px' : (props.size === 'large' ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  width: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border: ${(props) => props.size === 'small' ? '2px solid ' + COLORS.white : (props.size === 'large' ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = 'medium', variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("jest-styled-components");
+
+var _ = require("..");
+
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<NotificationDot />', function () {
+  it('renders positive small notification dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
+              variant: "positive",
+              size: "small",
+              testId: "testId"
+            })), getByTestId = _render.getByTestId;
+            expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.correct_500);
+            expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + _colors.default.white);
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders critical large notification dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
+              variant: "critical",
+              size: "large",
+              testId: "testId"
+            })), getByTestId = _render2.getByTestId;
+            expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.critical_500);
+            expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + _colors.default.white);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders critical medium notification dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var _render3, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
+              variant: "critical",
+              testId: "testId"
+            })), getByTestId = _render3.getByTestId;
+            expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.critical_500);
+            expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + _colors.default.white);
+
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});
+//# sourceMappingURL=NotificationDot.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["describe","it","getByTestId","expect","toHaveStyleRule","COLORS","correct_500","white","critical_500"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,QAAQ,CAAC,qBAAD,EAAuB,YAAI;AAC/BC,EAAAA,EAAE,CAAC,yCAAD,uEAA4C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBACrB,kCACjB,6BAAC,iBAAD;AAAiB,cAAA,OAAO,EAAC,UAAzB;AAAoC,cAAA,IAAI,EAAC,OAAzC;AAAiD,cAAA,MAAM,EAAC;AAAxD,cADiB,CADqB,EACpCC,WADoC,WACpCA,WADoC;AAI1CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOC,WAAxE;AACAH,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeC,gBAAOE,KAA9E;;AAL0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA5C,GAAF;AAQAN,EAAAA,EAAE,CAAC,yCAAD,uEAA4C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACrB,kCACjB,6BAAC,iBAAD;AAAiB,cAAA,OAAO,EAAC,UAAzB;AAAoC,cAAA,IAAI,EAAC,OAAzC;AAAiD,cAAA,MAAM,EAAC;AAAxD,cADiB,CADqB,EACpCC,WADoC,YACpCA,WADoC;AAI1CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOG,YAAxE;AACAL,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeC,gBAAOE,KAA9E;;AAL0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA5C,GAAF;AAQAN,EAAAA,EAAE,CAAC,0CAAD,uEAA6C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACtB,kCACjB,6BAAC,iBAAD;AAAiB,cAAA,OAAO,EAAC,UAAzB;AAAoC,cAAA,MAAM,EAAC;AAA3C,cADiB,CADsB,EACrCC,WADqC,YACrCA,WADqC;AAI3CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOG,YAAxE;AACAL,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeC,gBAAOE,KAA9E;;AAL2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7C,GAAF;AAOH,CAxBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { NotificationDot } from '..';\nimport COLORS from '../../styles/colors';\n\ndescribe('<NotificationDot />',()=>{\n    it('renders positive small notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='positive' size='small' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.correct_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n\n    it('renders critical large notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' size='large' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);\n    });\n\n    it('renders critical medium notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n});"],"file":"NotificationDot.test.js"}

package/dist/js/Paginator/Paginator.js

@@ -21,7 +21,11 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _typography = require("../styles/typography");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _reactRouter = require("react-router");
+
+var _Button = require("../Button");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -35,11 +39,10 @@ var Container = _styledComponents.default.nav(_templateObject || (_templateObjec
 
 var Items = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"])));
 
-var Item = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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    ", "\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: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100);
+var Item = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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    ", "\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      z-index: 1;\n    }\n  }\n  & > a:hover {\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a.active {\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100);
 
-var Dots = (0, _styledComponents.default)(Item)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-top: 1%;\n  cursor: not-allowed;\n"])));
-var ItemContent = (0, _styledComponents.default)('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  text-align:center;\n  display: table-cell;\n  vertical-align:middle;\n"])));
-var ItemSelected = (0, _styledComponents.default)('div')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  justify-content: center;\n  margin: 0 20%;\n  border-radius: 4px;\n  text-align: center;\n  height: 4px;\n  background-color: ", "\n"])), _styles.COLORS.primary_500);
+var Dots = (0, _styledComponents.default)(Item)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var ItemContent = (0, _styledComponents.default)('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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: ", "\n  }\n  &.active:hover:after{\n    background-color: ", "\n  }\n  &.active:active:after{\n    background-color: ", "\n  }\n"])), _styles.COLORS.primary_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
 
 var Step = function Step(_ref) {
   var _ref$up = _ref.up,
@@ -50,29 +53,23 @@ var Step = function Step(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       page = _ref.page,
       onPageChange = _ref.onPageChange,
-      testId = _ref.testId;
-  if (disabled) return /*#__PURE__*/React.createElement(Item, {
-    style: {
-      cursor: 'not-allowed'
+      id = _ref.id;
+  var history = (0, _reactRouter.useHistory)();
+
+  var handleButtonClick = function handleButtonClick() {
+    history.push(target);
+    onPageChange && onPageChange(page);
+  };
+
+  return /*#__PURE__*/React.createElement(_Button.IconButton, {
+    id: id,
+    action: function action(event) {
+      return handleButtonClick();
     },
-    "data-testid": "".concat(testId, "_Disabled")
-  }, up ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-    size: "20",
-    color: _styles.COLORS.neutral_300
-  }) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, {
-    size: "20",
-    color: _styles.COLORS.neutral_300
-  }));
-  return /*#__PURE__*/React.createElement(Item, {
-    "data-testid": "".concat(testId, "_Enabled")
-  }, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
-    to: target,
-    onClick: function onClick() {
-      if (onPageChange) onPageChange(page);
-    }
-  }, up ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-    size: "20"
-  }) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, null)));
+    variant: 'secondary',
+    shape: 'circular',
+    disabled: disabled
+  }, up ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, null) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, null));
 };
 
 var Paginator = function Paginator(_ref2) {
@@ -114,7 +111,7 @@ var Paginator = function Paginator(_ref2) {
     onPageChange: function onPageChange() {
       if (_onPageChange) _onPageChange(currentPage - 1);
     },
-    testId: "Test-StepLeft"
+    id: "paginator-left"
   }), pages.findIndex(function (item) {
     return item === 1;
   }) === -1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
@@ -122,11 +119,11 @@ var Paginator = function Paginator(_ref2) {
     onClick: function 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(function (item) {
+  }, /*#__PURE__*/React.createElement(ItemContent, {
+    className: currentPage === 1 ? 'active' : ''
+  }, /*#__PURE__*/React.createElement("span", null, "1")))), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(function (item) {
     return item === 1;
-  }) === -1 && /*#__PURE__*/React.createElement(Dots, null, /*#__PURE__*/React.createElement(_SystemIcons.MoreHorizontal, {
-    color: _styles.COLORS.neutral_600
-  })), pages.map(function (page) {
+  }) === -1 && /*#__PURE__*/React.createElement(Dots, null), pages.map(function (page) {
     return /*#__PURE__*/React.createElement(Item, {
       key: page
     }, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
@@ -134,17 +131,19 @@ var Paginator = function Paginator(_ref2) {
       onClick: function 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(_SystemIcons.MoreHorizontal, {
-    color: _styles.COLORS.neutral_600
-  })), pages.findIndex(function (item) {
+    }, /*#__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(function (item) {
     return item === pageCount;
   }) === -1 && pageCount !== 1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
     to: "".concat(baseUrl, "/").concat(pageCount),
     onClick: function 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: "".concat(baseUrl, "/").concat(currentPage + 1),
     page: currentPage + 1,
@@ -152,7 +151,7 @@ var Paginator = function Paginator(_ref2) {
     onPageChange: function onPageChange() {
       if (_onPageChange) _onPageChange(currentPage + 1);
     },
-    testId: "Test-StepRight"
+    id: "paginator-right"
   })));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","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":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","primary_800","primary_20","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 {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      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n      z-index: 1;\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  & > 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  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/js/Paginator/__tests__/Paginator.test.js

@@ -35,9 +35,9 @@ jest.mock('react-router-dom', function () {
 });
 describe('<Paginator />', function () {
   it('Renders Paginator', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var _queryByText;
+    var _container$querySelec, _queryByText;
 
-    var history, route, _render, queryByText, getByTestId;
+    var history, route, _render, queryByText, container;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -53,13 +53,13 @@ describe('<Paginator />', function () {
               currentPage: 1,
               baseUrl: "",
               onPageChange: function onPageChange() {}
-            }))), queryByText = _render.queryByText, getByTestId = _render.getByTestId;
+            }))), queryByText = _render.queryByText, container = _render.container;
             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$querySelec = container.querySelector('#paginator-right')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.click();
             expect(history.location.pathname).toBe('/2'); // Click directly on 6. Expect to be taken to /6
 
             (_queryByText = queryByText('6')) === null || _queryByText === void 0 ? void 0 : _queryByText.click();