@laerdal/life-react-components 1.2.2-dev.2 → 1.2.2-dev.20

package/dist/esm/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","BREAKPOINTS","InputFieldStyling","InputWrapper","StyledPassSwitch","div","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","passwordHidden","setPasswordHidden","useState","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 2;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","BREAKPOINTS","InputFieldStyling","InputWrapper","StyledPassSwitch","div","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","passwordHidden","setPasswordHidden","useState","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,SAASC,iBAAT,EAA4BC,YAA5B,QAAgD,WAAhD;AAmBA,MAAMC,gBAAgB,GAAGJ,MAAM,CAACK,GAAI;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIJ,WAAW,CAACK,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjCA;AAmCA,MAAMC,WAAW,GAAGP,MAAM,CAACK,GAAI;AAC/B;AACA;AACA,CAHA;;AAKA,MAAMG,aAAa,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,QAAN;AAAgBC,EAAAA,MAAhB;AAAwBC,EAAAA,QAAxB;AAAkCC,EAAAA,QAAlC;AAA4CC,EAAAA,KAA5C;AAAmDC,EAAAA,iBAAnD;AAAsEC,EAAAA,YAAtE;AAAoFC,EAAAA,WAApF;AAAiGC,EAAAA,QAAjG;AAA2GC,EAAAA,QAA3G;AAAqHC,EAAAA,IAArH;AAA2HC,EAAAA;AAA3H,CAAD,KAA6J;AACjL,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCxB,KAAK,CAACyB,QAAN,CAAwB,IAAxB,CAA5C;AACA,QAAMC,QAAQ,GAAG1B,KAAK,CAAC2B,MAAN,CAAkB,IAAlB,CAAjB;AACA,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B7B,KAAK,CAACyB,QAAN,CAAwB,KAAxB,CAApC;;AAEA,QAAMK,aAAa,GAAIC,CAAD,IAAY;AAChC,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBR,MAAAA,iBAAiB,CAAC,CAACD,cAAF,CAAjB;AACD;AACF,GAJD;;AAKA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,QAAQ,EAAEZ,QADZ;AAEE,IAAA,MAAM,EAAEC,MAFV;AAGE,IAAA,MAAM,EAAEU,MAHV;AAIE,IAAA,QAAQ,EAAEX,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAJ5B;AAKE,IAAA,OAAO,EAAGoB,CAAD,IAAY;AACnB,UAAI,CAACA,CAAC,EAAEE,MAAH,EAAWvB,EAAX,CAAcwB,QAAd,CAAuBxB,EAAvB,CAAD,IAA+B,CAACC,QAAhC,IAA4C,CAACC,MAAjD,EAAyD;AACvDiB,QAAAA,aAAa,CAAC,IAAD,CAAb;AACAH,QAAAA,QAAQ,CAACS,OAAT,CAAiBC,KAAjB;AACD;AACF;AAVH,kBAWE;AAAK,IAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAZ,kBACE,oBAAC,WAAD,qBACE,oBAAC,iBAAD;AACE,IAAA,EAAE,EAAE3B,EADN;AAEE,IAAA,GAAG,EAAEgB,QAFP;AAGE,IAAA,IAAI,EAAEH,cAAc,GAAG,UAAH,GAAgB,MAHtC;AAIE,IAAA,IAAI,EAAC,UAJP;AAKE,IAAA,KAAK,EAAER,KALT;AAME,IAAA,SAAS,EAAE,CAACD,QAAQ,GAAG,OAAH,GAAa,EAAtB,EAA0BwB,MAA1B,CAAiCjB,IAAI,GAAGA,IAAH,GAAU,EAA/C,CANb;AAOE,IAAA,QAAQ,EAAE,CAAC,CAPb;AAQE,IAAA,YAAY,EAAEJ,YARhB;AASE,IAAA,WAAW,EAAEC,WATf;AAUE,IAAA,QAAQ,EAAEP,QAVZ;AAWE,IAAA,MAAM,EAAEC,MAXV;AAYE,IAAA,QAAQ,EAAEO,QAZZ;AAaE,IAAA,QAAQ,EAAEC,QAbZ;AAcE,IAAA,QAAQ,EAAGW,CAAD,IAAYlB,QAAQ,IAAIA,QAAQ,CAACkB,CAAC,EAAEE,MAAH,EAAWlB,KAAX,IAAoB,EAArB,CAd5C;AAeE,IAAA,UAAU,EAAEa,UAfd;AAgBE,IAAA,MAAM,EAAE,MAAMC,aAAa,CAAC,KAAD;AAhB7B,IADF,eAmBE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAER,IAAI,GAAGA,IAAH,GAAU;AAA3C,KACG,CAACV,QAAD,IAAa,CAACC,MAAd,GACCW,cAAc,gBACZ;AAAK,IAAA,EAAE,EAAG,GAAEb,EAAG,UAAf;AAA0B,IAAA,QAAQ,EAAE,CAApC;AAAuC,IAAA,SAAS,EAAEoB,aAAlD;AAAiE,IAAA,OAAO,EAAE,MAAMN,iBAAiB,CAAC,CAACD,cAAF;AAAjG,kBACE;AAAK,IAAA,OAAO,EAAC,WAAb;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,IAAA,KAAK,EAAC;AAA3C,kBACE;AACE,IAAA,CAAC,EAAC,+xCADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IADF,CADF,CADY,gBASZ;AAAK,IAAA,EAAE,EAAG,GAAEb,EAAG,aAAf;AAA6B,IAAA,QAAQ,EAAE,CAAvC;AAA0C,IAAA,SAAS,EAAEoB,aAArD;AAAoE,IAAA,OAAO,EAAE,MAAMN,iBAAiB,CAAC,CAACD,cAAF;AAApG,kBACE;AAAK,IAAA,OAAO,EAAC,WAAb;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,IAAA,KAAK,EAAC;AAA3C,kBACE;AACE,IAAA,CAAC,EAAC,mNADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IADF,eAKE;AACE,IAAA,CAAC,EAAC,0bADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IALF,CADF,CAVH,GAuBG,IAxBN,CAnBF,CADF,CAXF,CADF,EA6DGP,iBAAiB,iBAAI;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA6BA,iBAA7B,CA7DxB,CADF;AAiED,CA3ED;;;AAvDEN,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,iB;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AAEAE,EAAAA,M;;AAwHF,eAAeb,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Size} from '../types';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/esm/InputFields/QuickSearch.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import IconButton from '../Button/Iconbutton';
 import { SearchIconWrapper, StyledIcon } from './styling';
