@laerdal/life-react-components 3.0.1-dev.4 → 3.0.1-dev.9

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

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

package/dist/esm/InputFields/RadioButton.js

@@ -0,0 +1,187 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { RadioButtonOff, RadioButtonOn } from '../icons/systemicons/SystemIcons';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { Size } from '../types';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
+const StyledRadioButton = styled.div`
+  display: flex;
+  width: 100%;
+  min-height: 48px;
+  min-width: 48px;
+
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+  cursor: pointer;
+ 
+  color: ${COLORS.black};
+
+  .pointerTransparent {
+    pointer-events: none;
+  }
+
+  .radio-button-icon {
+    margin: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 36px;
+    min-width: 36px;
+    border-radius: 50%;
+
+    svg {
+      color: ${props => props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600};
+    }
+  }
+
+  .radio-button-label {
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+
+    label{
+      cursor: inherit;
+    }
+
+    span {
+      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    }
+  }
+
+  &.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;
+
+    .radio-button-icon {
+      background-color: ${COLORS.white};
+      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+
+      svg {
+        color: ${COLORS.neutral_600};
+      }
+    }
+  }
+
+  &:not(.disabled):hover {
+    .radio-button-icon {
+      background-color: ${COLORS.primary_20};
+
+      svg {
+        color: ${COLORS.primary_700};
+      }
+    }
+  }
+
+  &:not(.disabled):active {
+    .radio-button-icon {
+      background: ${COLORS.primary_100};
+      box-shadow: none;
+
+      svg {
+        color: ${COLORS.primary_800};
+      }
+    }
+  }
+
+  &.disabled {
+    box-shadow: none;
+    cursor: not-allowed;
+
+    color: ${COLORS.neutral_300};
+
+    .radio-button-icon,
+    .radio-button-label {
+      pointer-events: none;
+    }
+
+    .radio-button-icon{
+      background-color: ${COLORS.white};
+    }
+    
+    .radio-button-icon svg {
+      color: ${COLORS.neutral_300};
+    }
+  }
+`;
+const RadioButton = /*#__PURE__*/React.forwardRef(({
+  id,
+  selected,
+  label,
+  additionalLabel,
+  showWarning,
+  select,
+  disabled,
+  margin,
+  iconPointerEventsTransparent,
+  size,
+  tabIndexVal
+}, ref) => {
+  const onKeyPress = e => {
+    if (e.keyCode === 13 && !disabled) {
+      select(!selected);
+    }
+  };
+
+  size = size ?? Size.Medium;
+  return /*#__PURE__*/React.createElement(StyledRadioButton, {
+    key: id,
+    margin: margin,
+    ref: ref,
+    onClick: () => !disabled && select(!selected),
+    onMouseDown: e => e.preventDefault(),
+    onKeyDown: onKeyPress,
+    disabled: disabled,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
+    showWarning: showWarning,
+    selected: selected
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'radio-button-icon',
+    id: id
+  }, selected && /*#__PURE__*/React.createElement(RadioButtonOn, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  }), !selected && /*#__PURE__*/React.createElement(RadioButtonOff, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'radio-button-label'
+  }, label && /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
+});
+RadioButton.propTypes = {
+  id: _pt.string.isRequired,
+  selected: _pt.bool.isRequired,
+  select: _pt.func.isRequired,
+  label: _pt.string,
+  additionalLabel: _pt.string,
+  showWarning: _pt.bool,
+  disabled: _pt.bool,
+  iconPointerEventsTransparent: _pt.bool,
+  margin: _pt.string,
+  tabIndexVal: _pt.number
+};
+export default RadioButton;
+//# sourceMappingURL=RadioButton.js.map

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

