@laerdal/life-react-components 5.0.5-dev.3 → 5.0.5

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","getColor","theme","$selected","$invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","Checkbox","React","forwardRef","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","stopPropagation","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledCheckBox","styled","div","_taggedTemplateLiteral2","props","margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","exports","Checkbox","forwardRef","_ref","ref","_size","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\n\n      svg {\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\n\n      svg {\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${props => COLORS.getColor('white', props.theme)};\n    }\n\n    .checkbox-icon svg {\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\n\n      svg {\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            dataTestId,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled || readOnly) {\n      return;\n    }\n    if(select){\n      e?.stopPropagation();\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    $selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    $invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n        {\n          selected\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <SystemIcons.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"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Checkbox.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { CheckboxProps } from './types';
-export declare const StyledCheckBox: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-    $invalid?: boolean | undefined;
-    $selected?: boolean | undefined;
-    margin?: string | undefined;
-}, never>;
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
-export default Checkbox;
+import * as React from 'react';
+import { CheckboxProps } from './types';
+export declare const StyledCheckBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean | undefined;
+    $invalid?: boolean | undefined;
+    $selected?: boolean | undefined;
+    margin?: string | undefined;
+}>> & string;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
+export default Checkbox;

package/dist/InputFields/Checkbox.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
 import styled from 'styled-components';
 import { SystemIcons } from '../icons';

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","getColor","theme","$selected","$invalid","Regular","Checkbox","forwardRef","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","$selected","$invalid","Regular","Checkbox","forwardRef","_ref","ref","_size","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\n\n      svg {\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\n\n      svg {\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${props => COLORS.getColor('white', props.theme)};\n    }\n\n    .checkbox-icon svg {\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\n\n      svg {\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            dataTestId,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled || readOnly) {\n      return;\n    }\n    if(select){\n      e?.stopPropagation();\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    $selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    $invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n        {\n          selected\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <SystemIcons.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"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerField.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -30,118 +30,132 @@ var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "overflowTooltipPosition", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-_dayjs.default.extend(_advancedFormat.default);
-_dayjs.default.extend(_quarterOfYear.default);
+/**
+ * Import react libraries.
+ */
+/**
+ * Import third-party libraries.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+_dayjs["default"].extend(_advancedFormat["default"]);
+_dayjs["default"].extend(_quarterOfYear["default"]);
+
+/**
+ * Import custom components.
+ */
+
+/**
+ * Import custom styles.
+ */
 
-/**
- * Import custom components.
+/**
+ * Add custom types.
  */
 
-/**
- * Add custom styles.
+/**
+ * Add custom styles.
  */
-var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\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    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.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-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\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__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\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    \n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        flex-grow: 1;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
+var DatePickerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\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    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.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-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\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__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\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    \n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        flex-grow: 1;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
   return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 }, function (props) {
-  return _colors.default.getColor('primary_20', props.theme);
+  return _colors["default"].getColor('primary_20', props.theme);
 }, _styles.focusStyles, function (props) {
-  return _colors.default.getColor('neutral_20', props.theme);
+  return _colors["default"].getColor('neutral_20', props.theme);
 }, function (props) {
-  return _colors.default.getColor('neutral_200', props.theme);
+  return _colors["default"].getColor('neutral_200', props.theme);
 }, function (props) {
-  return _colors.default.getColor('neutral_20', props.theme);
+  return _colors["default"].getColor('neutral_20', props.theme);
 }, function (props) {
   return !props.$yearPicker ? '96px' : '54px';
 }, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.getColor('neutral_600', props.theme));
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].getColor('neutral_600', props.theme));
 }, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.getColor('neutral_600', props.theme));
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].getColor('neutral_600', props.theme));
 }, (0, _styles.scrollBarStyling)(_types.Size.Small), function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.getColor('neutral_600', props.theme));
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
 }, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.getColor('neutral_600', props.theme));
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
 }, function (props) {
-  return _colors.default.getColor('neutral_600', props.theme);
+  return _colors["default"].getColor('neutral_600', props.theme);
 }, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_700', props.theme);
+  return _colors["default"].getColor('primary_700', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_20', props.theme);
+  return _colors["default"].getColor('primary_20', props.theme);
 }, _styles.focusStyles, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_500', props.theme);
