@laerdal/life-react-components 1.8.0-dev.4 → 1.8.0-dev.7

package/dist/InputFields/PasswordField.js

@@ -6,11 +6,13 @@ var _templateObject, _templateObject2;
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { InputFieldStyling, InputWrapper } from './styling';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { useFocusVisibleRef } from '../common/FocusVisible';
+import { COLORS } from '../styles';
+import { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';
+import { Z_INDEXES } from '../styles';
+import { useFocusVisibleRef } from '../common';
 import { IconButton } from '../Button';
 import { SystemIcons } from '../icons';
+import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -20,9 +22,8 @@ var PasswordRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemp
 var PasswordField = function PasswordField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
-      locked = _ref.locked,
       _onChange = _ref.onChange,
-      hasError = _ref.hasError,
+      invalid = _ref.invalid,
       value = _ref.value,
       validationMessage = _ref.validationMessage,
       autoComplete = _ref.autoComplete,
@@ -48,7 +49,7 @@ var PasswordField = function PasswordField(_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InputWrapper, {
       disabled: disabled,
-      locked: locked,
+      readOnly: readOnly,
       margin: margin,
       children: /*#__PURE__*/_jsx("div", {
         style: {
@@ -61,12 +62,12 @@ var PasswordField = function PasswordField(_ref) {
             type: passwordHidden ? 'password' : 'text',
             name: "password",
             value: value,
-            className: (hasError ? 'error' : '').concat(size ? size : ''),
-            tabIndex: disabled || locked ? -1 : 0,
+            className: (invalid ? 'invalid ' : '').concat(size ? size : ''),
+            tabIndex: disabled || readOnly ? -1 : 0,
             autoComplete: autoComplete,
+            activeErrorMessage: !!validationMessage,
             placeholder: placeholder,
             disabled: disabled,
-            locked: locked,
             required: required,
             readOnly: readOnly,
             onChange: function onChange(e) {
@@ -76,7 +77,7 @@ var PasswordField = function PasswordField(_ref) {
             }
           }), /*#__PURE__*/_jsx(StyledPassSwitch, {
             className: size ? size : '',
-            children: !disabled && !locked ? passwordHidden ? /*#__PURE__*/_jsx(IconButton, {
+            children: !disabled && !readOnly ? passwordHidden ? /*#__PURE__*/_jsx(IconButton, {
               id: "".concat(id, "_Visible"),
               iconColor: '#666666',
               variant: 'secondary',
@@ -100,9 +101,13 @@ var PasswordField = function PasswordField(_ref) {
           })]
         })
       })
-    }), validationMessage && /*#__PURE__*/_jsx("span", {
-      className: "error-msg",
-      children: validationMessage
+    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
     })]
   });
 };
