@laerdal/life-react-components 1.7.0-dev.13 → 1.7.0-dev.15

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigate","setKeyboardNavigate","styledFieldRef","inputRef","clearButtonRef","useRef","containerRef","handleInputKeyDown","e","key","preventDefault","handleButtonKeyPress","matches","filter","c","label","toLowerCase","length","useEffect","some","x","handleInputClear","current","focus","focusVisible","detail","renderStandardDropdown","stopPropagation","blur","Math","floor","random","target","value","marginLeft","Small","neutral_600","renderButtonDropdown","concat","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, ButtonDropdownWrapper, InputField} from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {\n  defaultOnMouseDownHandler,\n  useActionWithin,\n  useClickOutsideRef,\n  useFocusOutsideRef,\n  useFocusVisibleRef\n} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  scrollable?: boolean;\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n                          id,\n                          list,\n                          placeholder,\n                          onSelect,\n                          onInputChange,\n                          initalValue,\n                          required,\n                          disableSorting,\n                          messageOnNoResults,\n                          disabled,\n                          locked,\n                          scrollable,\n                          isButton,\n                          activeValidationMessage,\n                          autofilledMessage,\n                          size,\n                          buttonFontSize,\n                          keepInitialValue,\n                          icon,\n                          margin = '4px 0',\n                        }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigate, setKeyboardNavigate] = React.useState<boolean>(false);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !locked && !disabled ? [clearButtonRef] : []);\n\n  const containerRef = useClickOutsideRef(() => setIsOpen(false), [], useFocusOutsideRef(() => setIsOpen(false)));\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  const handleButtonKeyPress = (e: React.KeyboardEvent<any>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n      if (matches.length === 1 && onSelect) {\n        onSelect(matches[0].label);\n        setInput(matches[0].label);\n      }\n      setIsOpen(!isOpen);\n      setKeyboardNavigate(true);\n      if (matches.length === 0) {\n        setInput('');\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if (list.some(x => x.label == input)) {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigate(false)\n  }, [isOpen]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!locked && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        locked={locked || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          onKeyDown={handleInputKeyDown}\n          value={input}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n        {\n          input && !locked && !disabled &&\n          <IconButton action={handleInputClear}\n                      ref={clearButtonRef}\n                      useTransparentBackground={true}\n                      shape={'circular'}\n                      style={{marginLeft: '-4px'}}\n                      variant={'secondary'}>\n            <SystemIcons.Clear/>\n          </IconButton>\n        }\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        !locked && !disabled && setIsOpen(!isOpen);\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        onKeyPress={handleButtonKeyPress}\n        onMouseDown={defaultOnMouseDownHandler}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n                isButton={isButton || false}\n                disabled={disabled}\n                locked={locked}\n                className={size ? size : ''}\n                margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n            isOpen={isOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={keyboardNavigate && isButton}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {\n              },\n              onValueUpdate: (values: string[]) => {\n                const val = values[0] ?? '';\n                setRestartFilter(true);\n                setInput(val);\n              },\n              items: list.map(x => ({value: x.label, customContent: x.customContent}))\n            }}\n            filter={!restartFilter ? input : ''}\n            setIsOpen={setIsOpen}\n            alignLeft={false}\n            isButton={isButton || false}\n            id={`${id}_dropdowncontent`}/>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400}/>\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","readOnly","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigate","setKeyboardNavigate","styledFieldRef","inputRef","clearButtonRef","useRef","containerRef","handleInputKeyDown","e","key","preventDefault","handleButtonKeyPress","matches","filter","c","label","toLowerCase","length","useEffect","some","x","handleInputClear","current","focus","focusVisible","detail","renderStandardDropdown","stopPropagation","blur","Math","floor","random","target","value","Small","neutral_600","renderButtonDropdown","concat","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, ButtonDropdownWrapper, InputField} from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {\n  defaultOnMouseDownHandler,\n  useActionWithin,\n  useClickOutsideRef,\n  useFocusOutsideRef,\n  useFocusVisibleRef\n} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  scrollable?: boolean;\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n                          id,\n                          list,\n                          placeholder,\n                          onSelect,\n                          onInputChange,\n                          initalValue,\n                          required,\n                          disableSorting,\n                          messageOnNoResults,\n                          disabled,\n                          readOnly,\n                          scrollable,\n                          isButton,\n                          activeValidationMessage,\n                          autofilledMessage,\n                          size,\n                          buttonFontSize,\n                          keepInitialValue,\n                          icon,\n                          margin = '4px 0',\n                        }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigate, setKeyboardNavigate] = React.useState<boolean>(false);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  const containerRef = useClickOutsideRef(() => setIsOpen(false), [], useFocusOutsideRef(() => setIsOpen(false)));\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  const handleButtonKeyPress = (e: React.KeyboardEvent<any>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n      if (matches.length === 1 && onSelect) {\n        onSelect(matches[0].label);\n        setInput(matches[0].label);\n      }\n      setIsOpen(!isOpen);\n      setKeyboardNavigate(true);\n      if (matches.length === 0) {\n        setInput('');\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if (list.some(x => x.label == input)) {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigate(false)\n  }, [isOpen]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          onKeyDown={handleInputKeyDown}\n          value={input}\n          onChange={(e: any) => {\n            if (!readOnly && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n        />\n        {\n          input && !readOnly && !disabled &&\n          <IconButton action={handleInputClear}\n                      ref={clearButtonRef}\n                      useTransparentBackground={true}\n                      shape={'circular'}\n                      variant={'secondary'}>\n            <SystemIcons.Clear/>\n          </IconButton>\n        }\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        !readOnly && !disabled && setIsOpen(!isOpen);\n      }}\n      disabled={disabled}\n      readOnly={readOnly}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || readOnly ? -1 : 0}\n        onKeyPress={handleButtonKeyPress}\n        onMouseDown={defaultOnMouseDownHandler}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n                isButton={isButton || false}\n                disabled={disabled}\n                readOnly={readOnly}\n                className={size ? size : ''}\n                margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            isOpen={isOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={keyboardNavigate && isButton}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {\n              },\n              onValueUpdate: (values: string[]) => {\n                const val = values[0] ?? '';\n                setRestartFilter(true);\n                setInput(val);\n              },\n              items: list.map(x => ({value: x.label, customContent: x.customContent}))\n            }}\n            filter={!restartFilter ? input : ''}\n            setIsOpen={setIsOpen}\n            alignLeft={false}\n            isButton={isButton || false}\n            id={`${id}_dropdowncontent`}/>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/dist/InputFields/Checkbox.cjs

@@ -38,7 +38,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledCheckBox = _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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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;
+  return props.selected ? _styles.COLORS.primary_500 : props.invalid ? _styles.COLORS.critical_400 : _styles.COLORS.neutral_600;
 }, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.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);
 
 exports.StyledCheckBox = StyledCheckBox;