+  return _colors["default"].getColor('primary_500', props.theme);
 }, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.getColor('neutral_600', props.theme));
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
 }, function (props) {
-  return _colors.default.getColor('neutral_600', props.theme);
+  return _colors["default"].getColor('neutral_600', props.theme);
 }, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_500', props.theme);
+  return _colors["default"].getColor('primary_500', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_700', props.theme);
+  return _colors["default"].getColor('primary_700', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_20', props.theme);
+  return _colors["default"].getColor('primary_20', props.theme);
 }, _styles.focusStyles, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_500', props.theme);
+  return _colors["default"].getColor('primary_500', props.theme);
 }, function (props) {
-  return _colors.default.getColor('neutral_700', props.theme);
+  return _colors["default"].getColor('neutral_700', props.theme);
 }, function (props) {
-  return _colors.default.getColor('neutral_100', props.theme);
+  return _colors["default"].getColor('neutral_100', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_700', props.theme);
+  return _colors["default"].getColor('primary_700', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_20', props.theme);
+  return _colors["default"].getColor('primary_20', props.theme);
 }, _styles.focusStyles);
-var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
-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  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), function (props) {
-  return _colors.default.getColor('neutral_500', props.theme);
+var IconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
+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  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), function (props) {
+  return _colors["default"].getColor('neutral_500', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_300', props.theme);
+  return _colors["default"].getColor('primary_300', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_200', props.theme);
+  return _colors["default"].getColor('primary_200', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_700', props.theme);
+  return _colors["default"].getColor('primary_700', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_20', props.theme);
+  return _colors["default"].getColor('primary_20', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_700', props.theme);
+  return _colors["default"].getColor('primary_700', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_300', props.theme);
+  return _colors["default"].getColor('primary_300', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_100', props.theme);
+  return _colors["default"].getColor('primary_100', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_800', props.theme);
+  return _colors["default"].getColor('primary_800', props.theme);
 }, function (props) {
-  return _colors.default.getColor('primary_800', props.theme);
+  return _colors["default"].getColor('primary_800', props.theme);
 }, function (props) {
-  return _colors.default.getColor('white', props.theme);
+  return _colors["default"].getColor('white', props.theme);
 }, IconWrapper, function (props) {
-  return _colors.default.getColor('neutral_600', props.theme);
+  return _colors["default"].getColor('neutral_600', props.theme);
 }, IconWrapper, function (props) {
-  return _colors.default.getColor('primary_700', props.theme);
+  return _colors["default"].getColor('primary_700', props.theme);
 }, IconWrapper, IconWrapper, function (props) {
-  return _colors.default.getColor('primary_800', props.theme);
+  return _colors["default"].getColor('primary_800', props.theme);
 }, IconWrapper, function (props) {
-  return _colors.default.getColor('neutral_300', props.theme);
+  return _colors["default"].getColor('neutral_300', props.theme);
 });
 var quarterComponentsClassPrefix = 'react-datepicker__quarter-';
-var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var DatepickerField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     _onChange = _ref.onChange,
@@ -161,46 +175,46 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     showQuarterYearPicker = _ref.showQuarterYearPicker,
     id = _ref.id,
     dataTestId = _ref.dataTestId,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   // Globally used variables within the component
   var theme = (0, _styledComponents.useTheme)();
   var inputRef = (0, _common.useFocusVisibleRef)();
-  var datepickerRef = _react.default.useRef(null);
-  var focusedQuarterRef = _react.default.useRef(1);
-  var _React$useState = _react.default.useState(-1),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+  var datepickerRef = _react["default"].useRef(null);
+  var focusedQuarterRef = _react["default"].useRef(1);
+  var _React$useState = _react["default"].useState(-1),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     activeMonthPage = _React$useState2[0],
     setActiveMonthPage = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+  var _React$useState3 = _react["default"].useState(false),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     yearPickerMode = _React$useState4[0],
     setYearPickerMode = _React$useState4[1];
-  var _React$useState5 = _react.default.useState(null),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+  var _React$useState5 = _react["default"].useState(null),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
     openAt = _React$useState6[0],
     setOpenAt = _React$useState6[1];
   // 'open' flag is used only for tracking current state of the dropdown,
   // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'
-  var _React$useState7 = _react.default.useState(false),
-    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+  var _React$useState7 = _react["default"].useState(false),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
     open = _React$useState8[0],
     setOpen = _React$useState8[1];
   var getFormattedValue = function getFormattedValue() {
     if (showQuarterYearPicker) {
-      var val = (0, _dayjs.default)(value);
+      var val = (0, _dayjs["default"])(value);
       return val.year() + ', Q' + val.quarter();
-    } else return (0, _dayjs.default)(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
+    } else return (0, _dayjs["default"])(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
   };
-  /**
-   * Format the date in a specific way.
+  /**
+   * Format the date in a specific way.
    */
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (value) inputRef.current.value = getFormattedValue();
   }, [value]);
   function getQuarterItem(classname) {
     return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0];
   }
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (yearPickerMode) {
       var _selectedDate$parentE;
       //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'
@@ -210,7 +224,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;
     }
   }, [yearPickerMode]);
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (showQuarterYearPicker && open) {
       var wrapper = getQuarterItem('wrapper');
       var handler = function handler(event) {
@@ -274,13 +288,13 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
   //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection
   //otherwise after year selection datepicker will show January month of the selected year
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (openAt) {
       datepickerRef.current.setOpen(true);
       //setOpenAt(null);
     }
   }, [openAt]);
-  _react.default.useImperativeHandle(ref, function () {
+  _react["default"].useImperativeHandle(ref, function () {
     return inputRef.current;
   }, [inputRef]);
   var handleCalendarClose = function handleCalendarClose() {
@@ -316,7 +330,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       $yearPicker: yearPickerMode,
       $margin: margin || '',
       onBlur: handleBlur,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker["default"], {
         ref: datepickerRef,
         onCalendarOpen: handleCalendarOpen,
         onCalendarClose: handleCalendarClose,
@@ -337,7 +351,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
           if (yearPickerMode) setYearPickerMode(false);
         },
         disabled: disabled || readOnly,
-        locale: _enGB.default,
+        locale: _enGB["default"],
         showQuarterYearPicker: showQuarterYearPicker,
         dateFormat: showQuarterYearPicker ? "yyyy, QQQ" : undefined,
         showYearPicker: yearPickerMode
@@ -350,7 +364,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         preventOpenOnFocus: true,
         shouldCloseOnSelect: true,
         renderCustomHeader: yearPicker ? function (params) {
-          return /*#__PURE__*/_react.default.createElement(_DatepickerFieldHeader.DatepickerFieldHeader, _objectSpread(_objectSpread({}, params), {}, {
+          return /*#__PURE__*/_react["default"].createElement(_DatepickerFieldHeader.DatepickerFieldHeader, _objectSpread(_objectSpread({}, params), {}, {
             setActiveMonthPage: setActiveMonthPage,
             customHeaderCount: 0,
             yearPickerMode: yearPickerMode,
@@ -386,7 +400,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
                 size: "24"
               })
             })]
-          }), !open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+          }), !open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow["default"], {
             position: overflowTooltipPosition,
             input: inputRef,
             withArrow: true,
@@ -399,7 +413,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       })
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _colors.default.getColor('critical_400', theme)
+        color: _colors["default"].getColor('critical_400', theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]
@@ -407,21 +421,21 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   });
 });
 DatepickerField.propTypes = {
-  value: _propTypes.default.instanceOf(Date),
-  onChange: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  showQuarterYearPicker: _propTypes.default.bool,
-  invalid: _propTypes.default.bool,
-  dateFormat: _propTypes.default.string,
-  validationMessage: _propTypes.default.string,
-  autoComplete: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  yearPicker: _propTypes.default.bool,
-  yearsBeforeCurrentDate: _propTypes.default.number,
-  yearsAfterCurrentDate: _propTypes.default.number,
-  margin: _propTypes.default.string,
-  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom'])
+  value: _propTypes["default"].instanceOf(Date),
+  onChange: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  showQuarterYearPicker: _propTypes["default"].bool,
+  invalid: _propTypes["default"].bool,
+  dateFormat: _propTypes["default"].string,
+  validationMessage: _propTypes["default"].string,
+  autoComplete: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string,
+  yearPicker: _propTypes["default"].bool,
+  yearsBeforeCurrentDate: _propTypes["default"].number,
+  yearsAfterCurrentDate: _propTypes["default"].number,
+  margin: _propTypes["default"].string,
+  overflowTooltipPosition: _propTypes["default"].oneOf(['top', 'bottom'])
 };
 var _default = DatepickerField;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=DatepickerField.cjs.map