@@ -110,9 +115,8 @@ var PasswordField = function PasswordField(_ref) {
 PasswordField.propTypes = {
   id: _pt.string.isRequired,
   disabled: _pt.bool,
-  locked: _pt.bool,
   onChange: _pt.func,
-  hasError: _pt.bool,
+  invalid: _pt.bool,
   value: _pt.string,
   validationMessage: _pt.string,
   autoComplete: _pt.string,

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","InputFieldStyling","InputWrapper","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","StyledPassSwitch","div","badge","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS} from '../styles';\nimport {Size} from '../types';\nimport {InputFieldStyling, InputWrapper} from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = ({\n                         id,\n                         disabled,\n                         locked,\n                         onChange,\n                         hasError,\n                         value,\n                         validationMessage,\n                         autoComplete,\n                         placeholder,\n                         required,\n                         readOnly,\n                         size,\n                         margin\n                       }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}>\n        <div style={{display: 'block'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={disabled || locked ? -1 : 0}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <IconButton id={`${id}_Visible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff/>\n                  </IconButton>\n                ) : (\n                  <IconButton id={`${id}_NotVisible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn/>\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\nimport {Size} from '../types';\nimport {InputFieldStyling, InputWrapper, ErrorMessage} from './styling';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = ({\n                         id,\n                         disabled,\n                         onChange,\n                         invalid,\n                         value,\n                         validationMessage,\n                         autoComplete,\n                         placeholder,\n                         required,\n                         readOnly,\n                         size,\n                         margin\n                       }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        readOnly={readOnly}\n        margin={margin}>\n        <div style={{display: 'block'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(invalid ? 'invalid ' : '').concat(size ? size : '')}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton id={`${id}_Visible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff/>\n                  </IconButton>\n                ) : (\n                  <IconButton id={`${id}_NotVisible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn/>\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage &&\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      }\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/InputFields/RadioButton.cjs

@@ -23,8 +23,6 @@ var _styles = require("../styles");
 
 var _types = require("../types");
 
-var _typography = require("../styles/typography");
-
 var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -38,8 +36,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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    ", "\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\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\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\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\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.focusStyles, _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, _styles.COLORS.primary_20, _styles.COLORS.primary_700);
+  return props.selected ? _styles.COLORS.primary_500 : props.invalid ? _styles.COLORS.critical_400 : _styles.COLORS.neutral_600;
+}, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.focusStyles, _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, _styles.COLORS.primary_20, _styles.COLORS.primary_700);
 
 var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
@@ -48,7 +46,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       selected = _ref.selected,
       label = _ref.label,
       additionalLabel = _ref.additionalLabel,
-      showWarning = _ref.showWarning,
+      invalid = _ref.invalid,
       select = _ref.select,
       disabled = _ref.disabled,
       margin = _ref.margin,
@@ -76,7 +74,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled,
     className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-    showWarning: showWarning,
+    invalid: invalid,
     selected: selected,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'radio-button-icon',
@@ -105,7 +103,7 @@ RadioButton.propTypes = {
   select: _propTypes.default.func.isRequired,
   label: _propTypes.default.string,
   additionalLabel: _propTypes.default.string,
-  showWarning: _propTypes.default.bool,
+  invalid: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   iconPointerEventsTransparent: _propTypes.default.bool,
   margin: _propTypes.default.string,

package/dist/InputFields/RadioButton.cjs.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","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV,utDAMnB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANc,EASZC,eAAOC,KATK,EA0BR,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,WAAN,GAAoBJ,eAAOK,WAA3B,GAAyCL,eAAOM,WAA3F;AAAA,CA1BG,EAwCf,qCAAoBC,2BAAmBC,OAAvC,EAAgDR,eAAOC,KAAvD,CAxCe,EA6CjB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA7CiB,EAoDjB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CApDiB,EA2DjB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA3DiB,EAkEjBQ,mBAlEiB,EAuEGT,eAAOU,UAvEV,EA0ENV,eAAOW,WA1ED,EAiFHX,eAAOY,WAjFJ,EAoFNZ,eAAOa,WApFD,EA4FVb,eAAOc,WA5FG,EAoGGd,eAAOe,KApGV,EAwGRf,eAAOc,WAxGC,EA8GGd,eAAOU,UA9GV,EAiHNV,eAAOW,WAjHD,CAAvB;;AAsIA,IAAMK,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAaWC,GAbX,EAamB;AAAA;;AAAA,MAZhBC,EAYgB,QAZhBA,EAYgB;AAAA,MAXhBlB,QAWgB,QAXhBA,QAWgB;AAAA,MAVhBmB,KAUgB,QAVhBA,KAUgB;AAAA,MAThBC,eASgB,QAThBA,eASgB;AAAA,MARhBlB,WAQgB,QARhBA,WAQgB;AAAA,MAPhBmB,MAOgB,QAPhBA,MAOgB;AAAA,MANhBC,QAMgB,QANhBA,QAMgB;AAAA,MALhBzB,MAKgB,QALhBA,MAKgB;AAAA,MAJhB0B,4BAIgB,QAJhBA,4BAIgB;AAAA,MAHhBC,IAGgB,QAHhBA,IAGgB;AAAA,MAFhBC,WAEgB,QAFhBA,WAEgB;AAAA,MADhBC,SACgB,QADhBA,SACgB;;AAC7E,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACP,QAAzB,EAAmC;AACjCD,MAAAA,MAAM,CAAC,CAACrB,QAAF,CAAN;AACD;AACF,GAJD;;AAMAwB,EAAAA,IAAI,YAAGA,IAAH,yCAAWM,YAAKC,MAApB;AAEA,MAAMC,GAAG,aAAMR,IAAN,cAAcE,SAAS,IAAI,EAA3B,cAAiCJ,QAAQ,GAAG,WAAH,GAAiB,EAA1D,CAAT;AAEA,sBACE,sBAAC,iBAAD;AAA4B,IAAA,MAAM,EAAEzB,MAApC;AACmB,IAAA,GAAG,EAAEoB,GADxB;AAEmB,IAAA,OAAO,EAAE;AAAA,aAAM,CAACK,QAAD,IAAaD,MAAM,CAAC,CAACrB,QAAF,CAAzB;AAAA,KAF5B;AAGmB,IAAA,WAAW,EAAEiC,iCAHhC;AAImB,IAAA,SAAS,EAAEN,UAJ9B;AAKmB,IAAA,QAAQ,EAAEL,QAL7B;AAMmB,IAAA,SAAS,EAAEU,GAN9B;AAOmB,IAAA,QAAQ,EAAEV,QAAQ,GAAG,CAAC,CAAJ,GAASG,WAAW,GAAGA,WAAH,GAAiB,CAP1E;AAQmB,IAAA,WAAW,EAAEvB,WARhC;AASmB,IAAA,QAAQ,EAAEF,QAT7B;AAAA,4BAUE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAqC,MAAA,EAAE,EAAEkB,EAAzC;AAAA,iBACGlB,QAAQ,iBAAI,qBAAC,0BAAD;AAAe,QAAA,SAAS,EAAEuB,4BAA4B,GAAG,oBAAH,GAA0B,EAAhF;AAAoF,QAAA,IAAI,EAAC;AAAzF,QADf,EAEG,CAACvB,QAAD,iBACC,qBAAC,2BAAD;AAAgB,QAAA,SAAS,EAAEuB,4BAA4B,GAAG,oBAAH,GAA0B,EAAjF;AAAqF,QAAA,IAAI,EAAC;AAA1F,QAHJ;AAAA,MAVF,eAeE;AAAK,MAAA,SAAS,EAAE,oBAAhB;AAAA,iBACGJ,KAAK,iBAAI;AAAO,QAAA,OAAO,EAAED,EAAhB;AAAA,kBAAqBC;AAArB,QADZ,EAEGC,eAAe,KAAKc,SAApB,iBAAiC;AAAA,kBAAOd;AAAP,QAFpC;AAAA,MAfF;AAAA,KAAwBF,EAAxB,CADF;AAsBD,CA9CmB,CAApB;;AAdEA,EAAAA,E;AACAlB,EAAAA,Q;AACAqB,EAAAA,M;AACAF,EAAAA,K;AACAC,EAAAA,e;AACAlB,EAAAA,W;AACAoB,EAAAA,Q;AACAC,EAAAA,4B;AACA1B,EAAAA,M;AAEA4B,EAAAA,W;AACAC,EAAAA,S;;eAmDaZ,W","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\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    ${focusStyles}\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\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\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  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\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  tabIndexVal?: number;\n  className?: string;\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                                                               tabIndexVal,\n                                                               className\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  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 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 &&\n          <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.cjs"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: 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.invalid ? COLORS.critical_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    ${focusStyles}\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\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\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  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\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  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <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.cjs"}

package/dist/InputFields/RadioButton.d.ts

@@ -6,7 +6,7 @@ interface Props {
     select: (selected: boolean) => void;
     label?: string;
     additionalLabel?: string;
-    showWarning?: boolean;
+    invalid?: boolean;
     disabled?: boolean;
     iconPointerEventsTransparent?: boolean;
     margin?: string;

package/dist/InputFields/RadioButton.js

@@ -8,14 +8,14 @@ import styled from 'styled-components';
 import { RadioButtonOff, RadioButtonOn } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { Size } from '../types';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 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    ", "\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\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\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\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\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;
+  return props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600;
 }, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
 var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
@@ -24,7 +24,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       selected = _ref.selected,
       label = _ref.label,
       additionalLabel = _ref.additionalLabel,
-      showWarning = _ref.showWarning,
+      invalid = _ref.invalid,
       select = _ref.select,
       disabled = _ref.disabled,
       margin = _ref.margin,
@@ -52,7 +52,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled,
     className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-    showWarning: showWarning,
+    invalid: invalid,
     selected: selected,
     children: [/*#__PURE__*/_jsxs("div", {
       className: 'radio-button-icon',
@@ -81,7 +81,7 @@ RadioButton.propTypes = {
   select: _pt.func.isRequired,
   label: _pt.string,
   additionalLabel: _pt.string,
-  showWarning: _pt.bool,
+  invalid: _pt.bool,
   disabled: _pt.bool,
   iconPointerEventsTransparent: _pt.bool,
   margin: _pt.string,

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Medium","cls","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, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\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    ${focusStyles}\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\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\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  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\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  tabIndexVal?: number;\n  className?: string;\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                                                               tabIndexVal,\n                                                               className\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  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 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 &&\n          <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","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Medium","cls","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: 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.invalid ? COLORS.critical_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    ${focusStyles}\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\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\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  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\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  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <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/InputFields/SearchBar.cjs

@@ -116,10 +116,10 @@ var SearchBar = function SearchBar(_ref) {
           })
         })]
       })
-    }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+    }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
-        color: _index.COLORS.warning_400,
+        color: _index.COLORS.critical_400,
         className: size || ''
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","containerRef","React","useRef","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","COLORS","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'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     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.cjs"}
+{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","containerRef","React","useRef","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","COLORS","critical_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 {ErrorMessage, InputWrapper, SearchIconWrapper} 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'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     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        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.cjs"}

package/dist/InputFields/SearchBar.js

@@ -6,7 +6,7 @@ var _templateObject;
 import React from 'react';
 import { COLORS } from '../styles/index';
 import { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';
-import { WarningMessage, InputWrapper, SearchIconWrapper } from './styling';
+import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
 import { IconButton } from '../Button';
 import SearchBarInput from './components/SearchBarInput';
 import SearchField from './components/SearchField';
@@ -98,10 +98,10 @@ var SearchBar = function SearchBar(_ref) {
           })
         })]
       })