@@ -49,25 +49,25 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       selected = _ref.selected,
       select = _ref.select,
       label = _ref.label,
-      showWarning = _ref.showWarning,
+      invalid = _ref.invalid,
       iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       disabled = _ref.disabled,
       margin = _ref.margin,
       size = _ref.size,
       semiSelected = _ref.semiSelected,
       children = _ref.children,
-      readonly = _ref.readonly,
+      readOnly = _ref.readOnly,
       tabIndexVal = _ref.tabIndexVal,
       className = _ref.className;
 
   var onKeyPress = function onKeyPress(e) {
-    if (e.keyCode === 13 && !disabled && !readonly) {
+    if (e.keyCode === 13 && !disabled && !readOnly) {
       select && select(!selected);
     }
   };
 
   var handleClick = function handleClick() {
-    if (disabled || readonly) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -75,14 +75,14 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
-  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readonly ? ' readonly' : '');
+  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledCheckBox, {
     ref: ref,
     disabled: disabled,
     className: cls,
     selected: selected,
-    tabIndex: disabled || readonly ? -1 : tabIndexVal ? tabIndexVal : 0,
-    showWarning: showWarning,
+    tabIndex: disabled || readOnly ? -1 : tabIndexVal ? tabIndexVal : 0,
+    invalid: invalid,
     margin: margin,
     onClick: handleClick,
     onKeyDown: onKeyPress,
@@ -116,12 +116,12 @@ Checkbox.propTypes = {
   selected: _propTypes.default.bool.isRequired,
   select: _propTypes.default.func,
   label: _propTypes.default.string,
-  showWarning: _propTypes.default.bool,
+  invalid: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   margin: _propTypes.default.string,
   iconPointerEventsTransparent: _propTypes.default.bool,
   semiSelected: _propTypes.default.bool,
-  readonly: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
   tabIndexVal: _propTypes.default.number,
   className: _propTypes.default.string
 };

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","className","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly,\n                                                            tabIndexVal,\n                                                            className\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readonly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.cjs"}
+{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","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","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,yuDAMvB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANkB,EAShBC,eAAOC,KATS,EA0BZ,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,OAAN,GAAgBJ,eAAOK,YAAvB,GAAsCL,eAAOM,WAAxF;AAAA,CA1BO,EAoCrB,mCAAkBC,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CApCqB,EA2CrB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA3CqB,EAkDrB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAlDqB,EAyDrBQ,mBAzDqB,EA8DDT,eAAOU,UA9DN,EAiEVV,eAAOW,WAjEG,EAwEPX,eAAOY,WAxEA,EA2EVZ,eAAOa,WA3EG,EA4Fdb,eAAOc,WA5FO,EAoGDd,eAAOe,KApGN,EAwGZf,eAAOc,WAxGK,EA8GDd,eAAOU,UA9GN,EAiHVV,eAAOW,WAjHG,CAApB;;;AAuIP,IAAMK,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAeIC,GAfJ,EAeY;AAAA;;AAAA,MAdTC,EAcS,QAdTA,EAcS;AAAA,MAbTlB,QAaS,QAbTA,QAaS;AAAA,MAZTmB,MAYS,QAZTA,MAYS;AAAA,MAXTC,KAWS,QAXTA,KAWS;AAAA,MAVTlB,OAUS,QAVTA,OAUS;AAAA,MATTmB,4BASS,QATTA,4BASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTzB,MAOS,QAPTA,MAOS;AAAA,MANT0B,IAMS,QANTA,IAMS;AAAA,MALTC,YAKS,QALTA,YAKS;AAAA,MAJTC,QAIS,QAJTA,QAIS;AAAA,MAHTC,QAGS,QAHTA,QAGS;AAAA,MAFTC,WAES,QAFTA,WAES;AAAA,MADTC,SACS,QADTA,SACS;;AACnE,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACT,QAArB,IAAiC,CAACI,QAAtC,EAAgD;AAC9CP,MAAAA,MAAM,IAAIA,MAAM,CAAC,CAACnB,QAAF,CAAhB;AACD;AACF,GAJD;;AAMA,MAAMgC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIV,QAAQ,IAAII,QAAhB,EAA0B;AACxB;AACD;;AACDP,IAAAA,MAAM,IAAIA,MAAM,CAAC,CAACnB,QAAF,CAAhB;AACD,GALD;;AAOAuB,EAAAA,IAAI,YAAGA,IAAH,yCAAWU,YAAKC,MAApB;AAEA,MAAMC,GAAG,aAAMZ,IAAN,cAAcK,SAAS,IAAI,EAA3B,cAAiCN,QAAQ,GAAG,WAAH,GAAiB,EAA1D,cAAgEI,QAAQ,GAAG,WAAH,GAAiB,EAAzF,CAAT;AAEA,sBACE,sBAAC,cAAD;AACgB,IAAA,GAAG,EAAET,GADrB;AAEgB,IAAA,QAAQ,EAAEK,QAF1B;AAGgB,IAAA,SAAS,EAAEa,GAH3B;AAIgB,IAAA,QAAQ,EAAEnC,QAJ1B;AAKgB,IAAA,QAAQ,EAAEsB,QAAQ,IAAII,QAAZ,GAAuB,CAAC,CAAxB,GAA6BC,WAAW,GAAGA,WAAH,GAAiB,CALnF;AAMgB,IAAA,OAAO,EAAEzB,OANzB;AAOgB,IAAA,MAAM,EAAEL,MAPxB;AAQgB,IAAA,OAAO,EAAEmC,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAEO,iCAV7B;AAAA,4BAWE;AAAK,MAAA,EAAE,EAAElB,EAAT;AAAa,MAAA,SAAS,EAAE,eAAxB;AAAA,gBAEIlB,QAAQ,gBACJ,qBAAC,uBAAD;AAAY,QAAA,SAAS,EAAEqB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,QAAA,IAAI,EAAC;AAAtF,QADI,GAEJG,YAAY,gBACV,qBAAC,yBAAD;AAAc,QAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,QAAA,IAAI,EAAC;AAAxF,QADU,gBAEV,qBAAC,wBAAD;AAAa,QAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,QAAA,IAAI,EAAC;AAAvF;AANV,MAXF,EAqBID,KAAK,iBAEH;AAAO,MAAA,SAAS,EAAE,gBAAlB;AACO,MAAA,OAAO,EAAEF,EADhB;AAAA,gBAEGE;AAFH,MAvBN,EA8BI,CAACA,KAAD,iBACA;AAAO,MAAA,SAAS,EAAE,gBAAlB;AACO,MAAA,OAAO,EAAEF,EADhB;AAAA,gBAEGO;AAFH,MA/BJ;AAAA,KAAqBP,EAArB,CADF;AAuCD,CAxEgB,CAAjB;;AAfEA,EAAAA,E;AACAlB,EAAAA,Q;AACAmB,EAAAA,M;AACAC,EAAAA,K;AACAlB,EAAAA,O;AACAoB,EAAAA,Q;AACAzB,EAAAA,M;AAEAwB,EAAAA,4B;AACAG,EAAAA,Y;AACAE,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;eA6Ead,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.cjs"}

package/dist/InputFields/Checkbox.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Size } from '../types';
 export declare const StyledCheckBox: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
-    showWarning?: boolean | undefined;
+    invalid?: boolean | undefined;
     selected?: boolean | undefined;
     margin?: string | undefined;
 }, never>;
@@ -11,13 +11,13 @@ interface Props {
     selected: boolean;
     select?: (selected: boolean) => void;
     label?: string;
-    showWarning?: boolean;
+    invalid?: boolean;
     disabled?: boolean;
     margin?: string;
     size?: Size;
     iconPointerEventsTransparent?: boolean;
     semiSelected?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     tabIndexVal?: number;
     className?: string;
 }

package/dist/InputFields/Checkbox.js

@@ -15,7 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export var StyledCheckBox = 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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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;
 }, 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 Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
