@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full

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", "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", "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("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("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.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.reactDatepicker);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactDatepicker, _enGB, _moment, _colors, _SystemIcons, _index, _DatepickerFieldHeader, _styles, _styling) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactDatepicker, _enGB, _moment, _colors, _SystemIcons, _index, _DatepickerFieldHeader, _styles, _styling, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -144,6 +144,10 @@
    */
 
 
+  /**
+   * Add custom types.
+   */
+
   /**
    * Add custom styles.
    */
@@ -241,13 +245,12 @@
     }
 
     .react-datepicker__current-month {
-      color: ${_colors2.default.neutral_600};
-      font-weight: 700;
       height: 48px;
       display: inline-flex;
       align-items: center;
-      font-size: 19px;
       margin-right: 5px;
+
+      ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors2.default.neutral_600)}
     }
 
     .react-datepicker__year {
@@ -263,30 +266,28 @@
     }
 
     .react-datepicker__day-name {
-      color: ${_colors2.default.neutral_600};
-      font-weight: 400;
       display: inline-flex;
       justify-content: center;
       align-items: center;
       height: 48px;
-      font-size: 19px;
       margin: 0px;
       width: 48px;
+
+      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors2.default.neutral_600)}
     }
 
     .react-datepicker__year-text {
-      color: ${_colors2.default.neutral_600};
       background: ${_colors2.default.white};
-      font-weight: 400;
       border: none;
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      font-size: 19px;
       margin-top: 20px;
       padding-top: 10px;
       padding-bottom: 10px;
 
+      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors2.default.neutral_600)}
+
       &.react-datepicker__year-text--disabled {
         display: none;
       }