@@ -0,0 +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","tabIndexVal","ref","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAA0B,mBAA1B;AACA,SAAQC,cAAR,EAAwBC,aAAxB,QAA4C,kCAA5C;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,mBAAjE,QAA2F,sBAA3F;AAEA,MAAMC,iBAAiB,GAAGV,MAAM,CAACW,GAAwF;AACzH;AACA;AACA;AACA;AACA;AACA,IAAIC,KAAK,IAAKA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAC9D;AACA;AACA,WAAWV,MAAM,CAACW,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,KAAK,IAAKA,KAAK,CAACG,QAAN,GAAiBZ,MAAM,CAACa,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBd,MAAM,CAACe,WAA3B,GAAyCf,MAAM,CAACgB,WAAa;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQV,mBAAmB,CAACL,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAA2C;AACtE;AACA;AACA;AACA;AACA,MAAMN,iBAAiB,CAACJ,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMR,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BX,MAAM,CAACkB,KAAM;AACvC,4BAA4BlB,MAAM,CAACa,WAAY;AAC/C;AACA;AACA,iBAAiBb,MAAM,CAACgB,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BhB,MAAM,CAACmB,UAAW;AAC5C;AACA;AACA,iBAAiBnB,MAAM,CAACoB,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBpB,MAAM,CAACqB,WAAY;AACvC;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACsB,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAatB,MAAM,CAACuB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BvB,MAAM,CAACkB,KAAM;AACvC;AACA;AACA;AACA,eAAelB,MAAM,CAACuB,WAAY;AAClC;AACA;AACA,CAtHA;AAsIA,MAAMC,WAAW,gBAAG5B,KAAK,CAAC6B,UAAN,CAAwC,CAAC;AAC3DC,EAAAA,EAD2D;AAE3Dd,EAAAA,QAF2D;AAG3De,EAAAA,KAH2D;AAI3DC,EAAAA,eAJ2D;AAK3Dd,EAAAA,WAL2D;AAM3De,EAAAA,MAN2D;AAO3DC,EAAAA,QAP2D;AAQ3DpB,EAAAA,MAR2D;AAS3DqB,EAAAA,4BAT2D;AAU3DC,EAAAA,IAV2D;AAW3DC,EAAAA;AAX2D,CAAD,EAYlDC,GAZkD,KAY1C;AAChB,QAAMC,UAAU,GAAIC,CAAD,IAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACP,QAAzB,EAAmC;AACjCD,MAAAA,MAAM,CAAC,CAACjB,QAAF,CAAN;AACD;AACF,GAJD;;AAMAoB,EAAAA,IAAI,GAAGA,IAAI,IAAI9B,IAAI,CAACoC,MAApB;AAEA,sBACE,oBAAC,iBAAD;AAAmB,IAAA,GAAG,EAAEZ,EAAxB;AAA4B,IAAA,MAAM,EAAEhB,MAApC;AACmB,IAAA,GAAG,EAAEwB,GADxB;AAEmB,IAAA,OAAO,EAAE,MAAM,CAACJ,QAAD,IAAaD,MAAM,CAAC,CAACjB,QAAF,CAFrD;AAGmB,IAAA,WAAW,EAAEwB,CAAC,IAAIA,CAAC,CAACG,cAAF,EAHrC;AAImB,IAAA,SAAS,EAAEJ,UAJ9B;AAKmB,IAAA,QAAQ,EAAEL,QAL7B;AAMmB,IAAA,SAAS,EAAEE,IAAI,CAACQ,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCZ,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAN9B;AAOmB,IAAA,QAAQ,EAAEA,QAAQ,GAAG,CAAC,CAAJ,GAASG,WAAW,GAAGA,WAAH,GAAiB,CAP1E;AAQmB,IAAA,WAAW,EAAEnB,WARhC;AASmB,IAAA,QAAQ,EAAEF;AAT7B,kBAUE;AAAK,IAAA,SAAS,EAAE,mBAAhB;AAAqC,IAAA,EAAE,EAAEc;AAAzC,KACId,QAAQ,iBAAI,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAEmB,4BAA4B,GAAG,oBAAH,GAA0B,EAAhF;AAAoF,IAAA,IAAI,EAAC;AAAzF,IADhB,EAEI,CAACnB,QAAD,iBAAa,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAEmB,4BAA4B,GAAG,oBAAH,GAA0B,EAAjF;AAAqF,IAAA,IAAI,EAAC;AAA1F,IAFjB,CAVF,eAcE;AAAK,IAAA,SAAS,EAAE;AAAhB,KACGJ,KAAK,iBAAI;AAAO,IAAA,OAAO,EAAED;AAAhB,KAAqBC,KAArB,CADZ,EAEGC,eAAe,KAAKe,SAApB,iBAAiC,kCAAOf,eAAP,CAFpC,CAdF,CADF;AAqBD,CA1CmB,CAApB;;AAbEF,EAAAA,E;AACAd,EAAAA,Q;AACAiB,EAAAA,M;AACAF,EAAAA,K;AACAC,EAAAA,e;AACAd,EAAAA,W;AACAgB,EAAAA,Q;AACAC,EAAAA,4B;AACArB,EAAAA,M;AAEAuB,EAAAA,W;;AA+CF,eAAeT,WAAf","sourcesContent":["import * as React from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport { Size } from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\r\n\r\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n \r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .radio-button-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .radio-button-label {\r\n    user-select: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    label{\r\n      cursor: inherit;\r\n    }\r\n\r\n    span {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    outline: none;\r\n\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n\r\n      svg {\r\n        color: ${COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${COLORS.primary_100};\r\n      box-shadow: none;\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: none;\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .radio-button-icon,\r\n    .radio-button-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .radio-button-icon{\r\n      background-color: ${COLORS.white};\r\n    }\r\n    \r\n    .radio-button-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface Props {\r\n  id: string;\r\n  selected: boolean;\r\n  select: (selected: boolean) => void;\r\n  label?: string;\r\n  additionalLabel?: string;\r\n  showWarning?: boolean;\r\n  disabled?: boolean;\r\n  iconPointerEventsTransparent?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  tabIndexVal?: number;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\r\n  id,\r\n  selected,\r\n  label,\r\n  additionalLabel,\r\n  showWarning,\r\n  select,\r\n  disabled,\r\n  margin,\r\n  iconPointerEventsTransparent,\r\n  size,\r\n  tabIndexVal\r\n}: Props, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledRadioButton key={id} margin={margin}\r\n                       ref={ref}\r\n                       onClick={() => !disabled && select(!selected)}\r\n                       onMouseDown={e => e.preventDefault()}\r\n                       onKeyDown={onKeyPress}\r\n                       disabled={disabled}\r\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\r\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                       showWarning={showWarning}\r\n                       selected={selected}>\r\n      <div className={'radio-button-icon'} id={id}>\r\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\r\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\r\n      </div>\r\n      <div className={'radio-button-label'}>\r\n        {label && <label htmlFor={id}>{label}</label>}\r\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n      </div>\r\n    </StyledRadioButton>\r\n  );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"file":"RadioButton.js"}

package/dist/esm/InputFields/ResponsiveComponentWrapper.js

@@ -0,0 +1,38 @@
+import _pt from "prop-types";
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Import custom styles.
+ */
+
+import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles'; // Add component-specific types
+
+const ReponsiveComponentWrapper = ({
+  children,
+  size
+}) => {
+  // Globally used variables within the component
+  const [isMediumView, setIsMediumView] = React.useState(false);
+  React.useEffect(() => {
+    const handleResize = () => {
+      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);
+      setIsMediumView(mql.matches);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return function cleanup() {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+  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 = {
+  children: _pt.any
+};
+export default ReponsiveComponentWrapper;
+//# sourceMappingURL=ResponsiveComponentWrapper.js.map

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

@@ -0,0 +1 @@
+{"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":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return function cleanup() {\r\n      window.removeEventListener('resize', handleResize);\r\n    };\r\n  });\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"file":"ResponsiveComponentWrapper.js"}

package/dist/esm/InputFields/SearchBar.js

@@ -0,0 +1,112 @@
+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 } 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,
+  searchTerm,
+  setSearchTerm,
+  enterSearch,
+  removeSearch,
+  placeholder,
+  performSearchLabel,
+  disabled,
+  validationMessage,
+  onKeyDown,
+  size,
+  margin = '4px 0'
+}) => {
+  const inputRef = React.useRef(null);
+  const [tabbedHere, setTabbedHere] = React.useState(false);
+
+  const isPressingEnter = e => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
+    disabled: disabled,
+    margin: margin
+  }, /*#__PURE__*/React.createElement(SearchField, {
+    id: `${id}_main`,
+    size: size || '',
+    searchTerm: searchTerm,
+    disabled: disabled,
+    tabbedHere: tabbedHere,
+    validationMessage: validationMessage
+  }, /*#__PURE__*/React.createElement(SearchBarInput, {
+    placeholder: disabled ? '' : placeholder,
+    ref: inputRef,
+    id: id,
+    size: size,
+    disabled: disabled,
+    setTabbedHere: setTabbedHere,
+    setSearchTerm: term => setSearchTerm(term),
+    searchTerm: searchTerm,
+    onKeyDown: onKeyDown,
+    enterSearch: enterSearch
+  }), /*#__PURE__*/React.createElement(SearchIconWrapper, {
+    className: size ? size : '',
+    "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"
+  }))), /*#__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"
+  }))))), validationMessage && /*#__PURE__*/React.createElement(WarningMessage, {
+    className: size || ''
+  }, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    color: COLORS.warning_400,
+    className: size || ''
+  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
+};
+
+SearchBar.propTypes = {
+  id: _pt.string.isRequired,
+  searchTerm: _pt.string,
+  setSearchTerm: _pt.func.isRequired,
+  enterSearch: _pt.func.isRequired,
+  removeSearch: _pt.func.isRequired,
+  placeholder: _pt.string,
+  performSearchLabel: _pt.string,
+  disabled: _pt.bool,
+  validationMessage: _pt.string,
+  onKeyDown: _pt.func,
+  margin: _pt.string
+};
+export default SearchBar;
+//# sourceMappingURL=SearchBar.js.map

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

