@laerdal/life-react-components 1.2.2-dev.7 → 1.3.0

package/dist/umd/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","onKeyPress","e","handleClick","size","Size"],"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  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\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  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 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  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .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):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n\n    .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}\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                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    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' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'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={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","children","onKeyPress","e","handleClick","size","Size"],"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):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):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):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  &.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}\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                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    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' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 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"}

package/dist/umd/InputFields/DatepickerField.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "react-datepicker", "date-fns/locale/en-GB", "moment", "../styles/colors", "../icons/systemicons/SystemIcons", "../Button/index", "./DatepickerFieldHeader", "../styles", "./styling", "../styles/typography", "react-datepicker/dist/react-datepicker.css"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "react-datepicker", "date-fns/locale/en-GB", "moment", "../styles/colors", "../icons/systemicons/SystemIcons", "../Button/index", "./DatepickerFieldHeader", "../styles", "./styling", "../styles/typography", "../styles/z-indexes", "react-datepicker/dist/react-datepicker.css"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-datepicker"), require("date-fns/locale/en-GB"), require("moment"), require("../styles/colors"), require("../icons/systemicons/SystemIcons"), require("../Button/index"), require("./DatepickerFieldHeader"), require("../styles"), require("./styling"), require("../styles/typography"), require("react-datepicker/dist/react-datepicker.css"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-datepicker"), require("date-fns/locale/en-GB"), require("moment"), require("../styles/colors"), require("../icons/systemicons/SystemIcons"), require("../Button/index"), require("./DatepickerFieldHeader"), require("../styles"), require("./styling"), require("../styles/typography"), require("../styles/z-indexes"), require("react-datepicker/dist/react-datepicker.css"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactDatepicker, global.enGB, global.moment, global.colors, global.SystemIcons, global.index, global.DatepickerFieldHeader, global.styles, global.styling, global.typography, global.reactDatepicker);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactDatepicker, global.enGB, global.moment, global.colors, global.SystemIcons, global.index, global.DatepickerFieldHeader, global.styles, global.styling, global.typography, global.zIndexes, global.reactDatepicker);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactDatepicker, _enGB, _moment, _colors, _SystemIcons, _index, _DatepickerFieldHeader, _styles, _styling, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactDatepicker, _enGB, _moment, _colors, _SystemIcons, _index, _DatepickerFieldHeader, _styles, _styling, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -152,6 +152,11 @@
    * Add custom styles.
    */
   const DatePickerContainer = _styledComponents2.default.div`
+  
+  .react-datepicker-popper{
+    z-index: ${_zIndexes.Z_INDEXES.dropdown};  
+  }
+
   > div {
     display: block;
     ${props => props.margin ? `margin: ${props.margin};` : ''}

package/dist/umd/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","dateFormat","validationMessage","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","DatePickerContainer","styled","div","props","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","ComponentSStyling","ComponentTextStyle","scrollBarStyling","ComponentMStyling","white","neutral_600","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","css","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","inputRef","React","datepickerRef","supressFocusRef","moment","selectedDate","document","dropdownParent","handleCalendarOpen","setOpenAt","maxDate","minDate","itemsNumber","Math","e","newDate","setYearPickerMode","yearPickerMode","openAt","params","customHeaderCount","display","setTabbedHere","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;;AA2BA;AACA;AACA;;AAmBA;AACA;AACA;AACA,QAAMe,mBAAmB,GAAGC,2BAAOC,GAA6C;AAChF;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACJ,MAAhCI,GAAAA,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,iBAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBD,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BJ,iBAAOK,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCL,iBAAOM,WAAY;AACpD,oBAAoBN,iBAAOK,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAAN,UAAA,GAAA,MAAA,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQQ,mCAAkBC,2BAAD,IAAjBD,EAA2CP,iBAA1B,WAAjBO,CAA+D;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,wBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA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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';\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  > 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 = React.useRef<any>(null);\n  const datepickerRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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 supressFocusRef = React.useRef<any>(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                    tabbedHere={tabbedHere}\n                    onBlur={() => setTabbedHere(false)}\n                    onMouseDown={(e: any) => {\n                      if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n                    }}\n                    onFocus={(e: any) => {\n                      if (!(locked || disabled)) {\n                        if (!supressFocusRef.current) setTabbedHere(true);\n                        else supressFocusRef.current = false;\n                      }\n                    }}\n                  />\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.js"}
+{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","dateFormat","validationMessage","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","ComponentSStyling","ComponentTextStyle","scrollBarStyling","ComponentMStyling","white","neutral_600","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","css","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","inputRef","React","datepickerRef","supressFocusRef","moment","selectedDate","document","dropdownParent","handleCalendarOpen","setOpenAt","maxDate","minDate","itemsNumber","Math","e","newDate","setYearPickerMode","yearPickerMode","openAt","params","customHeaderCount","display","setTabbedHere","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;;AA4BA;AACA;AACA;;AAmBA;AACA;AACA;AACA,QAAMe,mBAAmB,GAAGC,2BAAOC,GAA6C;AAChF;AACA;AACA,eAAeC,oBAAUC,QAAS;AAClC;AACA;AACA;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACN,MAAhCM,GAAAA,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,iBAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBD,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BJ,iBAAOK,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCL,iBAAOM,WAAY;AACpD,oBAAoBN,iBAAOK,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAAN,UAAA,GAAA,MAAA,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQQ,mCAAkBC,2BAAD,IAAjBD,EAA2CP,iBAA1B,WAAjBO,CAA+D;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,wBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AAC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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';\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 = React.useRef<any>(null);\n  const datepickerRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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 supressFocusRef = React.useRef<any>(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                    tabbedHere={tabbedHere}\n                    onBlur={() => setTabbedHere(false)}\n                    onMouseDown={(e: any) => {\n                      if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n                    }}\n                    onFocus={(e: any) => {\n                      if (!(locked || disabled)) {\n                        if (!supressFocusRef.current) setTabbedHere(true);\n                        else supressFocusRef.current = false;\n                      }\n                    }}\n                  />\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.js"}

package/dist/umd/InputFields/PasswordField.js

@@ -84,7 +84,7 @@
   margin-left: -40px;
   margin-top: 8px;
   position: relative;
-  z-index: 2;
+  z-index: 1;
   height: 30px;
   width: 30px;
 

package/dist/umd/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden","size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,QAAMY,gBAAgB,GAAGC,2BAAOC,GAAI;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhCA,CAAA;AAmCA,QAAMC,WAAW,GAAGJ,2BAAOC,GAAI;AAC/B;AACA;AAFA,CAAA;;AAKA,QAAMI,aAAa,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,QAAA;AAAA,IAAA,KAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,QAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAA2HP,IAAAA;AAA3H,GAAD,KAA6J;AACjL,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCQ,KAAK,CAALA,QAAAA,CAA5C,IAA4CA,CAA5C;AACA,UAAMC,QAAQ,GAAGD,KAAK,CAALA,MAAAA,CAAjB,IAAiBA,CAAjB;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,KAAK,CAALA,QAAAA,CAApC,KAAoCA,CAApC;;AAEA,UAAME,aAAa,GAAIC,CAAD,IAAY;AAChC,UAAIA,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBC,QAAAA,iBAAiB,CAAC,CAAlBA,cAAiB,CAAjBA;AACD;AAHH,KAAA;;AAKA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AACE,MAAA,QAAQ,EADV,QAAA;AAEE,MAAA,MAAM,EAFR,MAAA;AAGE,MAAA,MAAM,EAHR,MAAA;AAIE,MAAA,QAAQ,EAAEtB,QAAQ,GAAG,CAAH,CAAA,GAJpB,CAAA;AAKE,MAAA,OAAO,EAAGqB,CAAD,IAAY;AACnB,YAAI,CAACA,CAAC,EAADA,MAAAA,EAAAA,EAAAA,CAAAA,QAAAA,CAAD,EAACA,CAAD,IAA+B,CAA/B,QAAA,IAA4C,CAAhD,MAAA,EAAyD;AACvDE,UAAAA,aAAa,CAAbA,IAAa,CAAbA;AACAJ,UAAAA,QAAQ,CAARA,OAAAA,CAAAA,KAAAA;AACD;AACF;AAVH,KAAA,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,KAAK,EAAE;AAAEK,QAAAA,OAAO,EAAE;AAAX;AAAZ,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AACE,MAAA,EAAE,EADJ,EAAA;AAEE,MAAA,GAAG,EAFL,QAAA;AAGE,MAAA,IAAI,EAAEC,cAAc,GAAA,UAAA,GAHtB,MAAA;AAIE,MAAA,IAAI,EAJN,UAAA;AAKE,MAAA,KAAK,EALP,KAAA;AAME,MAAA,SAAS,EAAE,CAACtB,QAAQ,GAAA,OAAA,GAAT,EAAA,EAAA,MAAA,CAAiCuB,IAAI,GAAA,IAAA,GANlD,EAMa,CANb;AAOE,MAAA,QAAQ,EAAE,CAPZ,CAAA;AAQE,MAAA,YAAY,EARd,YAAA;AASE,MAAA,WAAW,EATb,WAAA;AAUE,MAAA,QAAQ,EAVV,QAAA;AAWE,MAAA,MAAM,EAXR,MAAA;AAYE,MAAA,QAAQ,EAZV,QAAA;AAaE,MAAA,QAAQ,EAbV,QAAA;AAcE,MAAA,QAAQ,EAAGL,CAAD,IAAYnB,QAAQ,IAAIA,QAAQ,CAACmB,CAAC,EAADA,MAAAA,EAAAA,KAAAA,IAd7C,EAc4C,CAd5C;AAeE,MAAA,UAAU,EAfZ,UAAA;AAgBE,MAAA,MAAM,EAAE,MAAME,aAAa,CAAA,KAAA;AAhB7B,KAAA,CADF,EAAA,aAmBE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAkB,MAAA,SAAS,EAAEG,IAAI,GAAA,IAAA,GAAU;AAA3C,KAAA,EACG,CAAA,QAAA,IAAa,CAAb,MAAA,GACCD,cAAc,GAAA,aACZ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,EAAE,EAAG,GAAE1B,EAAZ,UAAA;AAA0B,MAAA,QAAQ,EAAlC,CAAA;AAAuC,MAAA,SAAS,EAAhD,aAAA;AAAiE,MAAA,OAAO,EAAE,MAAMuB,iBAAiB,CAAC,CAAD,cAAA;AAAjG,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,OAAO,EAAZ,WAAA;AAAyB,MAAA,IAAI,EAA7B,MAAA;AAAqC,MAAA,KAAK,EAAC;AAA3C,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,MAAA,CAAC,EADH,+xCAAA;AAEE,MAAA,IAAI,EAAC;AAFP,KAAA,CADF,CADF,CADY,GAAA,aASZ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,EAAE,EAAG,GAAEvB,EAAZ,aAAA;AAA6B,MAAA,QAAQ,EAArC,CAAA;AAA0C,MAAA,SAAS,EAAnD,aAAA;AAAoE,MAAA,OAAO,EAAE,MAAMuB,iBAAiB,CAAC,CAAD,cAAA;AAApG,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,OAAO,EAAZ,WAAA;AAAyB,MAAA,IAAI,EAA7B,MAAA;AAAqC,MAAA,KAAK,EAAC;AAA3C,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,MAAA,CAAC,EADH,mNAAA;AAEE,MAAA,IAAI,EAAC;AAFP,KAAA,CADF,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,MAAA,CAAC,EADH,0bAAA;AAEE,MAAA,IAAI,EAAC;AAFP,KAAA,CALF,CADF,CAVH,GAjCX,IAgCQ,CAnBF,CADF,CAXF,CADF,EA6DGjB,iBAAiB,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAM,MAAA,SAAS,EAAC;AAAhB,KAAA,EA9D1B,iBA8D0B,CA7DxB,CADF;AAVF,GAAA;;;AAvDEN,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,M;AACAC,IAAAA,Q;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,iB;AACAC,IAAAA,Y;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,Q;AAEAC,IAAAA,M;;oBAwHF,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Size} from '../types';\nimport { InputFieldStyling, InputWrapper } from './styling';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 2;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden","size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Size} from '../types';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/umd/InputFields/RadioButton.js

@@ -81,11 +81,9 @@
 
   const StyledRadioButton = _styledComponents2.default.div`
   display: flex;