@@ -317,9 +318,7 @@
     }
 
     .react-datepicker__day {
-      color: ${_colors2.default.neutral_600};
       background: ${_colors2.default.white};
-      font-weight: 400;
       border: none;
       display: inline-flex;
       justify-content: center;
@@ -327,8 +326,8 @@
       height: 40px;
       width: 40px;
       margin: 4px;
-      font-size: 19px;
 
+      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors2.default.neutral_600)}
       &.react-datepicker__day--keyboard-selected {
         color: ${_colors2.default.neutral_600};
         background: ${_colors2.default.white};

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","neutral_600","scrollBarStyling","white","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;;;AAgDA;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,eAAeC,iBAAOO,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,wBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeR,iBAAOO,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,e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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 { scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { CommonInteractionStyling } from '../common';\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      color: ${COLORS.neutral_600};\n      font-weight: 700;\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      font-size: 19px;\n      margin-right: 5px;\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      color: ${COLORS.neutral_600};\n      font-weight: 400;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      font-size: 19px;\n      margin: 0px;\n      width: 48px;\n    }\n\n    .react-datepicker__year-text {\n      color: ${COLORS.neutral_600};\n      background: ${COLORS.white};\n      font-weight: 400;\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      font-size: 19px;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\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      color: ${COLORS.neutral_600};\n      background: ${COLORS.white};\n      font-weight: 400;\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      font-size: 19px;\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__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","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;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA;AACA;AACA,oBAAoBV,iBAAOW,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQD,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBV,iBAAOY,WAAY;AACpC,sBAAsBZ,iBAAOW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBX,iBAAOa,WAAY;AACpC,sBAAsBb,iBAAOC,UAAW;AACxC;AACA;AACA;AACA,iBAAiBD,iBAAOc,WAAY;AACpC,sBAAsBd,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBJ,iBAAOW,KAAM;AAC9B,sBAAsBX,iBAAOe,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoBf,iBAAOW,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQD,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA,iBAAiBV,iBAAOY,WAAY;AACpC,sBAAsBZ,iBAAOW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBX,iBAAOa,WAAY;AACpC,sBAAsBb,iBAAOC,UAAW;AACxC;AACA;AACA;AACA,iBAAiBD,iBAAOc,WAAY;AACpC,sBAAsBd,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBJ,iBAAOW,KAAM;AAC9B,sBAAsBX,iBAAOe,WAAY;AACzC;AACA;AACA;AACA;AACA,iBAAiBf,iBAAOgB,WAAY;AACpC,sBAAsBhB,iBAAOiB,WAAY;AACzC;AACA;AACA,mBAAmBjB,iBAAOa,WAAY;AACtC,wBAAwBb,iBAAOC,UAAW;AAC1C;AACA;AACA;AACA,mBAAmBD,iBAAOc,WAAY;AACtC,wBAAwBd,iBAAOE,WAAY;AAC3C,qCAAqCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAClF;AACA;AACA;AACA;AACA;AA3NA,CAAA;AA8NA,QAAMc,aAAa,GAAGrB,2BAAOC,GAA8C;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IACAA,KAAK,EAALA,QAAAA,IAAmBA,KAAK,EAAxBA,MAAAA,GAAAA,EAAAA,GAEIoB,qBAAI;AACZ;AACA;AACA;AACA,sBAAsBnB,iBAAOoB,WAAY;AACzC;AACA;AACA,SAAU;AACV;AACA,gDAAgDpB,iBAAOc,WAAY;AACnE,6CAA6Cd,iBAAOc,WAAY;AAChE,wCAAwCd,iBAAOc,WAAY;AAC3D;AA7BA,CAAA;AAgCA,QAAMO,uBAAuB,GAAGxB,gCAAM,0BAANA,CAA0B;AAC1D;AACA,wCAAwCG,iBAAOsB,WAAY;AAC3D;AACA,eAAetB,iBAAOoB,WAAY;AAClC;AACA;AACA,wBAAwBpB,iBAAOC,UAAW;AAC1C,aAAaD,iBAAOoB,WAAY;AAChC;AACA;AACA,wBAAwBpB,iBAAOE,WAAY;AAC3C,aAAaF,iBAAOc,WAAY;AAChC,wCAAwCd,iBAAOuB,WAAY;AAC3D;AACA,eAAevB,iBAAOc,WAAY;AAClC;AACA;AACA;AACA;AACA,wBAAwBd,iBAAOW,KAAM;AACrC;AACA,eAAeX,iBAAOwB,WAAY;AAClC;AACA;AACA,0BAA0BxB,iBAAOW,KAAM;AACvC;AACA;AA3BA,CAAA;;AA8BA,QAAMc,eAAe,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,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,QAAA;AAAA,IAAA,UAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,qBAAA;AAevB9B,IAAAA;AAfuB,GAAD,KAgBI;AAC1B;AACA,UAAM+B,QAAQ,GAAGC,KAAK,CAALA,MAAAA,CAAjB,IAAiBA,CAAjB;AACA,UAAMC,aAAa,GAAGD,KAAK,CAALA,MAAAA,CAAtB,IAAsBA,CAAtB;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,KAAK,CAALA,QAAAA,CAApC,KAAoCA,CAApC;AACA,UAAM,CAAA,eAAA,EAAA,kBAAA,IAAwCA,KAAK,CAALA,QAAAA,CAAuB,CAArE,CAA8CA,CAA9C;AACA,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCA,KAAK,CAALA,QAAAA,CAA5C,KAA4CA,CAA5C;AACA,UAAM,CAAA,MAAA,EAAA,SAAA,IAAsBA,KAAK,CAALA,QAAAA,CAA5B,IAA4BA,CAA5B;AACA,UAAME,eAAe,GAAGF,KAAK,CAALA,MAAAA,CAAxB,IAAwBA,CAAxB;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,KAAA,EAAWD,QAAQ,CAARA,OAAAA,CAAAA,KAAAA,GAAyBI,sBAAAA,KAAAA,EAAAA,MAAAA,CAAqB3C,UAAU,GAAA,UAAA,GAAxDuC,eAAyBI,CAAzBJ;AADbC,KAAAA,EAEG,CAFHA,KAEG,CAFHA;AAIAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,cAAA,EAAoB;AAClB;AACA;AACA,cAAMI,YAAY,GAAGC,QAAQ,CAARA,sBAAAA,CAAAA,uCAAAA,EAArB,CAAqBA,CAArB;AACA,cAAMC,cAAc,GAAGF,YAAY,EAAZA,aAAAA,EAAvB,aAAA;AACA,YAAIA,YAAY,IAAhB,cAAA,EAAoCE,cAAc,CAAdA,SAAAA,GAA2BF,YAAY,CAAZA,SAAAA,GAAyB,IAAIA,YAAY,CAApEE,YAAAA;AACrC;AAPHN,KAAAA,EAQG,CAzBuB,cAyBvB,CARHA,EAjB0B,CA2B1B;AACA;;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,MAAA,EAAY;AACVC,QAAAA,aAAa,CAAbA,OAAAA,CAAAA,OAAAA,CADU,IACVA,EADU,CAEV;AACD;AAJHD,KAAAA,EAKG,CALHA,MAKG,CALHA;;AAOA,UAAMO,kBAAkB,GAAG,MAAM;AAC/B,UAAA,MAAA,EAAYC,SAAS,CAATA,IAAS,CAATA;AADd,KAAA;;AAIA,QAAIC,OAAO,GAAG,IAAA,IAAA,CAASlD,KAAK,IAAI,IAAA,IAAA,CAAA,KAAA,IAAkB,IAA3BA,IAA2B,EAA3BA,GAAwC,IAAA,IAAA,CAAxCA,KAAwC,CAAxCA,GAA0D,IAAjF,IAAiF,EAAnE,CAAd;AACAkD,IAAAA,OAAO,CAAPA,WAAAA,CAAoBA,OAAO,CAAPA,WAAAA,MAAyB1C,qBAAqB,IAzCxC,EAyCN0C,CAApBA,EAzC0B,CA2C1B;AACA;;AACA,QAAIC,OAAO,GAAG,IAAA,IAAA,CAASnD,KAAK,IAAI,IAAA,IAAA,CAAA,KAAA,IAAkB,IAA3BA,IAA2B,EAA3BA,GAAwC,IAAA,IAAA,CAAxCA,KAAwC,CAAxCA,GAA0D,IAAjF,IAAiF,EAAnE,CAAd;AACA,UAAMoD,WAAW,GAAGC,IAAI,CAAJA,KAAAA,CAAW,CAACF,OAAO,CAAPA,WAAAA,MAAyB5C,sBAAsB,IAAhD,EAAC4C,CAAD,IAA/B,CAAoBE,CAApB;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAqB,MAAA,UAAU,EAA/B,cAAA;AAAiD,MAAA,MAAM,EAAE5C,MAAM,IAAI;AAAnE,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,MAAA,GAAG,EADL,aAAA;AAEE,MAAA,cAAc,EAFhB,kBAAA;AAGE,MAAA,QAAQ,EAAG6C,CAAD,IAAY;AACpB,YAAA,QAAA,EAAc;AACZ,cAAA,cAAA,EAAoB;AAClB,kBAAMC,OAAO,GAAG,IAAhB,IAAgB,EAAhB;AACAA,YAAAA,OAAO,CAAPA,WAAAA,CAAoBD,CAAC,CAArBC,WAAoBD,EAApBC;AACAA,YAAAA,OAAO,CAAPA,QAAAA,CAAAA,eAAAA;AACAN,YAAAA,SAAS,CAATA,OAAS,CAATA;AAJF,WAAA,MAKOnD,QAAQ,CAARA,CAAQ,CAARA;AACR;;AACD,YAAA,cAAA,EAAoB0D,iBAAiB,CAAjBA,KAAiB,CAAjBA;AAZxB,OAAA;AAcE,MAAA,QAAQ,EAAE5D,QAAQ,IAdpB,MAAA;AAeE,MAAA,MAAM,EAfR,cAAA;AAgBE,MAAA,cAAc,EAhBhB,cAAA,CAiBE;AAjBF;AAkBE,MAAA,cAAc,EAAE6D,cAAc,GAAA,WAAA,GAlBhC,SAAA;AAmBE,MAAA,OAAO,EAAEA,cAAc,GAAA,OAAA,GAnBzB,SAAA;AAoBE,MAAA,QAAQ,EApBV,KAAA;AAqBE,MAAA,UAAU,EAAEC,MAAM,IArBpB,SAAA;AAsBE,MAAA,mBAAmB,EAtBrB,IAAA;AAuBE,MAAA,kBAAkB,EAChBpD,UAAU,GACLqD,MAAD,IAAA,aACE,KAAK,CAAL,aAAA,CAAA,4CAAA,EAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA;AAAA,QAAA,kBAAA;AAEmCC,QAAAA,iBAAiB,EAFpD,CAAA;AAEyDH,QAAAA,cAAc,EAFvE,cAAA;AAEyFD,QAAAA,iBAAiB,EAAEA;AAF5G,OAAA,CAAA,EAFI,IAEJ,CAFI,GAxBd,SAAA;AAiCE,MAAA,WAAW,EAAA,aACT,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAc,QAAA,QAAQ,EAAtB,QAAA;AAAkC,QAAA,MAAM,EAAxC,MAAA;AAAkD,QAAA,QAAQ,EAAE5D,QAAQ,GAAG,CAAH,CAAA,GAAQ;AAA5E,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,KAAK,EAAE;AAAEiE,UAAAA,OAAO,EAAE;AAAX;AAAZ,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,QAAA,MAAM,EAArB,MAAA;AAA+B,QAAA,QAAQ,EAAEjE;AAAzC,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AACE,QAAA,EAAE,EADJ,EAAA;AAEE,QAAA,GAAG,EAFL,QAAA;AAGE,QAAA,IAAI,EAHN,MAAA;AAIE,QAAA,IAAI,EAJN,YAAA;AAKE,QAAA,QAAQ,EALV,IAAA;AAME,QAAA,SAAS,EAAEG,QAAQ,GAAA,OAAA,GANrB,EAAA;AAOE,QAAA,QAAQ,EAPV,CAAA;AAQE,QAAA,YAAY,EARd,YAAA;AASE,QAAA,WAAW,EATb,WAAA;AAUE,QAAA,QAAQ,EAVV,QAAA;AAWE,QAAA,MAAM,EAXR,MAAA;AAYE,QAAA,QAAQ,EAZV,QAAA;AAaE,QAAA,UAAU,EAbZ,UAAA;AAcE,QAAA,MAAM,EAAE,MAAM+D,aAAa,CAd7B,KAc6B,CAd7B;AAeE,QAAA,WAAW,EAAGR,CAAD,IAAY;AACvB,cAAI,EAAEzD,MAAM,IAAR,QAAA,KAAyB,CAA7B,UAAA,EAA0C8C,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAhB9C,SAAA;AAkBE,QAAA,OAAO,EAAGW,CAAD,IAAY;AACnB,cAAI,EAAEzD,MAAM,IAAZ,QAAI,CAAJ,EAA2B;AACzB,gBAAI,CAAC8C,eAAe,CAApB,OAAA,EAA8BmB,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKnB,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AACF;AAvBH,OAAA,CADF,EAAA,aA0BE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,QAAA;AAA+C,QAAA,QAAQ,EAAE,CAAzD,CAAA;AAA6D,QAAA,MAAM,EAAE,MAAM,CAA3E,CAAA;AAA+E,QAAA,QAAQ,EAAE/C,QAAQ,IAAIC;AAArG,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAU,QAAA,IAAI,EAAC;AAAf,OAAA,CADF,CA1BF,CADF,CADF;AAlCJ,KAAA,CADF,CAFF,EA4EGK,iBAAiB,IAAA,aAChB,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,IAAI,EAAtB,MAAA;AAA8B,MAAA,KAAK,EAAEY,iBAAOiD;AAA5C,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAhFR,iBAgFQ,CAFF,CA7EJ,CADF;AAhEF,GAAA;;;AAhTEpE,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,M;AACAC,IAAAA,Q;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,U;AACAC,IAAAA,iB;AACAC,IAAAA,Y;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,sB;AACAC,IAAAA,qB;AACAC,IAAAA,M;;oBAybF,e","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"}

package/dist/umd/InputFields/components/SearchBarInput.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../../styles/index"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../../styles/index", "../../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles/index"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles/index"), require("../../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.index);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.index, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _index) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _index, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -84,8 +84,8 @@
     type: 'search'
   }))`
   appearance: none;
-  font-size: 1rem;
   width: calc(100% - 96px);
+  ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black)}
 
   /* To prevent browser putting its own cross inside the search bar */
   ::-ms-clear {
@@ -106,8 +106,7 @@
   }
 
   ::placeholder {
-    font-style: italic;
-    color: ${_index.COLORS.neutral_400};
+    ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500)}
   }
 
   &:focus {
@@ -116,28 +115,28 @@
 `;
   const BigSearch = exports.BigSearch = (0, _styledComponents2.default)(Search)`
   height: 32px;
-  font-size: 1.125rem;
   border-width: 0;
   margin-left: 50px;
-  color: ${_index.COLORS.black};
   outline: none;
+
+  ${(0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black)}
+
   ::placeholder {
-    color: ${_index.COLORS.neutral_600};
-    font-size: 16px;
+    ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600)}
   }
   ${_index.BREAKPOINTS.MEDIUM} {
     ::placeholder {
-      font-size: 18px;
+      ${(0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600)}
     }
   }
   &.small {
     ::placeholder {
-      font-size: 16px;
+      ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600)}
     }
   }
   &.medium {
     ::placeholder {
-      font-size: 18px;
+      ${(0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600)}
     }
   }
   &:disabled {

package/dist/umd/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","type","COLORS","neutral_400","BigSearch","styled","black","neutral_600","BREAKPOINTS","MEDIUM","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","SearchBarInput","isPressingEnter","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,QAAMA,MAAM,WAANA,MAAM,GAAG,2BAAA,KAAA,CAAA,KAAA,CAAmB,OAAO;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAP,CAAnB,CAA+C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,cAAOC,WAAY;AAChC;AACA;AACA;AACA;AACA;AA9BO,CAAA;AAiCA,QAAMC,SAAS,WAATA,SAAS,GAAGC,gCAAM,MAANA,CAAe;AACxC;AACA;AACA;AACA;AACA,WAAWH,cAAOI,KAAM;AACxB;AACA;AACA,aAAaJ,cAAOK,WAAY;AAChC;AACA;AACA,IAAIC,mBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA7BO,CAAA;AA6CP,QAAMW,cAAc,GAAA,aAAG,KAAK,CAAL,UAAA,CAAwD,CAAA,KAAA,EAAA,GAAA,KAAqC;AAClH,UAAM;AAAA,MAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MAAA,aAAA;AAAA,MAAA,WAAA;AAAA,MAAA,WAAA;AAAA,MAAA,QAAA;AAAA,MAAA,SAAA;AAAA,MAAA,IAAA;AAAA,MAAA,aAAA;AAAqGD,MAAAA;AAArG,QAAN,KAAA;;AACA,UAAME,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,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AACE,MAAA,WAAW,EAAEP,QAAQ,GAAA,EAAA,GADvB,WAAA;AAEE,MAAA,EAAE,EAFJ,EAAA;AAGE,qBAHF,EAAA;AAIE,MAAA,SAAS,EAAEE,IAAI,GAAA,IAAA,GAJjB,EAAA;AAKE,MAAA,QAAQ,EAAE,CALZ,CAAA;AAME,MAAA,QAAQ,EANV,QAAA;AAOE,MAAA,QAAQ,EAAGK,CAAD,IAAYV,aAAa,CAACU,CAAC,CAADA,MAAAA,CAPtC,KAOqC,CAPrC;AAQE,MAAA,KAAK,EARP,UAAA;AASE,MAAA,GAAG,EATL,GAAA;AAUE,MAAA,MAAM,EAAGA,CAAD,IAAQH,MAAM,GAAGA,MAAM,CAAT,CAAS,CAAT,GAAeD,aAAa,CAVpD,KAUoD,CAVpD;AAWE,MAAA,SAAS,EAXX,SAAA;AAYE,MAAA,UAAU,EAAGI,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBR,WAAW,CAAhCQ,CAAgC,CAAhCA,GAAsC;AAZjE,KAAA,CADF;AAXF,GAAuB,CAAvB;;AAZEX,IAAAA,E;AACAC,IAAAA,U;AACAC,IAAAA,a;AACAC,IAAAA,W;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,S;AACAC,IAAAA,I,6BAAO,O,EAAU,Q;AACjBC,IAAAA,a;AACAC,IAAAA,M;;oBAgCF,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles/index';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  font-size: 1rem;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    font-style: italic;\n    color: ${COLORS.neutral_400};\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  font-size: 1.125rem;\n  border-width: 0;\n  margin-left: 50px;\n  color: ${COLORS.black};\n  outline: none;\n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-size: 16px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      font-size: 18px;\n    }\n  }\n  &.small {\n    ::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    ::placeholder {\n      font-size: 18px;\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\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    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={-1}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","type","ComponentSStyling","ComponentTextStyle","COLORS","BigSearch","styled","ComponentMStyling","BREAKPOINTS","MEDIUM","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","SearchBarInput","isPressingEnter","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\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    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={-1}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/dist/umd/InputFields/components/SearchField.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../../styles/index", "../styling"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../../styles/index", "../styling", "../../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles/index"), require("../styling"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles/index"), require("../styling"), require("../../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.index, global.styling);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.index, global.styling, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _index, _styling) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _index, _styling, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -97,35 +97,36 @@
   position: relative;
   height: 48px;
   appearance: none;
-  font-size: 1rem;
+
+  ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black)}
+
   padding: 0 !important;
   width: 100%;
   ::placeholder {
-    font-style: italic;
-    color: ${_index.COLORS.neutral_400};
+    ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500)}
   }
   ${_index.BREAKPOINTS.MEDIUM} {
-    font-size: 18px;
-    line-height: 18px;
+    ${(0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black)}
+
     height: 56px;
     padding: 0 4px !important;
     &::placeholder {
-      font-size: 18px;
+      ${(0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500)}
     }
   }
   &.small {
-    font-size: 16px;
+    ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black)}
     height: 48px;
     padding: 0 !important;
     &::placeholder {
-      font-size: 16px;
+      ${(0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500)}
     }
   }
   &.medium {
-    font-size: 18px;
+    ${(0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black)}
     height: 56px;
     &::placeholder {
-      font-size: 18px;
+      ${(0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500)}
     }
   }
   &:hover {

package/dist/umd/InputFields/components/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["DisabledState","css","COLORS","neutral_100","StyledSearchField","styled","div","neutral_300","neutral_400","BREAKPOINTS","MEDIUM","primary_700","primary_800","neutral_600","props","id","searchTerm","disabled","validationMessage","children","tabbedHere","size","SearchField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,QAAMA,aAAa,GAAGC,qBAAI;AAC1B,sBAAsBC,cAAOC,WAAY;AACzC;AACA;AACA;AAJA,CAAA;AAOO,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGC,2BAAOC,GAAqF;AAC7H;AACA;AACA;AACA,sCAAsCJ,cAAOK,WAAY;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,cAAOM,WAAY;AAChC;AACA,IAAIC,mBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDR,cAAOS,WAAY;AACnE,6CAA6CT,cAAOS,WAAY;AAChE,wCAAwCT,cAAOS,WAAY;AAC3D;AACA;AACA;AACA,gDAAgDT,cAAOU,WAAY;AACnE,6CAA6CV,cAAOU,WAAY;AAChE,wCAAwCV,cAAOU,WAAY;AAC3D;AACA;AACA;AACA,wBAAwBV,cAAOC,WAAY;AAC3C;AACA;AACA;AACA;AACA,aAAaD,cAAOW,WAAY;AAChC;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,aAAAA,GAAiC,EAAI;AACrD,IAAKA,KAAD,IAAYA,KAAK,CAALA,uBAAAA,GAAAA,qCAAAA,GAA+D,EAAI;AACnF,IAAKA,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,wBAAAA,GAAqC,EAAI;AAhElD,CAAA;;AA6EP,QAAMQ,WAAqD,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,QAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,QAAA;AAAA,IAAA,UAAA;AAAqED,IAAAA;AAArE,GAAD,KAAiF;AAC7I,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AACE,MAAA,EAAE,EAAG,GAAEN,EADT,OAAA;AAEE,MAAA,SAAS,EAAE,CAACC,UAAU,KAAVA,EAAAA,GAAAA,eAAAA,GAAD,EAAA,EAAA,MAAA,CAAkDK,IAAI,GAAA,IAAA,GAFnE,EAEa,CAFb;AAGE,MAAA,QAAQ,EAHV,QAAA;AAIE,MAAA,UAAU,EAJZ,UAAA;AAKE,MAAA,QAAQ,EAAE,CALZ,CAAA;AAME,MAAA,uBAAuB,EAAEH,iBAAiB,KAAjBA,SAAAA,IAAmCA,iBAAiB,KAAK;AANpF,KAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEH,IAAAA,E;AACAC,IAAAA,U;AACAC,IAAAA,Q;AACAC,IAAAA,iB;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,I;;oBAiBF,W","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles/index';\nimport { activeValidationMessageState, tabbedHereStyle } from '../styling';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; tabbedHere?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  border: solid 2px transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  font-size: 1rem;\n  padding: 0 !important;\n  width: 100%;\n  ::placeholder {\n    font-style: italic;\n    color: ${COLORS.neutral_400};\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 4px !important;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    padding: 0 !important;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\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    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ${COLORS.neutral_600};\n  }\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.tabbedHere ? tabbedHereStyle : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  tabbedHere: boolean;\n  size: string;\n};\n\nconst SearchField: React.FunctionComponent<SeachFieldProps> = ({ id, searchTerm, disabled, validationMessage, children, tabbedHere, size }) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n};\n\nexport default SearchField;\n"],"file":"SearchField.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["DisabledState","css","COLORS","neutral_100","StyledSearchField","styled","div","neutral_300","ComponentSStyling","ComponentTextStyle","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_700","primary_800","neutral_600","props","id","searchTerm","disabled","validationMessage","children","tabbedHere","size","SearchField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,aAAa,GAAGC,qBAAI;AAC1B,sBAAsBC,cAAOC,WAAY;AACzC;AACA;AACA;AAJA,CAAA;AAOO,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGC,2BAAOC,GAAqF;AAC7H;AACA;AACA;AACA,sCAAsCJ,cAAOK,WAAY;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,0BAAD,OAAjBD,EAA8CN,cAA7B,KAAjBM,CAA4D;AAChE;AACA;AACA;AACA;AACA,MAAMA,mCAAkBC,0BAAD,MAAjBD,EAA6CN,cAA5B,WAAjBM,CAAiE;AACvE;AACA,IAAIE,mBAAYC,MAAO;AACvB,MAAMC,mCAAkBH,0BAAD,OAAjBG,EAA8CV,cAA7B,KAAjBU,CAA4D;AAClE;AACA;AACA;AACA;AACA,QAAQA,mCAAkBH,0BAAD,MAAjBG,EAA6CV,cAA5B,WAAjBU,CAAiE;AACzE;AACA;AACA;AACA,MAAMJ,mCAAkBC,0BAAD,OAAjBD,EAA8CN,cAA7B,KAAjBM,CAA4D;AAClE;AACA;AACA;AACA,QAAQA,mCAAkBC,0BAAD,MAAjBD,EAA6CN,cAA5B,WAAjBM,CAAiE;AACzE;AACA;AACA;AACA,MAAMI,mCAAkBH,0BAAD,OAAjBG,EAA8CV,cAA7B,KAAjBU,CAA4D;AAClE;AACA;AACA,QAAQA,mCAAkBH,0BAAD,MAAjBG,EAA6CV,cAA5B,WAAjBU,CAAiE;AACzE;AACA;AACA;AACA,gDAAgDV,cAAOW,WAAY;AACnE,6CAA6CX,cAAOW,WAAY;AAChE,wCAAwCX,cAAOW,WAAY;AAC3D;AACA;AACA;AACA,gDAAgDX,cAAOY,WAAY;AACnE,6CAA6CZ,cAAOY,WAAY;AAChE,wCAAwCZ,cAAOY,WAAY;AAC3D;AACA;AACA;AACA,wBAAwBZ,cAAOC,WAAY;AAC3C;AACA;AACA;AACA;AACA,aAAaD,cAAOa,WAAY;AAChC;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,aAAAA,GAAiC,EAAI;AACrD,IAAKA,KAAD,IAAYA,KAAK,CAALA,uBAAAA,GAAAA,qCAAAA,GAA+D,EAAI;AACnF,IAAKA,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,wBAAAA,GAAqC,EAAI;AAjElD,CAAA;;AA8EP,QAAMQ,WAAqD,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,QAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,QAAA;AAAA,IAAA,UAAA;AAAqED,IAAAA;AAArE,GAAD,KAAiF;AAC7I,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AACE,MAAA,EAAE,EAAG,GAAEN,EADT,OAAA;AAEE,MAAA,SAAS,EAAE,CAACC,UAAU,KAAVA,EAAAA,GAAAA,eAAAA,GAAD,EAAA,EAAA,MAAA,CAAkDK,IAAI,GAAA,IAAA,GAFnE,EAEa,CAFb;AAGE,MAAA,QAAQ,EAHV,QAAA;AAIE,MAAA,UAAU,EAJZ,UAAA;AAKE,MAAA,QAAQ,EAAE,CALZ,CAAA;AAME,MAAA,uBAAuB,EAAEH,iBAAiB,KAAjBA,SAAAA,IAAmCA,iBAAiB,KAAK;AANpF,KAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEH,IAAAA,E;AACAC,IAAAA,U;AACAC,IAAAA,Q;AACAC,IAAAA,iB;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,I;;oBAiBF,W","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState, tabbedHereStyle} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; tabbedHere?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  border: solid 2px transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\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    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ${COLORS.neutral_600};\n  }\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.tabbedHere ? tabbedHereStyle : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  tabbedHere: boolean;\n  size: string;\n};\n\nconst SearchField: React.FunctionComponent<SeachFieldProps> = ({ id, searchTerm, disabled, validationMessage, children, tabbedHere, size }) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n};\n\nexport default SearchField;\n"],"file":"SearchField.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", "../Button", "../icons/systemicons/SystemIcons", "../styles", "./ListRowDropdown"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../Button", "../icons/systemicons/SystemIcons", "../styles", "./ListRowDropdown", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./ListRowDropdown"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./ListRowDropdown"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.SystemIcons, global.styles, global.ListRowDropdown);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.SystemIcons, global.styles, global.ListRowDropdown, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _SystemIcons, _styles, _ListRowDropdown) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _SystemIcons, _styles, _ListRowDropdown, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -108,8 +108,10 @@
   const LeftSection = _styledComponents2.default.div`
   display: flex;
   flex-direction: row;
