@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/InputFields/RadioButton.js

@@ -1,174 +1,77 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject;
+
 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
-}, ref) => {
-  const onKeyPress = e => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\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: ", ";\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      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\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: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ", ";\n    }\n    \n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+}, COLORS.black, function (props) {
+  return props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600;
+}, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.white, COLORS.primary_500, COLORS.neutral_600, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300);
+var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _size;
+
+  var id = _ref.id,
+      selected = _ref.selected,
+      label = _ref.label,
+      additionalLabel = _ref.additionalLabel,
+      showWarning = _ref.showWarning,
+      select = _ref.select,
+      disabled = _ref.disabled,
+      margin = _ref.margin,
+      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
+      size = _ref.size;
+
+  var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
       select(!selected);
     }
   };
 
-  size = size ?? Size.Medium;
-  return /*#__PURE__*/React.createElement(StyledRadioButton, {
-    key: id,
+  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
+  return /*#__PURE__*/_jsxs(StyledRadioButton, {
     margin: margin,
     ref: ref,
-    onClick: () => !disabled && select(!selected),
-    onMouseDown: e => e.preventDefault(),
+    onClick: function onClick() {
+      return !disabled && select(!selected);
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
     onKeyDown: onKeyPress,
     disabled: disabled,
     className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
     tabIndex: disabled ? -1 : 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)));
+    selected: selected,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: 'radio-button-icon',
+      id: id,
+      children: [selected && /*#__PURE__*/_jsx(RadioButtonOn, {
+        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        size: "24px"
+      }), !selected && /*#__PURE__*/_jsx(RadioButtonOff, {
+        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        size: "24px"
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: 'radio-button-label',
+      children: [label && /*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        children: label
+      }), additionalLabel !== undefined && /*#__PURE__*/_jsx("span", {
+        children: additionalLabel
+      })]
+    })]
+  }, id);
 });
 RadioButton.propTypes = {
   id: _pt.string.isRequired,

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  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"}
+{"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","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","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,IAAMC,iBAAiB,GAAGV,MAAM,CAACW,GAAV,oyDAMnB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANc,EASZV,MAAM,CAACW,KATK,EA0BR,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,QAAN,GAAiBZ,MAAM,CAACa,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBd,MAAM,CAACe,WAA3B,GAAyCf,MAAM,CAACgB,WAA3F;AAAA,CA1BG,EAwCfV,mBAAmB,CAACL,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAxCJ,EA6CjBN,iBAAiB,CAACJ,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CA7CA,EAoDjBP,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CApDA,EA2DjBR,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CA3DA,EAqEGX,MAAM,CAACkB,KArEV,EAsEKlB,MAAM,CAACa,WAtEZ,EAyENb,MAAM,CAACgB,WAzED,EAgFGhB,MAAM,CAACmB,UAhFV,EAmFNnB,MAAM,CAACoB,WAnFD,EA0FHpB,MAAM,CAACqB,WA1FJ,EA8FNrB,MAAM,CAACsB,WA9FD,EAuGVtB,MAAM,CAACuB,WAvGG,EA+GGvB,MAAM,CAACkB,KA/GV,EAmHRlB,MAAM,CAACuB,WAnHC,CAAvB;AAqIA,IAAMC,WAAW,gBAAG5B,KAAK,CAAC6B,UAAN,CAAwC,gBAWlDC,GAXkD,EAW1C;AAAA;;AAAA,MAVhBC,EAUgB,QAVhBA,EAUgB;AAAA,MAThBf,QASgB,QAThBA,QASgB;AAAA,MARhBgB,KAQgB,QARhBA,KAQgB;AAAA,MAPhBC,eAOgB,QAPhBA,eAOgB;AAAA,MANhBf,WAMgB,QANhBA,WAMgB;AAAA,MALhBgB,MAKgB,QALhBA,MAKgB;AAAA,MAJhBC,QAIgB,QAJhBA,QAIgB;AAAA,MAHhBrB,MAGgB,QAHhBA,MAGgB;AAAA,MAFhBsB,4BAEgB,QAFhBA,4BAEgB;AAAA,MADhBC,IACgB,QADhBA,IACgB;;AAChB,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACL,QAAzB,EAAmC;AACjCD,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMAqB,EAAAA,IAAI,YAAGA,IAAH,yCAAW/B,IAAI,CAACmC,MAApB;AAEA,sBACE,MAAC,iBAAD;AAA4B,IAAA,MAAM,EAAE3B,MAApC;AACmB,IAAA,GAAG,EAAEgB,GADxB;AAEmB,IAAA,OAAO,EAAE;AAAA,aAAM,CAACK,QAAD,IAAaD,MAAM,CAAC,CAAClB,QAAF,CAAzB;AAAA,KAF5B;AAGmB,IAAA,WAAW,EAAE,qBAAAuB,CAAC;AAAA,aAAIA,CAAC,CAACG,cAAF,EAAJ;AAAA,KAHjC;AAImB,IAAA,SAAS,EAAEJ,UAJ9B;AAKmB,IAAA,QAAQ,EAAEH,QAL7B;AAMmB,IAAA,SAAS,EAAEE,IAAI,CAACM,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCV,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAN9B;AAOmB,IAAA,QAAQ,EAAEA,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP7C;AAQmB,IAAA,WAAW,EAAEjB,WARhC;AASmB,IAAA,QAAQ,EAAEF,QAT7B;AAAA,4BAUE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAqC,MAAA,EAAE,EAAEe,EAAzC;AAAA,iBACIf,QAAQ,iBAAI,KAAC,aAAD;AAAe,QAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAAhF;AAAoF,QAAA,IAAI,EAAC;AAAzF,QADhB,EAEI,CAACpB,QAAD,iBAAa,KAAC,cAAD;AAAgB,QAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAAjF;AAAqF,QAAA,IAAI,EAAC;AAA1F,QAFjB;AAAA,MAVF,eAcE;AAAK,MAAA,SAAS,EAAE,oBAAhB;AAAA,iBACGJ,KAAK,iBAAI;AAAO,QAAA,OAAO,EAAED,EAAhB;AAAA,kBAAqBC;AAArB,QADZ,EAEGC,eAAe,KAAKa,SAApB,iBAAiC;AAAA,kBAAOb;AAAP,QAFpC;AAAA,MAdF;AAAA,KAAwBF,EAAxB,CADF;AAqBD,CAzCmB,CAApB;;AAZEA,EAAAA,E;AACAf,EAAAA,Q;AACAkB,EAAAA,M;AACAF,EAAAA,K;AACAC,EAAAA,e;AACAf,EAAAA,W;AACAiB,EAAAA,Q;AACAC,EAAAA,4B;AACAtB,EAAAA,M;;AA+CF,eAAec,WAAf","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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _pt from "prop-types";
 
 /**
@@ -11,15 +12,21 @@ import { Size } from '../types';
 
 import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles'; // Add component-specific types
 
-const ReponsiveComponentWrapper = ({
-  children,
-  size
-}) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
+  var children = _ref.children,
+      size = _ref.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 ', '')}`);
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMediumView = _React$useState2[0],
+      setIsMediumView = _React$useState2[1];
+
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
       setIsMediumView(mql.matches);
     };
 
@@ -28,7 +35,15 @@ const ReponsiveComponentWrapper = ({
       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);
+  return size && size === Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
+    children: children
+  }) : size && size === Size.Small ? /*#__PURE__*/_jsx(ComponentXXS, {
+    children: children
+  }) : isMediumView ? /*#__PURE__*/_jsx(ComponentXS, {
+    children: children
+  }) : /*#__PURE__*/_jsx(ComponentXXS, {
+    children: children
+  });
 };
 
 ReponsiveComponentWrapper.propTypes = {

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

@@ -1 +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":["/**\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"}
+{"version":3,"sources":["../../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","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,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAP,MAAAA,eAAe,CAACG,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,KAAC,WAAD;AAAA,cAAchB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;AAAA,cAAejB;AAAf,IADE,GAEAG,YAAY,gBACd,KAAC,WAAD;AAAA,cAAcH;AAAd,IADc,gBAGd,KAAC,YAAD;AAAA,cAAeA;AAAf,IAPF;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

@@ -1,4 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject;
+
 import React from 'react';
 import { COLORS } from '../styles/index';
 import { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';
@@ -7,33 +11,28 @@ 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;
-  }
-`;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n"])));
 
-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);
+var SearchBar = function SearchBar(_ref) {
+  var id = _ref.id,
+      searchTerm = _ref.searchTerm,
+      _setSearchTerm = _ref.setSearchTerm,
+      enterSearch = _ref.enterSearch,
+      removeSearch = _ref.removeSearch,
+      placeholder = _ref.placeholder,
+      performSearchLabel = _ref.performSearchLabel,
+      disabled = _ref.disabled,
+      validationMessage = _ref.validationMessage,
+      onKeyDown = _ref.onKeyDown,
+      size = _ref.size,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
+  var containerRef = React.useRef(null);
 
-  const isPressingEnter = e => {
+  var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -43,56 +42,72 @@ const SearchBar = ({
     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)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputWrapper, {
+      disabled: disabled,
+      margin: margin,
+      children: /*#__PURE__*/_jsxs(SearchField, {
+        id: "".concat(id, "_main"),
+        size: size || '',
+        ref: containerRef,
+        searchTerm: searchTerm,
+        disabled: disabled,
+        validationMessage: validationMessage,
+        children: [/*#__PURE__*/_jsx(SearchBarInput, {
+          placeholder: disabled ? '' : placeholder,
+          id: id,
+          size: size,
+          disabled: disabled,
+          setSearchTerm: function setSearchTerm(term) {
+            return _setSearchTerm(term);
+          },
+          searchTerm: searchTerm,
+          onKeyDown: onKeyDown,
+          enterSearch: enterSearch,
+          focusParentRefs: [containerRef]
+        }), /*#__PURE__*/_jsx(SearchIconWrapper, {
+          className: size ? size : '',
+          "aria-label": performSearchLabel,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            id: "".concat(id, "_Search"),
+            variant: "secondary",
+            shape: "circular",
+            action: enterSearch,
+            disabled: disabled,
+            onKeyPress: function onKeyPress(e) {
+              return isPressingEnter(e) ? enterSearch(e) : null;
+            },
+            children: /*#__PURE__*/_jsx(SearchIcon, {
+              size: "24px"
+            })
+          })
+        }), /*#__PURE__*/_jsx(ClearIconWrapper, {
+          className: (size ? size : '').concat(!searchTerm ? ' hidden' : ''),
+          children: /*#__PURE__*/_jsx(IconButton, {
+            id: "".concat(id, "_Clear"),
+            variant: "secondary",
+            shape: "circular",
+            action: removeSearch,
+            disabled: disabled,
+            onKeyPress: function onKeyPress(e) {
+              return isPressingEnter(e) ? removeSearch(e) : null;
+            },
+            children: /*#__PURE__*/_jsx(ClearIcon, {
+              size: "24px"
+            })
+          })
+        })]
+      })
+    }), validationMessage && /*#__PURE__*/_jsxs(WarningMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        color: COLORS.warning_400,
+        className: size || ''
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
 };
 
 SearchBar.propTypes = {

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","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';\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"}
+{"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","containerRef","useRef","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","warning_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport { 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 containerRef = React.useRef<any>(null);\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 || ''} ref={containerRef} searchTerm={searchTerm} disabled={disabled} validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n            focusParentRefs={[containerRef]}\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"}