@laerdal/life-react-components 1.2.2-dev.6 → 1.2.2-dev.9

package/dist/umd/InputFields/SearchBar.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../styles/index", "../icons/systemicons/SystemIcons", "./styling", "../Button", "./components/SearchBarInput", "./components/SearchField"], factory);
+    define(["exports", "prop-types", "react", "../styles/index", "../icons/systemicons/SystemIcons", "./styling", "../Button", "./components/SearchBarInput", "./components/SearchField", "styled-components"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../styles/index"), require("../icons/systemicons/SystemIcons"), require("./styling"), require("../Button"), require("./components/SearchBarInput"), require("./components/SearchField"));
+    factory(exports, require("prop-types"), require("react"), require("../styles/index"), require("../icons/systemicons/SystemIcons"), require("./styling"), require("../Button"), require("./components/SearchBarInput"), require("./components/SearchField"), require("styled-components"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.index, global.SystemIcons, global.styling, global.Button, global.SearchBarInput, global.SearchField);
+    factory(mod.exports, global.propTypes, global.react, global.index, global.SystemIcons, global.styling, global.Button, global.SearchBarInput, global.SearchField, global.styledComponents);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _index, _SystemIcons, _styling, _Button, _SearchBarInput, _SearchField) {
+})(this, function (exports, _propTypes, _react, _index, _SystemIcons, _styling, _Button, _SearchBarInput, _SearchField, _styledComponents) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -25,12 +25,23 @@
 
   var _SearchField2 = _interopRequireDefault(_SearchField);
 
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
       default: obj
     };
   }
 
