@laerdal/life-react-components 1.11.0-dev.30 → 1.11.0-dev.31

package/dist/InputFields/DatepickerField.js

@@ -22,7 +22,7 @@ import React from 'react';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import en from 'date-fns/locale/en-GB';
-import dayjs from 'dayjs';
+import moment from 'moment';
 /**
  * Import custom components.
  */
@@ -109,7 +109,7 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 
   React.useEffect(function () {
-    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
+    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
   }, [value]);
   React.useEffect(function () {
     if (yearPickerMode) {

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, 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';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\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  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 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        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\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        ${focusStyles}\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          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\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 || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } 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 {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, 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';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\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  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 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        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\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        ${focusStyles}\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          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\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 || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerFieldHeader.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface DatepickerFieldHeaderParams {
     date: Date;
     changeYear(year: number): void;

package/dist/InputFields/SearchBar.cjs

@@ -159,6 +159,7 @@ var SearchBar = function SearchBar(_ref) {
         containerRef: containerRef,
         size: size,
         isButton: false,
+        ariaRolesType: "input",
         customizationProps: {
           items: searchList,
           action: dropdownAction,

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/SearchBar.js

@@ -138,6 +138,7 @@ var SearchBar = function SearchBar(_ref) {
         containerRef: containerRef,
         size: size,
         isButton: false,
+        ariaRolesType: "input",
         customizationProps: {
           items: searchList,
           action: dropdownAction,

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentMStyling","ComponentTextStyle","Italic","black","ComponentSStyling","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentMStyling","ComponentTextStyle","Italic","black","ComponentSStyling","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/dist/InputFields/Textarea.d.ts

@@ -17,5 +17,5 @@ declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLA
     margin?: string | undefined;
     note?: TextFieldNote | undefined;
     required: boolean;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+} & React.RefAttributes<any>>;
 export default Textarea;

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}

package/dist/InputFields/types.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Size } from '../types';
+import React from 'react';
 export declare type TextFieldProps = {
     id: string;
     disabled?: boolean;

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}

package/dist/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '../types';
 declare type LoadingIndicatorProps = {
     id?: string;

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Product } from '../types';
 declare type CardProps = {
     product: Product;

package/dist/Paginator/Paginator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type PaginatorProps = {
     pageCount: number;
     currentPage: number;

package/dist/SideMenu/SideMenuBody.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SideMenuProps } from './types';
 export declare const SideMenuBody: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/SideMenuFooter.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SideMenuProps } from './types';
 export declare const SideMenuFooter: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/SideMenuHeader.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SideMenuProps } from './types';
 export declare const SideMenuHeader: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { MenuItemProps } from '../MenuItem/MenuItem';

package/dist/Switcher/SwitcherMenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SwitcherNavItem {
     label: string;
     url: string;

package/dist/Table/TableTypes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Types for the table.
  */

package/dist/Tile/TileCommonItems.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TileDropdownButton, TileHyperLink, TileIconButton, TileNote, TileStandardButton, TileToggleButton } from './TileTypes';
 import { Size } from '../types';
 export declare const TileNoteText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Toggles/TogglerTypes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '..';
 /**
  * Types for the table.

package/dist/Tooltips/TooltipTypes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from "../types";
 /**
  * Types for the table.

package/dist/Tooltips/TooltipWrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from './TooltipTypes';
 declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position, ...props }: TooltipProps) => JSX.Element;
 export default TooltipWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.11.0-dev.30",
+  "version": "1.11.0-dev.31",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],
@@ -52,27 +52,32 @@
     ]
   },
   "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "@laerdal/figma-svg": "^2.9.7",
+    "@types/node": "^18.0.6",
+    "@types/react": "^17.0.47",
     "animated-scroll-to": "^2.3.0",
+    "moment": "^2.29.4",
+    "nanoid": "3.3.4",
     "react-datepicker": "^4.8.0",
     "react-inlinesvg": "^3.0.0",
     "react-modal": "^3.15.1",
-    "dayjs": "^1.11.5",
-    "rooks": "^7.1.1",
+    "react-responsive": "^9.0.0-beta.6",
+    "rooks": "^5.13.1",
     "styled-components": "^5.3.5",
-    "typescript": "^4.8.2"
+    "typescript": "^4.7.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-default-from": "^7.18.10",
-    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
-    "@babel/plugin-transform-runtime": "^7.18.10",
-    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-    "@babel/preset-env": "^7.19.0",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.19.0",
+    "@babel/cli": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/plugin-proposal-export-default-from": "^7.16.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.5",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@babel/runtime": "^7.16.5",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.3.0",
@@ -82,8 +87,6 @@
     "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
-    "@types/node": "^18.0.6",
-    "@types/react": "^17.0.47",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-typescript-to-proptypes": "^2.0.0",
@@ -96,8 +99,8 @@
     "jest-react-hooks-shallow": "^1.5.1",
     "jest-styled-components": "^7.0.5",
     "jest-svg-transformer": "^1.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+
+
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "regenerator-runtime": "^0.13.9",