+import { Size } from '../types';
 import { COLORS, LoadingIndicator } from '..';
 import { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';
 import SearchBarInput from './components/SearchBarInput';
@@ -155,7 +156,7 @@ const QuickSearch = ({
     className: size ? size : '',
     tabIndex: -1
   }, /*#__PURE__*/React.createElement(LoadingIndicator, {
-    size: "small",
+    size: Size.Small,
     color: COLORS.neutral_600
   })));
 };
@@ -170,7 +171,6 @@ QuickSearch.propTypes = {
   performSearchLabel: _pt.string,
   disabled: _pt.bool,
   onKeyDown: _pt.func,
-  size: _pt.oneOf(['small', 'medium']),
   margin: _pt.string,
   loading: _pt.bool
 };

package/dist/esm/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","StyledSearchField","QuickSearchField","props","margin","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","useRef","searchFieldInputRef","searchFieldVisible","setSearchFieldVisible","useState","tabbedHere","setTabbedHere","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size=\"small\" color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","StyledSearchField","QuickSearchField","props","margin","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","useRef","searchFieldInputRef","searchFieldVisible","setSearchFieldVisible","useState","tabbedHere","setTabbedHere","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/dist/esm/InputFields/RadioButton.js

@@ -7,11 +7,9 @@ import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
 const StyledRadioButton = styled.div`
   display: flex;
-  flex-direction: row;
   width: 100%;
   min-height: 48px;
   min-width: 48px;
-  align-items: center;
 
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
@@ -22,14 +20,14 @@ const StyledRadioButton = styled.div`
     pointer-events: none;
   }
 
