@laerdal/life-react-components 1.2.2-dev.7 → 1.2.2-dev.8

package/dist/js/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","ComponentTextStyle","Italic","black","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationType","validationMessage","onChange","e","target","warning_400","critical_400"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AAKA;;AACA;;;;;;;;;;;;AAEA;AACA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,gGAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAFiB,CAArB;;AAIA,IAAMC,QAAQ,GAAGJ,0BAAOK,QAAV,gvCACQC,eAAOC,WADf,EAEED,eAAOE,KAFT,EAQV,mCAAkBC,+BAAmBC,MAArC,EAA6CJ,eAAOK,KAApD,CARU,EAmBUL,eAAOM,WAnBjB,EAyBUN,eAAOO,WAzBjB,EA2BiBP,eAAOQ,QA3BxB,EA2BiDR,eAAOS,KA3BxD,EAoCkCT,eAAOU,WApCzC,EAqC+BV,eAAOU,WArCtC,EAsC0BV,eAAOU,WAtCjC,EA+CkCV,eAAOW,YA/CzC,EAgD+BX,eAAOW,YAhDtC,EAiD0BX,eAAOW,YAjDjC,EAwDUX,eAAOY,WAxDjB,EA6DCZ,eAAOa,WA7DR,EAkER,mCAAkBV,+BAAmBC,MAArC,EAA6CJ,eAAOc,WAApD,CAlEQ,CAAd,C,CAsEA;;;AAaA,IAAMC,QAAgD,GAAG,SAAnDA,QAAmD,OAAoH;AAAA,MAAjHC,EAAiH,QAAjHA,EAAiH;AAAA,MAA7GC,WAA6G,QAA7GA,WAA6G;AAAA,MAAhGC,KAAgG,QAAhGA,KAAgG;AAAA,MAAzFC,IAAyF,QAAzFA,IAAyF;AAAA,MAAnFC,QAAmF,QAAnFA,QAAmF;AAAA,MAAzEC,cAAyE,QAAzEA,cAAyE;AAAA,MAAzDC,iBAAyD,QAAzDA,iBAAyD;AAAA,MAAtCC,SAAsC,QAAtCA,QAAsC;AAAA,MAA5B1B,MAA4B,QAA5BA,MAA4B;AAC3K,sBACE,oBAAC,eAAD,qBACE,oBAAC,QAAD;AACE,IAAA,EAAE,EAAEmB,EADN;AAEE,IAAA,KAAK,EAAEE,KAFT;AAGE,IAAA,WAAW,EAAED,WAHf;AAIE,IAAA,SAAS,YAAKE,IAAL,cAAaE,cAAb,CAJX;AAKE,IAAA,QAAQ,EAAED,QALZ;AAME,IAAA,QAAQ,EAAE,kBAACI,CAAD;AAAA;;AAAA,aAAYD,SAAQ,IAAIA,SAAQ,CAAC,CAAAC,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEC,MAAH,wDAAWP,KAAX,KAAoB,EAArB,CAAhC;AAAA;AANZ,IADF,EASGI,iBAAiB,IAAID,cAAc,KAAK,SAAxC,iBACC,oBAAC,uBAAD,qBACE,oBAAC,6BAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAErB,eAAO0B;AAA5C,IADF,eAEE,kCAAOJ,iBAAP,CAFF,CAVJ,EAeGA,iBAAiB,IAAID,cAAc,KAAK,OAAxC,iBACC,oBAAC,qBAAD,qBACE,oBAAC,6BAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAErB,eAAO2B;AAA5C,IADF,eAEE,kCAAOL,iBAAP,CAFF,CAhBJ,CADF;AAwBD,CAzBD;;;AAXEN,EAAAA,E;AACAC,EAAAA,W;AACAC,EAAAA,K;AACAE,EAAAA,Q;AACAG,EAAAA,Q;AACAF,EAAAA,c,4BAAiB,O,EAAU,S;AAC3BC,EAAAA,iB;AAEAzB,EAAAA,M;;eA8BakB,Q","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage, WarningMessage } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationType, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationType}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && validationType === 'warning' && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationType === 'error' && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.js"}
+{"version":3,"sources":["../../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","ComponentTextStyle","Italic","black","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationType","validationMessage","onChange","e","target","warning_400","critical_400"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAKA;;AACA;;;;;;;;;;;;AAEA;AACA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,gGAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAFiB,CAArB;;AAIA,IAAMC,QAAQ,GAAGJ,0BAAOK,QAAV,gvCACQC,eAAOC,WADf,EAEED,eAAOE,KAFT,EAQV,mCAAkBC,+BAAmBC,MAArC,EAA6CJ,eAAOK,KAApD,CARU,EAmBUL,eAAOM,WAnBjB,EAyBUN,eAAOO,WAzBjB,EA2BiBP,eAAOQ,QA3BxB,EA2BiDR,eAAOS,KA3BxD,EAoCkCT,eAAOU,WApCzC,EAqC+BV,eAAOU,WArCtC,EAsC0BV,eAAOU,WAtCjC,EA+CkCV,eAAOW,YA/CzC,EAgD+BX,eAAOW,YAhDtC,EAiD0BX,eAAOW,YAjDjC,EAwDUX,eAAOY,WAxDjB,EA6DCZ,eAAOa,WA7DR,EAkER,mCAAkBV,+BAAmBC,MAArC,EAA6CJ,eAAOc,WAApD,CAlEQ,CAAd,C,CAsEA;;;AAaA,IAAMC,QAAgD,GAAG,SAAnDA,QAAmD,OAAoH;AAAA,MAAjHC,EAAiH,QAAjHA,EAAiH;AAAA,MAA7GC,WAA6G,QAA7GA,WAA6G;AAAA,MAAhGC,KAAgG,QAAhGA,KAAgG;AAAA,MAAzFC,IAAyF,QAAzFA,IAAyF;AAAA,MAAnFC,QAAmF,QAAnFA,QAAmF;AAAA,MAAzEC,cAAyE,QAAzEA,cAAyE;AAAA,MAAzDC,iBAAyD,QAAzDA,iBAAyD;AAAA,MAAtCC,SAAsC,QAAtCA,QAAsC;AAAA,MAA5B1B,MAA4B,QAA5BA,MAA4B;AAC3K,sBACE,oBAAC,eAAD,qBACE,oBAAC,QAAD;AACE,IAAA,EAAE,EAAEmB,EADN;AAEE,IAAA,KAAK,EAAEE,KAFT;AAGE,IAAA,WAAW,EAAED,WAHf;AAIE,IAAA,SAAS,YAAKE,IAAL,cAAaE,cAAb,CAJX;AAKE,IAAA,QAAQ,EAAED,QALZ;AAME,IAAA,QAAQ,EAAE,kBAACI,CAAD;AAAA;;AAAA,aAAYD,SAAQ,IAAIA,SAAQ,CAAC,CAAAC,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEC,MAAH,wDAAWP,KAAX,KAAoB,EAArB,CAAhC;AAAA;AANZ,IADF,EASGI,iBAAiB,IAAID,cAAc,KAAK,SAAxC,iBACC,oBAAC,uBAAD,qBACE,oBAAC,6BAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAErB,eAAO0B;AAA5C,IADF,eAEE,kCAAOJ,iBAAP,CAFF,CAVJ,EAeGA,iBAAiB,IAAID,cAAc,KAAK,OAAxC,iBACC,oBAAC,qBAAD,qBACE,oBAAC,6BAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAErB,eAAO2B;AAA5C,IADF,eAEE,kCAAOL,iBAAP,CAFF,CAhBJ,CADF;AAwBD,CAzBD;;;AAXEN,EAAAA,E;AACAC,EAAAA,W;AACAC,EAAAA,K;AACAE,EAAAA,Q;AACAG,EAAAA,Q;AACAF,EAAAA,c,4BAAiB,O,EAAU,S;AAC3BC,EAAAA,iB;AACAH,EAAAA,I,4BAAM,O,EAAU,Q;AAChBtB,EAAAA,M;;eA8BakB,Q","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage, WarningMessage } from './styling';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n  size: 'small' | 'medium';\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationType, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationType}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && validationType === 'warning' && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationType === 'error' && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.js"}