-    }), validationMessage && /*#__PURE__*/_jsxs(WarningMessage, {
+    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/_jsx(TechnicalWarning, {
-        color: COLORS.warning_400,
+        color: COLORS.critical_400,
         className: size || ''
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage

package/dist/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","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'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     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"}
+{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","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","critical_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 {ErrorMessage, InputWrapper, SearchIconWrapper} 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'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     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        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}

package/dist/InputFields/TextField.cjs

@@ -19,7 +19,7 @@ var _styles = require("../styles");
 
 var _styling = require("./styling");
 
-var _FocusVisible = require("../common/FocusVisible");
+var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -30,31 +30,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TextField = function TextField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
-      locked = _ref.locked,
+      readOnly = _ref.readOnly,
       _onChange = _ref.onChange,
-      hasError = _ref.hasError,
       value = _ref.value,
       validationMessage = _ref.validationMessage,
-      validationIsCritical = _ref.validationIsCritical,
       type = _ref.type,
       autoComplete = _ref.autoComplete,
       placeholder = _ref.placeholder,
       required = _ref.required,
-      correct = _ref.correct,
       pattern = _ref.pattern,
       maxLength = _ref.maxLength,
       withoutBorder = _ref.withoutBorder,
+      state = _ref.state,
       size = _ref.size,
       _ref$margin = _ref.margin,
       margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
-  var elementRef = (0, _FocusVisible.useFocusVisibleRef)();
+  var elementRef = (0, _common.useFocusVisibleRef)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputWrapper, {
-      locked: locked,
+      readOnly: readOnly,
       disabled: disabled,
       margin: margin,
       onClick: function onClick(e) {
-        if (disabled || locked) {
+        if (disabled || readOnly) {
           e.preventDefault();
         }
       },
@@ -63,34 +61,24 @@ var TextField = function TextField(_ref) {
         ref: elementRef,
         type: type || 'text',
         value: value,
-        className: (hasError ? 'error' : '').concat(size ? size : ''),
-        tabIndex: locked || disabled ? -1 : 0,
+        className: "".concat(state || '', " ").concat(size || ''),
+        tabIndex: readOnly || disabled ? -1 : 0,
         autoComplete: autoComplete,
         placeholder: placeholder,
         disabled: disabled,
-        locked: locked,
+        readOnly: readOnly,
         onChange: function onChange(e) {
           var _e$target;
 
           return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
         },
-        activeValidationMessage: validationMessage !== '' && validationMessage !== undefined,
-        activeErrorMessage: validationMessage !== '' && validationMessage !== undefined && validationIsCritical,
+        activeErrorMessage: !!validationMessage,
         required: required,
-        correctInput: correct,
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
       })
-    }), validationMessage && !validationIsCritical && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
-      className: size || '',
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
-        size: "20px",
-        color: _styles.COLORS.warning_400
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: validationMessage
-      })]
-    }), validationMessage && validationIsCritical && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+    }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
         size: "20px",