-  .icon {
+  .radio-button-icon {
     margin: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: 36px;
     height: 36px;
+    min-width: 36px;
     border-radius: 50%;
 
     svg {
@@ -37,7 +35,7 @@ const StyledRadioButton = styled.div`
     }
   }
 
-  .label {
+  .radio-button-label {
     user-select: none;
     display: flex;
     flex-direction: column;
@@ -53,20 +51,29 @@ const StyledRadioButton = styled.div`
 
   &.small {
     ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 14px;
+    }
   }
 
   &.medium {
     ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
   }
 
   &.large {
     ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
   }
 
   &:not(.disabled):focus {
     outline: none;
 
-    .icon {
+    .radio-button-icon {
       background-color: ${COLORS.white};
       box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
 
@@ -77,7 +84,7 @@ const StyledRadioButton = styled.div`
   }
 
   &:not(.disabled):hover {
-    .icon {
+    .radio-button-icon {
       background-color: ${COLORS.primary_20};
 
       svg {
@@ -87,7 +94,7 @@ const StyledRadioButton = styled.div`
   }
 
   &:not(.disabled):active {
-    .icon {
+    .radio-button-icon {
       background: ${COLORS.primary_100};
       box-shadow: none;
 
@@ -103,16 +110,16 @@ const StyledRadioButton = styled.div`
 
     color: ${COLORS.neutral_300};
 
-    .icon,
-    .label {
+    .radio-button-icon,
+    .radio-button-label {
       pointer-events: none;
     }
 
-    .icon{
+    .radio-button-icon{
       background-color: ${COLORS.white};
     }
     
-    .icon svg {
+    .radio-button-icon svg {
       color: ${COLORS.neutral_300};
     }
   }
@@ -149,7 +156,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     showWarning: showWarning,
     selected: selected
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'icon',
+    className: 'radio-button-icon',
     id: id
   }, selected && /*#__PURE__*/React.createElement(RadioButtonOn, {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
@@ -158,7 +165,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'label'
+    className: 'radio-button-label'
   }, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));

package/dist/esm/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","ref","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","ref","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/esm/InputFields/ResponsiveComponentWrapper.js

@@ -4,6 +4,7 @@ import _pt from "prop-types";
  * Import React libraries.
  */
 import * as React from 'react';
+import { Size } from '../types';
 /**
  * Import custom styles.
  */
@@ -27,11 +28,10 @@ const ReponsiveComponentWrapper = ({
       window.removeEventListener('resize', handleResize);
     };
   });
-  return size && size === 'medium' ? /*#__PURE__*/React.createElement(ComponentXS, null, children) : size && size === 'small' ? /*#__PURE__*/React.createElement(ComponentXXS, null, children) : isMediumView ? /*#__PURE__*/React.createElement(ComponentXS, null, children) : /*#__PURE__*/React.createElement(ComponentXXS, null, children);
+  return size && size === Size.Medium ? /*#__PURE__*/React.createElement(ComponentXS, null, children) : size && size === Size.Small ? /*#__PURE__*/React.createElement(ComponentXXS, null, children) : isMediumView ? /*#__PURE__*/React.createElement(ComponentXS, null, children) : /*#__PURE__*/React.createElement(ComponentXXS, null, children);
 };
 
 ReponsiveComponentWrapper.propTypes = {
-  size: _pt.oneOf(['small', 'medium']),
   children: _pt.any
 };
 export default ReponsiveComponentWrapper;

package/dist/esm/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","isMediumView","setIsMediumView","useState","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;AAMA,MAAMC,yBAA8D,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD,KAAoC;AACzG;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCR,KAAK,CAACS,QAAN,CAAwB,KAAxB,CAAxC;AAEAT,EAAAA,KAAK,CAACU,SAAN,CAAgB,MAAM;AACpB,UAAMC,YAAY,GAAG,MAAM;AACzB,YAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,CAAmB,GAAEb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAA0C,EAA/D,CAAZ;AACAR,MAAAA,eAAe,CAACI,GAAG,CAACK,OAAL,CAAf;AACD,KAHD;;AAIAJ,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;AACA,WAAO,SAASQ,OAAT,GAAmB;AACxBN,MAAAA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAOL,IAAI,IAAIA,IAAI,KAAK,QAAjB,gBACL,oBAAC,WAAD,QAAcD,QAAd,CADK,GAEHC,IAAI,IAAIA,IAAI,KAAK,OAAjB,gBACF,oBAAC,YAAD,QAAeD,QAAf,CADE,GAEAE,YAAY,gBACd,oBAAC,WAAD,QAAcF,QAAd,CADc,gBAGd,oBAAC,YAAD,QAAeA,QAAf,CAPF;AASD,CAxBD;;;AAJEC,EAAAA,I,aAAO,O,EAAU,Q;AACjBD,EAAAA,Q;;AA6BF,eAAeD,yBAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: 'small' | 'medium';\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === 'medium' ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === 'small' ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}
+{"version":3,"sources":["../../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","isMediumView","setIsMediumView","useState","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Medium","Small"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;AAMA,MAAMC,yBAA8D,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD,KAAoC;AACzG;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCT,KAAK,CAACU,QAAN,CAAwB,KAAxB,CAAxC;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,MAAM;AACpB,UAAMC,YAAY,GAAG,MAAM;AACzB,YAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,CAAmB,GAAEb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAA0C,EAA/D,CAAZ;AACAR,MAAAA,eAAe,CAACI,GAAG,CAACK,OAAL,CAAf;AACD,KAHD;;AAIAJ,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;AACA,WAAO,SAASQ,OAAT,GAAmB;AACxBN,MAAAA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,MAAtB,gBACL,oBAAC,WAAD,QAAchB,QAAd,CADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,oBAAC,YAAD,QAAejB,QAAf,CADE,GAEAE,YAAY,gBACd,oBAAC,WAAD,QAAcF,QAAd,CADc,gBAGd,oBAAC,YAAD,QAAeA,QAAf,CAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;AA6BF,eAAeD,yBAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}

package/dist/esm/InputFields/SearchBar.js

@@ -2,10 +2,19 @@ import _pt from "prop-types";
 import React from 'react';
 import { COLORS } from '../styles/index';
 import { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';
-import { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';
+import { WarningMessage, InputWrapper, SearchIconWrapper } from './styling';
 import { IconButton } from '../Button';
 import SearchBarInput from './components/SearchBarInput';
 import SearchField from './components/SearchField';
+import styled from 'styled-components';
+const ClearIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  
+  &.hidden{
+    display: none !important;
+  }
+`;
 
 const SearchBar = ({
   id,
@@ -36,14 +45,7 @@ const SearchBar = ({
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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__*/React.createElement(SearchField, {
     id: `${id}_main`,
     size: size || '',
@@ -64,32 +66,27 @@ const SearchBar = ({
     enterSearch: enterSearch
   }), /*#__PURE__*/React.createElement(SearchIconWrapper, {
     className: size ? size : '',
-    role: "button",
-    "aria-label": performSearchLabel,
-    tabIndex: disabled ? -1 : 0
+    "aria-label": performSearchLabel
   }, /*#__PURE__*/React.createElement(IconButton, {
     id: `${id}_Search`,
     variant: "secondary",
     shape: "circular",
     action: enterSearch,
+    disabled: disabled,
     onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null
   }, /*#__PURE__*/React.createElement(SearchIcon, {
-    size: "24px",
-    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
-  }))), /*#__PURE__*/React.createElement(StyledIcon, {
-    className: size ? size : '',
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    hidden: searchTerm === '' || searchTerm === undefined
+    size: "24px"
+  }))), /*#__PURE__*/React.createElement(ClearIconWrapper, {
+    className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
   }, /*#__PURE__*/React.createElement(IconButton, {
     id: `${id}_Clear`,
     variant: "secondary",
     shape: "circular",
     action: removeSearch,
+    disabled: disabled,
     onKeyPress: e => isPressingEnter(e) ? removeSearch(e) : null
   }, /*#__PURE__*/React.createElement(ClearIcon, {
-    size: "24px",
-    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+    size: "24px"
   }))))), validationMessage && /*#__PURE__*/React.createElement(WarningMessage, {
     className: size || ''
   }, /*#__PURE__*/React.createElement(TechnicalWarning, {
@@ -109,7 +106,6 @@ SearchBar.propTypes = {
   disabled: _pt.bool,
   validationMessage: _pt.string,
   onKeyDown: _pt.func,
-  size: _pt.oneOf(['small', 'medium']),
   margin: _pt.string
 };
 export default SearchBar;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","WarningMessage","InputWrapper","SearchIconWrapper","StyledIcon","IconButton","SearchBarInput","SearchField","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","useRef","tabbedHere","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","target","includes","current","focus","term","neutral_300","neutral_600","undefined","warning_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        margin={margin}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={disabled ? -1 : 0}>\n            <IconButton id={`${id}_Search`} variant=\"secondary\" shape=\"circular\" action={enterSearch} onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n            </IconButton>\n          </SearchIconWrapper>\n          <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={disabled ? -1 : 0} hidden={searchTerm === '' || searchTerm === undefined}>\n            <IconButton id={`${id}_Clear`} variant=\"secondary\" shape=\"circular\" action={removeSearch} onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n            </IconButton>\n          </StyledIcon>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
+{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","WarningMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","useRef","tabbedHere","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","warning_400"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,iBAAvB;AACA,SAASC,MAAM,IAAIC,UAAnB,EAA+BC,KAAK,IAAIC,SAAxC,EAAmDC,gBAAnD,QAA2E,kCAA3E;AACA,SAASC,cAAT,EAAyBC,YAAzB,EAAuCC,iBAAvC,QAA4E,WAA5E;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,WAAP,MAAwB,0BAAxB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AAiBA,MAAMC,gBAAgB,GAAGD,MAAM,CAACE,GAAI;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;;AASA,MAAMC,SAAiD,GAAG,CAAC;AACzDC,EAAAA,EADyD;AAEzDC,EAAAA,UAFyD;AAGzDC,EAAAA,aAHyD;AAIzDC,EAAAA,WAJyD;AAKzDC,EAAAA,YALyD;AAMzDC,EAAAA,WANyD;AAOzDC,EAAAA,kBAPyD;AAQzDC,EAAAA,QARyD;AASzDC,EAAAA,iBATyD;AAUzDC,EAAAA,SAVyD;AAWzDC,EAAAA,IAXyD;AAYzDC,EAAAA,MAAM,GAAG;AAZgD,CAAD,KAapD;AACJ,QAAMC,QAAQ,GAAG7B,KAAK,CAAC8B,MAAN,CAAkB,IAAlB,CAAjB;AACA,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8BhC,KAAK,CAACiC,QAAN,CAAwB,KAAxB,CAApC;;AAEA,QAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,QAAQ,EAAEd,QADZ;AAEE,IAAA,MAAM,EAAEI;AAFV,kBAGE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAG,GAAEX,EAAG,OAAvB;AAA+B,IAAA,IAAI,EAAEU,IAAI,IAAI,EAA7C;AAAiD,IAAA,UAAU,EAAET,UAA7D;AAAyE,IAAA,QAAQ,EAAEM,QAAnF;AAA6F,IAAA,UAAU,EAAEO,UAAzG;AAAqH,IAAA,iBAAiB,EAAEN;AAAxI,kBACE,oBAAC,cAAD;AACE,IAAA,WAAW,EAAED,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,IAAA,GAAG,EAAEO,QAFP;AAGE,IAAA,EAAE,EAAEZ,EAHN;AAIE,IAAA,IAAI,EAAEU,IAJR;AAKE,IAAA,QAAQ,EAAEH,QALZ;AAME,IAAA,aAAa,EAAEQ,aANjB;AAOE,IAAA,aAAa,EAAGO,IAAD,IAAkBpB,aAAa,CAACoB,IAAD,CAPhD;AAQE,IAAA,UAAU,EAAErB,UARd;AASE,IAAA,SAAS,EAAEQ,SATb;AAUE,IAAA,WAAW,EAAEN;AAVf,IADF,eAaE,oBAAC,iBAAD;AAAmB,IAAA,SAAS,EAAEO,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,kBAAYJ;AAA5D,kBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAG,GAAEN,EAAG,SAAtB;AACY,IAAA,OAAO,EAAC,WADpB;AAEY,IAAA,KAAK,EAAC,UAFlB;AAGY,IAAA,MAAM,EAAEG,WAHpB;AAIY,IAAA,QAAQ,EAAEI,QAJtB;AAKY,IAAA,UAAU,EAAGW,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBf,WAAW,CAACe,CAAD,CAAhC,GAAsC;AAL3E,kBAME,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAC;AAAjB,IANF,CADF,CAbF,eAuBE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAE,CAACR,IAAI,GAAGA,IAAH,GAAU,EAAf,EAAmBa,MAAnB,CAA0B,CAACtB,UAAD,GAAc,SAAd,GAA0B,EAApD;AAA7B,kBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAG,GAAED,EAAG,QAAtB;AACY,IAAA,OAAO,EAAC,WADpB;AAEY,IAAA,KAAK,EAAC,UAFlB;AAGY,IAAA,MAAM,EAAEI,YAHpB;AAIY,IAAA,QAAQ,EAAEG,QAJtB;AAKY,IAAA,UAAU,EAAGW,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBd,YAAY,CAACc,CAAD,CAAjC,GAAuC;AAL5E,kBAME,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,IANF,CADF,CAvBF,CAHF,CADF,EAuCGV,iBAAiB,iBAChB,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAEE,IAAI,IAAI;AAAnC,kBACE,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAE1B,MAAM,CAACwC,WAAhC;AAA6C,IAAA,SAAS,EAAEd,IAAI,IAAI;AAAhE,IADF,eAEE,kCAAOF,iBAAP,CAFF,CAxCJ,CADF;AAgDD,CA1ED;;;AAvBER,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,S;AAEAE,EAAAA,M;;AAwFF,eAAeZ,SAAf","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';\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?: Size.Small | Size.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          <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 : ''} 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          <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/esm/InputFields/TextField.js

@@ -93,7 +93,6 @@ TextField.propTypes = {
   pattern: _pt.string,
   maxLength: _pt.number,
   withoutBorder: _pt.bool,
-  size: _pt.oneOf(['small', 'medium']),
   margin: _pt.string
 };
 export default TextField;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/TextField.tsx"],"names":["React","TechnicalWarning","COLORS","ErrorMessage","InputFieldStyling","InputWrapper","WarningMessage","TextField","id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","supressFocusRef","useRef","tabbedHere","setTabbedHere","useState","e","preventDefault","concat","target","undefined","current","warning_400","critical_400"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,QAAiC,kCAAjC;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,EAAuBC,iBAAvB,EAA0CC,YAA1C,EAAwDC,cAAxD,QAA8E,WAA9E;;AAuBA,MAAMC,SAAS,GAAG,CAAC;AACjBC,EAAAA,EADiB;AAEjBC,EAAAA,QAFiB;AAGjBC,EAAAA,MAHiB;AAIjBC,EAAAA,QAJiB;AAKjBC,EAAAA,QALiB;AAMjBC,EAAAA,KANiB;AAOjBC,EAAAA,iBAPiB;AAQjBC,EAAAA,oBARiB;AASjBC,EAAAA,IATiB;AAUjBC,EAAAA,YAViB;AAWjBC,EAAAA,WAXiB;AAYjBC,EAAAA,QAZiB;AAajBC,EAAAA,OAbiB;AAcjBC,EAAAA,OAdiB;AAejBC,EAAAA,SAfiB;AAgBjBC,EAAAA,aAhBiB;AAiBjBC,EAAAA,IAjBiB;AAkBjBC,EAAAA,MAAM,GAAG;AAlBQ,CAAD,KAmBI;AACpB,QAAMC,eAAe,GAAG1B,KAAK,CAAC2B,MAAN,CAAkB,IAAlB,CAAxB;AACA,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B7B,KAAK,CAAC8B,QAAN,CAAwB,KAAxB,CAApC;AACA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,MAAM,EAAEpB,MADV;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAGE,IAAA,MAAM,EAAEgB,MAHV;AAIE,IAAA,OAAO,EAAGM,CAAD,IAAY;AACnB,UAAItB,QAAQ,IAAIC,MAAhB,EAAwB;AACtBqB,QAAAA,CAAC,CAACC,cAAF;AACD;AACF;AARH,kBASE,oBAAC,iBAAD;AACE,IAAA,EAAE,EAAExB,EADN;AAEE,IAAA,IAAI,EAAEQ,IAAI,IAAI,MAFhB;AAGE,IAAA,KAAK,EAAEH,KAHT;AAIE,IAAA,SAAS,EAAE,CAACD,QAAQ,GAAG,OAAH,GAAa,EAAtB,EAA0BqB,MAA1B,CAAiCT,IAAI,GAAGA,IAAH,GAAU,EAA/C,CAJb;AAKE,IAAA,QAAQ,EAAEd,MAAM,IAAID,QAAV,GAAqB,CAAC,CAAtB,GAA0B,CALtC;AAME,IAAA,YAAY,EAAEQ,YANhB;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,QAAQ,EAAET,QARZ;AASE,IAAA,MAAM,EAAEC,MATV;AAUE,IAAA,QAAQ,EAAGqB,CAAD,IAAYpB,QAAQ,IAAIA,QAAQ,CAACoB,CAAC,EAAEG,MAAH,EAAWrB,KAAX,IAAoB,EAArB,CAV5C;AAWE,IAAA,uBAAuB,EAAEC,iBAAiB,KAAK,EAAtB,IAA4BA,iBAAiB,KAAKqB,SAX7E;AAYE,IAAA,kBAAkB,EAAErB,iBAAiB,KAAK,EAAtB,IAA4BA,iBAAiB,KAAKqB,SAAlD,IAA+DpB,oBAZrF;AAaE,IAAA,QAAQ,EAAEI,QAbZ;AAcE,IAAA,YAAY,EAAEC,OAdhB;AAeE,IAAA,UAAU,EAAEQ,UAfd;AAgBE,IAAA,OAAO,EAAEP,OAhBX;AAiBE,IAAA,SAAS,EAAEC,SAjBb;AAkBE,IAAA,MAAM,EAAE,MAAMO,aAAa,CAAC,KAAD,CAlB7B;AAmBE,IAAA,aAAa,EAAEN,aAnBjB;AAoBE,IAAA,WAAW,EAAGQ,CAAD,IAAY;AACvB,UAAI,EAAErB,MAAM,IAAID,QAAZ,KAAyB,CAACmB,UAA9B,EAA0CF,eAAe,CAACU,OAAhB,GAA0B,IAA1B;AAC3C,KAtBH;AAuBE,IAAA,OAAO,EAAGL,CAAD,IAAY;AACnB,UAAI,EAAErB,MAAM,IAAID,QAAZ,CAAJ,EAA2B;AACzB,YAAI,CAACiB,eAAe,CAACU,OAArB,EAA8BP,aAAa,CAAC,IAAD,CAAb,CAA9B,KACKH,eAAe,CAACU,OAAhB,GAA0B,KAA1B;AACN;AACF;AA5BH,IATF,CADF,EAyCGtB,iBAAiB,IAAI,CAACC,oBAAtB,iBACC,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAES,IAAI,IAAI;AAAnC,kBACE,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAEtB,MAAM,CAACmC;AAA5C,IADF,eAEE,kCAAOvB,iBAAP,CAFF,CA1CJ,EA+CGA,iBAAiB,IAAIC,oBAArB,iBACC,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAES,IAAI,IAAI;AAAjC,kBACE,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAEtB,MAAM,CAACoC;AAA5C,IADF,eAEE,kCAAOxB,iBAAP,CAFF,CAhDJ,CADF;AAwDD,CA9ED;;;AApBEN,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,iB;AACAC,EAAAA,oB;AACAC,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,O;AACAC,EAAAA,S;AACAC,EAAAA,a;AACAC,EAAAA,I,aAAO,O,EAAU,Q;AACjBC,EAAAA,M;;AAmFF,eAAelB,SAAf","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"}
+{"version":3,"sources":["../../../src/InputFields/TextField.tsx"],"names":["React","TechnicalWarning","COLORS","ErrorMessage","InputFieldStyling","InputWrapper","WarningMessage","TextField","id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","supressFocusRef","useRef","tabbedHere","setTabbedHere","useState","e","preventDefault","concat","target","undefined","current","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"}

package/dist/esm/InputFields/Textarea.js

@@ -10,10 +10,10 @@ import * as React from 'react';
 
 import { COLORS } from '../styles';
 import { ErrorMessage, WarningMessage } from './styling';
+
 /**
  * Import custom components.
  */
-
 import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
 /**
  * Import third-party libraries.
@@ -131,7 +131,6 @@ Textarea.propTypes = {
   onChange: _pt.func,
   validationType: _pt.oneOf(['error', 'warning']),
   validationMessage: _pt.string,
-  size: _pt.oneOf(['small', 'medium']).isRequired,
   margin: _pt.string
 };
 export default Textarea;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ErrorMessage","WarningMessage","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","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":"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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"}
+{"version":3,"sources":["../../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ErrorMessage","WarningMessage","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","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":"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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"}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { Size } from '../../types';
 import 'jest-styled-components';
 import { QuickSearch } from '..';
 describe('<QuickSearch />', () => {
@@ -16,7 +17,7 @@ describe('<QuickSearch />', () => {
       }
     }, /*#__PURE__*/React.createElement(QuickSearch, {
       id: "QuickSearch",
-      size: 'small',
+      size: Size.Small,
       enterSearch: () => {
         searchEntered = true;
       },