@laerdal/life-react-components 1.7.0 → 1.8.0-dev.10

package/dist/InputFields/Checkbox.cjs

@@ -35,11 +35,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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    outline: none;\n\n    .checkbox-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):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      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\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"])), function (props) {
+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;
-}, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
+  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;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -49,24 +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,
-      tabIndexVal = _ref.tabIndexVal;
+      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;
     }
 
@@ -74,13 +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' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledCheckBox, {
     ref: ref,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
+    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,
@@ -89,13 +91,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       id: id,
       className: 'checkbox-icon',
       children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckboxOn, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : semiSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckboxSemi, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckboxOff, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       })
     }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
@@ -114,13 +116,14 @@ 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,
-  tabIndexVal: _propTypes.default.number
+  readOnly: _propTypes.default.bool,
+  tabIndexVal: _propTypes.default.number,
+  className: _propTypes.default.string
 };
 var _default = Checkbox;
 exports.default = _default;

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","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","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} 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    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):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      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\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\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}\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                                                          }, 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  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\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":"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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.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,14 +11,15 @@ 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;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Checkbox;

package/dist/InputFields/Checkbox.js

@@ -6,17 +6,17 @@ var _templateObject;
 import * as React from 'react';
 import styled from 'styled-components';
 import { CheckboxOff, CheckboxOn, CheckboxSemi } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentTextStyle } from '../styles';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 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    outline: none;\n\n    .checkbox-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):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      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\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"])), function (props) {
+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;
-}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.white, COLORS.primary_500, COLORS.neutral_600, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300);
+  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,24 +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,
-      tabIndexVal = _ref.tabIndexVal;
+      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;
     }
 
@@ -49,13 +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' : '');
   return /*#__PURE__*/_jsxs(StyledCheckBox, {
     ref: ref,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
+    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,
@@ -64,13 +66,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       id: id,
       className: 'checkbox-icon',
       children: selected ? /*#__PURE__*/_jsx(CheckboxOn, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : semiSelected ? /*#__PURE__*/_jsx(CheckboxSemi, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : /*#__PURE__*/_jsx(CheckboxOff, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       })
     }), label && /*#__PURE__*/_jsx("label", {
@@ -89,13 +91,14 @@ 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,
-  tabIndexVal: _pt.number
+  readOnly: _pt.bool,
+  tabIndexVal: _pt.number,
+  className: _pt.string
 };
 export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { 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    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):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      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\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\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}\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                                                          }, 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  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\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

@@ -62,24 +62,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /**
  * Add custom styles.
  */
-var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n        outline: none;\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n        outline: none;\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          color: ", ";\n          background: ", ";\n          box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n          outline: none;\n        }\n      }\n    }\n  }\n"])), _zIndexes.Z_INDEXES.dropdown, function (props) {
+var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, _colors.default.primary_20, _colors.default.primary_100, _colors.default.focus_25, _colors.default.focus, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
+}, _colors.default.primary_20, _styles.focusStyles, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
-}, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_800, _colors.default.primary_100, _colors.default.focus_25, _colors.default.focus, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_800, _colors.default.primary_100, _colors.default.focus_25, _colors.default.focus, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_800, _colors.default.primary_100, _colors.default.focus_25, _colors.default.focus);
+}, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
 
 var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), _zIndexes.Z_INDEXES.focus + 1, _colors.default.neutral_600);
 
 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    box-shadow: none;\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,