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

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","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"}
+{"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":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAA0B,mBAA1B;AACA,SAAQC,cAAR,EAAwBC,aAAxB,QAA4C,kCAA5C;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,EAAoCC,WAApC,QAAsD,WAAtD;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,mBAAjE,QAA2F,sBAA3F;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;AAEA,IAAMC,iBAAiB,GAAGZ,MAAM,CAACa,GAAV,ysDAMnB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANc,EASZZ,MAAM,CAACa,KATK,EA0BR,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,QAAN,GAAiBd,MAAM,CAACe,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBhB,MAAM,CAACiB,WAA3B,GAAyCjB,MAAM,CAACkB,WAA3F;AAAA,CA1BG,EAwCfX,mBAAmB,CAACN,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CAxCJ,EA6CjBP,iBAAiB,CAACL,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CA7CA,EAoDjBR,iBAAiB,CAACJ,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CApDA,EA2DjBT,iBAAiB,CAACH,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CA3DA,EAkEjBX,WAlEiB,EAuEGF,MAAM,CAACoB,UAvEV,EA0ENpB,MAAM,CAACqB,WA1ED,EAiFHrB,MAAM,CAACsB,WAjFJ,EAoFNtB,MAAM,CAACuB,WApFD,EA4FVvB,MAAM,CAACwB,WA5FG,EAoGGxB,MAAM,CAACyB,KApGV,EAwGRzB,MAAM,CAACwB,WAxGC,EA8GGxB,MAAM,CAACoB,UA9GV,EAiHNpB,MAAM,CAACqB,WAjHD,CAAvB;AAsIA,IAAMK,WAAW,gBAAG9B,KAAK,CAAC+B,UAAN,CAAwC,gBAaWC,GAbX,EAamB;AAAA;;AAAA,MAZhBC,EAYgB,QAZhBA,EAYgB;AAAA,MAXhBf,QAWgB,QAXhBA,QAWgB;AAAA,MAVhBgB,KAUgB,QAVhBA,KAUgB;AAAA,MAThBC,eASgB,QAThBA,eASgB;AAAA,MARhBf,WAQgB,QARhBA,WAQgB;AAAA,MAPhBgB,MAOgB,QAPhBA,MAOgB;AAAA,MANhBC,QAMgB,QANhBA,QAMgB;AAAA,MALhBrB,MAKgB,QALhBA,MAKgB;AAAA,MAJhBsB,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,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMAqB,EAAAA,IAAI,YAAGA,IAAH,yCAAWhC,IAAI,CAACsC,MAApB;AAEA,MAAMC,GAAG,aAAMP,IAAN,cAAcE,SAAS,IAAI,EAA3B,cAAiCJ,QAAQ,GAAG,WAAH,GAAiB,EAA1D,CAAT;AAEA,sBACE,MAAC,iBAAD;AAA4B,IAAA,MAAM,EAAErB,MAApC;AACmB,IAAA,GAAG,EAAEgB,GADxB;AAEmB,IAAA,OAAO,EAAE;AAAA,aAAM,CAACK,QAAD,IAAaD,MAAM,CAAC,CAAClB,QAAF,CAAzB;AAAA,KAF5B;AAGmB,IAAA,WAAW,EAAEN,yBAHhC;AAImB,IAAA,SAAS,EAAE8B,UAJ9B;AAKmB,IAAA,QAAQ,EAAEL,QAL7B;AAMmB,IAAA,SAAS,EAAES,GAN9B;AAOmB,IAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAASG,WAAW,GAAGA,WAAH,GAAiB,CAP1E;AAQmB,IAAA,WAAW,EAAEpB,WARhC;AASmB,IAAA,QAAQ,EAAEF,QAT7B;AAAA,4BAUE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAqC,MAAA,EAAE,EAAEe,EAAzC;AAAA,iBACGf,QAAQ,iBAAI,KAAC,aAAD;AAAe,QAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAAhF;AAAoF,QAAA,IAAI,EAAC;AAAzF,QADf,EAEG,CAACpB,QAAD,iBACC,KAAC,cAAD;AAAgB,QAAA,SAAS,EAAEoB,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,KAAKY,SAApB,iBAAiC;AAAA,kBAAOZ;AAAP,QAFpC;AAAA,MAfF;AAAA,KAAwBF,EAAxB,CADF;AAsBD,CA9CmB,CAApB;;AAdEA,EAAAA,E;AACAf,EAAAA,Q;AACAkB,EAAAA,M;AACAF,EAAAA,K;AACAC,EAAAA,e;AACAf,EAAAA,W;AACAiB,EAAAA,Q;AACAC,EAAAA,4B;AACAtB,EAAAA,M;AAEAwB,EAAAA,W;AACAC,EAAAA,S;;AAmDF,eAAeX,WAAf","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"}

package/dist/InputFields/SearchBar.cjs

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

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 { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
+import { WarningMessage, 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(ErrorMessage, {
+    }), validationMessage && /*#__PURE__*/_jsxs(WarningMessage, {
       className: size || '',
       children: [/*#__PURE__*/_jsx(TechnicalWarning, {
-        color: COLORS.critical_400,
+        color: COLORS.warning_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","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"}
+{"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"}

package/dist/InputFields/TextField.cjs

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

package/dist/InputFields/TextField.d.ts

@@ -1,21 +1,23 @@
-import { Size, States } from '../types';
+import { Size } from '../types';
 declare type TextFieldProps = {
     id: string;
     disabled?: boolean;
-    readOnly?: boolean;
+    locked?: boolean;
     onChange?: (text: string) => void;
+    hasError?: boolean;
     value?: string;
     validationMessage?: string;
+    validationIsCritical?: boolean;
     type?: string;
-    state?: States.Invalid | States.Valid;
     autoComplete?: string;
     placeholder?: string;
     required?: boolean;
+    correct?: boolean;
     pattern?: string;
     maxLength?: number;
     withoutBorder?: boolean;
     size?: Size.Small | Size.Medium;
     margin?: string;
 };
-declare const TextField: ({ id, disabled, readOnly, onChange, value, validationMessage, type, autoComplete, placeholder, required, pattern, maxLength, withoutBorder, state, size, margin, }: TextFieldProps) => JSX.Element;
+declare const TextField: ({ id, disabled, locked, onChange, hasError, value, validationMessage, validationIsCritical, type, autoComplete, placeholder, required, correct, pattern, maxLength, withoutBorder, size, margin, }: TextFieldProps) => JSX.Element;
 export default TextField;

package/dist/InputFields/TextField.js

@@ -2,8 +2,8 @@ import _pt from "prop-types";
 import * as React from 'react';
 import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { COLORS } from '../styles';
-import { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';
-import { useFocusVisibleRef } from '../common';
+import { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';
+import { useFocusVisibleRef } from '../common/FocusVisible';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -11,29 +11,31 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var TextField = function TextField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
+      locked = _ref.locked,
       _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 = useFocusVisibleRef();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InputWrapper, {
-      readOnly: readOnly,
+      locked: locked,
       disabled: disabled,
       margin: margin,
       onClick: function onClick(e) {
-        if (disabled || readOnly) {
+        if (disabled || locked) {
           e.preventDefault();
         }
       },
@@ -42,24 +44,34 @@ var TextField = function TextField(_ref) {
         ref: elementRef,
         type: type || 'text',
         value: value,
-        className: "".concat(state || '', " ").concat(size || ''),
-        tabIndex: readOnly || disabled ? -1 : 0,
+        className: (hasError ? 'error' : '').concat(size ? size : ''),
+        tabIndex: locked || disabled ? -1 : 0,
         autoComplete: autoComplete,
         placeholder: placeholder,
         disabled: disabled,
-        readOnly: readOnly,
+        locked: locked,
         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) || '');
         },
-        activeErrorMessage: !!validationMessage,
+        activeValidationMessage: validationMessage !== '' && validationMessage !== undefined,
+        activeErrorMessage: validationMessage !== '' && validationMessage !== undefined && validationIsCritical,
         required: required,
+        correctInput: correct,
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
       })
-    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+    }), validationMessage && !validationIsCritical && /*#__PURE__*/_jsxs(WarningMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.warning_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }), validationMessage && validationIsCritical && /*#__PURE__*/_jsxs(ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/_jsx(TechnicalWarning, {
         size: "20px",
@@ -74,14 +86,17 @@ var TextField = function TextField(_ref) {
 TextField.propTypes = {
   id: _pt.string.isRequired,
   disabled: _pt.bool,
-  readOnly: _pt.bool,
+  locked: _pt.bool,
   onChange: _pt.func,
+  hasError: _pt.bool,
   value: _pt.string,
   validationMessage: _pt.string,
+  validationIsCritical: _pt.bool,
   type: _pt.string,
   autoComplete: _pt.string,
   placeholder: _pt.string,
   required: _pt.bool,
+  correct: _pt.bool,
   pattern: _pt.string,
   maxLength: _pt.number,
   withoutBorder: _pt.bool,

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","TechnicalWarning","COLORS","ErrorMessage","InputFieldStyling","InputWrapper","useFocusVisibleRef","TextField","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","elementRef","e","preventDefault","target","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, 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.js"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","TechnicalWarning","COLORS","ErrorMessage","InputFieldStyling","InputWrapper","WarningMessage","useFocusVisibleRef","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","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.js"}

package/dist/InputFields/Textarea.cjs

@@ -23,6 +23,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _typography = require("../styles/typography");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -36,7 +38,7 @@ var TextareaWrapper = _styledComponents.default.div(_templateObject || (_templat
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
 
-var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ", "\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ", ";\n    margin: 0px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 1px;\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.critical_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)); // Add component-specific types
+var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ", "\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ", ";\n    margin: 0px;\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.black), _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.warning_500, _styles.COLORS.critical_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)); // Add component-specific types
 
 
 var Textarea = function Textarea(_ref) {
@@ -45,6 +47,7 @@ var Textarea = function Textarea(_ref) {
       value = _ref.value,
       size = _ref.size,
       disabled = _ref.disabled,
+      validationType = _ref.validationType,
       validationMessage = _ref.validationMessage,
       _onChange = _ref.onChange,
       margin = _ref.margin;
@@ -53,14 +56,21 @@ var Textarea = function Textarea(_ref) {
       id: id,
       value: value,
       placeholder: placeholder,
-      className: "".concat(size, " ").concat(validationMessage ? 'invalid' : ''),
+      className: "".concat(size, " ").concat(validationType),
       disabled: disabled,
       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) || '');
       }
-    }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+    }), validationMessage && validationType === 'warning' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.warning_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    }), validationMessage && validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
         size: "20px",
         color: _styles.COLORS.critical_400
@@ -77,6 +87,7 @@ Textarea.propTypes = {
   value: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   onChange: _propTypes.default.func,
+  validationType: _propTypes.default.oneOf(['error', 'warning']),
   validationMessage: _propTypes.default.string,
   margin: _propTypes.default.string
 };

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","ComponentTextStyle","Italic","black","primary_700","primary_800","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationMessage","onChange","e","target","critical_400"],"mappings":";;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AAKA;;;;;;;;;;AAGA;AACA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,8GAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAFiB,CAArB;;AAIA,IAAMC,QAAQ,GAAGJ,0BAAOK,QAAV,61BACQC,eAAOC,WADf,EAEED,eAAOE,KAFT,EAQV,+BAAkBC,2BAAmBC,MAArC,EAA6CJ,eAAOK,KAApD,CARU,EAmBUL,eAAOM,WAnBjB,EAyBUN,eAAOO,WAzBjB,EAmC0BP,eAAOQ,YAnCjC,EA0CUR,eAAOS,WA1CjB,EA+CCT,eAAOU,WA/CR,EAoDR,+BAAkBP,2BAAmBC,MAArC,EAA6CJ,eAAOW,WAApD,CApDQ,CAAd,C,CAwDA;;;AAYA,IAAMC,QAAgD,GAAG,SAAnDA,QAAmD,OAAoG;AAAA,MAAjGC,EAAiG,QAAjGA,EAAiG;AAAA,MAA7FC,WAA6F,QAA7FA,WAA6F;AAAA,MAAhFC,KAAgF,QAAhFA,KAAgF;AAAA,MAAzEC,IAAyE,QAAzEA,IAAyE;AAAA,MAAnEC,QAAmE,QAAnEA,QAAmE;AAAA,MAAzDC,iBAAyD,QAAzDA,iBAAyD;AAAA,MAAtCC,SAAsC,QAAtCA,QAAsC;AAAA,MAA5BtB,MAA4B,QAA5BA,MAA4B;AAC3J,sBACE,sBAAC,eAAD;AAAA,4BACE,qBAAC,QAAD;AACE,MAAA,EAAE,EAAEgB,EADN;AAEE,MAAA,KAAK,EAAEE,KAFT;AAGE,MAAA,WAAW,EAAED,WAHf;AAIE,MAAA,SAAS,YAAKE,IAAL,cAAaE,iBAAiB,GAAG,SAAH,GAAe,EAA7C,CAJX;AAKE,MAAA,QAAQ,EAAED,QALZ;AAME,MAAA,QAAQ,EAAE,kBAACG,CAAD;AAAA;;AAAA,eAAYD,SAAQ,IAAIA,SAAQ,CAAC,CAAAC,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEC,MAAH,wDAAWN,KAAX,KAAoB,EAArB,CAAhC;AAAA;AANZ,MADF,EASGG,iBAAiB,iBAChB,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAElB,eAAOsB;AAA5C,QADF,eAEE;AAAA,kBAAOJ;AAAP,QAFF;AAAA,MAVJ;AAAA,IADF;AAkBD,CAnBD;;;AAVEL,EAAAA,E;AACAC,EAAAA,W;AACAC,EAAAA,K;AACAE,EAAAA,Q;AACAE,EAAAA,Q;AACAD,EAAAA,iB;AAEArB,EAAAA,M;;eAwBae,Q","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 1px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationMessage ? 'invalid' : ''}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.cjs"}
+{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","ComponentTextStyle","Italic","black","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationType","validationMessage","onChange","e","target","warning_400","critical_400"],"mappings":";;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AAKA;;AACA;;;;;;;;;;AAEA;AACA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,8GAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAFiB,CAArB;;AAIA,IAAMC,QAAQ,GAAGJ,0BAAOK,QAAV,0/BACQC,eAAOC,WADf,EAEED,eAAOE,KAFT,EAQV,mCAAkBC,+BAAmBC,MAArC,EAA6CJ,eAAOK,KAApD,CARU,EAmBUL,eAAOM,WAnBjB,EAyBUN,eAAOO,WAzBjB,EAmC0BP,eAAOQ,WAnCjC,EA4C0BR,eAAOS,YA5CjC,EAmDUT,eAAOU,WAnDjB,EAwDCV,eAAOW,WAxDR,EA6DR,mCAAkBR,+BAAmBC,MAArC,EAA6CJ,eAAOY,WAApD,CA7DQ,CAAd,C,CAiEA;;;AAaA,IAAMC,QAAgD,GAAG,SAAnDA,QAAmD,OAAoH;AAAA,MAAjHC,EAAiH,QAAjHA,EAAiH;AAAA,MAA7GC,WAA6G,QAA7GA,WAA6G;AAAA,MAAhGC,KAAgG,QAAhGA,KAAgG;AAAA,MAAzFC,IAAyF,QAAzFA,IAAyF;AAAA,MAAnFC,QAAmF,QAAnFA,QAAmF;AAAA,MAAzEC,cAAyE,QAAzEA,cAAyE;AAAA,MAAzDC,iBAAyD,QAAzDA,iBAAyD;AAAA,MAAtCC,SAAsC,QAAtCA,QAAsC;AAAA,MAA5BxB,MAA4B,QAA5BA,MAA4B;AAC3K,sBACE,sBAAC,eAAD;AAAA,4BACE,qBAAC,QAAD;AACE,MAAA,EAAE,EAAEiB,EADN;AAEE,MAAA,KAAK,EAAEE,KAFT;AAGE,MAAA,WAAW,EAAED,WAHf;AAIE,MAAA,SAAS,YAAKE,IAAL,cAAaE,cAAb,CAJX;AAKE,MAAA,QAAQ,EAAED,QALZ;AAME,MAAA,QAAQ,EAAE,kBAACI,CAAD;AAAA;;AAAA,eAAYD,SAAQ,IAAIA,SAAQ,CAAC,CAAAC,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEC,MAAH,wDAAWP,KAAX,KAAoB,EAArB,CAAhC;AAAA;AANZ,MADF,EASGI,iBAAiB,IAAID,cAAc,KAAK,SAAxC,iBACC,sBAAC,uBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEnB,eAAOwB;AAA5C,QADF,eAEE;AAAA,kBAAOJ;AAAP,QAFF;AAAA,MAVJ,EAeGA,iBAAiB,IAAID,cAAc,KAAK,OAAxC,iBACC,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEnB,eAAOyB;AAA5C,QADF,eAEE;AAAA,kBAAOL;AAAP,QAFF;AAAA,MAhBJ;AAAA,IADF;AAwBD,CAzBD;;;AAXEN,EAAAA,E;AACAC,EAAAA,W;AACAC,EAAAA,K;AACAE,EAAAA,Q;AACAG,EAAAA,Q;AACAF,EAAAA,c,4BAAiB,O,EAAU,S;AAC3BC,EAAAA,iB;AAEAvB,EAAAA,M;;eA8BagB,Q","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage, WarningMessage } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationType, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationType}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && validationType === 'warning' && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationType === 'error' && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.cjs"}

package/dist/InputFields/Textarea.d.ts

@@ -9,6 +9,7 @@ declare type TextareaProps = {
     value?: string;
     disabled?: boolean;
     onChange?: (text: string) => void;
+    validationType?: 'error' | 'warning';
     validationMessage?: string;
     size: Size.Small | Size.Medium;
     margin?: string;