-  flex-direction: row;
   width: 100%;
   min-height: 48px;
   min-width: 48px;
-  align-items: center;
 
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
@@ -96,14 +94,14 @@
     pointer-events: none;
   }
 
-  .icon {
+  .radio-button-icon {
     margin: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: 36px;
     height: 36px;
+    min-width: 36px;
     border-radius: 50%;
 
     svg {
@@ -111,7 +109,7 @@
     }
   }
 
-  .label {
+  .radio-button-label {
     user-select: none;
     display: flex;
     flex-direction: column;
@@ -127,20 +125,29 @@
 
   &.small {
     ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .radio-button-label {
+      padding-top: 14px;
+    }
   }
 
   &.medium {
     ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
   }
 
   &.large {
     ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
   }
 
   &:not(.disabled):focus {
     outline: none;
 
-    .icon {
+    .radio-button-icon {
       background-color: ${_styles.COLORS.white};
       box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
 
@@ -151,7 +158,7 @@
   }
 
   &:not(.disabled):hover {
-    .icon {
+    .radio-button-icon {
       background-color: ${_styles.COLORS.primary_20};
 
       svg {
@@ -161,7 +168,7 @@
   }
 
   &:not(.disabled):active {
-    .icon {
+    .radio-button-icon {
       background: ${_styles.COLORS.primary_100};
       box-shadow: none;
 
@@ -177,16 +184,16 @@
 
     color: ${_styles.COLORS.neutral_300};
 
-    .icon,
-    .label {
+    .radio-button-icon,
+    .radio-button-label {
       pointer-events: none;
     }
 
-    .icon{
+    .radio-button-icon{
       background-color: ${_styles.COLORS.white};
     }
     
-    .icon svg {
+    .radio-button-icon svg {
       color: ${_styles.COLORS.neutral_300};
     }
   }
@@ -223,7 +230,7 @@
       showWarning: showWarning,
       selected: selected
     }, /*#__PURE__*/React.createElement("div", {
-      className: 'icon',
+      className: 'radio-button-icon',
       id: id
     }, selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
       className: iconPointerEventsTransparent ? "pointerTransparent" : "",
@@ -232,7 +239,7 @@
       className: iconPointerEventsTransparent ? "pointerTransparent" : "",
       size: "24px"
     })), /*#__PURE__*/React.createElement("div", {
-      className: 'label'
+      className: 'radio-button-label'
     }, label && /*#__PURE__*/React.createElement("label", {
       htmlFor: id
     }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));

package/dist/umd/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","neutral_600","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","additionalLabel","showWarning","disabled","iconPointerEventsTransparent","RadioButton","size","onKeyPress","e","Size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,iBAAiB,GAAGC,2BAAOC,GAAwF;AACzH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,KAAK,IAAKA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAC9D;AACA;AACA,WAAWE,eAAOC,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeH,KAAK,IAAKA,KAAK,CAALA,QAAAA,GAAiBE,eAAjBF,WAAAA,GAAsCA,KAAK,CAALA,WAAAA,GAAoBE,eAApBF,WAAAA,GAAyCE,eAAOE,WAAa;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,qCAAoBC,2BAAD,OAAnBD,EAAgDH,eAA7B,KAAnBG,CAA8D;AACtE;AACA;AACA;AACA;AACA,MAAME,mCAAkBD,2BAAD,OAAjBC,EAA8CL,eAA7B,KAAjBK,CAA4D;AAClE;AACA;AACA;AACA,MAAMC,mCAAkBF,2BAAD,OAAjBE,EAA8CN,eAA7B,KAAjBM,CAA4D;AAClE;AACA;AACA;AACA,MAAMC,mCAAkBH,2BAAD,OAAjBG,EAA8CP,eAA7B,KAAjBO,CAA4D;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BP,eAAOQ,KAAM;AACvC,4BAA4BR,eAAOS,WAAY;AAC/C;AACA;AACA,iBAAiBT,eAAOE,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BF,eAAOU,UAAW;AAC5C;AACA;AACA,iBAAiBV,eAAOW,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBX,eAAOY,WAAY;AACvC;AACA;AACA;AACA,iBAAiBZ,eAAOa,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAab,eAAOc,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0Bd,eAAOQ,KAAM;AACvC;AACA;AACA;AACA,eAAeR,eAAOc,WAAY;AAClC;AACA;AA9GA,CAAA;AA8HA,QAAMS,WAAW,GAAA,aAAG,KAAK,CAAL,UAAA,CAAwC,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,KAAA;AAAA,IAAA,eAAA;AAAA,IAAA,WAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,4BAAA;AAU3DC,IAAAA;AAV2D,GAAD,EAAA,GAAA,KAW1C;AAChB,UAAMC,UAAU,GAAIC,CAAD,IAAY;AAC7B,UAAIA,CAAC,CAADA,OAAAA,KAAAA,EAAAA,IAAoB,CAAxB,QAAA,EAAmC;AACjCT,QAAAA,MAAM,CAAC,CAAPA,QAAM,CAANA;AACD;AAHH,KAAA;;AAMAO,IAAAA,IAAI,GAAGA,IAAI,IAAIG,YAAfH,MAAAA;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAmB,MAAA,GAAG,EAAtB,EAAA;AAA4B,MAAA,MAAM,EAAlC,MAAA;AACmB,MAAA,GAAG,EADtB,GAAA;AAEmB,MAAA,OAAO,EAAE,MAAM,CAAA,QAAA,IAAaP,MAAM,CAAC,CAFtD,QAEqD,CAFrD;AAGmB,MAAA,WAAW,EAAES,CAAC,IAAIA,CAAC,CAHtC,cAGqCA,EAHrC;AAImB,MAAA,SAAS,EAJ5B,UAAA;AAKmB,MAAA,QAAQ,EAL3B,QAAA;AAMmB,MAAA,SAAS,EAAEF,IAAI,CAAJA,QAAAA,GAAAA,WAAAA,GAAAA,MAAAA,CAAqCH,QAAQ,GAAA,WAAA,GAN3E,EAM8BG,CAN9B;AAOmB,MAAA,QAAQ,EAAEH,QAAQ,GAAG,CAAH,CAAA,GAPrC,CAAA;AAQmB,MAAA,WAAW,EAR9B,WAAA;AASmB,MAAA,QAAQ,EAAEL;AAT7B,KAAA,EAAA,aAUE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAd,MAAA;AAAwB,MAAA,EAAE,EAAED;AAA5B,KAAA,EACIC,QAAQ,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,SAAS,EAAEM,4BAA4B,GAAA,oBAAA,GAAtD,EAAA;AAAoF,MAAA,IAAI,EAAC;AAAzF,KAAA,CADhB,EAEI,CAAA,QAAA,IAAA,aAAa,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AAAgB,MAAA,SAAS,EAAEA,4BAA4B,GAAA,oBAAA,GAAvD,EAAA;AAAqF,MAAA,IAAI,EAAC;AAA1F,KAAA,CAFjB,CAVF,EAAA,aAcE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EACGJ,KAAK,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAO,MAAA,OAAO,EAAEH;AAAhB,KAAA,EADZ,KACY,CADZ,EAEGI,eAAe,KAAfA,SAAAA,IAAAA,aAAiC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAjBxC,eAiBwC,CAFpC,CAdF,CADF;AApBF,GAAoB,CAApB;;AAZEJ,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,M;AACAC,IAAAA,K;AACAC,IAAAA,e;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,4B;AACAvB,IAAAA,M;;oBA+CF,W","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\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  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 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  .label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .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):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .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  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","neutral_600","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","additionalLabel","showWarning","disabled","iconPointerEventsTransparent","RadioButton","size","onKeyPress","e","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-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):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/umd/InputFields/SearchBar.js

@@ -80,7 +80,18 @@
       disabled: disabled,
       tabbedHere: tabbedHere,
       validationMessage: validationMessage
-    }, /*#__PURE__*/_react2.default.createElement(_styling.SearchIconWrapper, {
+    }, /*#__PURE__*/_react2.default.createElement(_SearchBarInput2.default, {
+      placeholder: disabled ? '' : placeholder,
+      ref: inputRef,
+      id: id,
+      size: size,
+      disabled: disabled,
+      setTabbedHere: setTabbedHere,
+      setSearchTerm: term => setSearchTerm(term),
+      searchTerm: searchTerm,
+      onKeyDown: onKeyDown,
+      enterSearch: enterSearch
+    }), /*#__PURE__*/_react2.default.createElement(_styling.SearchIconWrapper, {
       className: size ? size : '',
       "aria-label": performSearchLabel
     }, /*#__PURE__*/_react2.default.createElement(_Button.IconButton, {
@@ -92,18 +103,7 @@
       onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null
     }, /*#__PURE__*/_react2.default.createElement(_SystemIcons.Search, {
       size: "24px"
-    }))), /*#__PURE__*/_react2.default.createElement(_SearchBarInput2.default, {
-      placeholder: disabled ? '' : placeholder,
-      ref: inputRef,
-      id: id,
-      size: size,
-      disabled: disabled,
-      setTabbedHere: setTabbedHere,
-      setSearchTerm: term => setSearchTerm(term),
-      searchTerm: searchTerm,
-      onKeyDown: onKeyDown,
-      enterSearch: enterSearch
-    }), /*#__PURE__*/_react2.default.createElement(ClearIconWrapper, {
+    }))), /*#__PURE__*/_react2.default.createElement(ClearIconWrapper, {
       className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
     }, /*#__PURE__*/_react2.default.createElement(_Button.IconButton, {
       id: `${id}_Clear`,

package/dist/umd/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","margin","ClearIconWrapper","styled","div","SearchBar","inputRef","React","isPressingEnter","e","size","term","COLORS"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport { Size } from '../types';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
+{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","margin","ClearIconWrapper","styled","div","SearchBar","inputRef","React","isPressingEnter","e","size","term","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,QAAMW,gBAAgB,GAAGC,2BAAOC,GAAI;AACpC;AACA;AACA;AACA;AACA;AACA;AANA,CAAA;;AASA,QAAMC,SAAiD,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,aAAA;AAAA,IAAA,WAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,SAAA;AAAA,IAAA,IAAA;AAYzDJ,IAAAA,MAAM,GAAG;AAZgD,GAAD,KAapD;AACJ,UAAMK,QAAQ,GAAGC,gBAAAA,MAAAA,CAAjB,IAAiBA,CAAjB;;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,gBAAAA,QAAAA,CAApC,KAAoCA,CAApC;;AAEA,UAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,UAAIA,CAAC,CAADA,GAAAA,KAAJ,OAAA,EAAuB;AACrBA,QAAAA,CAAC,CAADA,cAAAA;AACAA,QAAAA,CAAC,CAADA,eAAAA;AACA,eAAA,IAAA;AACD;;AACD,aAAA,KAAA;AANF,KAAA;;AASA,WAAA,aACE,gBAAA,aAAA,CAAA,gBAAA,QAAA,EAAA,IAAA,EAAA,aACE,gBAAA,aAAA,CAAA,qBAAA,EAAA;AACE,MAAA,QAAQ,EADV,QAAA;AAEE,MAAA,MAAM,EAAER;AAFV,KAAA,EAAA,aAGE,gBAAA,aAAA,CAAA,qBAAA,EAAA;AAAa,MAAA,EAAE,EAAG,GAAEV,EAApB,OAAA;AAA+B,MAAA,IAAI,EAAEmB,IAAI,IAAzC,EAAA;AAAiD,MAAA,UAAU,EAA3D,UAAA;AAAyE,MAAA,QAAQ,EAAjF,QAAA;AAA6F,MAAA,UAAU,EAAvG,UAAA;AAAqH,MAAA,iBAAiB,EAAEX;AAAxI,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,wBAAA,EAAA;AACE,MAAA,WAAW,EAAED,QAAQ,GAAA,EAAA,GADvB,WAAA;AAEE,MAAA,GAAG,EAFL,QAAA;AAGE,MAAA,EAAE,EAHJ,EAAA;AAIE,MAAA,IAAI,EAJN,IAAA;AAKE,MAAA,QAAQ,EALV,QAAA;AAME,MAAA,aAAa,EANf,aAAA;AAOE,MAAA,aAAa,EAAGa,IAAD,IAAkBlB,aAAa,CAPhD,IAOgD,CAPhD;AAQE,MAAA,UAAU,EARZ,UAAA;AASE,MAAA,SAAS,EATX,SAAA;AAUE,MAAA,WAAW,EAAEC;AAVf,KAAA,CADF,EAAA,aAaE,gBAAA,aAAA,CAAA,0BAAA,EAAA;AAAmB,MAAA,SAAS,EAAEgB,IAAI,GAAA,IAAA,GAAlC,EAAA;AAAgD,oBAAYb;AAA5D,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,EAAE,EAAG,GAAEN,EAAnB,SAAA;AACY,MAAA,OAAO,EADnB,WAAA;AAEY,MAAA,KAAK,EAFjB,UAAA;AAGY,MAAA,MAAM,EAHlB,WAAA;AAIY,MAAA,QAAQ,EAJpB,QAAA;AAKY,MAAA,UAAU,EAAGkB,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBd,WAAW,CAAhCc,CAAgC,CAAhCA,GAAsC;AAL3E,KAAA,EAAA,aAME,gBAAA,aAAA,CAAA,mBAAA,EAAA;AAAY,MAAA,IAAI,EAAC;AAAjB,KAAA,CANF,CADF,CAbF,EAAA,aAuBE,gBAAA,aAAA,CAAA,gBAAA,EAAA;AAAkB,MAAA,SAAS,EAAE,CAACE,IAAI,GAAA,IAAA,GAAL,EAAA,EAAA,MAAA,CAA0B,CAAA,UAAA,GAAA,SAAA,GAA1B,EAAA;AAA7B,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,EAAE,EAAG,GAAEnB,EAAnB,QAAA;AACY,MAAA,OAAO,EADnB,WAAA;AAEY,MAAA,KAAK,EAFjB,UAAA;AAGY,MAAA,MAAM,EAHlB,YAAA;AAIY,MAAA,QAAQ,EAJpB,QAAA;AAKY,MAAA,UAAU,EAAGkB,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBb,YAAY,CAAjCa,CAAiC,CAAjCA,GAAuC;AAL5E,KAAA,EAAA,aAME,gBAAA,aAAA,CAAA,kBAAA,EAAA;AAAW,MAAA,IAAI,EAAC;AAAhB,KAAA,CANF,CADF,CAvBF,CAHF,CADF,EAuCGT,iBAAiB,IAAA,aAChB,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAgB,MAAA,SAAS,EAAEW,IAAI,IAAI;AAAnC,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,KAAK,EAAEE,cAAzB,WAAA;AAA6C,MAAA,SAAS,EAAEF,IAAI,IAAI;AAAhE,KAAA,CADF,EAAA,aAEE,gBAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EA3CR,iBA2CQ,CAFF,CAxCJ,CADF;AA1BF,GAAA;;;AAvBEnB,IAAAA,E;AACAC,IAAAA,U;AACAC,IAAAA,a;AACAC,IAAAA,W;AACAC,IAAAA,Y;AACAC,IAAAA,W;AACAC,IAAAA,kB;AACAC,IAAAA,Q;AACAC,IAAAA,iB;AACAC,IAAAA,S;AAEAC,IAAAA,M;;oBAwFF,S","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport { Size } from '../types';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}

package/dist/umd/List/ListRow.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -123,18 +123,20 @@
   &.interactive:hover:not(.in-action):not(.disabled) {
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_700};
+    z-index: ${_zIndexes.Z_INDEXES.hover};
   }
 
   &.interactive:active:not(.in-action):not(.disabled) {
     background-color: ${_styles.COLORS.primary_100};
     color: ${_styles.COLORS.primary_800};
     box-shadow: none;
+    z-index: ${_zIndexes.Z_INDEXES.active};
   }
 
   &.interactive:focus {
     outline: none;
     box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
-    z-index: 1;
+    z-index: ${_zIndexes.Z_INDEXES.focus};
   }
 
   &.disabled {