@laerdal/life-react-components 1.0.1-dev.30.full → 1.0.1-dev.35.full

package/dist/js/Dropdown/DropdownContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","Size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_300","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","selectedValues","setSelectedValues","messageOnNoResults","React","useState","focused","setFocused","isUp","setIsUp","dropdownContentRef","useRef","itemsListRef","useEffect","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","suggestion","multiSelect","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","join","action","actionLabel"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: 1;\n  margin-top: ${props => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0;\n\n  min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_300};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n  padding: 4px;\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;\n  padding-left: 4px;\n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  isButton: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  setIsOpen,\n  filter,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults,\n}) => {\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n  \n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) ||x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [arrLength, selectedValues]);\n\n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getFilteredItems().filter(x => x.suggestion);\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={selectedValues?.includes(item.value) ? 'active' : ''}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <div>\n        <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>\n      </div>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","width","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","Size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_600","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","React","useState","isUp","setIsUp","dropdownContentRef","useRef","Small","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","haveTopItem","multiSelect","getSuggestions","suggestion","useLayoutEffect","focusThis","console","log","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","showDividerAbove","join","action","actionLabel"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  \n  width: ${props => props.width ? props.width : '100%'};\n  z-index: 1;\n  margin: ${props => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;  \n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n  focused: number | null;\n  setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  width,\n  setIsOpen,\n  filter,\n  focused, \n  setFocused,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults\n}) => {\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if(!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if(!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [isOpen, arrLength, selectedValues]);\n    \n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n\n  const haveTopItem = () => {\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n    else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\n    return false;\n  };\n  \n  const getSuggestions = () => {\n    return getFilteredItems().filter(x => x.suggestion);\n  }\n\n  React.useLayoutEffect(() => {\n    if (isOpen && (focused || focused == 0)) {\n      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n      if(focusThis != focused)\n        setFocused(focusThis);\n      const newFocusedElement = elRefs[focusThis];\n      console.log(newFocusedElement);\n      newFocusedElement?.current?.focus();\n    }\n  }, [isOpen]);\n\n  \n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getSuggestions();\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      {item.showDividerAbove && <div className=\"divider\"/>}\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          width={width}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}

package/dist/js/Dropdown/DropdownFilter.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
 
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
@@ -23,11 +21,9 @@ var _CommonStyling = require("./CommonStyling");
 
 var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
 
-var _styling = require("../InputFields/styling");
-
-var _typography = require("../styles/typography");
+var _types = require("../types");
 
-var _templateObject;
+var _styling = require("../InputFields/styling");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -47,10 +43,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var InputField = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ", "\n\n    ", " {\n      ", "\n    }\n    &.small {\n      ", "\n    }\n    &.medium {\n      ", "\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.black, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
-
 var DropdownFilter = function DropdownFilter(_ref) {
   var id = _ref.id,
       list = _ref.list,
@@ -103,6 +95,11 @@ var DropdownFilter = function DropdownFilter(_ref) {
       selectedValues = _React$useState12[0],
       setSelectedValues = _React$useState12[1];
 
+  var _React$useState13 = React.useState(null),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      focused = _React$useState14[0],
+      setFocused = _React$useState14[1];
+
   var styledFieldRef = React.useRef(null);
   var inputRef = React.useRef(null);
 
@@ -174,7 +171,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
       showValidationMessage: !!activeValidationMessage,
       fontSize: buttonFontSize,
       "data-testid": "otherdiv_".concat(id)
-    }, /*#__PURE__*/React.createElement(InputField, {
+    }, /*#__PURE__*/React.createElement(_CommonStyling.InputField, {
       ref: inputRef,
       autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
       type: "search",
@@ -275,11 +272,13 @@ var DropdownFilter = function DropdownFilter(_ref) {
     selectedValues: selectedValues,
     setSelectedValues: setSelectedValues,
     hideOnClickOutside: true,
+    size: size == 'medium' ? _types.Size.Medium : _types.Size.Small,
+    focused: focused,
+    setFocused: setFocused,
     customizationProps: {
       itemsType: 'normal',
       multiSelect: false,
       action: function action() {},
-      isButton: isButton !== null && isButton !== void 0 ? isButton : false,
       onValueUpdate: function onValueUpdate(values) {
         var _values$;
 

package/dist/js/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["InputField","styled","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","BREAKPOINTS","MEDIUM","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","toLowerCase","length","useEffect","includes","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","x","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.includes(input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.includes(input))\n      setSelectedValues([]);\n\n    if(list.includes(input))\n    {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          customizationProps={{\n            itemsType: 'normal',\n            multiSelect: false,\n            action: () => {},\n            isButton: isButton ?? false,\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x }))\n          }}\n          filter={!restartFilter ? input : ''}\n          setIsOpen={setIsOpen}\n          alignLeft={false}\n          isButton={isButton || false}\n          id={`${id}_dropdowncontent`} />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","toLowerCase","length","useEffect","includes","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","COLORS","neutral_600","renderButtonDropdown","Size","Medium","Small","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","x","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.includes(input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.includes(input))\n      setSelectedValues([]);\n\n    if(list.includes(input))\n    {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          size={size == 'medium' ? Size.Medium : Size.Small}\n          focused={focused}\n          setFocused={setFocused}\n          customizationProps={{\n            itemsType: 'normal',\n            multiSelect: false,\n            action: () => {},\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x }))\n          }}\n          filter={!restartFilter ? input : ''}\n          setIsOpen={setIsOpen}\n          alignLeft={false}\n          isButton={isButton || false}\n          id={`${id}_dropdowncontent`} />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/dist/js/Footer/Components/FooterTop.js

@@ -60,7 +60,6 @@ var FooterTop = function FooterTop(_ref) {
     name: sitename || '',
     showBetaTag: showBetaTag,
     color: _styles.COLORS.white,
-    noSizeChangeOnMobile: true,
     betaTagBackgroundColor: _styles.COLORS.white,
     betaTagColor: _styles.COLORS.neutral_800
   }), /*#__PURE__*/React.createElement(ToTop, {

package/dist/js/Footer/Components/FooterTop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["FooterTopSection","styled","section","ToTop","div","ComponentTextStyle","UppercaseBold","COLORS","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,0BAAOC,OAAV,8KAAtB;;AAQA,IAAMC,KAAK,GAAGF,0BAAOG,GAAV,6yBAkBL,oCAAmBC,+BAAmBC,aAAtC,EAAqD,SAArD,CAlBK,EAsBaC,eAAOC,UAtBpB,EAyBGD,eAAOE,WAzBV,EA4BIF,eAAOE,WA5BX,EAkCmBF,eAAOG,WAlC1B,EAsCOH,eAAOI,WAtCd,EA0CGJ,eAAOK,WA1CV,EA6CIL,eAAOK,WA7CX,CAAX;;AAwDA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA0D;AAAA,MAAvDC,QAAuD,QAAvDA,QAAuD;AAAA,MAA7CC,WAA6C,QAA7CA,WAA6C;AAAA,MAAhCC,SAAgC,QAAhCA,SAAgC;;AAC1E,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB,mCAAgB,CAAhB;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,aAAD;AACE,IAAA,IAAI,EAAER,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAER,eAAOgB,KAHhB;AAIE,IAAA,oBAAoB,EAAE,IAJxB;AAKE,IAAA,sBAAsB,EAAEhB,eAAOgB,KALjC;AAME,IAAA,YAAY,EAAEhB,eAAOiB;AANvB,IADF,eASE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAE,mBAACN,CAAD;AAAA,aAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA7C;AAAA,KAA/B;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAEf,eAAOgB;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CATF,CADF;AAgBD,CA5BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;eAiCaH,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ${COLORS.primary_20};\n    svg path,\n    svg {\n      fill: ${COLORS.primary_700};\n    }\n    span {\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    outline: none;\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n\n  &:active:not(:disabled) {\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    svg path,\n    svg {\n      fill: ${COLORS.primary_800};\n    }\n    span {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterTopProps {\n  sitename?: string;\n  showBetaTag?: boolean;\n  toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n  const action = () => {\n    animateScrollTo(0);\n  };\n  return (\n    <FooterTopSection>\n      <Logo\n        name={sitename || ''}\n        showBetaTag={showBetaTag}\n        color={COLORS.white}\n        noSizeChangeOnMobile={true}\n        betaTagBackgroundColor={COLORS.white}\n        betaTagColor={COLORS.neutral_800}\n      />\n      <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n        <ArrowLineUp size=\"24px\" color={COLORS.white} />\n        <span>{toTopText}</span>\n      </ToTop>\n    </FooterTopSection>\n  );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["FooterTopSection","styled","section","ToTop","div","ComponentTextStyle","UppercaseBold","COLORS","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,0BAAOC,OAAV,8KAAtB;;AAQA,IAAMC,KAAK,GAAGF,0BAAOG,GAAV,6yBAkBL,oCAAmBC,+BAAmBC,aAAtC,EAAqD,SAArD,CAlBK,EAsBaC,eAAOC,UAtBpB,EAyBGD,eAAOE,WAzBV,EA4BIF,eAAOE,WA5BX,EAkCmBF,eAAOG,WAlC1B,EAsCOH,eAAOI,WAtCd,EA0CGJ,eAAOK,WA1CV,EA6CIL,eAAOK,WA7CX,CAAX;;AAwDA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA0D;AAAA,MAAvDC,QAAuD,QAAvDA,QAAuD;AAAA,MAA7CC,WAA6C,QAA7CA,WAA6C;AAAA,MAAhCC,SAAgC,QAAhCA,SAAgC;;AAC1E,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB,mCAAgB,CAAhB;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,aAAD;AACE,IAAA,IAAI,EAAER,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAER,eAAOgB,KAHhB;AAIE,IAAA,sBAAsB,EAAEhB,eAAOgB,KAJjC;AAKE,IAAA,YAAY,EAAEhB,eAAOiB;AALvB,IADF,eAQE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAE,mBAACN,CAAD;AAAA,aAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA7C;AAAA,KAA/B;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAEf,eAAOgB;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CARF,CADF;AAeD,CA3BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;eAgCaH,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ${COLORS.primary_20};\n    svg path,\n    svg {\n      fill: ${COLORS.primary_700};\n    }\n    span {\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    outline: none;\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n\n  &:active:not(:disabled) {\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    svg path,\n    svg {\n      fill: ${COLORS.primary_800};\n    }\n    span {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterTopProps {\n  sitename?: string;\n  showBetaTag?: boolean;\n  toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n  const action = () => {\n    animateScrollTo(0);\n  };\n  return (\n    <FooterTopSection>\n      <Logo\n        name={sitename || ''}\n        showBetaTag={showBetaTag}\n        color={COLORS.white}\n        betaTagBackgroundColor={COLORS.white}\n        betaTagColor={COLORS.neutral_800}\n      />\n      <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n        <ArrowLineUp size=\"24px\" color={COLORS.white} />\n        <span>{toTopText}</span>\n      </ToTop>\n    </FooterTopSection>\n  );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}

package/dist/js/GlobalNavigationBar/Logo.js

@@ -37,7 +37,7 @@ var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateO
 
 var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 
-var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 12px;\n  padding-left: 12px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n  \n  font-weight: 300 !important;\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
   return props.color || _styles.COLORS.black;
 }, function (props) {
   return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
@@ -45,7 +45,7 @@ var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3
   return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
 });
 
-var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
+var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
   return props.backgroundColor || _styles.COLORS.accent2_500;
 }, function (props) {
   return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white);

package/dist/js/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,4PAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAAjC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,oBAAN,GACH,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CADG,GAEH,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAArE,CAFR;AAAA,CANM,EAYNR,oBAAYC,MAZN,EAaJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CAAX;AAAA,CAbI,CAAV;;AAiBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,sNACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,KAAN,IAAeQ,eAAOS,KAA3E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHtB,KAAkH,QAAlHA,KAAkH;AAAA,MAA3GU,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFa,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACG,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,EAAErB;AART,KASGA,KAAK,KAAKQ,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjB,KAAb;AAAoB,IAAA,oBAAoB,EAAEU,oBAAoB,IAAI;AAAlE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAtB,EAAAA,K;AACAU,EAAAA,oB;AACAa,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaN,I","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 12px;\n  padding-left: 12px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,8UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAAjC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,oBAAN,GACH,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CADG,GAEH,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAArE,CAFR;AAAA,CANM,EAaNR,oBAAYC,MAbN,EAgBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CAAX;AAAA,CAhBI,CAAV;;AAoBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,KAAN,IAAeQ,eAAOS,KAA3E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHtB,KAAkH,QAAlHA,KAAkH;AAAA,MAA3GU,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFa,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACG,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,EAAErB;AART,KASGA,KAAK,KAAKQ,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjB,KAAb;AAAoB,IAAA,oBAAoB,EAAEU,oBAAoB,IAAI;AAAlE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAtB,EAAAA,K;AACAU,EAAAA,oB;AACAa,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaN,I","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/js/HyperLink/styling.js

@@ -13,8 +13,8 @@ var _templateObject, _templateObject2;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.primary_500, _.COLORS.accent1_500, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
+var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.primary_500, _.COLORS.accent1_500, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
 exports.defaultStyle = defaultStyle;
-var invertedStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.white, _.COLORS.neutral_100, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.neutral_800);
+var invertedStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.white, _.COLORS.neutral_100, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.neutral_800);
 exports.invertedStyle = invertedStyle;
 //# sourceMappingURL=styling.js.map

package/dist/js/HyperLink/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,oqBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EAyBPH,SAAOI,WAzBA,EA0BZJ,SAAOK,KA1BK,EA+BPL,SAAOI,WA/BA,EAgCZJ,SAAOK,KAhCK,EAqCZL,SAAOK,KArCK,CAAlB;;AA0CA,IAAMC,aAAa,OAAGP,qBAAH,yvBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAqBRP,SAAOK,KArBC,EAsBbL,SAAOQ,WAtBM,EAiCRR,SAAOK,KAjCC,EAkCbL,SAAOQ,WAlCM,EAwCbR,SAAOQ,WAxCM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}
+{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,yyBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,2yBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}

package/dist/umd/Button/Button.js

@@ -244,9 +244,7 @@
       opacity: 0;
     }
     .icon {
-      margin-left: -4px;
-      margin-top: -2px;
-      margin-bottom: -2px;
+      margin: ${props => props.size === _types.Size.Medium ? '-2px -8px' : props.size === _types.Size.Small ? '-2px -4px' : '-2px -8px'};
       width: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
       height: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
       svg {
@@ -256,7 +254,7 @@
     }
 
     .extramargin {
-      margin-right: 9px;
+      margin-right: 4px;
     }
 
     div {
@@ -315,6 +313,13 @@
       fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary};
     }
   }
+
+  &:focus:not(:focus-visible),
+  &:focus:not(:focus-visible) > div.button-content {
+    outline: none !important;
+    background-color: white;
+  }
+
   &:hover > div.button-content,
   &.hover-state > div.button-content {
     color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700};
@@ -356,6 +361,7 @@
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
   &.focus-state {
     ${props => tabbedHereStyle('secondary', props?.colorTheme)};
+
   }
 `;
   const Tertiary = (0, _styledComponents2.default)(Primary)`
@@ -531,7 +537,7 @@
 
   const Button = _ref => {
     let {
-      children = 'Primary Button',
+      children = '',
       variant = 'primary',
       type = 'button',
       size = _types.Size.Medium,
@@ -556,7 +562,7 @@
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
       className: (imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')
-    }, icon), /*#__PURE__*/React.createElement("span", {
+    }, icon), children && /*#__PURE__*/React.createElement("span", {
       className: loading ? 'label loading' : 'label'
     }, children), loading && /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, null)); // Let's render button