-  font-size: 16px;
   align-items: center;
+
+  ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
+
   svg {
     margin-right: 12px;
   }

package/dist/umd/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["EditRow","styled","div","props","COLORS","neutral_20","neutral_100","LeftSection","MainInfo","ButtonWrapper","UserDropdownButton","white","StyledMoreVertical","primary_20","primary_100","key","Icon","mainInfo","dropdownOptions","disableDifferentBackgroundforEvenNumbers","ListRow","color","React","setDropdownActive","neutral_500","dropdownActive"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../Button';\nimport { MoreVertical } from '../icons/systemicons/SystemIcons';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ListRowDropdownOption } from '../types';\n\nimport ListRowDropdown from './ListRowDropdown';\n\nconst EditRow = styled.div<{ disableDifferentBackgroundforEvenNumbers?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  &:nth-child(even) {\n    background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n  }\n\n  .user-actions {\n    display: flex;\n    position: relative;\n    align-items: center;\n  }\n\n  .somePaddingForAlignment {\n    padding: 0 3px 0 0;\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst LeftSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  font-size: 16px;\n  align-items: center;\n  svg {\n    margin-right: 12px;\n  }\n`;\n\nconst MainInfo = styled.div`\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ButtonWrapper = styled.div`\n  outline: none;\n`;\n\nconst UserDropdownButton = styled(Button)`\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n  &:focus > div {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    border-radius: 4px;\n    outline: none;\n    background: ${COLORS.white};\n  }\n`;\n\nconst StyledMoreVertical = styled(MoreVertical)`\n  padding: 8px 8px;\n  outline: none;\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype Props = {\n  key?: string;\n  Icon?: any;\n  mainInfo: any;\n  dropdownOptions: ListRowDropdownOption[];\n  disableDifferentBackgroundforEvenNumbers?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers }: Props) => {\n  const color = COLORS.black;\n  const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n  return (\n    <EditRow key={key} disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n      <LeftSection color={color} data-hj-suppress>\n        {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n        <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n      </LeftSection>\n\n      <ButtonWrapper className=\"user-actions\">\n        <UserDropdownButton\n          variant=\"text\"\n          onClick={() => {\n            setDropdownActive(true);\n          }}>\n          <div tabIndex={-1}>\n            <StyledMoreVertical size=\"22px\" color={COLORS.neutral_500} />\n          </div>\n        </UserDropdownButton>\n        {dropdownActive && <ListRowDropdown closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n      </ButtonWrapper>\n    </EditRow>\n  );\n};\n\nexport default ListRow;\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["EditRow","styled","div","props","COLORS","neutral_20","neutral_100","LeftSection","ComponentSStyling","ComponentTextStyle","MainInfo","ButtonWrapper","UserDropdownButton","white","StyledMoreVertical","primary_20","primary_100","key","Icon","mainInfo","dropdownOptions","disableDifferentBackgroundforEvenNumbers","ListRow","color","React","setDropdownActive","neutral_500","dropdownActive"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,OAAO,GAAGC,2BAAOC,GAA4D;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,KAAK,IAAKA,KAAK,CAALA,wCAAAA,GAAAA,SAAAA,GAA6DC,eAAOC,UAAY;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,eAAOE,WAAY;AAC3C;AAtBA,CAAA;AAyBA,QAAMC,WAAW,GAAGN,2BAAOC,GAAI;AAC/B;AACA;AACA;AACA;AACA,IAAIM,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC7D;AACA;AACA;AACA;AATA,CAAA;AAYA,QAAME,QAAQ,GAAGT,2BAAOC,GAAI;AAC5B;AACA;AACA;AAHA,CAAA;AAMA,QAAMS,aAAa,GAAGV,2BAAOC,GAAI;AACjC;AADA,CAAA;AAIA,QAAMU,kBAAkB,GAAGX,gCAAM,cAANA,CAAe;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBG,eAAOS,KAAM;AAC/B;AAZA,CAAA;AAeA,QAAMC,kBAAkB,GAAGb,gCAAM,yBAANA,CAAqB;AAChD;AACA;AACA;AACA,kBAAkBG,eAAOW,UAAW;AACpC;AACA;AACA;AACA,kBAAkBX,eAAOY,WAAY;AACrC;AACA;AAVA,CAAA;;AAqBA,QAAMM,OAAuC,GAAG,CAAC;AAAA,IAAA,GAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,eAAA;AAAwCD,IAAAA;AAAxC,GAAD,KAA+F;AAC7I,UAAME,KAAK,GAAGnB,eAAd,KAAA;AACA,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCoB,KAAK,CAALA,QAAAA,CAA5C,KAA4CA,CAA5C;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAS,MAAA,GAAG,EAAZ,GAAA;AAAmB,MAAA,wCAAwC,EAAEH;AAA7D,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAa,MAAA,KAAK,EAAlB,KAAA;AAA2B,0BAAA;AAA3B,KAAA,EACGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAV,MAAA;AAAkB,MAAA,KAAK,EAAvB,KAAA;AAAgC,MAAA,SAAS,EAAC;AAA1C,KAAA,CADX,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAU,0BAAA;AAAV,KAAA,EAHJ,QAGI,CAFF,CADF,EAAA,aAME,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,MAAA,SAAS,EAAC;AAAzB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,MAAA;AAEE,MAAA,OAAO,EAAE,MAAM;AACbO,QAAAA,iBAAiB,CAAjBA,IAAiB,CAAjBA;AACD;AAJH,KAAA,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,QAAQ,EAAE,CAAC;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAoB,MAAA,IAAI,EAAxB,MAAA;AAAgC,MAAA,KAAK,EAAErB,eAAOsB;AAA9C,KAAA,CADF,CALF,CADF,EAUGC,cAAc,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAiB,MAAA,aAAa,EAAE,MAAMF,iBAAiB,CAAvD,KAAuD,CAAvD;AAAgE,MAAA,OAAO,EAAEL;AAAzE,KAAA,CAVrB,CANF,CADF;AAJF,GAAA;;;AAPEH,IAAAA,G;AACAC,IAAAA,I;AACAC,IAAAA,Q;AACAC,IAAAA,e;AACAC,IAAAA,wC;;oBA8BF,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../Button';\nimport {MoreVertical} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\n\nimport ListRowDropdown from './ListRowDropdown';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst EditRow = styled.div<{ disableDifferentBackgroundforEvenNumbers?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  &:nth-child(even) {\n    background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n  }\n\n  .user-actions {\n    display: flex;\n    position: relative;\n    align-items: center;\n  }\n\n  .somePaddingForAlignment {\n    padding: 0 3px 0 0;\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst LeftSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  svg {\n    margin-right: 12px;\n  }\n`;\n\nconst MainInfo = styled.div`\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ButtonWrapper = styled.div`\n  outline: none;\n`;\n\nconst UserDropdownButton = styled(Button)`\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n  &:focus > div {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    border-radius: 4px;\n    outline: none;\n    background: ${COLORS.white};\n  }\n`;\n\nconst StyledMoreVertical = styled(MoreVertical)`\n  padding: 8px 8px;\n  outline: none;\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype Props = {\n  key?: string;\n  Icon?: any;\n  mainInfo: any;\n  dropdownOptions: ListRowDropdownOption[];\n  disableDifferentBackgroundforEvenNumbers?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers }: Props) => {\n  const color = COLORS.black;\n  const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n  return (\n    <EditRow key={key} disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n      <LeftSection color={color} data-hj-suppress>\n        {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n        <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n      </LeftSection>\n\n      <ButtonWrapper className=\"user-actions\">\n        <UserDropdownButton\n          variant=\"text\"\n          onClick={() => {\n            setDropdownActive(true);\n          }}>\n          <div tabIndex={-1}>\n            <StyledMoreVertical size=\"22px\" color={COLORS.neutral_500} />\n          </div>\n        </UserDropdownButton>\n        {dropdownActive && <ListRowDropdown closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n      </ButtonWrapper>\n    </EditRow>\n  );\n};\n\nexport default ListRow;\n"],"file":"ListRow.js"}

package/dist/umd/List/ListRowDropdown.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -104,11 +104,9 @@
   padding: 12px 16px;
 
   text-align: left;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
   height: 48px;
-  color: ${_styles.COLORS.neutral_600};
+
+  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
 
   background-color: ${_styles.COLORS.white};
   border-width: 0;

package/dist/umd/List/ListRowDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["Wrapper","styled","div","DropdownMenuContainer","COLORS","white","Content","button","neutral_600","primary_20","primary_100","options","closeDropdown","ListRowDropdown","React","reference","clickIsOutside","e","handleClick","isInViewport","offset","top","inside","window","setClassname","document","classname","option","action"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ListRowDropdownOption } from '../types';\n\nconst Wrapper = styled.div`\n  .isInside {\n    top: 42px;\n  }\n  .isOutside {\n    bottom: 42px;\n  }\n`;\n\nconst DropdownMenuContainer = styled.div`\n  position: absolute;\n  flex-direction: column;\n  background: ${COLORS.white};\n  font-size: 1em;\n  z-index: 1;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  right: 0;\n  width: max-content;\n  min-width: 260px;\n`;\n\nconst Content = styled.button`\n  min-width: 100%;\n  padding: 12px 16px;\n\n  text-align: left;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  height: 48px;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${COLORS.white};\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype DropdownMenuProps = {\n  options: ListRowDropdownOption[];\n  closeDropdown: any;\n};\n\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown }: DropdownMenuProps) => {\n  const [classname, setClassname] = React.useState('isInside');\n  const reference = React.useRef<HTMLDivElement>(null);\n\n  const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\n\n  const handleClick = (e: any) => {\n    if (e.keyCode) {\n      if (e.keyCode === 27) {\n        closeDropdown();\n      }\n    } else if (clickIsOutside(e)) {\n      closeDropdown();\n    }\n  };\n\n  const isInViewport = (offset = 0) => {\n    if (!reference.current) return;\n    const top = reference.current.getBoundingClientRect().bottom;\n    const inside = top + offset >= 0 && top - offset <= window.innerHeight;\n    if (!inside) {\n      setClassname('isOutside');\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClick, false);\n    document.addEventListener('keydown', handleClick, false);\n    isInViewport();\n    return () => {\n      document.removeEventListener('mousedown', handleClick, false);\n      document.removeEventListener('keydown', handleClick, false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Wrapper>\n      <DropdownMenuContainer ref={reference} className={classname}>\n        {options.map(option => (\n          <Content key={option.key} onClick={option.action}>\n            {option.label}\n          </Content>\n        ))}\n      </DropdownMenuContainer>\n    </Wrapper>\n  );\n};\n\nexport default ListRowDropdown;\n"],"file":"ListRowDropdown.js"}
+{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["Wrapper","styled","div","DropdownMenuContainer","COLORS","white","Content","button","ComponentMStyling","ComponentTextStyle","primary_20","primary_100","options","closeDropdown","ListRowDropdown","React","reference","clickIsOutside","e","handleClick","isInViewport","offset","top","inside","window","setClassname","document","classname","option","action"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Wrapper = styled.div`\n  .isInside {\n    top: 42px;\n  }\n  .isOutside {\n    bottom: 42px;\n  }\n`;\n\nconst DropdownMenuContainer = styled.div`\n  position: absolute;\n  flex-direction: column;\n  background: ${COLORS.white};\n  font-size: 1em;\n  z-index: 1;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  right: 0;\n  width: max-content;\n  min-width: 260px;\n`;\n\nconst Content = styled.button`\n  min-width: 100%;\n  padding: 12px 16px;\n\n  text-align: left;\n  height: 48px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  background-color: ${COLORS.white};\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype DropdownMenuProps = {\n  options: ListRowDropdownOption[];\n  closeDropdown: any;\n};\n\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown }: DropdownMenuProps) => {\n  const [classname, setClassname] = React.useState('isInside');\n  const reference = React.useRef<HTMLDivElement>(null);\n\n  const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\n\n  const handleClick = (e: any) => {\n    if (e.keyCode) {\n      if (e.keyCode === 27) {\n        closeDropdown();\n      }\n    } else if (clickIsOutside(e)) {\n      closeDropdown();\n    }\n  };\n\n  const isInViewport = (offset = 0) => {\n    if (!reference.current) return;\n    const top = reference.current.getBoundingClientRect().bottom;\n    const inside = top + offset >= 0 && top - offset <= window.innerHeight;\n    if (!inside) {\n      setClassname('isOutside');\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClick, false);\n    document.addEventListener('keydown', handleClick, false);\n    isInViewport();\n    return () => {\n      document.removeEventListener('mousedown', handleClick, false);\n      document.removeEventListener('keydown', handleClick, false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Wrapper>\n      <DropdownMenuContainer ref={reference} className={classname}>\n        {options.map(option => (\n          <Content key={option.key} onClick={option.action}>\n            {option.label}\n          </Content>\n        ))}\n      </DropdownMenuContainer>\n    </Wrapper>\n  );\n};\n\nexport default ListRowDropdown;\n"],"file":"ListRowDropdown.js"}