@laerdal/life-react-components 1.7.0 → 1.8.0

package/dist/Dropdown/DropdownFilter.js

@@ -8,7 +8,9 @@ import { StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './Comm
 import DropdownContent from './DropdownContent';
 import { Size } from '../types';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
-import { defaultOnMouseDownHandler, useFocusVisibleRef } from '../common';
+import { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -71,11 +73,33 @@ var DropdownFilter = function DropdownFilter(_ref) {
       focused = _React$useState14[0],
       setFocused = _React$useState14[1];
 
-  var inputRef = React.useRef(null);
-  var styledFieldRef = useFocusVisibleRef([inputRef]);
+  var _React$useState15 = React.useState(false),
+      _React$useState16 = _slicedToArray(_React$useState15, 2),
+      keyboardNavigate = _React$useState16[0],
+      setKeyboardNavigate = _React$useState16[1];
 
-  var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter' && !locked) {
+  var styledFieldRef = useFocusVisibleRef();
+  var inputRef = useFocusVisibleRef([styledFieldRef]);
+  var clearButtonRef = React.useRef(null);
+  useActionWithin(styledFieldRef, input && !locked && !disabled ? [clearButtonRef] : []);
+  var containerRef = useClickOutsideRef(function () {
+    return setIsOpen(false);
+  }, [], useFocusOutsideRef(function () {
+    return setIsOpen(false);
+  }));
+
+  var handleInputKeyDown = function handleInputKeyDown(e) {
+    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {
+      e.preventDefault();
+
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+  };
+
+  var handleButtonKeyPress = function handleButtonKeyPress(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
       var matches = list === null || list === void 0 ? void 0 : list.filter(function (c) {
         return c.label.toLowerCase() === input.toLowerCase();
       });
@@ -85,8 +109,8 @@ var DropdownFilter = function DropdownFilter(_ref) {
         setInput(matches[0].label);
       }
 
-      if (!isOpen) setFocused(0);
       setIsOpen(!isOpen);
+      setKeyboardNavigate(true);
 
       if (matches.length === 0) {
         setInput('');
@@ -121,41 +145,46 @@ var DropdownFilter = function DropdownFilter(_ref) {
       onSelect && onSelect(input);
     }
   }, [input]);
+  React.useEffect(function () {
+    !isOpen && setKeyboardNavigate(false);
+  }, [isOpen]);
+
+  var handleInputClear = function handleInputClear(e) {
+    var _inputRef$current;
+
+    setInput('');
+    setSelectedValues([]);
+    onSelect && onSelect('');
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    });
+  };
 
   var renderStandardDropdown = function renderStandardDropdown() {
     return /*#__PURE__*/_jsxs(StyledField, {
       ref: styledFieldRef,
-      className: (isOpen ? 'expanded ' : '').concat(size ? size : ''),
+      className: size ? size : '',
       onClick: function onClick(e) {
         if (!locked && !disabled) {
           e.stopPropagation();
           setIsOpen(!isOpen);
 
           if (isOpen) {
-            var _inputRef$current;
+            var _inputRef$current2;
 
-            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+            (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
           } else {
-            var _inputRef$current2;
+            var _inputRef$current3;
 
-            (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+            (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
           }
         }
       },
-      tabIndex: disabled || locked ? -1 : 0,
       disabled: disabled || false,
       locked: locked || false,
       isPlaceholder: !input,
       fontSize: buttonFontSize,
       showValidationMessage: !!activeValidationMessage,
-      onKeyPress: function onKeyPress(e) {
-        if (e.key === 'Enter') {
-          var _inputRef$current3;
-
-          setIsOpen(true);
-          (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-        }
-      },
       onMouseDown: defaultOnMouseDownHandler,
       "data-testid": "otherdiv_".concat(id),
       children: [/*#__PURE__*/_jsx(InputField, {
@@ -163,8 +192,8 @@ var DropdownFilter = function DropdownFilter(_ref) {
         autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
         type: "search",
         placeholder: placeholderSearch,
+        onKeyDown: handleInputKeyDown,
         value: input,
-        className: size ? "".concat(size, " value") : 'value',
         onChange: function onChange(e) {
           if (!locked && !disabled) {
             setRestartFilter(false);
@@ -184,8 +213,18 @@ var DropdownFilter = function DropdownFilter(_ref) {
           return setPlaceholderSearch(placeholder || '');
         },
         required: required,
-        tabIndex: -1,
+        tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false
+      }), input && !locked && !disabled && /*#__PURE__*/_jsx(IconButton, {
+        action: handleInputClear,
+        ref: clearButtonRef,
+        useTransparentBackground: true,
+        shape: 'circular',
+        style: {
+          marginLeft: '-4px'
+        },
+        variant: 'secondary',
+        children: /*#__PURE__*/_jsx(SystemIcons.Clear, {})
       }), isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
         size: Size.Small,
         color: COLORS.neutral_600
@@ -206,7 +245,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
     return /*#__PURE__*/_jsx(ButtonDropdownWrapper, {
       onClick: function onClick(e) {
         e.stopPropagation();
-        setIsOpen(!isOpen);
+        !locked && !disabled && setIsOpen(!isOpen);
       },
       disabled: disabled,
       locked: locked,
@@ -214,7 +253,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
         ref: styledFieldRef,
         className: (isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : ''),
         tabIndex: disabled || locked ? -1 : 0,
-        onKeyPress: handleKeyPress,
+        onKeyPress: handleButtonKeyPress,
         onMouseDown: defaultOnMouseDownHandler,
         disabled: disabled || false,
         locked: locked || false,
@@ -242,6 +281,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
 
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Dropdown, {
+      ref: containerRef,
       isButton: isButton || false,
       disabled: disabled,
       locked: locked,
@@ -252,10 +292,10 @@ var DropdownFilter = function DropdownFilter(_ref) {
         messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
         selectedValues: selectedValues,
         setSelectedValues: setSelectedValues,
-        hideOnClickOutside: true,
         size: size !== null && size !== void 0 ? size : Size.Small,
         focused: focused,
         setFocused: setFocused,
+        outline: keyboardNavigate && isButton,
         customizationProps: {
           itemsType: 'normal',
           scrollable: scrollable,

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","defaultOnMouseDownHandler","useFocusVisibleRef","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","inputRef","useRef","styledFieldRef","handleKeyPress","e","key","matches","filter","c","label","toLowerCase","length","useEffect","some","x","renderStandardDropdown","concat","stopPropagation","current","blur","focus","Math","floor","random","target","value","Small","neutral_600","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, ButtonDropdownWrapper, InputField} from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {defaultOnMouseDownHandler, useFocusVisibleRef} from '../common';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\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?: Size.Small | Size.Medium;\n  scrollable?: boolean;\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                          scrollable,\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 inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n  const handleKeyPress = (e: React.KeyboardEvent<any>) => {\n    if (e.key === 'Enter' && !locked) {\n      const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n      if (matches.length === 1 && onSelect) {\n        onSelect(matches[0].label);\n        setInput(matches[0].label);\n      }\n      if (!isOpen)\n        setFocused(0);\n      setIsOpen(!isOpen);\n      if (matches.length === 0) {\n        setInput('');\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.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if (list.some(x => x.label == input)) {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          if (!locked && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onKeyPress={e => {\n          if (e.key === 'Enter') {\n            setIsOpen(true);\n            inputRef.current?.focus();\n          }\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\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          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={-1}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <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      }}\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        onKeyPress={handleKeyPress}\n        onMouseDown={defaultOnMouseDownHandler}\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={Size.Small} color={COLORS.neutral_600}/> : null}\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <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 : ''}\n                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 ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\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.label, customContent: x.customContent}))\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":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigate","setKeyboardNavigate","styledFieldRef","inputRef","clearButtonRef","useRef","containerRef","handleInputKeyDown","e","key","preventDefault","handleButtonKeyPress","matches","filter","c","label","toLowerCase","length","useEffect","some","x","handleInputClear","current","focus","focusVisible","detail","renderStandardDropdown","stopPropagation","blur","Math","floor","random","target","value","marginLeft","Small","neutral_600","renderButtonDropdown","concat","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, ButtonDropdownWrapper, InputField} from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {\n  defaultOnMouseDownHandler,\n  useActionWithin,\n  useClickOutsideRef,\n  useFocusOutsideRef,\n  useFocusVisibleRef\n} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\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?: Size.Small | Size.Medium;\n  scrollable?: boolean;\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                          scrollable,\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  const [keyboardNavigate, setKeyboardNavigate] = React.useState<boolean>(false);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !locked && !disabled ? [clearButtonRef] : []);\n\n  const containerRef = useClickOutsideRef(() => setIsOpen(false), [], useFocusOutsideRef(() => setIsOpen(false)));\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  const handleButtonKeyPress = (e: React.KeyboardEvent<any>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n      if (matches.length === 1 && onSelect) {\n        onSelect(matches[0].label);\n        setInput(matches[0].label);\n      }\n      setIsOpen(!isOpen);\n      setKeyboardNavigate(true);\n      if (matches.length === 0) {\n        setInput('');\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.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if (list.some(x => x.label == input)) {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigate(false)\n  }, [isOpen]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!locked && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        locked={locked || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\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          onKeyDown={handleInputKeyDown}\n          value={input}\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          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n        {\n          input && !locked && !disabled &&\n          <IconButton action={handleInputClear}\n                      ref={clearButtonRef}\n                      useTransparentBackground={true}\n                      shape={'circular'}\n                      style={{marginLeft: '-4px'}}\n                      variant={'secondary'}>\n            <SystemIcons.Clear/>\n          </IconButton>\n        }\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <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        !locked && !disabled && setIsOpen(!isOpen);\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        onKeyPress={handleButtonKeyPress}\n        onMouseDown={defaultOnMouseDownHandler}\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={Size.Small} color={COLORS.neutral_600}/> : null}\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n                isButton={isButton || false}\n                disabled={disabled}\n                locked={locked}\n                className={size ? size : ''}\n                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            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={keyboardNavigate && isButton}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {\n              },\n              onValueUpdate: (values: string[]) => {\n                const val = values[0] ?? '';\n                setRestartFilter(true);\n                setInput(val);\n              },\n              items: list.map(x => ({value: x.label, customContent: x.customContent}))\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/Dropdown/index.cjs

@@ -11,12 +11,6 @@ Object.defineProperty(exports, "BasicDropdown", {
     return _BasicDropdown.default;
   }
 });
-Object.defineProperty(exports, "ChipDropdownInput", {
-  enumerable: true,
-  get: function get() {
-    return _ChipDropdownInput.default;
-  }
-});
 Object.defineProperty(exports, "DropdownButton", {
   enumerable: true,
   get: function get() {
@@ -42,7 +36,5 @@ var _BasicDropdown = _interopRequireDefault(require("./BasicDropdown"));
 
 var _DropdownButton = _interopRequireDefault(require("./DropdownButton"));
 
-var _ChipDropdownInput = _interopRequireDefault(require("./ChipDropdownInput"));
-
 var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
 //# sourceMappingURL=index.cjs.map

package/dist/Dropdown/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import DropdownFilter from './DropdownFilter';\nimport BasicDropdown from './BasicDropdown';\nimport DropdownButton from './DropdownButton';\nimport ChipDropdownInput from './ChipDropdownInput';\nimport DropdownContent from './DropdownContent';\n\nexport type {DropdownItem} from './DropdownContent'\n\n\nexport { DropdownFilter, BasicDropdown, DropdownButton, ChipDropdownInput, DropdownContent };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import DropdownFilter from './DropdownFilter';\nimport BasicDropdown from './BasicDropdown';\nimport DropdownButton from './DropdownButton';\nimport DropdownContent from './DropdownContent';\n\nexport type {DropdownItem} from './DropdownContent'\n\n\nexport { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };\n"],"file":"index.cjs"}

package/dist/Dropdown/index.d.ts

@@ -1,7 +1,6 @@
 import DropdownFilter from './DropdownFilter';
 import BasicDropdown from './BasicDropdown';
 import DropdownButton from './DropdownButton';
-import ChipDropdownInput from './ChipDropdownInput';
 import DropdownContent from './DropdownContent';
 export type { DropdownItem } from './DropdownContent';
-export { DropdownFilter, BasicDropdown, DropdownButton, ChipDropdownInput, DropdownContent };
+export { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };

package/dist/Dropdown/index.js

@@ -1,7 +1,6 @@
 import DropdownFilter from './DropdownFilter';
 import BasicDropdown from './BasicDropdown';
 import DropdownButton from './DropdownButton';
-import ChipDropdownInput from './ChipDropdownInput';
 import DropdownContent from './DropdownContent';
-export { DropdownFilter, BasicDropdown, DropdownButton, ChipDropdownInput, DropdownContent };
+export { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };
 //# sourceMappingURL=index.js.map

package/dist/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":["DropdownFilter","BasicDropdown","DropdownButton","ChipDropdownInput","DropdownContent"],"mappings":"AAAA,OAAOA,cAAP,MAA2B,kBAA3B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAKA,SAASJ,cAAT,EAAyBC,aAAzB,EAAwCC,cAAxC,EAAwDC,iBAAxD,EAA2EC,eAA3E","sourcesContent":["import DropdownFilter from './DropdownFilter';\nimport BasicDropdown from './BasicDropdown';\nimport DropdownButton from './DropdownButton';\nimport ChipDropdownInput from './ChipDropdownInput';\nimport DropdownContent from './DropdownContent';\n\nexport type {DropdownItem} from './DropdownContent'\n\n\nexport { DropdownFilter, BasicDropdown, DropdownButton, ChipDropdownInput, DropdownContent };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":["DropdownFilter","BasicDropdown","DropdownButton","DropdownContent"],"mappings":"AAAA,OAAOA,cAAP,MAA2B,kBAA3B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAKA,SAASH,cAAT,EAAyBC,aAAzB,EAAwCC,cAAxC,EAAwDC,eAAxD","sourcesContent":["import DropdownFilter from './DropdownFilter';\nimport BasicDropdown from './BasicDropdown';\nimport DropdownButton from './DropdownButton';\nimport DropdownContent from './DropdownContent';\n\nexport type {DropdownItem} from './DropdownContent'\n\n\nexport { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };\n"],"file":"index.js"}

package/dist/Footer/Components/FooterDropdownLinks.cjs

@@ -27,6 +27,8 @@ var _typography = require("../../styles/typography");
 
 var _HyperLink = require("../../HyperLink");
 
+var _common = require("../../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -37,11 +39,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_100);
 
-var DropdownLinkBlock = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), function (props) {
+var DropdownLinkBlock = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), function (props) {
   return props.width > 768 ? 'none' : 'flex';
-}, _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), _styles.COLORS.neutral_20, _styles.COLORS.neutral_800);
+}, _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.invertedFocusStyles, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), _styles.COLORS.neutral_20, _styles.COLORS.neutral_800);
 
-var LinkBlock = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      background-color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.neutral_20, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
+var LinkBlock = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.invertedFocusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
 
 var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
   var navSection = _ref.navSection,
@@ -56,6 +58,7 @@ var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownLinkBlock, {
       width: width,
       className: dropdownActive ? 'open' : '',
+      onMouseDown: _common.defaultOnMouseDownHandler,
       onClick: function onClick() {
         return setDropdownActive(!dropdownActive);
       },

package/dist/Footer/Components/FooterDropdownLinks.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentTextStyle","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","React","useState","dropdownActive","setDropdownActive","header","links","map","item","index","Math","floor","random","to","target","label"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,kMAEaC,eAAOC,WAFpB,EAKkBD,eAAOC,WALzB,CAAb;;AASA,IAAMC,iBAAiB,GAAGJ,0BAAOK,MAAV,wtBACnB,mCAAkBC,2BAAmBC,IAArC,EAA2CL,eAAOM,KAAlD,CADmB,EAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,GAAc,GAAd,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CAHU,EAaCR,eAAOS,UAbR,EAcVT,eAAOU,WAdG,EAsBCV,eAAOW,WAtBR,EAuBVX,eAAOY,WAvBG,EAiCjB,mCAAkBR,2BAAmBS,OAArC,EAA8C,SAA9C,CAjCiB,EAsCGb,eAAOS,UAtCV,EAuCRT,eAAOc,WAvCC,CAAvB;;AAgDA,IAAMC,SAAS,GAAGjB,0BAAOC,GAAV,wrBAaT,mCAAkBK,2BAAmBC,IAArC,EAA2CL,eAAOM,KAAlD,CAbS,EAsBWN,eAAOS,UAtBlB,EAuBAT,eAAOU,WAvBP,EA4BWV,eAAOS,UA5BlB,EAkCWT,eAAOW,WAlClB,EAmCAX,eAAOY,WAnCP,CAAf;;AA6CA,IAAMI,mBAAmB,GAAG,SAAtBA,mBAAsB,OAAkD;AAAA,MAA/CC,UAA+C,QAA/CA,UAA+C;AAAA,MAAnCT,KAAmC,QAAnCA,KAAmC;;AAC5E,wBAA4CU,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,sBACE,sBAAC,OAAD;AAAA,4BACE,sBAAC,iBAAD;AAAmB,MAAA,KAAK,EAAEb,KAA1B;AAAiC,MAAA,SAAS,EAAEY,cAAc,GAAG,MAAH,GAAY,EAAtE;AAA0E,MAAA,OAAO,EAAE;AAAA,eAAMC,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,OAAnF;AAAA,8BACE;AAAA,kBAAKH,UAAU,CAACK;AAAhB,QADF,EAEGF,cAAc,gBAAG,qBAAC,sBAAD;AAAW,QAAA,IAAI,EAAC;AAAhB,QAAH,gBAA+B,qBAAC,wBAAD;AAAa,QAAA,IAAI,EAAC;AAAlB,QAFhD;AAAA,MADF,eAKE,qBAAC,SAAD;AAAW,MAAA,KAAK,EAAEZ,KAAlB;AAAyB,MAAA,SAAS,EAAEY,cAAc,GAAG,MAAH,GAAY,EAA9D;AAAA,gBACGH,UAAU,CAACM,KAAX,CAAiBC,GAAjB,CAAqB,UAACC,IAAD,EAAOC,KAAP;AAAA,4BACpB,qBAAC,oBAAD;AACW,UAAA,EAAE,yBAAkBC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;AAEW,UAAA,OAAO,EAAE,UAFpB;AAGW,UAAA,IAAI,EAAEJ,IAAI,CAACK,EAHtB;AAIW,UAAA,MAAM,EAAEL,IAAI,CAACM,MAAL,IAAe,QAJlC;AAKW,UAAA,GAAG,EAAC,qBALf;AAAA,oBAMGN,IAAI,CAACO;AANR,WAAgBN,KAAhB,CADoB;AAAA,OAArB;AADH,MALF;AAAA,IADF;AAoBD,CAtBD;;;AAHElB,EAAAA,K;;eA2BaQ,mB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:focus {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n  }\n\n  h3 {\n    margin: auto 0;\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  .open {\n    h3 {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_800};\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.primary_700};\n      cursor: pointer;\n    }\n\n    &:focus {\n      background-color: ${COLORS.neutral_20};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navSection: NavSection;\n  width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n  const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n  return (\n    <Wrapper>\n      <DropdownLinkBlock width={width} className={dropdownActive ? 'open' : ''} onClick={() => setDropdownActive(!dropdownActive)}>\n        <h3>{navSection.header}</h3>\n        {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n      </DropdownLinkBlock>\n      <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n        {navSection.links.map((item, index) => (\n          <HyperLink key={index}\n                     id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                     variant={'inverted'}\n                     href={item.to}\n                     target={item.target || '_blank'}\n                     rel=\"noreferrer noopener\">\n            {item.label}\n          </HyperLink>\n        ))}\n      </LinkBlock>\n    </Wrapper>\n  );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.cjs"}
+{"version":3,"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentTextStyle","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","invertedFocusStyles","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","React","useState","dropdownActive","setDropdownActive","defaultOnMouseDownHandler","header","links","map","item","index","Math","floor","random","to","target","label"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,kMAEaC,eAAOC,WAFpB,EAKkBD,eAAOC,WALzB,CAAb;;AASA,IAAMC,iBAAiB,GAAGJ,0BAAOK,MAAV,ioBACnB,mCAAkBC,2BAAmBC,IAArC,EAA2CL,eAAOM,KAAlD,CADmB,EAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,GAAc,GAAd,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CAHU,EAaCR,eAAOS,UAbR,EAcVT,eAAOU,WAdG,EAsBCV,eAAOW,WAtBR,EAuBVX,eAAOY,WAvBG,EA2BjBC,2BA3BiB,EAgCjB,mCAAkBT,2BAAmBU,OAArC,EAA8C,SAA9C,CAhCiB,EAqCGd,eAAOS,UArCV,EAsCRT,eAAOe,WAtCC,CAAvB;;AA+CA,IAAMC,SAAS,GAAGlB,0BAAOC,GAAV,gkBAaT,mCAAkBK,2BAAmBC,IAArC,EAA2CL,eAAOM,KAAlD,CAbS,EAsBWN,eAAOS,UAtBlB,EAuBAT,eAAOU,WAvBP,EA4BPG,2BA5BO,EAgCWb,eAAOW,WAhClB,EAiCAX,eAAOY,WAjCP,CAAf;;AA2CA,IAAMK,mBAAmB,GAAG,SAAtBA,mBAAsB,OAAkD;AAAA,MAA/CC,UAA+C,QAA/CA,UAA+C;AAAA,MAAnCV,KAAmC,QAAnCA,KAAmC;;AAC5E,wBAA4CW,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,sBACE,sBAAC,OAAD;AAAA,4BACE,sBAAC,iBAAD;AAAmB,MAAA,KAAK,EAAEd,KAA1B;AACmB,MAAA,SAAS,EAAEa,cAAc,GAAG,MAAH,GAAY,EADxD;AAEmB,MAAA,WAAW,EAAEE,iCAFhC;AAGmB,MAAA,OAAO,EAAE;AAAA,eAAMD,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,OAH5B;AAAA,8BAIE;AAAA,kBAAKH,UAAU,CAACM;AAAhB,QAJF,EAKGH,cAAc,gBAAG,qBAAC,sBAAD;AAAW,QAAA,IAAI,EAAC;AAAhB,QAAH,gBAA+B,qBAAC,wBAAD;AAAa,QAAA,IAAI,EAAC;AAAlB,QALhD;AAAA,MADF,eAQE,qBAAC,SAAD;AAAW,MAAA,KAAK,EAAEb,KAAlB;AAAyB,MAAA,SAAS,EAAEa,cAAc,GAAG,MAAH,GAAY,EAA9D;AAAA,gBACGH,UAAU,CAACO,KAAX,CAAiBC,GAAjB,CAAqB,UAACC,IAAD,EAAOC,KAAP;AAAA,4BACpB,qBAAC,oBAAD;AACW,UAAA,EAAE,yBAAkBC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;AAEW,UAAA,OAAO,EAAE,UAFpB;AAGW,UAAA,IAAI,EAAEJ,IAAI,CAACK,EAHtB;AAIW,UAAA,MAAM,EAAEL,IAAI,CAACM,MAAL,IAAe,QAJlC;AAKW,UAAA,GAAG,EAAC,qBALf;AAAA,oBAMGN,IAAI,CAACO;AANR,WAAgBN,KAAhB,CADoB;AAAA,OAArB;AADH,MARF;AAAA,IADF;AAuBD,CAzBD;;;AAHEpB,EAAAA,K;;eA8BaS,mB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport {defaultOnMouseDownHandler} from '../../common';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:focus {\n    ${invertedFocusStyles}\n  }\n\n  h3 {\n    margin: auto 0;\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  .open {\n    h3 {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_800};\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.primary_700};\n      cursor: pointer;\n    }\n\n    &:focus {\n      ${invertedFocusStyles}\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navSection: NavSection;\n  width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n  const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n  return (\n    <Wrapper>\n      <DropdownLinkBlock width={width}\n                         className={dropdownActive ? 'open' : ''}\n                         onMouseDown={defaultOnMouseDownHandler}\n                         onClick={() => setDropdownActive(!dropdownActive)}>\n        <h3>{navSection.header}</h3>\n        {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n      </DropdownLinkBlock>\n      <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n        {navSection.links.map((item, index) => (\n          <HyperLink key={index}\n                     id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                     variant={'inverted'}\n                     href={item.to}\n                     target={item.target || '_blank'}\n                     rel=\"noreferrer noopener\">\n            {item.label}\n          </HyperLink>\n        ))}\n      </LinkBlock>\n    </Wrapper>\n  );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.cjs"}

package/dist/Footer/Components/FooterDropdownLinks.js

@@ -6,17 +6,18 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentTextStyle } from '../../styles';
+import { COLORS, ComponentTextStyle, invertedFocusStyles } from '../../styles';
 import { ChevronDown, ChevronUp } from '../../icons/systemicons/SystemIcons';
 import { ComponentMStyling, ComponentSStyling } from '../../styles/typography';
 import { HyperLink } from '../../HyperLink';
+import { defaultOnMouseDownHandler } from '../../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_100);
-var DropdownLinkBlock = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), function (props) {
+var DropdownLinkBlock = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), function (props) {
   return props.width > 768 ? 'none' : 'flex';
-}, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
-var LinkBlock = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      background-color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, COLORS.neutral_20, COLORS.primary_100, COLORS.primary_800);
+}, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, invertedFocusStyles, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
+var LinkBlock = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800);
 
 var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
   var navSection = _ref.navSection,
@@ -31,6 +32,7 @@ var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
     children: [/*#__PURE__*/_jsxs(DropdownLinkBlock, {
       width: width,
       className: dropdownActive ? 'open' : '',
+      onMouseDown: defaultOnMouseDownHandler,
       onClick: function onClick() {
         return setDropdownActive(!dropdownActive);
       },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ChevronDown","ChevronUp","ComponentMStyling","ComponentSStyling","HyperLink","Wrapper","div","neutral_100","DropdownLinkBlock","button","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","useState","dropdownActive","setDropdownActive","header","links","map","item","index","Math","floor","random","to","target","label"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:focus {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n  }\n\n  h3 {\n    margin: auto 0;\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  .open {\n    h3 {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_800};\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.primary_700};\n      cursor: pointer;\n    }\n\n    &:focus {\n      background-color: ${COLORS.neutral_20};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navSection: NavSection;\n  width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n  const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n  return (\n    <Wrapper>\n      <DropdownLinkBlock width={width} className={dropdownActive ? 'open' : ''} onClick={() => setDropdownActive(!dropdownActive)}>\n        <h3>{navSection.header}</h3>\n        {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n      </DropdownLinkBlock>\n      <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n        {navSection.links.map((item, index) => (\n          <HyperLink key={index}\n                     id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                     variant={'inverted'}\n                     href={item.to}\n                     target={item.target || '_blank'}\n                     rel=\"noreferrer noopener\">\n            {item.label}\n          </HyperLink>\n        ))}\n      </LinkBlock>\n    </Wrapper>\n  );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.js"}
+{"version":3,"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","invertedFocusStyles","ChevronDown","ChevronUp","ComponentMStyling","ComponentSStyling","HyperLink","defaultOnMouseDownHandler","Wrapper","div","neutral_100","DropdownLinkBlock","button","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","useState","dropdownActive","setDropdownActive","header","links","map","item","index","Math","floor","random","to","target","label"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport {defaultOnMouseDownHandler} from '../../common';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:focus {\n    ${invertedFocusStyles}\n  }\n\n  h3 {\n    margin: auto 0;\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  .open {\n    h3 {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_800};\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.primary_700};\n      cursor: pointer;\n    }\n\n    &:focus {\n      ${invertedFocusStyles}\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navSection: NavSection;\n  width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n  const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n  return (\n    <Wrapper>\n      <DropdownLinkBlock width={width}\n                         className={dropdownActive ? 'open' : ''}\n                         onMouseDown={defaultOnMouseDownHandler}\n                         onClick={() => setDropdownActive(!dropdownActive)}>\n        <h3>{navSection.header}</h3>\n        {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n      </DropdownLinkBlock>\n      <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n        {navSection.links.map((item, index) => (\n          <HyperLink key={index}\n                     id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                     variant={'inverted'}\n                     href={item.to}\n                     target={item.target || '_blank'}\n                     rel=\"noreferrer noopener\">\n            {item.label}\n          </HyperLink>\n        ))}\n      </LinkBlock>\n    </Wrapper>\n  );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.js"}

package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs

@@ -29,6 +29,8 @@ var _Button = require("../../Button");
 
 var _typography = require("../../styles/typography");
 
+var _styling = require("../../InputFields/styling");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -41,13 +43,13 @@ var NewsletterAndSocial = _styledComponents.default.section(_templateObject || (
 
 var NewsletterEmailSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white), _styles.BREAKPOINTS.MEDIUM);
 
-var NewsletterEmail = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+var NewsletterEmail = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, _styling.InputFieldStyling, _styles.invertedFocusStyles);
 
-var NewsletterButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), _styles.COLORS.white, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.BREAKPOINTS.MEDIUM);
+var NewsletterButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), _styles.COLORS.white, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.BREAKPOINTS.MEDIUM, _styles.invertedFocusStyles);
 
 var SocialMedia = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), _styles.COLORS.white, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, 'inherit'), _styles.BREAKPOINTS.MEDIUM);
 
-var SocialMediaButtons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      outline: none;\n      div {\n        background-color: ", ";\n        color: ", ";\n        outline: none;\n        box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM);
+var SocialMediaButtons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.invertedFocusStyles, _styles.BREAKPOINTS.MEDIUM);
 
 var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
   var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,

package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      outline: none;\n      div {\n        background-color: ${COLORS.white};\n        color: ${COLORS.neutral_600};\n        outline: none;\n        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.cjs"}
+{"version":3,"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\nimport {InputFieldStyling} from '../../InputFields/styling';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.cjs"}