@@ -24,25 +24,25 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       selected = _ref.selected,
       select = _ref.select,
       label = _ref.label,
-      showWarning = _ref.showWarning,
+      invalid = _ref.invalid,
       iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       disabled = _ref.disabled,
       margin = _ref.margin,
       size = _ref.size,
       semiSelected = _ref.semiSelected,
       children = _ref.children,
-      readonly = _ref.readonly,
+      readOnly = _ref.readOnly,
       tabIndexVal = _ref.tabIndexVal,
       className = _ref.className;
 
   var onKeyPress = function onKeyPress(e) {
-    if (e.keyCode === 13 && !disabled && !readonly) {
+    if (e.keyCode === 13 && !disabled && !readOnly) {
       select && select(!selected);
     }
   };
 
   var handleClick = function handleClick() {
-    if (disabled || readonly) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -50,14 +50,14 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readonly ? ' readonly' : '');
+  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
   return /*#__PURE__*/_jsxs(StyledCheckBox, {
     ref: ref,
     disabled: disabled,
     className: cls,
     selected: selected,
-    tabIndex: disabled || readonly ? -1 : tabIndexVal ? tabIndexVal : 0,
-    showWarning: showWarning,
+    tabIndex: disabled || readOnly ? -1 : tabIndexVal ? tabIndexVal : 0,
+    invalid: invalid,
     margin: margin,
     onClick: handleClick,
     onKeyDown: onKeyPress,
@@ -91,12 +91,12 @@ Checkbox.propTypes = {
   selected: _pt.bool.isRequired,
   select: _pt.func,
   label: _pt.string,
-  showWarning: _pt.bool,
+  invalid: _pt.bool,
   disabled: _pt.bool,
   margin: _pt.string,
   iconPointerEventsTransparent: _pt.bool,
   semiSelected: _pt.bool,
-  readonly: _pt.bool,
+  readOnly: _pt.bool,
   tabIndexVal: _pt.number,
   className: _pt.string
 };

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","className","onKeyPress","e","keyCode","handleClick","Medium","cls"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly,\n                                                            tabIndexVal,\n                                                            className\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readonly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","onKeyPress","e","keyCode","handleClick","Medium","cls"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/InputFields/DatepickerField.cjs

@@ -72,14 +72,14 @@ var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateOb
 
 var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 
-var StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ",\n  &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ",\n  &.locked ~ ", " {\n    color: ", ";\n  }\n"])), _colors.default.neutral_500, _colors.default.primary_300, _colors.default.primary_200, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_700, _colors.default.primary_300, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_800, _colors.default.white, IconWrapper, _colors.default.primary_700, IconWrapper, IconWrapper, _colors.default.primary_800, IconWrapper, IconWrapper, _colors.default.neutral_300);
+var StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ",\n  &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ",\n  &:read-only ~ ", " {\n    color: ", ";\n  }\n"])), _colors.default.neutral_500, _colors.default.primary_300, _colors.default.primary_200, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_700, _colors.default.primary_300, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_800, _colors.default.white, IconWrapper, _colors.default.primary_700, IconWrapper, IconWrapper, _colors.default.primary_800, IconWrapper, IconWrapper, _colors.default.neutral_300);
 
 var DatepickerField = function DatepickerField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
-      locked = _ref.locked,
+      readOnly = _ref.readOnly,
       _onChange = _ref.onChange,
-      hasError = _ref.hasError,
+      invalid = _ref.invalid,
       value = _ref.value,
       validationMessage = _ref.validationMessage,
       dateFormat = _ref.dateFormat,
@@ -183,7 +183,7 @@ var DatepickerField = function DatepickerField(_ref) {
           return setOpen(false);
         },
         onInputClick: function onInputClick() {
-          return !disabled && !locked && setOpen(!open);
+          return !disabled && !readOnly && setOpen(!open);
         },
         onChange: function onChange(e) {
           setOpen(false);
@@ -199,7 +199,7 @@ var DatepickerField = function DatepickerField(_ref) {
 
           if (yearPickerMode) setYearPickerMode(false);
         },
-        disabled: disabled || locked,
+        disabled: disabled || readOnly,
         locale: _enGB.default,
         showYearPicker: yearPickerMode //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year
         ,
@@ -219,14 +219,12 @@ var DatepickerField = function DatepickerField(_ref) {
         } : undefined,
         customInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputWrapper, {
           disabled: disabled,
-          locked: locked,
+          readOnly: readOnly,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             style: {
               display: 'block'
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DatepickerRow, {
-              locked: locked,
-              disabled: disabled,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputFieldStyling, {
                 id: id,
                 ref: inputRef,
@@ -235,9 +233,8 @@ var DatepickerField = function DatepickerField(_ref) {
                 onKeyDown: function onKeyDown(e) {
                   return e.key === 'Enter' && setOpen(true);
                 },
-                readOnly: true,
-                className: (hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : ''),
-                tabIndex: disabled || locked ? -1 : 0,
+                className: (invalid ? 'invalid' : '') + (open ? ' open' : ''),
+                tabIndex: disabled || readOnly ? -1 : 0,
                 onFocus: function onFocus(e) {
                   var _inputRef$current2;
 
@@ -246,7 +243,8 @@ var DatepickerField = function DatepickerField(_ref) {
                 autoComplete: autoComplete,
                 placeholder: placeholder,
                 disabled: disabled,
-                locked: locked,
+                readOnly: true,
+                suppressReadOnlyStyles: !readOnly,
                 required: required
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapper, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Calendar, {
@@ -271,9 +269,9 @@ var DatepickerField = function DatepickerField(_ref) {
 DatepickerField.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,
+  invalid: _propTypes.default.bool,
   value: _propTypes.default.instanceOf(Date),
   dateFormat: _propTypes.default.string,
   validationMessage: _propTypes.default.string,