+  const ClearIconWrapper = _styledComponents2.default.div`
+  display: flex;
+  align-items: center;
+  
+  &.hidden{
+    display: none !important;
+  }
+`;
+
   const SearchBar = ({
     id,
     searchTerm,
@@ -61,14 +72,7 @@
 
     return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_styling.InputWrapper, {
       disabled: disabled,
-      tabIndex: disabled ? -1 : 0,
-      margin: margin,
-      onFocus: e => {
-        if (!e?.target?.id.includes(id) && !disabled) {
-          setTabbedHere(true);
-          inputRef.current.focus();
-        }
-      }
+      margin: margin
     }, /*#__PURE__*/_react2.default.createElement(_SearchField2.default, {
       id: `${id}_main`,
       size: size || '',
@@ -76,7 +80,19 @@
       disabled: disabled,
       tabbedHere: tabbedHere,
       validationMessage: validationMessage
-    }, /*#__PURE__*/_react2.default.createElement(_SearchBarInput2.default, {
+    }, /*#__PURE__*/_react2.default.createElement(_styling.SearchIconWrapper, {
+      className: size ? size : '',
+      "aria-label": performSearchLabel
+    }, /*#__PURE__*/_react2.default.createElement(_Button.IconButton, {
+      id: `${id}_Search`,
+      variant: "secondary",
+      shape: "circular",
+      action: enterSearch,
+      disabled: disabled,
+      onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null
+    }, /*#__PURE__*/_react2.default.createElement(_SystemIcons.Search, {
+      size: "24px"
+    }))), /*#__PURE__*/_react2.default.createElement(_SearchBarInput2.default, {
       placeholder: disabled ? '' : placeholder,
       ref: inputRef,
       id: id,
@@ -87,34 +103,17 @@
       searchTerm: searchTerm,
       onKeyDown: onKeyDown,
       enterSearch: enterSearch
-    }), /*#__PURE__*/_react2.default.createElement(_styling.SearchIconWrapper, {
-      className: size ? size : '',
-      role: "button",
-      "aria-label": performSearchLabel,
-      tabIndex: disabled ? -1 : 0
-    }, /*#__PURE__*/_react2.default.createElement(_Button.IconButton, {
-      id: `${id}_Search`,
-      variant: "secondary",
-      shape: "circular",
-      action: enterSearch,
-      onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null
-    }, /*#__PURE__*/_react2.default.createElement(_SystemIcons.Search, {
-      size: "24px",
-      color: disabled ? _index.COLORS.neutral_300 : _index.COLORS.neutral_600
-    }))), /*#__PURE__*/_react2.default.createElement(_styling.StyledIcon, {
-      className: size ? size : '',
-      role: "button",
-      tabIndex: disabled ? -1 : 0,
-      hidden: searchTerm === '' || searchTerm === undefined
+    }), /*#__PURE__*/_react2.default.createElement(ClearIconWrapper, {
+      className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
     }, /*#__PURE__*/_react2.default.createElement(_Button.IconButton, {
       id: `${id}_Clear`,
       variant: "secondary",
       shape: "circular",
       action: removeSearch,
+      disabled: disabled,
       onKeyPress: e => isPressingEnter(e) ? removeSearch(e) : null
     }, /*#__PURE__*/_react2.default.createElement(_SystemIcons.Clear, {
-      size: "24px",
-      color: disabled ? _index.COLORS.neutral_300 : _index.COLORS.neutral_600
+      size: "24px"
     }))))), validationMessage && /*#__PURE__*/_react2.default.createElement(_styling.WarningMessage, {
       className: size || ''
     }, /*#__PURE__*/_react2.default.createElement(_SystemIcons.TechnicalWarning, {
@@ -134,6 +133,7 @@
     disabled: _propTypes2.default.bool,
     validationMessage: _propTypes2.default.string,
     onKeyDown: _propTypes2.default.func,
+    size: _propTypes2.default.oneOf(['small', 'medium']),
     margin: _propTypes2.default.string
   };
   exports.default = SearchBar;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","margin","SearchBar","inputRef","React","isPressingEnter","e","setTabbedHere","size","term","COLORS","neutral_600","undefined"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport { Size } from '../types';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        margin={margin}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={disabled ? -1 : 0}>\n            <IconButton id={`${id}_Search`} variant=\"secondary\" shape=\"circular\" action={enterSearch} onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n            </IconButton>\n          </SearchIconWrapper>\n          <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={disabled ? -1 : 0} hidden={searchTerm === '' || searchTerm === undefined}>\n            <IconButton id={`${id}_Clear`} variant=\"secondary\" shape=\"circular\" action={removeSearch} onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n            </IconButton>\n          </StyledIcon>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
+{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","ClearIconWrapper","styled","div","SearchBar","inputRef","React","isPressingEnter","e","term","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,QAAMY,gBAAgB,GAAGC,2BAAOC,GAAI;AACpC;AACA;AACA;AACA;AACA;AACA;AANA,CAAA;;AASA,QAAMC,SAAiD,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,aAAA;AAAA,IAAA,WAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,SAAA;AAAA,IAAA,IAAA;AAYzDJ,IAAAA,MAAM,GAAG;AAZgD,GAAD,KAapD;AACJ,UAAMK,QAAQ,GAAGC,gBAAAA,MAAAA,CAAjB,IAAiBA,CAAjB;;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,gBAAAA,QAAAA,CAApC,KAAoCA,CAApC;;AAEA,UAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,UAAIA,CAAC,CAADA,GAAAA,KAAJ,OAAA,EAAuB;AACrBA,QAAAA,CAAC,CAADA,cAAAA;AACAA,QAAAA,CAAC,CAADA,eAAAA;AACA,eAAA,IAAA;AACD;;AACD,aAAA,KAAA;AANF,KAAA;;AASA,WAAA,aACE,gBAAA,aAAA,CAAA,gBAAA,QAAA,EAAA,IAAA,EAAA,aACE,gBAAA,aAAA,CAAA,qBAAA,EAAA;AACE,MAAA,QAAQ,EADV,QAAA;AAEE,MAAA,MAAM,EAAER;AAFV,KAAA,EAAA,aAGE,gBAAA,aAAA,CAAA,qBAAA,EAAA;AAAa,MAAA,EAAE,EAAG,GAAEX,EAApB,OAAA;AAA+B,MAAA,IAAI,EAAEU,IAAI,IAAzC,EAAA;AAAiD,MAAA,UAAU,EAA3D,UAAA;AAAyE,MAAA,QAAQ,EAAjF,QAAA;AAA6F,MAAA,UAAU,EAAvG,UAAA;AAAqH,MAAA,iBAAiB,EAAEF;AAAxI,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,0BAAA,EAAA;AAAmB,MAAA,SAAS,EAAEE,IAAI,GAAA,IAAA,GAAlC,EAAA;AAAgD,oBAAYJ;AAA5D,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,EAAE,EAAG,GAAEN,EAAnB,SAAA;AACY,MAAA,OAAO,EADnB,WAAA;AAEY,MAAA,KAAK,EAFjB,UAAA;AAGY,MAAA,MAAM,EAHlB,WAAA;AAIY,MAAA,QAAQ,EAJpB,QAAA;AAKY,MAAA,UAAU,EAAGmB,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBf,WAAW,CAAhCe,CAAgC,CAAhCA,GAAsC;AAL3E,KAAA,EAAA,aAME,gBAAA,aAAA,CAAA,mBAAA,EAAA;AAAY,MAAA,IAAI,EAAC;AAAjB,KAAA,CANF,CADF,CADF,EAAA,aAWE,gBAAA,aAAA,CAAA,wBAAA,EAAA;AACE,MAAA,WAAW,EAAEX,QAAQ,GAAA,EAAA,GADvB,WAAA;AAEE,MAAA,GAAG,EAFL,QAAA;AAGE,MAAA,EAAE,EAHJ,EAAA;AAIE,MAAA,IAAI,EAJN,IAAA;AAKE,MAAA,QAAQ,EALV,QAAA;AAME,MAAA,aAAa,EANf,aAAA;AAOE,MAAA,aAAa,EAAGa,IAAD,IAAkBlB,aAAa,CAPhD,IAOgD,CAPhD;AAQE,MAAA,UAAU,EARZ,UAAA;AASE,MAAA,SAAS,EATX,SAAA;AAUE,MAAA,WAAW,EAAEC;AAVf,KAAA,CAXF,EAAA,aAuBE,gBAAA,aAAA,CAAA,gBAAA,EAAA;AAAkB,MAAA,SAAS,EAAE,CAACO,IAAI,GAAA,IAAA,GAAL,EAAA,EAAA,MAAA,CAA0B,CAAA,UAAA,GAAA,SAAA,GAA1B,EAAA;AAA7B,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,EAAE,EAAG,GAAEV,EAAnB,QAAA;AACY,MAAA,OAAO,EADnB,WAAA;AAEY,MAAA,KAAK,EAFjB,UAAA;AAGY,MAAA,MAAM,EAHlB,YAAA;AAIY,MAAA,QAAQ,EAJpB,QAAA;AAKY,MAAA,UAAU,EAAGmB,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBd,YAAY,CAAjCc,CAAiC,CAAjCA,GAAuC;AAL5E,KAAA,EAAA,aAME,gBAAA,aAAA,CAAA,kBAAA,EAAA;AAAW,MAAA,IAAI,EAAC;AAAhB,KAAA,CANF,CADF,CAvBF,CAHF,CADF,EAuCGV,iBAAiB,IAAA,aAChB,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAgB,MAAA,SAAS,EAAEE,IAAI,IAAI;AAAnC,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,KAAK,EAAEW,cAAzB,WAAA;AAA6C,MAAA,SAAS,EAAEX,IAAI,IAAI;AAAhE,KAAA,CADF,EAAA,aAEE,gBAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EA3CR,iBA2CQ,CAFF,CAxCJ,CADF;AA1BF,GAAA;;;AAvBEV,IAAAA,E;AACAC,IAAAA,U;AACAC,IAAAA,a;AACAC,IAAAA,W;AACAC,IAAAA,Y;AACAC,IAAAA,W;AACAC,IAAAA,kB;AACAC,IAAAA,Q;AACAC,IAAAA,iB;AACAC,IAAAA,S;AACAC,IAAAA,I,6BAAO,O,EAAU,Q;AACjBC,IAAAA,M;;oBAwFF,S","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}

package/dist/umd/InputFields/TextField.js

@@ -166,6 +166,7 @@
     pattern: _propTypes2.default.string,
     maxLength: _propTypes2.default.number,
     withoutBorder: _propTypes2.default.bool,
+    size: _propTypes2.default.oneOf(['small', 'medium']),
     margin: _propTypes2.default.string
   };
   exports.default = TextField;

package/dist/umd/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/TextField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","margin","TextField","supressFocusRef","React","e","size","setTabbedHere","COLORS","warning_400","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size} from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  validationIsCritical?: boolean;\n  type?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  correct?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  validationIsCritical,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  correct,\n  pattern,\n  maxLength,\n  withoutBorder,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n  return (\n    <>\n      <InputWrapper\n        locked={locked}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || locked) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          type={type || 'text'}\n          value={value}\n          className={(hasError ? 'error' : '').concat(size ? size : '')}\n          tabIndex={locked || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          locked={locked}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeValidationMessage={validationMessage !== '' && validationMessage !== undefined}\n          activeErrorMessage={validationMessage !== '' && validationMessage !== undefined && validationIsCritical}\n          required={required}\n          correctInput={correct}\n          tabbedHere={tabbedHere}\n          pattern={pattern}\n          maxLength={maxLength}\n          onBlur={() => setTabbedHere(false)}\n          withoutBorder={withoutBorder}\n          onMouseDown={(e: any) => {\n            if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!(locked || disabled)) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n        />\n      </InputWrapper>\n      {validationMessage && !validationIsCritical && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationIsCritical && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}
+{"version":3,"sources":["../../../src/InputFields/TextField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","TextField","supressFocusRef","React","e","setTabbedHere","COLORS","warning_400","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  validationIsCritical?: boolean;\n  type?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  correct?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  validationIsCritical,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  correct,\n  pattern,\n  maxLength,\n  withoutBorder,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n  return (\n    <>\n      <InputWrapper\n        locked={locked}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || locked) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          type={type || 'text'}\n          value={value}\n          className={(hasError ? 'error' : '').concat(size ? size : '')}\n          tabIndex={locked || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          locked={locked}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeValidationMessage={validationMessage !== '' && validationMessage !== undefined}\n          activeErrorMessage={validationMessage !== '' && validationMessage !== undefined && validationIsCritical}\n          required={required}\n          correctInput={correct}\n          tabbedHere={tabbedHere}\n          pattern={pattern}\n          maxLength={maxLength}\n          onBlur={() => setTabbedHere(false)}\n          withoutBorder={withoutBorder}\n          onMouseDown={(e: any) => {\n            if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!(locked || disabled)) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n        />\n      </InputWrapper>\n      {validationMessage && !validationIsCritical && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationIsCritical && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}

package/dist/umd/InputFields/Textarea.js

@@ -204,6 +204,7 @@
     onChange: _propTypes2.default.func,
     validationType: _propTypes2.default.oneOf(['error', 'warning']),
     validationMessage: _propTypes2.default.string,
+    size: _propTypes2.default.oneOf(['small', 'medium']).isRequired,
     margin: _propTypes2.default.string
   };
   exports.default = Textarea;

package/dist/umd/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","ComponentMStyling","ComponentTextStyle","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","id","placeholder","value","disabled","onChange","validationType","validationMessage","Textarea","size","e","warning_400","critical_400"],"mappings":"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","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","ComponentMStyling","ComponentTextStyle","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","id","placeholder","value","disabled","onChange","validationType","validationMessage","size","Textarea","e","warning_400","critical_400"],"mappings":"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","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/umd/InputFields/__tests__/QuickSearch.test.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["react", "@testing-library/react", "../../types", "..", "jest-styled-components"], factory);
+    define(["react", "@testing-library/react", "..", "jest-styled-components"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@testing-library/react"), require("../../types"), require(".."), require("jest-styled-components"));
+    factory(require("react"), require("@testing-library/react"), require(".."), require("jest-styled-components"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global.react, global.react, global.types, global._, global.jestStyledComponents);
+    factory(global.react, global.react, global._, global.jestStyledComponents);
     global.undefined = mod.exports;
   }
-})(this, function (_react, _react3, _types, _) {
+})(this, function (_react, _react3, _) {
   "use strict";
 
   var _react2 = _interopRequireDefault(_react);
@@ -35,7 +35,7 @@
         }
       }, /*#__PURE__*/_react2.default.createElement(_.QuickSearch, {
         id: "QuickSearch",
-        size: _types.Size.Small,
+        size: 'small',
         enterSearch: () => {
           searchEntered = true;
         },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["describe","it","search","searchEntered","queryAllByTestId","render","width","Size","term","expect","getByTestId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,iBAAA,EAAoB,MAAM;AAChCC,IAAAA,EAAE,CAAA,sBAAA,EAAyB,YAAY;AACrC,UAAIC,MAAM,GAAV,EAAA;AACA,UAAIC,aAAa,GAAjB,KAAA;AACA,YAAM;AAAA,QAAA,WAAA;AAAA,QAAA,WAAA;AAA4BC,QAAAA;AAA5B,UAAiDC,qBAAM,aAC3D,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,KAAK,EAAE;AAAEC,UAAAA,KAAK,EAAE;AAAT;AAAZ,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,aAAA,EAAA;AACE,QAAA,EAAE,EADJ,aAAA;AAEE,QAAA,IAAI,EAAEC,YAFR,KAAA;AAGE,QAAA,WAAW,EAAE,MAAM;AACjBJ,UAAAA,aAAa,GAAbA,IAAAA;AAJJ,SAAA;AAME,QAAA,YAAY,EAAE,MAAM;AAClBD,UAAAA,MAAM,GAANA,EAAAA;AAPJ,SAAA;AASE,QAAA,aAAa,EAAGM,IAAD,IAAU;AACvBN,UAAAA,MAAM,GAANA,IAAAA;AACD;AAXH,OAAA,CADF,CADqDG,CAAvD;AAiBAI,MAAAA,MAAM,CAACC,WAAW,CAAXA,kBAAW,CAAXA,CAAAA,SAAAA,CAAAA,QAAAA,CAAPD,OAAOC,CAAD,CAAND,CAAAA,UAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAlBD,0BAAkB,CAAZ,CAANA,CArBqC,WAqBrCA,GArBqC,CAuBrC;;AACAA,MAAAA,MAAM,CAACL,gBAAgB,CAAhBA,aAAgB,CAAhBA,CAAPK,MAAM,CAANA,CAAAA,IAAAA,CAAAA,CAAAA;AACCC,MAAAA,WAAW,CAAZ,0BAAY,CAAXA,EAAD,KAACA;AACDD,MAAAA,MAAM,CAACC,WAAW,CAAlBD,aAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAXA,kBAAW,CAAXA,CAAAA,SAAAA,CAAAA,QAAAA,CAAPD,UAAOC,CAAD,CAAND,CAAAA,UAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAXA,uBAAW,CAAXA,CAAPD,aAAM,CAANA,CAAAA,cAAAA,CAAAA,QAAAA;AA5BFR,KAAE,CAAFA;AADFD,GAAQ,CAARA","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","queryAllByTestId","render","width","term","expect","getByTestId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKAA,EAAAA,QAAQ,CAAA,iBAAA,EAAoB,MAAM;AAChCC,IAAAA,EAAE,CAAA,sBAAA,EAAyB,YAAY;AACrC,UAAIC,MAAM,GAAV,EAAA;AACA,UAAIC,aAAa,GAAjB,KAAA;AACA,YAAM;AAAA,QAAA,WAAA;AAAA,QAAA,WAAA;AAA4BC,QAAAA;AAA5B,UAAiDC,qBAAM,aAC3D,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,KAAK,EAAE;AAAEC,UAAAA,KAAK,EAAE;AAAT;AAAZ,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,aAAA,EAAA;AACE,QAAA,EAAE,EADJ,aAAA;AAEE,QAAA,IAAI,EAFN,OAAA;AAGE,QAAA,WAAW,EAAE,MAAM;AACjBH,UAAAA,aAAa,GAAbA,IAAAA;AAJJ,SAAA;AAME,QAAA,YAAY,EAAE,MAAM;AAClBD,UAAAA,MAAM,GAANA,EAAAA;AAPJ,SAAA;AASE,QAAA,aAAa,EAAGK,IAAD,IAAU;AACvBL,UAAAA,MAAM,GAANA,IAAAA;AACD;AAXH,OAAA,CADF,CADqDG,CAAvD;AAiBAG,MAAAA,MAAM,CAACC,WAAW,CAAXA,kBAAW,CAAXA,CAAAA,SAAAA,CAAAA,QAAAA,CAAPD,OAAOC,CAAD,CAAND,CAAAA,UAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAlBD,0BAAkB,CAAZ,CAANA,CArBqC,WAqBrCA,GArBqC,CAuBrC;;AACAA,MAAAA,MAAM,CAACJ,gBAAgB,CAAhBA,aAAgB,CAAhBA,CAAPI,MAAM,CAANA,CAAAA,IAAAA,CAAAA,CAAAA;AACCC,MAAAA,WAAW,CAAZ,0BAAY,CAAXA,EAAD,KAACA;AACDD,MAAAA,MAAM,CAACC,WAAW,CAAlBD,aAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAXA,kBAAW,CAAXA,CAAAA,SAAAA,CAAAA,QAAAA,CAAPD,UAAOC,CAAD,CAAND,CAAAA,UAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAXA,uBAAW,CAAXA,CAAPD,aAAM,CAANA,CAAAA,cAAAA,CAAAA,QAAAA;AA5BFP,KAAE,CAAFA;AADFD,GAAQ,CAARA","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/umd/InputFields/components/SearchBarInput.js

@@ -191,6 +191,7 @@
     placeholder: _propTypes2.default.string,
     disabled: _propTypes2.default.bool,
     onKeyDown: _propTypes2.default.func,
+    size: _propTypes2.default.oneOf(['small', 'medium']),
     setTabbedHere: _propTypes2.default.func.isRequired,
     onBlur: _propTypes2.default.func
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","type","ComponentSStyling","ComponentTextStyle","COLORS","BigSearch","styled","ComponentMStyling","BREAKPOINTS","MEDIUM","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","setTabbedHere","onBlur","SearchBarInput","isPressingEnter","e","size"],"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","type","ComponentSStyling","ComponentTextStyle","COLORS","BigSearch","styled","ComponentMStyling","BREAKPOINTS","MEDIUM","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","SearchBarInput","isPressingEnter","e"],"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/umd/LoadingIndicator/LoadingIndicator.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../types", "../icons/systemicons/SystemIcons"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../types"), require("../icons/systemicons/SystemIcons"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.types, global.SystemIcons);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _types, _SystemIcons) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -103,16 +103,16 @@
 `;
 
   const LoadingIndicator = ({
-    size = _types.Size.Medium,
+    size = 'medium',
     color = _styles.COLORS.primary
   }) => {
     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
         }));
@@ -125,6 +125,7 @@
   };
 
   LoadingIndicator.propTypes = {
+    size: _propTypes2.default.oneOf(['small', 'medium']),
     color: _propTypes2.default.string
   };
   exports.default = LoadingIndicator;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["LoadingWrapper","styled","div","color","LoadingIndicator","size","Size","COLORS","primary"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAGC,2BAAOC,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AApBA,CAAA;;AA4BA,QAAME,gBAAgB,GAAG,CAAC;AAAEC,IAAAA,IAAI,GAAGC,YAAT,MAAA;AAAsBH,IAAAA,KAAK,GAAGI,eAAOC;AAArC,GAAD,KAA2E;AAClG,YAAA,IAAA;AACE,WAAKF,YAAL,MAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEH;AAAtB,SAAA,CADF,CADF;;AAKF,WAAKG,YAAL,KAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,UAAA,KAAK,EAAEH;AAArB,SAAA,CADF,CADF;;AAKF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEA;AAAtB,SAAA,CADF,CADF;AAdJ;AADF,GAAA;;;AAHEA,IAAAA,K;;oBA0BF,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","size","color","LoadingIndicator","COLORS","primary"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,QAAMA,cAAc,GAAGC,2BAAOC,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AApBA,CAAA;;AA4BA,QAAMG,gBAAgB,GAAG,CAAC;AAAEF,IAAAA,IAAI,GAAN,QAAA;AAAmBC,IAAAA,KAAK,GAAGE,eAAOC;AAAlC,GAAD,KAAwE;AAC/F,YAAA,IAAA;AACE,WAAA,QAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEH;AAAtB,SAAA,CADF,CADF;;AAKF,WAAA,OAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,UAAA,KAAK,EAAEA;AAArB,SAAA,CADF,CADF;;AAKF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEA;AAAtB,SAAA,CADF,CADF;AAdJ;AADF,GAAA;;;AAJED,IAAAA,I,6BAAO,O,EAAU,Q;AACjBC,IAAAA,K;;oBA0BF,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/umd/NotificationDot/NotificationDot.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../types", ".."], factory);
+    define(["exports", "prop-types", "react", "styled-components", ".."], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require(".."));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require(".."));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global._);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global._);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _types, _) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -80,22 +80,22 @@
   }
 
   const ContentWrapper = _styledComponents2.default.div`
-  width: ${props => props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px'};
-  height: ${props => props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px'};
-  padding: ${props => props.size === _types.Size.Small ? '3px' : props.size === _types.Size.Large ? '4px' : '4px'};
+  width: ${props => props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px'};
+  height: ${props => props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px'};
+  padding: ${props => props.size === 'small' ? '3px' : props.size === 'large' ? '4px' : '4px'};
   box-sizing: border-box;
 `;
   const Content = _styledComponents2.default.div`
   background-color: ${props => props.variant === 'positive' ? _.COLORS.correct_500 : _.COLORS.critical_500};
-  height: ${props => props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px'};
-  width: ${props => props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px'};
-  border-radius: ${props => props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px'};
-  border: ${props => props.size === _types.Size.Small ? '2px solid ' + _.COLORS.white : props.size === _types.Size.Large ? '3px solid ' + _.COLORS.white : '2px solid ' + _.COLORS.white};
+  height: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
+  width: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
+  border-radius: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
+  border: ${props => props.size === 'small' ? '2px solid ' + _.COLORS.white : props.size === 'large' ? '3px solid ' + _.COLORS.white : '2px solid ' + _.COLORS.white};
   box-sizing: border-box;
 `;
 
   const NotificationDot = ({
-    size = _types.Size.Medium,
+    size = 'medium',
     variant,
     testId
   }) => {
@@ -110,6 +110,7 @@
   };
 
   NotificationDot.propTypes = {
+    size: _propTypes2.default.string,
     variant: _propTypes2.default.oneOf(['critical', 'positive']).isRequired,
     testId: _propTypes2.default.string
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["variant","testId","ContentWrapper","styled","div","props","Size","Content","COLORS","critical_500","white","NotificationDot","size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,QAAME,cAAc,GAAGC,2BAAOC,GAAuB;AACrD,WAAYC,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AACzG,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC1G,aAAcA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,KAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,KAAAA,GAAoC,KAAO;AACxG;AAJA,CAAA;AAOA,QAAME,OAAO,GAAGJ,2BAAOC,GAAuB;AAC9C,sBAAuBC,KAAD,IAAWA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAA+BG,SAA/BH,WAAAA,GAAoDG,SAAOC,YAAa;AACzG,YAAaJ,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC1G,WAAYA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AACzG,mBAAoBA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AACjH,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAA4B,eAAeG,SAA3CH,KAAAA,GAA2DA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAA4B,eAAeG,SAA3CH,KAAAA,GAA0D,eAAeG,SAAOE,KAAO;AACzK;AANA,CAAA;;AASA,QAAMC,eAA2D,GAAG,CAAC;AAACC,IAAAA,IAAI,GAAGN,YAAR,MAAA;AAAA,IAAA,OAAA;AAA8BL,IAAAA;AAA9B,GAAD,KAA2C;AAC7G,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAgB,MAAA,IAAI,EAApB,IAAA;AAA4B,MAAA,OAAO,EAAED;AAArC,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAS,MAAA,IAAI,EAAb,IAAA;AAAqB,MAAA,OAAO,EAA5B,OAAA;AAAuC,qBAAaC;AAApD,KAAA,CADF,CADF;AADF,GAAA;;;AApBED,IAAAA,O,6BAAS,U,EAAa,U;AACtBC,IAAAA,M;;oBA2BF,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":["size","variant","testId","ContentWrapper","styled","div","props","Content","COLORS","critical_500","white","NotificationDot"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMG,cAAc,GAAGC,2BAAOC,GAAuB;AACrD,WAAYC,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACnG,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACpG,aAAcA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAiC,KAAO;AAClG;AAJA,CAAA;AAOA,QAAMC,OAAO,GAAGH,2BAAOC,GAAuB;AAC9C,sBAAuBC,KAAD,IAAWA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAA+BE,SAA/BF,WAAAA,GAAoDE,SAAOC,YAAa;AACzG,YAAaH,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACpG,WAAYA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACnG,mBAAoBA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AAC3G,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAyB,eAAeE,SAAxCF,KAAAA,GAAwDA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAyB,eAAeE,SAAxCF,KAAAA,GAAuD,eAAeE,SAAOE,KAAO;AACnK;AANA,CAAA;;AASA,QAAMC,eAA2D,GAAG,CAAC;AAACX,IAAAA,IAAI,GAAL,QAAA;AAAA,IAAA,OAAA;AAA2BE,IAAAA;AAA3B,GAAD,KAAwC;AAC1G,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAgB,MAAA,IAAI,EAApB,IAAA;AAA4B,MAAA,OAAO,EAAED;AAArC,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAS,MAAA,IAAI,EAAb,IAAA;AAAqB,MAAA,OAAO,EAA5B,OAAA;AAAuC,qBAAaC;AAApD,KAAA,CADF,CADF;AADF,GAAA;;;AArBEF,IAAAA,I;AACAC,IAAAA,O,6BAAS,U,EAAa,U;AACtBC,IAAAA,M;;oBA2BF,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/umd/NotificationDot/__tests__/NotificationDot.test.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["react", "@testing-library/react", "..", "../../types", "../../styles/colors", "jest-styled-components"], factory);
+    define(["react", "@testing-library/react", "..", "../../styles/colors", "jest-styled-components"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@testing-library/react"), require(".."), require("../../types"), require("../../styles/colors"), require("jest-styled-components"));
+    factory(require("react"), require("@testing-library/react"), require(".."), require("../../styles/colors"), require("jest-styled-components"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global.react, global.react, global._, global.types, global.colors, global.jestStyledComponents);
+    factory(global.react, global.react, global._, global.colors, global.jestStyledComponents);
     global.undefined = mod.exports;
   }
-})(this, function (_react, _react3, _, _types, _colors) {
+})(this, function (_react, _react3, _, _colors) {
   "use strict";
 
   var _react2 = _interopRequireDefault(_react);
@@ -29,7 +29,7 @@
         getByTestId
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.NotificationDot, {
         variant: "positive",
-        size: _types.Size.Small,
+        size: "small",
         testId: "testId"
       }));
       expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors2.default.correct_500);
@@ -40,7 +40,7 @@
         getByTestId
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.NotificationDot, {
         variant: "critical",
-        size: _types.Size.Large,
+        size: "large",
         testId: "testId"
       }));
       expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors2.default.critical_500);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["describe","it","getByTestId","render","Size","expect","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOAA,EAAAA,QAAQ,CAAA,qBAAA,EAAuB,MAAI;AAC/BC,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAEC,YAA1C,KAAA;AAAsD,QAAA,MAAM,EAAC;AAA7D,OAAA,CADiBD,CAArB;AAGAE,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,WAAAA;AACAA,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJJ,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAEC,YAA1C,KAAA;AAAsD,QAAA,MAAM,EAAC;AAA7D,OAAA,CADiBD,CAArB;AAGAE,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJJ,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACvD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,MAAM,EAAC;AAA3C,OAAA,CADiBA,CAArB;AAGAE,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJJ,KAAE,CAAFA;AAjBJD,GAAQ,CAARA","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","render","expect","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,qBAAA,EAAuB,MAAI;AAC/BC,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAxC,OAAA;AAAiD,QAAA,MAAM,EAAC;AAAxD,OAAA,CADiBA,CAArB;AAGAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAxC,OAAA;AAAiD,QAAA,MAAM,EAAC;AAAxD,OAAA,CADiBA,CAArB;AAGAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACvD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,MAAM,EAAC;AAA3C,OAAA,CADiBA,CAArB;AAGAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJH,KAAE,CAAFA;AAjBJD,GAAQ,CAARA","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/umd/Table/Table.js

@@ -463,7 +463,7 @@
       cellSpacing: "0",
       "data-testid": "TestTable"
     }, renderHeader(), renderBody(), renderFooter()), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.TableLoadingIndicator, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
-      size: _types.Size.Medium,
+      size: "medium",
       color: "#ffffff"
     })));
   };