package/dist/js/InputFields/__tests__/QuickSearch.test.js

@@ -4,8 +4,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _types = require("../../types");
-
 require("jest-styled-components");
 
 var _ = require("..");
@@ -34,7 +32,7 @@ describe('<QuickSearch />', function () {
               }
             }, /*#__PURE__*/_react.default.createElement(_.QuickSearch, {
               id: "QuickSearch",
-              size: _types.Size.Small,
+              size: 'small',
               enterSearch: function enterSearch() {
                 searchEntered = true;
               },

package/dist/js/InputFields/__tests__/QuickSearch.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["describe","it","search","searchEntered","width","Size","Small","term","queryByText","getByTestId","queryAllByTestId","expect","classList","contains","toBeTruthy","toBeDefined","length","toBe","click","parentElement","toHaveProperty"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,QAAQ,CAAC,iBAAD,EAAoB,YAAM;AAChCC,EAAAA,EAAE,CAAC,sBAAD,uEAAyB;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AACrBC,YAAAA,MADqB,GACZ,EADY;AAErBC,YAAAA,aAFqB,GAEL,KAFK;AAAA,sBAG8B,kCACrD;AAAK,cAAA,KAAK,EAAE;AAAEC,gBAAAA,KAAK,EAAE;AAAT;AAAZ,4BACE,6BAAC,aAAD;AACE,cAAA,EAAE,EAAC,aADL;AAEE,cAAA,IAAI,EAAEC,YAAKC,KAFb;AAGE,cAAA,WAAW,EAAE,uBAAM;AACjBH,gBAAAA,aAAa,GAAG,IAAhB;AACD,eALH;AAME,cAAA,YAAY,EAAE,wBAAM;AAClBD,gBAAAA,MAAM,GAAG,EAAT;AACD,eARH;AASE,cAAA,aAAa,EAAE,uBAACK,IAAD,EAAU;AACvBL,gBAAAA,MAAM,GAAGK,IAAT;AACD;AAXH,cADF,CADqD,CAH9B,EAGjBC,WAHiB,WAGjBA,WAHiB,EAGJC,WAHI,WAGJA,WAHI,EAGSC,gBAHT,WAGSA,gBAHT;AAoBzBC,YAAAA,MAAM,CAACF,WAAW,CAAC,kBAAD,CAAX,CAAgCG,SAAhC,CAA0CC,QAA1C,CAAmD,OAAnD,CAAD,CAAN,CAAoEC,UAApE;AACAH,YAAAA,MAAM,CAACF,WAAW,CAAC,0BAAD,CAAZ,CAAN,CAAgDM,WAAhD,GArByB,CAuBzB;;AACAJ,YAAAA,MAAM,CAACD,gBAAgB,CAAC,aAAD,CAAhB,CAAgCM,MAAjC,CAAN,CAA+CC,IAA/C,CAAoD,CAApD;AACA,4BAACR,WAAW,CAAC,0BAAD,CAAZ,8DAAgES,KAAhE;AACAP,YAAAA,MAAM,CAACF,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCM,WAAnC;AACAJ,YAAAA,MAAM,CAACF,WAAW,CAAC,kBAAD,CAAX,CAAgCG,SAAhC,CAA0CC,QAA1C,CAAmD,UAAnD,CAAD,CAAN,CAAuEC,UAAvE;AACAH,YAAAA,MAAM,CAACF,WAAW,CAAC,uBAAD,CAAX,CAAqCU,aAAtC,CAAN,CAA2DC,cAA3D,CAA0E,QAA1E;;AA5ByB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAzB,GAAF;AA8BD,CA/BO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport {Size} from '../../types';\nimport 'jest-styled-components';\nimport { QuickSearch } from '..';\n\ndescribe('<QuickSearch />', () => {\n  it('Renders quick search', async () => {\n    let search = '';\n    let searchEntered = false;\n    const { queryByText, getByTestId, queryAllByTestId } = render(\n      <div style={{ width: '400px' }}>\n        <QuickSearch\n          id=\"QuickSearch\"\n          size={Size.Small}\n          enterSearch={() => {\n            searchEntered = true;\n          }}\n          removeSearch={() => {\n            search = '';\n          }}\n          setSearchTerm={(term) => {\n            search = term;\n          }}\n        />\n      </div>,\n    );\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\n\n    // Test click on icon and check that input field shows\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\n    expect(getByTestId('QuickSearch')).toBeDefined();\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\n  });\n});\n"],"file":"QuickSearch.test.js"}
+{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["describe","it","search","searchEntered","width","term","queryByText","getByTestId","queryAllByTestId","expect","classList","contains","toBeTruthy","toBeDefined","length","toBe","click","parentElement","toHaveProperty"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,QAAQ,CAAC,iBAAD,EAAoB,YAAM;AAChCC,EAAAA,EAAE,CAAC,sBAAD,uEAAyB;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AACrBC,YAAAA,MADqB,GACZ,EADY;AAErBC,YAAAA,aAFqB,GAEL,KAFK;AAAA,sBAG8B,kCACrD;AAAK,cAAA,KAAK,EAAE;AAAEC,gBAAAA,KAAK,EAAE;AAAT;AAAZ,4BACE,6BAAC,aAAD;AACE,cAAA,EAAE,EAAC,aADL;AAEE,cAAA,IAAI,EAAE,OAFR;AAGE,cAAA,WAAW,EAAE,uBAAM;AACjBD,gBAAAA,aAAa,GAAG,IAAhB;AACD,eALH;AAME,cAAA,YAAY,EAAE,wBAAM;AAClBD,gBAAAA,MAAM,GAAG,EAAT;AACD,eARH;AASE,cAAA,aAAa,EAAE,uBAACG,IAAD,EAAU;AACvBH,gBAAAA,MAAM,GAAGG,IAAT;AACD;AAXH,cADF,CADqD,CAH9B,EAGjBC,WAHiB,WAGjBA,WAHiB,EAGJC,WAHI,WAGJA,WAHI,EAGSC,gBAHT,WAGSA,gBAHT;AAoBzBC,YAAAA,MAAM,CAACF,WAAW,CAAC,kBAAD,CAAX,CAAgCG,SAAhC,CAA0CC,QAA1C,CAAmD,OAAnD,CAAD,CAAN,CAAoEC,UAApE;AACAH,YAAAA,MAAM,CAACF,WAAW,CAAC,0BAAD,CAAZ,CAAN,CAAgDM,WAAhD,GArByB,CAuBzB;;AACAJ,YAAAA,MAAM,CAACD,gBAAgB,CAAC,aAAD,CAAhB,CAAgCM,MAAjC,CAAN,CAA+CC,IAA/C,CAAoD,CAApD;AACA,4BAACR,WAAW,CAAC,0BAAD,CAAZ,8DAAgES,KAAhE;AACAP,YAAAA,MAAM,CAACF,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCM,WAAnC;AACAJ,YAAAA,MAAM,CAACF,WAAW,CAAC,kBAAD,CAAX,CAAgCG,SAAhC,CAA0CC,QAA1C,CAAmD,UAAnD,CAAD,CAAN,CAAuEC,UAAvE;AACAH,YAAAA,MAAM,CAACF,WAAW,CAAC,uBAAD,CAAX,CAAqCU,aAAtC,CAAN,CAA2DC,cAA3D,CAA0E,QAA1E;;AA5ByB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAzB,GAAF;AA8BD,CA/BO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { QuickSearch } from '..';\n\ndescribe('<QuickSearch />', () => {\n  it('Renders quick search', async () => {\n    let search = '';\n    let searchEntered = false;\n    const { queryByText, getByTestId, queryAllByTestId } = render(\n      <div style={{ width: '400px' }}>\n        <QuickSearch\n          id=\"QuickSearch\"\n          size={'small'}\n          enterSearch={() => {\n            searchEntered = true;\n          }}\n          removeSearch={() => {\n            search = '';\n          }}\n          setSearchTerm={(term) => {\n            search = term;\n          }}\n        />\n      </div>,\n    );\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\n\n    // Test click on icon and check that input field shows\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\n    expect(getByTestId('QuickSearch')).toBeDefined();\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\n  });\n});\n"],"file":"QuickSearch.test.js"}

package/dist/js/InputFields/components/SearchBarInput.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Size } from '../../types';
 export declare const Search: import("styled-components").StyledComponent<"input", any, {
     type: "search";
 }, "type">;
@@ -14,7 +13,7 @@ declare type SearchBarInputProps = {
     placeholder?: string;
     disabled?: boolean;
     onKeyDown?: (e: React.KeyboardEvent) => void;
-    size?: Size.Small | Size.Medium;
+    size?: 'small' | 'medium';
     setTabbedHere: (tabbedHere: boolean) => void;
     onBlur?: (e: any) => void;
 };

package/dist/js/InputFields/components/SearchBarInput.js

@@ -87,6 +87,7 @@ SearchBarInput.propTypes = {
   placeholder: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   onKeyDown: _propTypes.default.func,
+  size: _propTypes.default.oneOf(['small', 'medium']),
   setTabbedHere: _propTypes.default.func.isRequired,
   onBlur: _propTypes.default.func
 };

package/dist/js/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","styled","input","attrs","type","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_500","BigSearch","neutral_600","BREAKPOINTS","MEDIUM","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\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    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","styled","input","attrs","type","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_500","BigSearch","neutral_600","BREAKPOINTS","MEDIUM","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\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    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/dist/js/List/ListRow.js

@@ -25,6 +25,8 @@ var _icons = require("../icons");
 
 var _types = require("../types");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject;
 
 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); }
@@ -49,7 +51,7 @@ 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 Row = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: none;\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: 1;\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
+var Row = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: none;\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ", ";\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus, _styles.COLORS.neutral_300, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
 
 var ListRow = function ListRow(_ref) {
   var _ref$size = _ref.size,

package/dist/js/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","ComponentTextStyle","Regular","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: 1;\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus","neutral_300","ComponentTextStyle","Regular","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/js/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,6 +1,5 @@
-import { Size } from '../types';
 declare type LoadingIndicatorProps = {
-    size?: Size.Small | Size.Medium;
+    size?: 'small' | 'medium';
     color?: string;
 };
 declare const LoadingIndicator: ({ size, color }: LoadingIndicatorProps) => JSX.Element;

package/dist/js/LoadingIndicator/LoadingIndicator.js

@@ -15,8 +15,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("../styles");
 
-var _types = require("../types");
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _templateObject;
@@ -33,17 +31,17 @@ var LoadingWrapper = _styledComponents.default.div(_templateObject || (_template
 
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? _styles.COLORS.primary : _ref$color;
 
   switch (size) {
-    case _types.Size.Medium:
+    case 'medium':
       return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingMedium, {
         color: color
       }));
 
-    case _types.Size.Small:
+    case 'small':
       return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingSmall, {
         color: color
       }));
@@ -56,6 +54,7 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
 };
 
 LoadingIndicator.propTypes = {
+  size: _propTypes.default.oneOf(['small', 'medium']),
   color: _propTypes.default.string
 };
 var _default = LoadingIndicator;

package/dist/js/LoadingIndicator/LoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["LoadingWrapper","styled","div","LoadingIndicator","size","Size","Medium","color","COLORS","primary","Small"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,kcAApB;;AA4BA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2E;AAAA,uBAAxEC,IAAwE;AAAA,MAAxEA,IAAwE,0BAAjEC,YAAKC,MAA4D;AAAA,wBAApDC,KAAoD;AAAA,MAApDA,KAAoD,2BAA5CC,eAAOC,OAAqC;;AAClG,UAAQL,IAAR;AACE,SAAKC,YAAKC,MAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAKF,YAAKK,KAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,yBAAD;AAAc,QAAA,KAAK,EAAEH;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAHEA,EAAAA,K;;eA0BaJ,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: Size.Small | Size.Medium;\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case Size.Medium:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.js"}
+{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["LoadingWrapper","styled","div","LoadingIndicator","size","color","COLORS","primary"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,kcAApB;;AA4BA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAwE;AAAA,uBAArEC,IAAqE;AAAA,MAArEA,IAAqE,0BAA9D,QAA8D;AAAA,wBAApDC,KAAoD;AAAA,MAApDA,KAAoD,2BAA5CC,eAAOC,OAAqC;;AAC/F,UAAQH,IAAR;AACE,SAAK,QAAL;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAK,OAAL;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,yBAAD;AAAc,QAAA,KAAK,EAAEA;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAJED,EAAAA,I,4BAAO,O,EAAU,Q;AACjBC,EAAAA,K;;eA0BaF,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: 'small' | 'medium';\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = 'medium', color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case 'medium':\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case 'small':\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.js"}

package/dist/js/Modals/ModalContainer.js

@@ -15,6 +15,8 @@ var _reactModal = _interopRequireDefault(require("react-modal"));
 
 var _styles = require("../styles");
 
+var _zIndexes = require("../styles/z-indexes");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -64,7 +66,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";
+var modalTransitions = "\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ".concat(_zIndexes.Z_INDEXES.backdrop, ";\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  z-index: ").concat(_zIndexes.Z_INDEXES.modal, ";\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\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","Z_INDEXES","backdrop","modal","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';\nimport {Z_INDEXES} from '../styles/z-indexes';\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: ${Z_INDEXES.backdrop};\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  z-index: ${Z_INDEXES.modal};\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/NavItem/NavItem.js

@@ -11,13 +11,15 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var NavItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_600);
+var NavItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_600);
 
 var _default = NavItem;
 exports.default = _default;

package/dist/js/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","primary_20","primary_700","primary_500"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,69BACT,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CADS,EAwBWD,eAAOE,UAxBlB,EAyBAF,eAAOG,WAzBP,EA2BaH,eAAOI,WA3BpB,EAgCAJ,eAAOK,WAhCP,EAiCWL,eAAOM,WAjClB,EAmCaN,eAAOM,WAnCpB,EAwCWN,eAAOO,UAxClB,EAyCAP,eAAOQ,WAzCP,EA2CaR,eAAOI,WA3CpB,EAgDiBJ,eAAOS,WAhDxB,EAmDaT,eAAOI,WAnDpB,CAAb;;eAwDeT,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}
+{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,yhCACT,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CADS,EAwBEC,oBAAUC,MAxBZ,EAyBWH,eAAOI,UAzBlB,EA0BAJ,eAAOK,WA1BP,EA4BaL,eAAOM,WA5BpB,EAiCAN,eAAOO,WAjCP,EAkCWP,eAAOQ,WAlClB,EAoCaR,eAAOQ,WApCpB,EAyCEN,oBAAUO,KAzCZ,EA0CWT,eAAOU,UA1ClB,EA2CAV,eAAOW,WA3CP,EA6CaX,eAAOM,WA7CpB,EAkDEJ,oBAAUU,KAlDZ,EAmDiBZ,eAAOa,WAnDxB,EAsDab,eAAOM,WAtDpB,CAAb;;eA2DeX,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}

package/dist/js/NotificationDot/NotificationDot.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Size } from '../types';
 export interface NotificationProps {
-    size?: Size.Small | Size.Medium | Size.Large;
+    size?: string;
     variant: 'critical' | 'positive';
     testId?: string;
 }

package/dist/js/NotificationDot/NotificationDot.js

@@ -13,8 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _types = require("../types");
-
 var _ = require("..");
 
 var _templateObject, _templateObject2;
@@ -28,28 +26,28 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var ContentWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), function (props) {
-  return props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px';
+  return props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px';
 }, function (props) {
-  return props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px';
+  return props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px';
 }, function (props) {
-  return props.size === _types.Size.Small ? '3px' : props.size === _types.Size.Large ? '4px' : '4px';
+  return props.size === 'small' ? '3px' : props.size === 'large' ? '4px' : '4px';
 });
 
 var Content = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  border: ", ";\n  box-sizing: border-box;\n"])), function (props) {
   return props.variant === 'positive' ? _.COLORS.correct_500 : _.COLORS.critical_500;
 }, function (props) {
-  return props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px';
+  return props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px';
 }, function (props) {
-  return props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px';
+  return props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px';
 }, function (props) {
-  return props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px';
+  return props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px';
 }, function (props) {
-  return props.size === _types.Size.Small ? '2px solid ' + _.COLORS.white : props.size === _types.Size.Large ? '3px solid ' + _.COLORS.white : '2px solid ' + _.COLORS.white;
+  return props.size === 'small' ? '2px solid ' + _.COLORS.white : props.size === 'large' ? '3px solid ' + _.COLORS.white : '2px solid ' + _.COLORS.white;
 });
 
 var NotificationDot = function NotificationDot(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
       variant = _ref.variant,
       testId = _ref.testId;
   return /*#__PURE__*/React.createElement(ContentWrapper, {
@@ -63,6 +61,7 @@ var NotificationDot = function NotificationDot(_ref) {
 };
 
 NotificationDot.propTypes = {
+  size: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['critical', 'positive']).isRequired,
   testId: _propTypes.default.string
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["ContentWrapper","styled","div","props","size","Size","Small","Large","Content","variant","COLORS","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAQA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,KAA5B,GAAqCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;;AAOA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAN,KAAkB,UAAlB,GAA+BC,SAAOC,WAAtC,GAAoDD,SAAOE,YAAtE;AAAA,CADT,EAED,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,eAAeI,SAAOG,KAAlD,GAA2DV,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,eAAeG,SAAOG,KAAlD,GAA0D,eAAeH,SAAOG,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCV,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCC,YAAKU,MAA6B;AAAA,MAArBN,OAAqB,QAArBA,OAAqB;AAAA,MAAZO,MAAY,QAAZA,MAAY;AAC7G,sBACE,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEZ,IAAtB;AAA4B,IAAA,OAAO,EAAEK;AAArC,kBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEL,IAAf;AAAqB,IAAA,OAAO,EAAEK,OAA9B;AAAuC,mBAAaO;AAApD,IADF,CADF;AAKD,CAND;;;AApBEP,EAAAA,O,4BAAS,U,EAAa,U;AACtBO,EAAAA,M;;eA2BaF,e","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === 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 === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = 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

@@ -8,8 +8,6 @@ require("jest-styled-components");
 
 var _ = require("..");
 
-var _types = require("../../types");
-
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,7 +26,7 @@ describe('<NotificationDot />', function () {
           case 0:
             _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
               variant: "positive",
-              size: _types.Size.Small,
+              size: "small",
               testId: "testId"
             })), getByTestId = _render.getByTestId;
             expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.correct_500);
@@ -50,7 +48,7 @@ describe('<NotificationDot />', function () {
           case 0:
             _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
               variant: "critical",
-              size: _types.Size.Large,
+              size: "large",
               testId: "testId"
             })), getByTestId = _render2.getByTestId;
             expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.critical_500);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["describe","it","Size","Small","getByTestId","expect","toHaveStyleRule","COLORS","correct_500","white","Large","critical_500"],"mappings":";;AAAA;;AACA;;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,EAAEC,YAAKC,KAA/C;AAAsD,cAAA,MAAM,EAAC;AAA7D,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;AAQAR,EAAAA,EAAE,CAAC,yCAAD,uEAA4C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACrB,kCACjB,6BAAC,iBAAD;AAAiB,cAAA,OAAO,EAAC,UAAzB;AAAoC,cAAA,IAAI,EAAEC,YAAKQ,KAA/C;AAAsD,cAAA,MAAM,EAAC;AAA7D,cADiB,CADqB,EACpCN,WADoC,YACpCA,WADoC;AAI1CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOI,YAAxE;AACAN,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;AAQAR,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,EACrCG,WADqC,YACrCA,WADqC;AAI3CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOI,YAAxE;AACAN,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 { Size } from '../../types';\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={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={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"}
+{"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,6 +21,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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,7 +37,7 @@ 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: 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      z-index: ", ";\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    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a:active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n\n  & > a.active {\n    z-index: ", ";\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), _zIndexes.Z_INDEXES.focus, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _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"])));