@laerdal/life-react-components 1.5.1-dev.4 → 1.5.1-dev.40

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","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  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={e => e.preventDefault()}>\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","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"}

package/dist/InputFields/Checkbox.d.ts

@@ -1,5 +1,11 @@
 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;
+    selected?: boolean | undefined;
+    margin?: string | undefined;
+}, never>;
 interface Props {
     id?: string;
     selected: boolean;

package/dist/InputFields/Checkbox.js

@@ -9,9 +9,10 @@ import { CheckboxOff, CheckboxOn, CheckboxSemi } from '../icons/systemicons/Syst
 import { COLORS, ComponentTextStyle } 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";
-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    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) {
   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;
@@ -58,9 +59,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     margin: margin,
     onClick: handleClick,
     onKeyDown: onKeyPress,
-    onMouseDown: function onMouseDown(e) {
-      return e.preventDefault();
-    },
+    onMouseDown: defaultOnMouseDownHandler,
     children: [/*#__PURE__*/_jsx("div", {
       id: id,
       className: 'checkbox-icon',

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","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","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  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={e => e.preventDefault()}>\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","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"}

package/dist/InputFields/DatepickerField.cjs

@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
 
@@ -31,8 +31,6 @@ var _colors = _interopRequireDefault(require("../styles/colors"));
 
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
-var _index = require("../Button/index");
-
 var _DatepickerFieldHeader = require("./DatepickerFieldHeader");
 
 var _styles = require("../styles");
@@ -62,17 +60,17 @@ 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    .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\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        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) {
   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) {
   return !props.yearPicker ? '96px' : '54px';
 }, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), _styles.scrollBarStyling, (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);
 
-var DatepickerRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 4px;\n    top: 4px;\n\n    svg {\n    }\n  }\n\n  ", "\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n"])), function (props) {
-  return props !== null && props !== void 0 && props.disabled || props !== null && props !== void 0 && props.locked ? '' : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          &:hover {\n            svg,\n            svg path {\n              fill: ", " !important;\n            }\n          }\n        "])), _colors.default.primary_600);
-}, _colors.default.primary_800, _colors.default.primary_800, _colors.default.primary_800);
+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  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    ::placeholder {\n      color: ", ";\n    }\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _colors.default.primary_200, _colors.default.primary_600, _colors.default.primary_20, _colors.default.primary_600, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_300, _colors.default.primary_800, _colors.default.white, _colors.default.neutral_300, _colors.default.white);
+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 DatepickerField = function DatepickerField(_ref) {
   var id = _ref.id,
@@ -108,6 +106,11 @@ var DatepickerField = function DatepickerField(_ref) {
       _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
       openAt = _React$useState6[0],
       setOpenAt = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      open = _React$useState8[0],
+      setOpen = _React$useState8[1];
   /**
    * Format the date in a specific way.
    */
@@ -134,9 +137,21 @@ var DatepickerField = function DatepickerField(_ref) {
       datepickerRef.current.setOpen(true); //setOpenAt(null);
     }
   }, [openAt]);
+  React.useEffect(function () {
+    if (!open) {
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+    }
+  }, [open]);
 
   var handleCalendarOpen = function handleCalendarOpen() {
     if (openAt) setOpenAt(null);
+    setOpen(true);
+  };
+
+  var handleCalendarClose = function handleCalendarClose() {
+    setOpen(false);
   };
 
   var maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());