@@ -0,0 +1 @@
+{"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":"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","sourcesContent":["import React from 'react';\r\nimport { COLORS } from '../styles/index';\r\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\r\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\r\nimport { IconButton } from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport { Size } from '../types';\r\nimport styled from 'styled-components';\r\n\r\ntype SeachBarProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  removeSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  performSearchLabel?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  \r\n  &.hidden{\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\r\n  id,\r\n  searchTerm,\r\n  setSearchTerm,\r\n  enterSearch,\r\n  removeSearch,\r\n  placeholder,\r\n  performSearchLabel,\r\n  disabled,\r\n  validationMessage,\r\n  onKeyDown,\r\n  size,\r\n  margin = '4px 0',\r\n}) => {\r\n  const inputRef = React.useRef<any>(null);\r\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        disabled={disabled}\r\n        margin={margin}>\r\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            ref={inputRef}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setTabbedHere={setTabbedHere}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enterSearch}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SearchIcon size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <ClearIcon size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <WarningMessage className={size || ''}>\r\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\r\n          <span>{validationMessage}</span>\r\n        </WarningMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"file":"SearchBar.js"}

package/dist/esm/InputFields/TextField.js

@@ -0,0 +1,99 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { COLORS } from '../styles';
+import { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';
+
+const TextField = ({
+  id,
+  disabled,
+  locked,
+  onChange,
+  hasError,
+  value,
+  validationMessage,
+  validationIsCritical,
+  type,
+  autoComplete,
+  placeholder,
+  required,
+  correct,
+  pattern,
+  maxLength,
+  withoutBorder,
+  size,
+  margin = '4px 0'
+}) => {
+  const supressFocusRef = React.useRef(null);
+  const [tabbedHere, setTabbedHere] = React.useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
+    locked: locked,
+    disabled: disabled,
+    margin: margin,
+    onClick: e => {
+      if (disabled || locked) {
+        e.preventDefault();
+      }
+    }
+  }, /*#__PURE__*/React.createElement(InputFieldStyling, {
+    id: id,
+    type: type || 'text',
+    value: value,
+    className: (hasError ? 'error' : '').concat(size ? size : ''),
+    tabIndex: locked || disabled ? -1 : 0,
+    autoComplete: autoComplete,
+    placeholder: placeholder,
+    disabled: disabled,
+    locked: locked,
+    onChange: e => onChange && onChange(e?.target?.value || ''),
+    activeValidationMessage: validationMessage !== '' && validationMessage !== undefined,
+    activeErrorMessage: validationMessage !== '' && validationMessage !== undefined && validationIsCritical,
+    required: required,
+    correctInput: correct,
+    tabbedHere: tabbedHere,
+    pattern: pattern,
+    maxLength: maxLength,
+    onBlur: () => setTabbedHere(false),
+    withoutBorder: withoutBorder,
+    onMouseDown: e => {
+      if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;
+    },
+    onFocus: e => {
+      if (!(locked || disabled)) {
+        if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
+      }
+    }
+  })), validationMessage && !validationIsCritical && /*#__PURE__*/React.createElement(WarningMessage, {
+    className: size || ''
+  }, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    size: "20px",
+    color: COLORS.warning_400
+  }), /*#__PURE__*/React.createElement("span", null, validationMessage)), validationMessage && validationIsCritical && /*#__PURE__*/React.createElement(ErrorMessage, {
+    className: size || ''
+  }, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    size: "20px",
+    color: COLORS.critical_400
+  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
+};
+
+TextField.propTypes = {
+  id: _pt.string.isRequired,
+  disabled: _pt.bool,
+  locked: _pt.bool,
+  onChange: _pt.func,
+  hasError: _pt.bool,
+  value: _pt.string,
+  validationMessage: _pt.string,
+  validationIsCritical: _pt.bool,
+  type: _pt.string,
+  autoComplete: _pt.string,
+  placeholder: _pt.string,
+  required: _pt.bool,
+  correct: _pt.bool,
+  pattern: _pt.string,
+  maxLength: _pt.number,
+  withoutBorder: _pt.bool,
+  margin: _pt.string
+};
+export default TextField;
+//# sourceMappingURL=TextField.js.map

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

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

