@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full

package/dist/js/InputFields/Checkbox.js

@@ -17,6 +17,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _styles = require("../styles");
 
+var _types = require("../types");
+
 var _typography = require("../styles/typography");
 
 var _templateObject;
@@ -29,13 +31,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\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: ", ";\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .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    .icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .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    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ", ";\n    }\n\n    .icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\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: ", ";\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .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    .icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .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    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ", ";\n    }\n\n    .icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
   return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
 }, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
 
-var RadioButton = function RadioButton(_ref) {
+var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
 
   var id = _ref.id,
@@ -43,6 +45,7 @@ var RadioButton = function RadioButton(_ref) {
       select = _ref.select,
       label = _ref.label,
       showWarning = _ref.showWarning,
+      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       disabled = _ref.disabled,
       margin = _ref.margin,
       size = _ref.size,
@@ -62,11 +65,13 @@ var RadioButton = function RadioButton(_ref) {
     select(!selected);
   };
 
-  size = (_size = size) !== null && _size !== void 0 ? _size : 'medium';
+  size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
+  console.log('size prop', size.toString().toLowerCase());
   return /*#__PURE__*/React.createElement(StyledCheckBox, {
     key: id,
+    ref: ref,
     disabled: disabled,
-    className: size.concat(disabled ? ' disabled' : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
     selected: selected,
     tabIndex: disabled ? -1 : 0,
     showWarning: showWarning,
@@ -80,18 +85,20 @@ var RadioButton = function RadioButton(_ref) {
     id: id,
     className: 'icon'
   }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   }) : semiSelected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxSemi, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   }) : /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOff, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), label && /*#__PURE__*/React.createElement("label", {
     className: 'label',
     htmlFor: id
   }, label));
