@laerdal/life-react-components 0.0.280-dev.1 → 0.0.280-dev.12.full

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","dateFormat","validationMessage","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","DatePickerContainer","styled","div","props","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","neutral_600","scrollBarStyling","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","primary_600","StyledInputFieldStyling","primary_200","primary_300","DatepickerField","inputRef","React","datepickerRef","moment","selectedDate","document","dropdownParent","handleCalendarOpen","setOpenAt","maxDate","minDate","itemsNumber","Math","e","newDate","setYearPickerMode","yearPickerMode","openAt","params","customHeaderCount","setTabbedHere","display","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;;AA0BA;AACA;AACA;;AAmBA;AACA;AACA;AACA,QAAMe,mBAAmB,GAAGC,2BAAOC,GAA6C;AAChF;AACA;AACA,MAAMC,KAAK,IAAKA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACJ,MAAhCI,GAAAA,GAA4C,EAAI;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,iBAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBD,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BJ,iBAAOK,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCL,iBAAOM,WAAY;AACpD,oBAAoBN,iBAAOK,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAAN,UAAA,GAAA,MAAA,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA,eAAeC,iBAAOO,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,wBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeR,iBAAOO,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport { Calendar, Attention } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button/index';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  > div {\n    display: block;\n    ${props => (props.margin ? `margin: ${props.margin};` : '')}\n\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      color: ${COLORS.neutral_600};\n      font-weight: 700;\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      font-size: 19px;\n      margin-right: 5px;\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      color: ${COLORS.neutral_600};\n      font-weight: 400;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      font-size: 19px;\n      margin: 0px;\n      width: 48px;\n    }\n\n    .react-datepicker__year-text {\n      color: ${COLORS.neutral_600};\n      background: ${COLORS.white};\n      font-weight: 400;\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      font-size: 19px;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      color: ${COLORS.neutral_600};\n      background: ${COLORS.white};\n      font-weight: 400;\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n      font-size: 19px;\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 4px;\n    top: 4px;\n\n    svg {\n    }\n  }\n\n  &:hover {\n    svg,\n    svg path {\n      fill: ${COLORS.primary_600} !important;\n    }\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    ::placeholder {\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\nconst DatepickerField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  dateFormat,\n  autoComplete,\n  placeholder,\n  required,\n  yearPicker,\n  yearsBeforeCurrentDate,\n  yearsAfterCurrentDate,\n  margin,\n}: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = React.useRef<any>(null);\n  const datepickerRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || locked}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                  React.createElement(\n                    DatepickerFieldHeader,\n                    { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n                    null,\n                  )\n              : undefined\n          }\n          customInput={\n            <InputWrapper\n              disabled={disabled}\n              locked={locked}\n              tabIndex={disabled ? -1 : 0}\n              onFocus={(e: any) => {\n                if (!e?.target?.id.includes(id) && !disabled) {\n                  setTabbedHere(true);\n                  inputRef.current.focus();\n                }\n              }}>\n              <div style={{ display: 'block' }}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    readOnly={true}\n                    className={hasError ? 'error' : ''}\n                    tabIndex={0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}\n                    tabbedHere={tabbedHere}\n                    onBlur={() => setTabbedHere(false)}\n                  />\n                  <IconButton tabIndex={-1} action={() => {}} disabled={disabled || locked}>\n                    <Calendar size=\"24\" />\n                  </IconButton>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <Attention size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
+{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","dateFormat","validationMessage","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","DatePickerContainer","styled","div","props","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","neutral_600","scrollBarStyling","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","primary_600","StyledInputFieldStyling","primary_200","primary_300","DatepickerField","inputRef","React","datepickerRef","moment","selectedDate","document","dropdownParent","handleCalendarOpen","setOpenAt","maxDate","minDate","itemsNumber","Math","e","newDate","setYearPickerMode","yearPickerMode","openAt","params","customHeaderCount","setTabbedHere","display","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;;AA0BA;AACA;AACA;;AAmBA;AACA;AACA;AACA,QAAMe,mBAAmB,GAAGC,2BAAOC,GAA6C;AAChF;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACJ,MAAhCI,GAAAA,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,iBAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBD,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BJ,iBAAOK,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCL,iBAAOM,WAAY;AACpD,oBAAoBN,iBAAOK,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAAN,UAAA,GAAA,MAAA,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA,eAAeC,iBAAOO,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,wBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeR,iBAAOO,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport { Calendar, Attention } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button/index';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  > div {\n    display: block;\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      color: ${COLORS.neutral_600};\n      font-weight: 700;\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      font-size: 19px;\n      margin-right: 5px;\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      color: ${COLORS.neutral_600};\n      font-weight: 400;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      font-size: 19px;\n      margin: 0px;\n      width: 48px;\n    }\n\n    .react-datepicker__year-text {\n      color: ${COLORS.neutral_600};\n      background: ${COLORS.white};\n      font-weight: 400;\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      font-size: 19px;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      color: ${COLORS.neutral_600};\n      background: ${COLORS.white};\n      font-weight: 400;\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n      font-size: 19px;\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 4px;\n    top: 4px;\n\n    svg {\n    }\n  }\n\n  &:hover {\n    svg,\n    svg path {\n      fill: ${COLORS.primary_600} !important;\n    }\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    ::placeholder {\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\nconst DatepickerField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  dateFormat,\n  autoComplete,\n  placeholder,\n  required,\n  yearPicker,\n  yearsBeforeCurrentDate,\n  yearsAfterCurrentDate,\n  margin,\n}: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = React.useRef<any>(null);\n  const datepickerRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || locked}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                  React.createElement(\n                    DatepickerFieldHeader,\n                    { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n                    null,\n                  )\n              : undefined\n          }\n          customInput={\n            <InputWrapper\n              disabled={disabled}\n              locked={locked}\n              tabIndex={disabled ? -1 : 0}\n              onFocus={(e: any) => {\n                if (!e?.target?.id.includes(id) && !disabled) {\n                  setTabbedHere(true);\n                  inputRef.current.focus();\n                }\n              }}>\n              <div style={{ display: 'block' }}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    readOnly={true}\n                    className={hasError ? 'error' : ''}\n                    tabIndex={0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}\n                    tabbedHere={tabbedHere}\n                    onBlur={() => setTabbedHere(false)}\n                  />\n                  <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled || locked}>\n                    <Calendar size=\"24\" />\n                  </IconButton>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <Attention size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}

package/dist/umd/InputFields/styling.js

@@ -63,7 +63,13 @@
   width: 100%;
   border-radius: 4px;
   border: 2px solid transparent;
-  box-shadow: ${props => props.withoutBorder ? 'none' : `inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300}`};
+  -webkit-appearance: none;
+  ${props => props.withoutBorder ? `-webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      box-shadow: none;
+      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300};
+      -moz-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300};
+      box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300};`}
   background-color: #fff;
   box-sizing: border-box;
   padding: 0 16px !important;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","BREAKPOINTS","MEDIUM","black","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${props => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\nexport const tabbedHereStyle = css`\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  tabbedHere?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: ${props => (props.withoutBorder ? 'none' : `inset 0px 0px 0px 1px ${COLORS.neutral_300}`)};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.MEDIUM}{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ${COLORS.black} !important;\n\n  ${props => (props.locked ? lockedState : '')}\n  ${props => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${props => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${props => (props.correctInput ? activeCorrectInput : '')}\n  ${props => (props.tabbedHere ? tabbedHereStyle : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    line-height: 14px;\n    font-size: 13px;\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    color: #e76468;\n    font-weight: 700;\n    font-size: 13px;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 5px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n"],"file":"styling.js"}
+{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","BREAKPOINTS","MEDIUM","black","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${props => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\nexport const tabbedHereStyle = css`\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  tabbedHere?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.MEDIUM}{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ${COLORS.black} !important;\n\n  ${props => (props.locked ? lockedState : '')}\n  ${props => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${props => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${props => (props.correctInput ? activeCorrectInput : '')}\n  ${props => (props.tabbedHere ? tabbedHereStyle : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    line-height: 14px;\n    font-size: 13px;\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    color: #e76468;\n    font-weight: 700;\n    font-size: 13px;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 5px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n"],"file":"styling.js"}

package/dist/umd/Modals/Modal.js

@@ -97,6 +97,8 @@
     onClick
   }) => {
     return /*#__PURE__*/React.createElement(StyledButton, {
+      variant: "secondary",
+      shape: "square",
       action: onClick
     }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
       size: "24px",

package/dist/umd/Modals/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","ModalCloseButton","onClick","COLORS","black","children","Modal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA,QAAMA,MAAM,GAAGC,2BAAOC,GAAI;AAC1B;AACA;AACA;AACA;AAJA,CAAA;AAOA,QAAMC,YAAY,GAAGF,gCAAM,kBAANA,CAAmB;AACxC;AADA,CAAA;;AAIO,QAAMG,gBAAkE,WAAlEA,gBAAkE,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAiB;AACjG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,MAAA,MAAM,EAAEA;AAAtB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,MAAA,IAAI,EAAX,MAAA;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC,KAAA,CADF,CADF;AADK,GAAA;;AAYP,QAAME,KAAK,GAAG,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAA5C,QAA4C,CAA5C;;;AAHEA,IAAAA,Q;;;AAKFC,EAAAA,KAAK,CAALA,MAAAA,GAAe,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAA,EAA7CC,QAA6C,CAA7CA;;AAEAA,EAAAA,KAAK,CAALA,IAAAA,GAAa,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,IAAA,EAA3CC,QAA2C,CAA3CA;;AAEAA,EAAAA,KAAK,CAALA,MAAAA,GAAe,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAA,EAA7CC,QAA6C,CAA7CA;;oBAEA,K","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","ModalCloseButton","onClick","COLORS","black","children","Modal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA,QAAMA,MAAM,GAAGC,2BAAOC,GAAI;AAC1B;AACA;AACA;AACA;AAJA,CAAA;AAOA,QAAMC,YAAY,GAAGF,gCAAM,kBAANA,CAAmB;AACxC;AADA,CAAA;;AAIO,QAAMG,gBAAkE,WAAlEA,gBAAkE,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAiB;AACjG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,MAAA,OAAO,EAArB,WAAA;AAAkC,MAAA,KAAK,EAAvC,QAAA;AAAiD,MAAA,MAAM,EAAEA;AAAzD,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,MAAA,IAAI,EAAX,MAAA;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC,KAAA,CADF,CADF;AADK,GAAA;;AAYP,QAAME,KAAK,GAAG,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAA5C,QAA4C,CAA5C;;;AAHEA,IAAAA,Q;;;AAKFC,EAAAA,KAAK,CAALA,MAAAA,GAAe,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAA,EAA7CC,QAA6C,CAA7CA;;AAEAA,EAAAA,KAAK,CAALA,IAAAA,GAAa,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,IAAA,EAA3CC,QAA2C,CAA3CA;;AAEAA,EAAAA,KAAK,CAALA,MAAAA,GAAe,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAA,EAA7CC,QAA6C,CAA7CA;;oBAEA,K","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}

package/dist/umd/Modals/ModalDialog.js

@@ -216,6 +216,8 @@
 
     const ModalCloseButton = onClick => {
       return /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
         action: onClick,
         borderRadius: 48
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
@@ -227,6 +229,8 @@
     const ModalBackButton = () => {
       if (backButton) {
         return /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
           action: () => backButton(),
           borderRadius: 48
         }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {

package/dist/umd/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["StyledModalHeader","styled","props","height","Column","div","ModalFooterButtons","ModalTitleSection","section","action","text","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","tooltip","backButton","closeAction","submitAction","ModalDialog","React","getMinWidth","getMaxWidth","getImageHeight","ModalCloseButton","onClick","COLORS","black","ModalBackButton","setTooltipOpen","neutral_600","tooltipOpen","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalBody, ModalFooter, ModalTitle } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst StyledModalHeader = styled(ModalHeader)<{ size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - 24}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    left: 0;\n  }\n  button:only-of-type {\n    right: 0;\n    left: unset;\n  }\n`;\n\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst ModalFooterButtons = styled.div`\n  button + button {\n    margin-left: 8px;\n  }\n  button + button {\n    margin-left: 8px;\n  }\n`;\n\nconst ModalTitleSection = styled.section`\n  display: flex;\n  div:not(:first-child) {\n    margin-left: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n    top: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    position: unset;\n    margin-top: -12px;\n  }\n  button:only-of-type {\n    position: absolute;\n    right: 0;\n    left: unset;\n    margin-right: 0;\n  }\n`;\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <IconButton action={onClick} borderRadius={48}>\n        <Close size=\"24px\" color={COLORS.black} />\n      </IconButton>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <IconButton action={() => backButton()} borderRadius={48}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\">\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader height={getImageHeight()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && <ModalTitle>{title}</ModalTitle>}\n            {tooltip && (\n              <div>\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody>{body}</ModalBody>\n\n          <ModalFooter>\n            <ModalFooterButtons>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["StyledModalHeader","styled","props","height","Column","div","ModalFooterButtons","ModalTitleSection","section","action","text","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","tooltip","backButton","closeAction","submitAction","ModalDialog","React","getMinWidth","getMaxWidth","getImageHeight","ModalCloseButton","onClick","COLORS","black","ModalBackButton","setTooltipOpen","neutral_600","tooltipOpen","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalBody, ModalFooter, ModalTitle } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst StyledModalHeader = styled(ModalHeader)<{ size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - 24}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    left: 0;\n  }\n  button:only-of-type {\n    right: 0;\n    left: unset;\n  }\n`;\n\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst ModalFooterButtons = styled.div`\n  button + button {\n    margin-left: 8px;\n  }\n  button + button {\n    margin-left: 8px;\n  }\n`;\n\nconst ModalTitleSection = styled.section`\n  display: flex;\n  div:not(:first-child) {\n    margin-left: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n    top: 12px;\n  }\n  button {\n    position: absolute;\n    right: 0;\n  }\n  button:first-of-type {\n    position: unset;\n    margin-top: -12px;\n  }\n  button:only-of-type {\n    position: absolute;\n    right: 0;\n    left: unset;\n    margin-right: 0;\n  }\n`;\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={onClick} borderRadius={48}>\n        <Close size=\"24px\" color={COLORS.black} />\n      </IconButton>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\">\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader height={getImageHeight()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && <ModalTitle>{title}</ModalTitle>}\n            {tooltip && (\n              <div>\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody>{body}</ModalBody>\n\n          <ModalFooter>\n            <ModalFooterButtons>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/umd/Switcher/MobileSwitcherMenu.js

@@ -174,12 +174,16 @@
       role: "menu",
       "aria-labelledby": "UserMenuButton"
     }, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
       action: clickMenuAction,
       isInMobileMenu: true
     }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
       size: "24px",
       color: _styles.COLORS.neutral_600
     })), /*#__PURE__*/React.createElement("h3", null, header), /*#__PURE__*/React.createElement(_CommonStyles.Right, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
       action: clickMenuAction,
       isInMobileMenu: true
     }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {

package/dist/umd/Switcher/MobileSwitcherMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","header","elementsHeader","clickMenuAction","elements","MobileSwitcherMenu","React","e","document","element","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, scrollBarStyling } from '../styles';\n\nimport { UserMenuItem } from '../types';\nimport { IconButton } from '../Button';\nimport { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';\nimport { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    font-weight: normal;\n    font-size: 16px;\n    color: inherit;\n    margin-left: 24px;\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
+{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","header","elementsHeader","clickMenuAction","elements","MobileSwitcherMenu","React","e","document","element","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA,uBAAuBC,sBAAS;AAChC,eAAeA,sBAAS;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,wBAAiB;AAxBrB,CAAA;AA2BA,QAAMC,WAAW,GAAGR,2BAAOS,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,eAAe,GAAGV,2BAAOC,EAAG;AAClC;AACA;AACA;AACA;AACA;AACA,IAAIU,wCAA2B;AAN/B,CAAA;AASA,QAAMC,GAAG,GAAGZ,2BAAOa,GAAI;AACvB;AACA;AACA;AACA;AACA,WAAWX,eAAOY,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhBA,CAAA;AAmBA,QAAMC,SAAS,GAAGf,2BAAOgB,IAAK;AAC9B;AACA,sBAAsBd,eAAOe,UAAW;AACxC;AACA;AACA;AALA,CAAA;;AAeA,QAAMK,kBAAkB,GAAG,CAAC;AAAA,IAAA,MAAA;AAAA,IAAA,cAAA;AAAA,IAAA,eAAA;AAA2CD,IAAAA;AAA3C,GAAD,KAAkE;AAC3FE,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,UAAAA,eAAe;AAChB;AACF;;AAEDK,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AADF,OAAA;AARFF,KAAAA,EAWG,CAXHA,eAWG,CAXHA;AAaA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,OAAO,EAAE,MAAM,CAArB,CAAA;AAAyB,MAAA,IAAI,EAA7B,MAAA;AAAqC,yBAAgB;AAArD,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAnB,MAAA;AAA2B,MAAA,KAAK,EAAErB,eAAOY;AAAzC,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAJF,MAIE,CAJF,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,MAAA,IAAI,EAAC;AAAZ,KAAA,CADF,CADF,CALF,CADF,EAYGO,QAAQ,IAAIA,QAAQ,EAARA,MAAAA,GAAZA,CAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EADF,cACE,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EACG,QAAQ,EAAR,GAAA,CAAeK,OAAD,IAAA,aACb,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAkB,MAAA,GAAG,EAAEA,OAAO,EAA9B,EAAA;AAAoC,MAAA,KAAK,EAAEA,OAAO,EAAlD,KAAA;AAA2D,MAAA,IAAI,EAAEA,OAAO,CAACC;AAAzE,KAAA,CADD,CADH,CAFF,CAbJ,CADF;AAdF,GAAA;;;AANET,IAAAA,M;AACAC,IAAAA,c;AACAC,IAAAA,e;AACAC,IAAAA,Q;;oBA4CF,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, scrollBarStyling } from '../styles';\n\nimport { UserMenuItem } from '../types';\nimport { IconButton } from '../Button';\nimport { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';\nimport { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    font-weight: normal;\n    font-size: 16px;\n    color: inherit;\n    margin-left: 24px;\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}

package/dist/umd/Table/Table.js

@@ -396,6 +396,8 @@
           color: column.colorFn(row, column.key)
         }
       }, row[column.key]) : column.isIcon && column.icon ? /*#__PURE__*/React.createElement(_index3.IconButton, {
+        variant: "secondary",
+        shape: "circular",
         useTransparentBackground: true,
         action: event => onIconClick(row, column.key, event)
       }, _index.SystemIcons[column.icon]({
@@ -432,12 +434,16 @@
       }, total === 0 ? 0 : from, "-", to, " of ", total), /*#__PURE__*/React.createElement("div", {
         className: "controls"
       }, /*#__PURE__*/React.createElement(_index3.IconButton, {
+        variant: "secondary",
+        shape: "circular",
         action: () => previousPage(),
         disabled: from === 1
       }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, {
         size: "24",
         color: _styles.COLORS.neutral_600
       })), /*#__PURE__*/React.createElement(_index3.IconButton, {
+        variant: "secondary",
+        shape: "circular",
         action: () => nextPage(),
         disabled: to === total
       }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {

package/dist/umd/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","showLoadingIndicator","React","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","row","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remotePagination","triggerSortingChange","previousPage","previousPageClick","nextPage","nextPageClick","filteredRows","changeRowsPerPage","value","rowsPerPageChange","parseInt","renderHeader","title","length","COLORS","neutral_600","width","justify","onLinkClick","event","linkClick","onIconClick","iconClick","onRowClick","selectedText","window","rowClick","renderBody","currentPageRows","index","key","color","maxWidth","size","className","renderFooter","rowsPerPageValues","rowsPerPage","total","from","to"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remotePagination) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remotePagination) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remotePagination, pagination, rows]);\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    // Let's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(value));\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size=\"small\"\n                      variant=\"text\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size=\"medium\" color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}
+{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","showLoadingIndicator","React","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","row","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remotePagination","triggerSortingChange","previousPage","previousPageClick","nextPage","nextPageClick","filteredRows","changeRowsPerPage","value","rowsPerPageChange","parseInt","renderHeader","title","length","COLORS","neutral_600","width","justify","onLinkClick","event","linkClick","onIconClick","iconClick","onRowClick","selectedText","window","rowClick","renderBody","currentPageRows","index","key","color","maxWidth","size","className","renderFooter","rowsPerPageValues","rowsPerPage","total","from","to"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remotePagination) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remotePagination) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remotePagination, pagination, rows]);\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    // Let's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(value));\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size=\"small\"\n                      variant=\"text\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size=\"medium\" color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}

package/dist/umd/Tabs/Tabs.js

@@ -153,15 +153,15 @@
 
   a > div:last-of-type {
     font-size: 12px;
-    margin: 0 0 8px 20px;
+    margin: 0 0 8px 16px;
   }
   a > div:first-child {
     font-size: ${props => getFontSize(props.size)};
-    margin: ${props => getTopMargin(props.size)} 0 ${props => getBottomMargin(props.size)} 20px;
+    margin: ${props => getTopMargin(props.size)} 0 ${props => getBottomMargin(props.size)} 16px;
   }
   a > div:only-of-type {
     font-size: ${props => getFontSize(props.size)};
-    margin: auto 0 auto 20px;
+    margin: auto 0 auto 16px;
   }
 
   @media print {

package/dist/umd/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["children","size","getHeight","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,QAAME,SAAS,GAAID,IAAD,IAAkB;AAClC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,MAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAME,WAAW,GAAIF,IAAD,IAAkB;AACpC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,MAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAMG,YAAY,GAAIH,IAAD,IAAkB;AACrC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,KAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAMI,eAAe,GAAIJ,IAAD,IAAkB;AACxC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,KAAA;;AACF,WAAA,QAAA;AACE,eAAA,KAAA;;AACF,WAAA,OAAA;AACE,eAAA,KAAA;;AACF;AACE,eAAA,KAAA;AARJ;AADF,GAAA;;AAaA,QAAMK,GAAG,GAAGC,2BAAOC,GAAe;AAClC;AACA;AACA;AACA;AACA,cAAeC,KAAD,IAAWP,SAAS,CAACO,KAAK,CAAN,IAAA,CAAa;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAkBA,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAa;AACpD,cAAeA,KAAD,IAAWL,YAAY,CAACK,KAAK,CAAN,IAAA,CAAa,MAAMA,KAAD,IAAWJ,eAAe,CAACI,KAAK,CAAN,IAAA,CAAa;AAC9F;AACA;AACA,iBAAkBA,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAa;AACpD;AACA;AACA;AACA;AACA;AACA;AAvBA,CAAA;;AA0BA,QAAMC,IAAwC,GAAG,CAAC;AAAA,IAAA,QAAA;AAAYT,IAAAA;AAAZ,GAAD,KAAA,aAC/C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAK,IAAA,IAAI,EAAT,SAAA;AAAoB,IAAA,IAAI,EAAEA;AAA1B,GAAA,EADF,QACE,CADF;;;AAlFED,IAAAA,Q;AACAC,IAAAA,I;;oBAuFF,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\ntype TabsProps = {\n  children?: any;\n  size: string;\n};\n\nconst getHeight = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '48px';\n    case 'medium':\n      return '56px';\n    case 'large':\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '16px';\n    case 'medium':\n      return '18px';\n    case 'large':\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '6px';\n    case 'medium':\n      return '10px';\n    case 'large':\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '2px';\n    case 'medium':\n      return '3px';\n    case 'large':\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 20px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 20px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 20px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["children","size","getHeight","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,QAAME,SAAS,GAAID,IAAD,IAAkB;AAClC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,MAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAME,WAAW,GAAIF,IAAD,IAAkB;AACpC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,MAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAMG,YAAY,GAAIH,IAAD,IAAkB;AACrC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,KAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAMI,eAAe,GAAIJ,IAAD,IAAkB;AACxC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,KAAA;;AACF,WAAA,QAAA;AACE,eAAA,KAAA;;AACF,WAAA,OAAA;AACE,eAAA,KAAA;;AACF;AACE,eAAA,KAAA;AARJ;AADF,GAAA;;AAaA,QAAMK,GAAG,GAAGC,2BAAOC,GAAe;AAClC;AACA;AACA;AACA;AACA,cAAeC,KAAD,IAAWP,SAAS,CAACO,KAAK,CAAN,IAAA,CAAa;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAkBA,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAa;AACpD,cAAeA,KAAD,IAAWL,YAAY,CAACK,KAAK,CAAN,IAAA,CAAa,MAAMA,KAAD,IAAWJ,eAAe,CAACI,KAAK,CAAN,IAAA,CAAa;AAC9F;AACA;AACA,iBAAkBA,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAa;AACpD;AACA;AACA;AACA;AACA;AACA;AAvBA,CAAA;;AA0BA,QAAMC,IAAwC,GAAG,CAAC;AAAA,IAAA,QAAA;AAAYT,IAAAA;AAAZ,GAAD,KAAA,aAC/C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAK,IAAA,IAAI,EAAT,SAAA;AAAoB,IAAA,IAAI,EAAEA;AAA1B,GAAA,EADF,QACE,CADF;;;AAlFED,IAAAA,Q;AACAC,IAAAA,I;;oBAuFF,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\ntype TabsProps = {\n  children?: any;\n  size: string;\n};\n\nconst getHeight = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '48px';\n    case 'medium':\n      return '56px';\n    case 'large':\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '16px';\n    case 'medium':\n      return '18px';\n    case 'large':\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '6px';\n    case 'medium':\n      return '10px';\n    case 'large':\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '2px';\n    case 'medium':\n      return '3px';\n    case 'large':\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}

package/dist/umd/Toasters/Toast.js

@@ -286,6 +286,14 @@
   width: 240px;
   display: flex;
   padding: 16px 0;
+  
+  a {
+    display: contents;
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
 `;
   const IconContainer = _styledComponents2.default.span`
   margin-right: -8px;
@@ -389,9 +397,13 @@
     }, action.label))), opts.showCloseButton && /*#__PURE__*/React.createElement(CloseButton, {
       className: `close-button ${theme}`
     }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      useTransparentBackground: true,
       action: event => setShouldRemove(true)
     }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
-      size: "24px"
+      size: "24px",
+      color: _styles.COLORS.neutral_600
     }))), !!opts.autoClose && /*#__PURE__*/React.createElement(Loader, {
       className: `loader ${theme}`,
       duration: opts.delay ?? 0