@@ -145,6 +160,13 @@ var DatepickerField = function DatepickerField(_ref) {
 
   var minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());
   var itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate !== null && yearsBeforeCurrentDate !== void 0 ? yearsBeforeCurrentDate : 15)) / 5);
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Escape' || e.key === 'Esc') {
+      setOpen(false);
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerContainer, {
       yearPicker: yearPickerMode,
@@ -152,7 +174,18 @@ var DatepickerField = function DatepickerField(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
         ref: datepickerRef,
         onCalendarOpen: handleCalendarOpen,
+        onCalendarClose: handleCalendarClose,
+        open: open,
+        onKeyDown: handleKeyDown,
+        onClickOutside: function onClickOutside() {
+          return setOpen(false);
+        },
+        onInputClick: function onInputClick() {
+          return setOpen(!open);
+        },
         onChange: function onChange(e) {
+          setOpen(false);
+
           if (_onChange) {
             if (yearPickerMode) {
               var newDate = new Date();
@@ -172,6 +205,7 @@ var DatepickerField = function DatepickerField(_ref) {
         maxDate: yearPickerMode ? maxDate : undefined,
         selected: value,
         openToDate: openAt !== null && openAt !== void 0 ? openAt : undefined,
+        preventOpenOnFocus: true,
         shouldCloseOnSelect: true,
         renderCustomHeader: yearPicker ? function (params) {
           return /*#__PURE__*/React.createElement(_DatepickerFieldHeader.DatepickerFieldHeader, _objectSpread(_objectSpread({}, params), {}, {
@@ -184,7 +218,6 @@ var DatepickerField = function DatepickerField(_ref) {
         customInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputWrapper, {
           disabled: disabled,
           locked: locked,
-          tabIndex: disabled ? -1 : 0,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             style: {
               display: 'block'
@@ -197,20 +230,18 @@ var DatepickerField = function DatepickerField(_ref) {
                 ref: inputRef,
                 type: "text",
                 name: "datepicker",
+                onKeyDown: function onKeyDown(e) {
+                  return e.key === 'Enter' && setOpen(true);
+                },
                 readOnly: true,
-                className: hasError ? 'error' : '',
-                tabIndex: 0,
+                className: (hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : ''),
+                tabIndex: disabled || locked ? -1 : 0,
                 autoComplete: autoComplete,
                 placeholder: placeholder,
                 disabled: disabled,
                 locked: locked,
                 required: required
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.IconButton, {
-                variant: "secondary",
-                shape: "square",
-                tabIndex: -1,
-                action: function action() {},
-                disabled: disabled || locked,
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapper, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Calendar, {
                   size: "24"
                 })

package/dist/InputFields/DatepickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","disabled","locked","css","primary_600","StyledInputFieldStyling","InputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","React","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  \n  .react-datepicker-popper{\n    z-index: ${Z_INDEXES.dropdown};  \n  }\n\n  > div {\n    display: block;\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\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: ${COLORS.primary_20};\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: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !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    .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: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\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      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling}\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 4px;\n    top: 4px;\n\n    svg {\n    }\n  }\n\n  ${(props) =>\n    props?.disabled || props?.locked\n      ? ''\n      : css`\n          &:hover {\n            svg,\n            svg path {\n              fill: ${COLORS.primary_600} !important;\n            }\n          }\n        `}\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n    ::placeholder {\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst DatepickerField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  dateFormat,\n  autoComplete,\n  placeholder,\n  required,\n  yearPicker,\n  yearsBeforeCurrentDate,\n  yearsAfterCurrentDate,\n  margin,\n}: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || locked}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                  React.createElement(\n                    DatepickerFieldHeader,\n                    { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n                    null,\n                  )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\n              <div style={{ display: 'block' }}>\n                <DatepickerRow locked={locked} disabled={disabled}>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    readOnly={true}\n                    className={hasError ? 'error' : ''}\n                    tabIndex={0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}/>\n                  <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled || locked}>\n                    <Calendar size=\"24\" />\n                  </IconButton>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}
+{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","IconWrapper","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","neutral_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","React","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\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: ${COLORS.primary_20};\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: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !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: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\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      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling}\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n  \n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper},\n  &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper},\n  &.locked ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = ({\n                           id,\n                           disabled,\n                           locked,\n                           onChange,\n                           hasError,\n                           value,\n                           validationMessage,\n                           dateFormat,\n                           autoComplete,\n                           placeholder,\n                           required,\n                           yearPicker,\n                           yearsBeforeCurrentDate,\n                           yearsAfterCurrentDate,\n                           margin,\n                         }: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useEffect(() => {\n    if (!open) {\n      inputRef.current?.blur();\n    }\n  }, [open]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  const handleCalendarClose = () => {\n    setOpen(false);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc') {\n      setOpen(false);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          open={open}\n          onKeyDown={handleKeyDown}\n          onClickOutside={() => setOpen(false)}\n          onInputClick={() => setOpen(!open)}\n          onChange={(e: any) => {\n            setOpen(false);\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || locked}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} locked={locked}>\n              <div style={{display: 'block'}}>\n                <DatepickerRow locked={locked} disabled={disabled}>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n                    readOnly={true}\n                    className={(hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : '')}\n                    tabIndex={disabled || locked ? -1 : 0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}/>\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}