package/dist/esm/InputFields/Textarea.js

@@ -0,0 +1,137 @@
+import _pt from "prop-types";
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom styles.
+ */
+
+import { COLORS } from '../styles';
+import { ErrorMessage, WarningMessage } from './styling';
+
+/**
+ * Import custom components.
+ */
+import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
+/**
+ * Import third-party libraries.
+ */
+
+import styled from 'styled-components';
+import { ComponentMStyling, ComponentTextStyle } from '../styles/typography'; // Add component-specific styles.
+
+const TextareaWrapper = styled.div`
+  width: 100%;
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+`;
+const TextArea = styled.textarea`
+  border: 1px solid ${COLORS.neutral_400};
+  background: ${COLORS.white};
+  border-radius: 4px;
+  outline: none;
+  margin: 1px;
+  padding: 16px;
+
+  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}
+
+  &.small {
+    width: 304px;
+  }
+
+  &.medium {
+    width: 344px;
+  }
+
+  &:hover {
+    border: 2px solid ${COLORS.primary_700};
+    margin: 0px;
+  }
+
+  &:active,
+  &:focus {
+    border: 2px solid ${COLORS.primary_800};
+    margin: 0px;
+    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};
+  }
+
+  &.warning,
+  &.warning:hover,
+  &.warning:focus,
+  &.warning:active {
+    border: none;
+    margin: 1px;
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
+    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
+  }
+
+  &.error,
+  &.error:hover,
+  &.error:focus,
+  &.error:active {
+    border: none;
+    margin: 1px;
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
+    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
+  }
+
+  &:disabled,
+  &:disabled:hover,
+  &:disabled:focus {
+    cursor: not-allowed;
+    border: 1px solid ${COLORS.neutral_100};
+    margin: 1px;
+    box-shadow: none;
+
+    &::placeholder {
+      color: ${COLORS.neutral_300};
+    }
+  }
+
+  &::placeholder {
+    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
+  }
+`; // Add component-specific types
+
+const Textarea = ({
+  id,
+  placeholder,
+  value,
+  size,
+  disabled,
+  validationType,
+  validationMessage,
+  onChange,
+  margin
+}) => {
+  return /*#__PURE__*/React.createElement(TextareaWrapper, null, /*#__PURE__*/React.createElement(TextArea, {
+    id: id,
+    value: value,
+    placeholder: placeholder,
+    className: `${size} ${validationType}`,
+    disabled: disabled,
+    onChange: e => onChange && onChange(e?.target?.value || '')
+  }), validationMessage && validationType === 'warning' && /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    size: "20px",
+    color: COLORS.warning_400
+  }), /*#__PURE__*/React.createElement("span", null, validationMessage)), validationMessage && validationType === 'error' && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    size: "20px",
+    color: COLORS.critical_400
+  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
+};
+
+Textarea.propTypes = {
+  id: _pt.string.isRequired,
+  placeholder: _pt.string.isRequired,
+  value: _pt.string,
+  disabled: _pt.bool,
+  onChange: _pt.func,
+  validationType: _pt.oneOf(['error', 'warning']),
+  validationMessage: _pt.string,
+  margin: _pt.string
+};
+export default Textarea;
+//# sourceMappingURL=Textarea.js.map