@@ -105,17 +93,14 @@ var TextField = function TextField(_ref) {
 TextField.propTypes = {
   id: _propTypes.default.string.isRequired,
   disabled: _propTypes.default.bool,
-  locked: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
   onChange: _propTypes.default.func,
-  hasError: _propTypes.default.bool,
   value: _propTypes.default.string,
   validationMessage: _propTypes.default.string,
-  validationIsCritical: _propTypes.default.bool,
   type: _propTypes.default.string,
   autoComplete: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   required: _propTypes.default.bool,
-  correct: _propTypes.default.bool,
   pattern: _propTypes.default.string,
   maxLength: _propTypes.default.number,
   withoutBorder: _propTypes.default.bool,

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","elementRef","e","preventDefault","concat","target","undefined","COLORS","warning_400","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size} from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  validationIsCritical?: boolean;\n  type?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  correct?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  validationIsCritical,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  correct,\n  pattern,\n  maxLength,\n  withoutBorder,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        locked={locked}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || locked) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={(hasError ? 'error' : '').concat(size ? size : '')}\n          tabIndex={locked || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          locked={locked}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeValidationMessage={validationMessage !== '' && validationMessage !== undefined}\n          activeErrorMessage={validationMessage !== '' && validationMessage !== undefined && validationIsCritical}\n          required={required}\n          correctInput={correct}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n      </InputWrapper>\n      {validationMessage && !validationIsCritical && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationIsCritical && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.cjs"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","elementRef","e","preventDefault","target","COLORS","critical_400"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;AAqBA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAiBI;AAAA,MAhBpBC,EAgBoB,QAhBpBA,EAgBoB;AAAA,MAfpBC,QAeoB,QAfpBA,QAeoB;AAAA,MAdpBC,QAcoB,QAdpBA,QAcoB;AAAA,MAbpBC,SAaoB,QAbpBA,QAaoB;AAAA,MAZpBC,KAYoB,QAZpBA,KAYoB;AAAA,MAXpBC,iBAWoB,QAXpBA,iBAWoB;AAAA,MAVpBC,IAUoB,QAVpBA,IAUoB;AAAA,MATpBC,YASoB,QATpBA,YASoB;AAAA,MARpBC,WAQoB,QARpBA,WAQoB;AAAA,MAPpBC,QAOoB,QAPpBA,QAOoB;AAAA,MANpBC,OAMoB,QANpBA,OAMoB;AAAA,MALpBC,SAKoB,QALpBA,SAKoB;AAAA,MAJpBC,aAIoB,QAJpBA,aAIoB;AAAA,MAHpBC,KAGoB,QAHpBA,KAGoB;AAAA,MAFpBC,IAEoB,QAFpBA,IAEoB;AAAA,yBADpBC,MACoB;AAAA,MADpBA,MACoB,4BADX,OACW;AACpB,MAAMC,UAAU,GAAG,iCAAnB;AAEA,sBACE;AAAA,4BACE,qBAAC,qBAAD;AACE,MAAA,QAAQ,EAAEd,QADZ;AAEE,MAAA,QAAQ,EAAED,QAFZ;AAGE,MAAA,MAAM,EAAEc,MAHV;AAIE,MAAA,OAAO,EAAE,iBAACE,CAAD,EAAY;AACnB,YAAIhB,QAAQ,IAAIC,QAAhB,EAA0B;AACxBe,UAAAA,CAAC,CAACC,cAAF;AACD;AACF,OARH;AAAA,6BASE,qBAAC,0BAAD;AACE,QAAA,EAAE,EAAElB,EADN;AAEE,QAAA,GAAG,EAAEgB,UAFP;AAGE,QAAA,IAAI,EAAEV,IAAI,IAAI,MAHhB;AAIE,QAAA,KAAK,EAAEF,KAJT;AAKE,QAAA,SAAS,YAAKS,KAAK,IAAI,EAAd,cAAoBC,IAAI,IAAI,EAA5B,CALX;AAME,QAAA,QAAQ,EAAEZ,QAAQ,IAAID,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CANxC;AAOE,QAAA,YAAY,EAAEM,YAPhB;AAQE,QAAA,WAAW,EAAEC,WARf;AASE,QAAA,QAAQ,EAAEP,QATZ;AAUE,QAAA,QAAQ,EAAEC,QAVZ;AAWE,QAAA,QAAQ,EAAE,kBAACe,CAAD;AAAA;;AAAA,iBAAYd,SAAQ,IAAIA,SAAQ,CAAC,CAAAc,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEE,MAAH,wDAAWf,KAAX,KAAoB,EAArB,CAAhC;AAAA,SAXZ;AAYE,QAAA,kBAAkB,EAAE,CAAC,CAACC,iBAZxB;AAaE,QAAA,QAAQ,EAAEI,QAbZ;AAcE,QAAA,OAAO,EAAEC,OAdX;AAeE,QAAA,SAAS,EAAEC,SAfb;AAgBE,QAAA,aAAa,EAAEC;AAhBjB;AATF,MADF,EA6BGP,iBAAiB,iBAChB,sBAAC,qBAAD;AAAc,MAAA,SAAS,EAAES,IAAI,IAAI,EAAjC;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEM,eAAOC;AAA5C,QADF,eAEE;AAAA,kBAAOhB;AAAP,QAFF;AAAA,MA9BJ;AAAA,IADF;AAsCD,CA1DD;;;AAlBEL,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,iB;AACAC,EAAAA,I;AAEAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAG,EAAAA,M;;eA+DahB,S","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport {Size, States} from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport {useFocusVisibleRef} from '../common';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  readOnly,\n  onChange,\n  value,\n  validationMessage,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  pattern,\n  maxLength,\n  withoutBorder,\n  state,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || ''} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.cjs"}