-};
-
-RadioButton.propTypes = {
+});
+Checkbox.propTypes = {
   id: _propTypes.default.string.isRequired,
   selected: _propTypes.default.bool.isRequired,
   select: _propTypes.default.func.isRequired,
@@ -99,9 +106,9 @@ RadioButton.propTypes = {
   showWarning: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   margin: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  iconPointerEventsTransparent: _propTypes.default.bool,
   semiSelected: _propTypes.default.bool
 };
-var _default = RadioButton;
+var _default = Checkbox;
 exports.default = _default;
 //# sourceMappingURL=Checkbox.js.map

package/dist/js/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","id","select","label","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\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  .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    cursor: inherit;\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  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: 'small' | 'medium' | 'large';\n  semiSelected?: boolean;\n}\n\nconst RadioButton: React.FunctionComponent<Props> = ({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? 'medium';\n\n  return (\n    <StyledCheckBox key={id}\n                    disabled={disabled}\n                    className={size.concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi size=\"24px\"/>\n              : <CheckboxOff size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n};\n\nexport default RadioButton;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","Medium","console","log","toString","toLowerCase","concat","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,y7CAQhB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CARW,EAWTC,eAAOC,KAXE,EA4BL,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,WAAN,GAAoBJ,eAAOK,WAA3B,GAAyCL,eAAOM,WAA3F;AAAA,CA5BA,EAsCd,mCAAkBC,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAtCc,EA0Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA1Cc,EA8Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA9Cc,EAqDMD,eAAOS,KArDb,EAsDQT,eAAOG,WAtDf,EAyDHH,eAAOM,WAzDJ,EAgEMN,eAAOU,UAhEb,EAmEHV,eAAOW,WAnEJ,EA0EAX,eAAOY,WA1EP,EA8EHZ,eAAOa,WA9EJ,EAuFPb,eAAOc,WAvFA,EA+FMd,eAAOS,KA/Fb,EAmGLT,eAAOc,WAnGF,CAApB;;AAqHA,IAAMC,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAWMC,GAXN,EAWc;AAAA;;AAAA,MAVhBC,EAUgB,QAVhBA,EAUgB;AAAA,MAThBjB,QASgB,QAThBA,QASgB;AAAA,MARhBkB,MAQgB,QARhBA,MAQgB;AAAA,MAPhBC,KAOgB,QAPhBA,KAOgB;AAAA,MANhBjB,WAMgB,QANhBA,WAMgB;AAAA,MALhBkB,4BAKgB,QALhBA,4BAKgB;AAAA,MAJhBC,QAIgB,QAJhBA,QAIgB;AAAA,MAHhBxB,MAGgB,QAHhBA,MAGgB;AAAA,MAFhByB,IAEgB,QAFhBA,IAEgB;AAAA,MADhBC,YACgB,QADhBA,YACgB;;AACrE,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACL,QAAzB,EAAmC;AACjCH,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMA,MAAM2B,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIN,QAAJ,EAAc;AACZ;AACD;;AACDH,IAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD,GALD;;AAOAsB,EAAAA,IAAI,YAAGA,IAAH,yCAAWM,YAAKC,MAApB;AAEAC,EAAAA,OAAO,CAACC,GAAR,CAAY,WAAZ,EAAyBT,IAAI,CAACU,QAAL,GAAgBC,WAAhB,EAAzB;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEhB,EAArB;AACgB,IAAA,GAAG,EAAED,GADrB;AAEgB,IAAA,QAAQ,EAAEK,QAF1B;AAGgB,IAAA,SAAS,EAAEC,IAAI,CAACU,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCb,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAH3B;AAIgB,IAAA,QAAQ,EAAErB,QAJ1B;AAKgB,IAAA,QAAQ,EAAEqB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAL1C;AAMgB,IAAA,WAAW,EAAEnB,WAN7B;AAOgB,IAAA,MAAM,EAAEL,MAPxB;AAQgB,IAAA,OAAO,EAAE8B,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAE,qBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACU,cAAF,EAAJ;AAAA;AAV9B,kBAWE;AAAK,IAAA,EAAE,EAAElB,EAAT;AAAa,IAAA,SAAS,EAAE;AAAxB,KAEIjB,QAAQ,gBACJ,oBAAC,uBAAD;AAAY,IAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,IAAA,IAAI,EAAC;AAAtF,IADI,GAEJG,YAAY,gBACV,oBAAC,yBAAD;AAAc,IAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,IAAA,IAAI,EAAC;AAAxF,IADU,gBAEV,oBAAC,wBAAD;AAAa,IAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,IAAA,IAAI,EAAC;AAAvF,IANV,CAXF,EAqBID,KAAK,iBAEH;AAAO,IAAA,SAAS,EAAE,OAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGE,KAFH,CAvBN,CADF;AAgCD,CA5DgB,CAAjB;;AAZEF,EAAAA,E;AACAjB,EAAAA,Q;AACAkB,EAAAA,M;AACAC,EAAAA,K;AACAjB,EAAAA,W;AACAmB,EAAAA,Q;AACAxB,EAAAA,M;AAEAuB,EAAAA,4B;AACAG,EAAAA,Y;;eAiEaV,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\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    cursor: inherit;\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  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       iconPointerEventsTransparent,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  console.log('size prop', size.toString().toLowerCase());\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/js/InputFields/QuickSearch.js

@@ -47,7 +47,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var QuickSearchField = (0, _styledComponents.default)(_SearchField.StyledSearchField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: none;\n  width: 48px;\n  ", "\n\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  input {\n    ::placeholder {\n      font-style: italic;\n      color: ", ";\n    }\n  }\n\n  &:focus-within {\n    box-shadow: ", ";\n    width: 100%;\n  }\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (props) {
+var QuickSearchField = (0, _styledComponents.default)(_SearchField.StyledSearchField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  ", "\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  input {\n    ::placeholder {\n      font-style: italic;\n      color: ", ";\n    }\n  }\n\n  box-shadow: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (props) {
+  return props.expanded ? '100%' : '48px';
+}, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _.COLORS.neutral_600, function (props) {
   return props.expanded ? "inset 0px 0px 0px 2px ".concat(_.COLORS.primary_800) : 'none !important';
@@ -83,12 +85,17 @@ var QuickSearch = function QuickSearch(_ref) {
 
   var handleClickOutside = function handleClickOutside(e) {
     if (searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(e.target)) {
-      if (searchFieldVisible) {
+      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
         setSearchFieldVisible(false);
       }
     }
   };
 
+  React.useEffect(function () {
+    if (searchTerm !== null && searchTerm !== void 0 && searchTerm.length) {
+      setSearchFieldVisible(true);
+    }
+  }, [searchTerm]);
   React.useEffect(function () {
     document.addEventListener('click', handleClickOutside);
     return function () {
@@ -109,7 +116,7 @@ var QuickSearch = function QuickSearch(_ref) {
     }
 
     if (e.key === 'Escape') {
-      if (searchFieldVisible) {
+      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
         setSearchFieldVisible(false);
       }
     }
@@ -119,6 +126,11 @@ var QuickSearch = function QuickSearch(_ref) {
     ref: searchFieldRef,
     expanded: searchFieldVisible,
     id: "".concat(id, "_main"),
+    onBlur: function onBlur(event) {
+      if (event.relatedTarget && searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
+        setSearchFieldVisible(false);
+      }
+    },
     "data-testid": "".concat(id, "_main"),
     className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
     tabbedHere: tabbedHere,
@@ -146,8 +158,9 @@ var QuickSearch = function QuickSearch(_ref) {
     id: "".concat(id, "_Searchbutton"),
     variant: "secondary",
     shape: "circular",
+    tabIndex: searchFieldVisible ? -1 : 0,
     action: function action(e) {
-      return searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible);
+      return searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true);
     }
   }, /*#__PURE__*/React.createElement(_SystemIcons.Search, {
     size: "24px",
@@ -156,12 +169,17 @@ var QuickSearch = function QuickSearch(_ref) {
     className: size ? size : '',
     role: "button",
     tabIndex: -1,
-    hidden: searchTerm === '' || searchTerm === undefined
+    hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible
   }, /*#__PURE__*/React.createElement(_Iconbutton.default, {
     id: "".concat(id, "_Clearicon"),
     variant: "secondary",
     shape: "circular",
-    action: removeSearch
+    action: function action(e) {
+      var _searchFieldInputRef$2;
+
+      removeSearch(e);
+      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 ? void 0 : _searchFieldInputRef$2.focus();
+    }
   }, /*#__PURE__*/React.createElement(_SystemIcons.Clear, {
     size: "24px",
     color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","StyledSearchField","props","margin","COLORS","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","tabbedHere","setTabbedHere","handleClickOutside","e","current","contains","target","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","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  box-shadow: none;\n  width: 48px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\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  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  &:focus-within {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n    width: 100%;\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) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\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) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\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          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible))}>\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}>\n        <IconButton id={`${id}_Clearicon`} variant=\"secondary\" shape=\"circular\" action={removeSearch}>\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":["QuickSearchField","StyledSearchField","props","expanded","margin","COLORS","neutral_600","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","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  width: ${(props) => (props.expanded ? '100%' : '48px')};\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  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 : '')}\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"}

package/dist/js/InputFields/RadioButton.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Size } from '../types';
 interface Props {
     id: string;
     selected: boolean;
@@ -7,8 +8,9 @@ interface Props {
     additionalLabel?: string;
     showWarning?: boolean;
     disabled?: boolean;
+    iconPointerEventsTransparent?: boolean;
     margin?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
 }
-declare const RadioButton: React.FunctionComponent<Props>;
+declare const RadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default RadioButton;

package/dist/js/InputFields/RadioButton.js

@@ -17,6 +17,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _styles = require("../styles");
 
+var _types = require("../types");
+
 var _typography = require("../styles/typography");
 
 var _templateObject;
@@ -29,13 +31,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\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: ", ";\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      ", "\n    }\n  }\n\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .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    .icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .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    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ", ";\n    }\n    \n    .icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\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: ", ";\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      ", "\n    }\n  }\n\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .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    .icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .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    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ", ";\n    }\n    \n    .icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
   return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
 }, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
 
-var RadioButton = function RadioButton(_ref) {
+var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
 
   var id = _ref.id,
@@ -46,6 +48,7 @@ var RadioButton = function RadioButton(_ref) {
       select = _ref.select,
       disabled = _ref.disabled,
       margin = _ref.margin,
+      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       size = _ref.size;
 
   var onKeyPress = function onKeyPress(e) {
@@ -54,10 +57,11 @@ var RadioButton = function RadioButton(_ref) {
     }
   };
 
-  size = (_size = size) !== null && _size !== void 0 ? _size : 'medium';
+  size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
   return /*#__PURE__*/React.createElement(StyledRadioButton, {
     key: id,
     margin: margin,
+    ref: ref,
     onClick: function onClick() {
       return !disabled && select(!selected);
     },
@@ -66,24 +70,25 @@ var RadioButton = function RadioButton(_ref) {
     },
     onKeyDown: onKeyPress,
     disabled: disabled,
-    className: size.concat(disabled ? ' disabled' : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
     tabIndex: disabled ? -1 : 0,
     showWarning: showWarning,
     selected: selected
   }, /*#__PURE__*/React.createElement("div", {
     className: 'icon',
     id: id
-  }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
+  }, selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
-  }) : /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOff, {
+  }), !selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOff, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), /*#__PURE__*/React.createElement("div", {
     className: 'label'
   }, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
-};
-
+});
 RadioButton.propTypes = {
   id: _propTypes.default.string.isRequired,
   selected: _propTypes.default.bool.isRequired,
@@ -92,8 +97,8 @@ RadioButton.propTypes = {
   additionalLabel: _propTypes.default.string,
   showWarning: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  margin: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large'])
+  iconPointerEventsTransparent: _propTypes.default.bool,
+  margin: _propTypes.default.string
 };
 var _default = RadioButton;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","id","label","additionalLabel","select","disabled","size","onKeyPress","e","keyCode","preventDefault","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 {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  .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  margin?: string;\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst RadioButton: React.FunctionComponent<Props> = ({\n                                                       id,\n                                                       selected,\n                                                       label,\n                                                       additionalLabel,\n                                                       showWarning,\n                                                       select,\n                                                       disabled,\n                                                       margin,\n                                                       size\n                                                     }: Props) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? 'medium';\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'icon'} id={id}>\n        {selected ? <RadioButtonOn size=\"24px\"/> : <RadioButtonOff 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":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","onKeyPress","e","keyCode","Size","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"}

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

@@ -63,7 +63,7 @@ var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id: id,
     "data-testid": id,
     className: size ? size : '',
-    tabIndex: -1,
+    tabIndex: 0,
     disabled: disabled,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);

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

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

package/dist/js/Modals/ModalDialog.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { ButtonProps } from '../Button/Button';
+import { Size } from '../types';
 interface ButtonAction extends Pick<ButtonProps, 'variant'> {
     action: () => void;
     text: string;
 }
 interface NewModalProps {
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     isModalOpen: boolean;
     closeModalAndClearInput: any;
     title?: string;

package/dist/js/Modals/ModalDialog.js

@@ -17,6 +17,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _styles = require("../styles");
 
+var _types = require("../types");
+
 var _ModalContainer = _interopRequireDefault(require("./ModalContainer"));
 
 var _ModalStyles = require("./ModalStyles");
@@ -59,13 +61,13 @@ var ModalDialog = function ModalDialog(_ref) {
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
-      case 'small':
+      case _types.Size.Small:
         return '320px';
 
-      case 'medium':
+      case _types.Size.Medium:
         return '400px';
 
-      case 'large':
+      case _types.Size.Large:
         return '480px';
 
       default:
@@ -75,13 +77,13 @@ var ModalDialog = function ModalDialog(_ref) {
 
   var getMaxWidth = function getMaxWidth() {
     switch (size) {
-      case 'small':
+      case _types.Size.Small:
         return '512px';
 
-      case 'medium':
+      case _types.Size.Medium:
         return '400px';
 
-      case 'large':
+      case _types.Size.Large:
         return '588px';
 
       default:
@@ -91,13 +93,13 @@ var ModalDialog = function ModalDialog(_ref) {
 
   var getImageHeight = function getImageHeight() {
     switch (size) {
-      case 'small':
+      case _types.Size.Small:
         return 160;
 
-      case 'medium':
+      case _types.Size.Medium:
         return 200;
 
-      case 'large':
+      case _types.Size.Large:
         return 240;
 
       default:
@@ -107,13 +109,13 @@ var ModalDialog = function ModalDialog(_ref) {
 
   var getMarginBottom = function getMarginBottom() {
     switch (size) {
-      case 'small':
+      case _types.Size.Small:
         return '16px';
 
-      case 'medium':
+      case _types.Size.Medium:
         return '24px';
 
-      case 'large':
+      case _types.Size.Large:
         return '32px';
 
       default:
@@ -233,7 +235,7 @@ var ModalDialog = function ModalDialog(_ref) {
     size: size
   }, buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b) {
     return /*#__PURE__*/React.createElement(_Button.Button, {
-      size: size === 'large' ? 'big' : size === 'medium' ? 'normal' : size,
+      size: size,
       onClick: b.action,
       variant: b.variant
     }, b.text);
@@ -242,7 +244,6 @@ var ModalDialog = function ModalDialog(_ref) {
 
 exports.ModalDialog = ModalDialog;
 ModalDialog.propTypes = {
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   isModalOpen: _propTypes.default.bool.isRequired,
   closeModalAndClearInput: _propTypes.default.any.isRequired,
   title: _propTypes.default.string,