@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/src/Dropdown/DropdownContent.js

@@ -0,0 +1,339 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button';
+import { Size } from '../types';
+import { DropdownContentButtonStyling } from './CommonStyling';
+import { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { COLORS, scrollBarStyling } from '../styles';
+import { Checkbox, RadioButton } from '../InputFields';
+import { Z_INDEXES } from '../styles/z-indexes';
+import MenuItem from '../MenuItem/MenuItem';
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
+var OFFSET_BEFORE_SHOW = 1000000;
+export var DropdownContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"], ["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), COLORS.white, Z_INDEXES.dropdown, function (props) { return (props.isButton ? '-4px' : '4px 0px'); }, function (props) { return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");"); }, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) { return (props.isButton ? DropdownContentButtonStyling : ''); }, COLORS.neutral_100, function (props) { return (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'); }, function (props) { return (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px'); }, function (props) { return (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'); });
+export var DropdownContentItemsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"], ["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus);
+export var DropdownContentListContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) { return (props.scrollable ? 'overflow-y: scroll;' : ''); }, function (props) { return (props.scrollable ? 'margin-right: 6px;' : ''); }, function (props) { return (props.scrollable ? 'padding-right: 6px;' : ''); }, function (props) { return (props.itemsType != 'normal' ? 'margin-left: 4px;' : ''); }, DropdownContentItemsContainer, function (props) { return (props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'); }, function (props) { return (props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'); }, scrollBarStyling(Size.Small));
+var DropdownContentMenuContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"], ["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) { return props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size ? '10px 16px 6px' : props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'); }, function (props) { return props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size ? '8px 16px' : props.size == Size.Medium ? '12px 24px' : '16px 32px'); });
+var DividerContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"], ["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"])), function (props) { return (props.size == Size.Large ? '16px' : props.size == Size.Medium ? '12px' : props.size == Size.Small || !props.size ? '8px' : '6px'); });
+var DropdownContentTopItemContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"], ["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), COLORS.neutral_200);
+var DropdownContentActionButtonContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"], ["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) { return (props.scrollable ? "border-top: 1px solid  ".concat(COLORS.neutral_200, ";") : ''); }, function (props) { return (props.scrollable ? 'margin-top: 4px;' : ''); }, function (props) { return (props.size === Size.Small || !props.size ? '4px 16px 0px' : props.size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px'); });
+var Overlay = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), Z_INDEXES.modal);
+var DropdownContent = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var id = _a.id, customizationProps = _a.customizationProps, alignLeft = _a.alignLeft, isButton = _a.isButton, size = _a.size, isOpen = _a.isOpen, width = _a.width, setIsOpen = _a.setIsOpen, filter = _a.filter, focused = _a.focused, setFocused = _a.setFocused, selectedValues = _a.selectedValues, setSelectedValues = _a.setSelectedValues, messageOnNoResults = _a.messageOnNoResults, outline = _a.outline, containerRef = _a.containerRef, onActiveDescendantChanged = _a.onActiveDescendantChanged, _d = _a.ariaRolesType, ariaRolesType = _d === void 0 ? 'menu' : _d;
+    var _e = React.useState(false), isUp = _e[0], setIsUp = _e[1];
+    var _f = React.useState(false), locationDefined = _f[0], setLocationDefined = _f[1];
+    var _g = React.useState({ top: '0', left: '0' }), offset = _g[0], setOffset = _g[1];
+    var dropdownContentRef = (_b = ref) !== null && _b !== void 0 ? _b : React.useRef(null);
+    if (!customizationProps.itemsType)
+        customizationProps.itemsType = 'normal';
+    if (!size)
+        size = Size.Small;
+    var itemsListRef = React.useRef(null);
+    var actionButtonRef = React.useRef(null);
+    var determineDropUp = function () {
+        var options = customizationProps.items;
+        var rect = containerRef.current.getBoundingClientRect();
+        var windowHeight = window.innerHeight;
+        var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
+        var instOffsetWithMenu = rect.top + rect.height + menuHeight;
+        var up = instOffsetWithMenu >= windowHeight;
+        setOffset({
+            top: up ? "calc(-100% - ".concat(rect.height, "px ").concat(isButton ? '' : '- 8px', ")") : '0',
+            left: alignLeft ? "calc(-".concat(rect.width, "px)") : "calc(-100%)",
+        });
+        setIsUp(up);
+        setLocationDefined(true);
+    };
+    var setNewFocusedElement = function (index) {
+        var _a, _b, _c, _d;
+        if (outline)
+            (_a = dropdownContentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        var newFocusedElement = elRefs[index];
+        if (onActiveDescendantChanged)
+            onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
+        var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
+        if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+            setFocused(index);
+            (_b = oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : oldFocusedElement.current) === null || _b === void 0 ? void 0 : _b.classList.remove('dropdown-hover');
+            (_c = newFocusedElement.current) === null || _c === void 0 ? void 0 : _c.classList.add('dropdown-hover');
+            (_d = newFocusedElement.current) === null || _d === void 0 ? void 0 : _d.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+    };
+    var getFilteredItems = function () {
+        var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
+        return customizationProps.items.filter(function (x) { var _a, _b; return ((_a = x === null || x === void 0 ? void 0 : x.value) === null || _a === void 0 ? void 0 : _a.toUpperCase().includes(filtrationString)) || ((_b = x === null || x === void 0 ? void 0 : x.displayLabel) === null || _b === void 0 ? void 0 : _b.toUpperCase().includes(filtrationString)); });
+    };
+    var findNextActiveIndex = function (index, direction, items) {
+        var _a;
+        for (var i = index + direction; i > 0 && i <= items.length; i += direction) {
+            if (!((_a = items[i - 1]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                return i;
+            }
+        }
+        return index;
+    };
+    var handleKeyDown = function (e) {
+        var _a;
+        if (isOpen) {
+            if (e.key === 'ArrowUp' || e.key === 'Up') {
+                e.preventDefault();
+                var focusedNow = focused || focused === 0 ? focused : arrLength + 1;
+                if (!!focusedNow) {
+                    focusedNow = focusedNow === 1 && haveTopItem() ? 0 : findNextActiveIndex(focusedNow, -1, getFilteredItems());
+                    setNewFocusedElement(focusedNow);
+                }
+            }
+            else if (e.key === 'ArrowDown' || e.key === 'Down') {
+                e.preventDefault();
+                var focusedNow = focused;
+                focusedNow = !!focusedNow || focusedNow === 0 ? findNextActiveIndex(focusedNow, 1, getFilteredItems()) : haveTopItem() ? 0 : 1;
+                setNewFocusedElement(focusedNow);
+            }
+            else if (e.key === 'Escape' || e.key === 'Esc') {
+                setIsOpen(false);
+                setFocused(null);
+                if (onActiveDescendantChanged)
+                    onActiveDescendantChanged(undefined);
+            }
+            else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== (actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.current)) {
+                e.preventDefault();
+                var focusedElement = elRefs[focused];
+                if (focusedElement) {
+                    (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.click();
+                }
+                if (onActiveDescendantChanged)
+                    onActiveDescendantChanged(undefined);
+            }
+        }
+    };
+    React.useEffect(function () {
+        document.addEventListener('keydown', handleKeyDown);
+        return function () {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    var scrollPosition = React.useRef(0);
+    var handleScroll = function () {
+        var _a;
+        scrollPosition.current = (_a = itemsListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop;
+    };
+    React.useLayoutEffect(function () {
+        var _a;
+        if (itemsListRef.current)
+            itemsListRef.current.scrollTop = (_a = scrollPosition.current) !== null && _a !== void 0 ? _a : 0;
+    }, [selectedValues]);
+    var getCorrectRef = function (ref) {
+        switch (customizationProps.itemsType) {
+            case 'normal':
+                return ref || React.createRef();
+            default:
+                return ref || React.createRef();
+        }
+    };
+    var arrLength = getFilteredItems().length;
+    var _h = React.useState([]), elRefs = _h[0], setElRefs = _h[1];
+    React.useEffect(function () {
+        if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
+            setFocused(null);
+        }
+        setElRefs(function (elRefs) {
+            return Array(arrLength + 1)
+                .fill(null)
+                .map(function (_, i) { return getCorrectRef(elRefs[i]); });
+        });
+    }, [isOpen, arrLength]);
+    React.useLayoutEffect(function () {
+        isOpen && !locationDefined && determineDropUp();
+    }, [isOpen, locationDefined]);
+    var haveTopItem = function () {
+        var _a;
+        if (!customizationProps.pinTopItem)
+            return false;
+        if (customizationProps.itemsType === 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)
+            return true;
+        else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0))
+            return true;
+        else if (customizationProps.itemsType === 'normal' && ((_a = getSuggestions()) === null || _a === void 0 ? void 0 : _a.length) > 0)
+            return true;
+        return false;
+    };
+    var getSuggestions = function () {
+        return getFilteredItems().filter(function (x) { return x.suggestion; });
+    };
+    /**
+     * when dropdown opens set correct position of focused item
+     * */
+    React.useLayoutEffect(function () {
+        if (isOpen && (focused || focused === 0)) {
+            setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
+        }
+    }, [isOpen, focused]);
+    /**
+     * Reset dropdown content state on close
+     * */
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e;
+        if (!isOpen) {
+            setLocationDefined(false);
+            for (var _i = 0, elRefs_1 = elRefs; _i < elRefs_1.length; _i++) {
+                var elRef = elRefs_1[_i];
+                (_a = elRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('dropdown-hover');
+            }
+            setFocused(null);
+            if (onActiveDescendantChanged)
+                onActiveDescendantChanged(undefined);
+            (_b = dropdownContentRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove('outline');
+            (_c = dropdownContentRef.current) === null || _c === void 0 ? void 0 : _c.blur();
+        }
+        else {
+            if (outline) {
+                (_d = dropdownContentRef.current) === null || _d === void 0 ? void 0 : _d.classList.add('outline');
+                (_e = dropdownContentRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+            }
+        }
+    }, [isOpen, dropdownContentRef, focused, outline]);
+    /**
+     * Scroll item container to top when dropdown opens
+     * */
+    React.useEffect(function () {
+        if (isOpen && itemsListRef.current) {
+            itemsListRef.current.scrollTop = 0;
+        }
+    }, [isOpen]);
+    React.useEffect(function () {
+        if (isOpen) {
+            var observer_1 = new IntersectionObserver(function (entries) {
+                var _a;
+                if (!entries[0].isIntersecting) {
+                    setIsOpen(false);
+                    //@ts-ignore
+                    (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+            }, { threshold: [0], rootMargin: '8px' });
+            observer_1.observe(containerRef.current);
+            calculateOffset();
+            window.addEventListener('scroll', calculateOffset, true);
+            window.addEventListener('resize', calculateOffset);
+            return function () {
+                observer_1.disconnect();
+                window.removeEventListener('scroll', calculateOffset, true);
+                window.removeEventListener('resize', calculateOffset);
+            };
+        }
+        return function () { };
+    }, [isOpen]);
+    var handleItemClick = function (selected, item) {
+        var newValue = [];
+        if (customizationProps.multiSelect) {
+            if (selected)
+                newValue = __spreadArray(__spreadArray([], selectedValues, true), [item.value], false);
+            else
+                newValue = selectedValues.filter(function (x) { return x != item.value; });
+        }
+        else
+            newValue = selected ? [item.value] : [];
+        setSelectedValues(newValue);
+        if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) {
+            setIsOpen(false);
+        }
+    };
+    var getTopItem = function () {
+        var _a, _b, _c, _d;
+        if (!customizationProps.pinTopItem)
+            return;
+        var visibleItems = getFilteredItems();
+        var allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.filter(function (x) { return visibleItems.some(function (y) { return y.value == x; }); }).length) == visibleItems.length;
+        var showTopItem = false;
+        var suggestions = getSuggestions();
+        var displayLabel = selectedValues[0] ? (_b = (_a = customizationProps.items) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.value === selectedValues[0]; })) === null || _b === void 0 ? void 0 : _b.displayLabel : undefined;
+        if (customizationProps.itemsType == 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)
+            showTopItem = true;
+        else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0))
+            showTopItem = true;
+        else if (customizationProps.itemsType == 'normal' && suggestions.length > 0)
+            showTopItem = true;
+        if (!showTopItem)
+            return;
+        var selectedFirst = selectedValues.length > 0 ? visibleItems.find(function (x) { return x.value == selectedValues[0]; }) : null;
+        return (React.createElement(DropdownContentTopItemContainer, { size: size },
+            customizationProps.itemsType === 'radio' && (React.createElement(RadioButton, { ref: elRefs[0], role: 'menuitemradio', iconPointerEventsTransparent: true, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, tabIndexVal: -1, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), select: function () { }, label: (_c = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _c !== void 0 ? _c : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value, size: size, id: "".concat(id, "_topitem"), selected: true })),
+            customizationProps.itemsType === 'checkbox' && (React.createElement(Checkbox, { ref: elRefs[0], role: 'menuitemcheckbox', tabIndexVal: -1, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), select: function (selected) {
+                    if (!customizationProps.multiSelect)
+                        return;
+                    var newValues = selected ? visibleItems.map(function (x) { return x.value; }) : [];
+                    setSelectedValues(newValues);
+                    if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues))
+                        setIsOpen(false);
+                }, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, iconPointerEventsTransparent: true, semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0, size: size, id: "".concat(id, "_checkbox_selectall"), label: customizationProps.multiSelect ? 'Select all' : (_d = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _d !== void 0 ? _d : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value, selected: !customizationProps.multiSelect || allSelected })),
+            customizationProps.itemsType === 'normal' && (React.createElement(React.Fragment, null, suggestions.map(function (x) { return (React.createElement(MenuItem, { role: ariaRolesType == 'input' ? 'option' : 'menu', key: "".concat(id, "_topitem_").concat(x.value), item: x, size: size, active: false, tabIndex: -1, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), ref: elRefs[0], id: "".concat(id, "_topitem"), onClickHandler: function (e) {
+                    e.stopPropagation();
+                    customizationProps.onValueUpdate([x.value]);
+                    setSelectedValues([x.value]);
+                    setIsOpen(false);
+                    setFocused(null);
+                } })); })))));
+    };
+    var getElements = function (messageOnNoResults, size) {
+        if (getFilteredItems().length === 0) {
+            return React.createElement(MenuItem, { item: { value: messageOnNoResults, disabled: true }, size: size, id: "noResultsFound", active: false, onClickHandler: function (e) { } });
+        }
+        return (React.createElement(DropdownContentItemsContainer, { size: size }, getFilteredItems()
+            .filter(function (x) { return x && (customizationProps.itemsType != 'normal' || !x.suggestion); })
+            .map(function (item, index) {
+            var _a, _b;
+            return (React.createElement(React.Fragment, { key: "key_".concat(id, "_").concat(item.value) },
+                item.customContent,
+                !item.customContent && customizationProps.itemsType == 'radio' && (React.createElement(RadioButton, { role: 'menuitemradio', select: function (selected) { return handleItemClick(selected, item); }, ref: elRefs[index + 1], size: size, tabIndexVal: -1, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), iconPointerEventsTransparent: true, disabled: item === null || item === void 0 ? void 0 : item.disabled, key: "key_".concat(id, "_").concat(index + 1), onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, id: "".concat(id, "_").concat(index + 1), label: (_a = item.displayLabel) !== null && _a !== void 0 ? _a : item.value, selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value) })),
+                !item.customContent && customizationProps.itemsType == 'checkbox' && (React.createElement(Checkbox, { role: 'menuitemcheckbox', select: function (selected) { return handleItemClick(selected, item); }, iconPointerEventsTransparent: true, disabled: item === null || item === void 0 ? void 0 : item.disabled, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), ref: elRefs[index + 1], size: size, tabIndexVal: -1, key: "key_".concat(id, "_").concat(index + 1), onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, id: "".concat(id, "_").concat(index + 1), label: (_b = item.displayLabel) !== null && _b !== void 0 ? _b : item.value, selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value) })),
+                !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (React.createElement(MenuItem, { role: ariaRolesType == 'input' ? 'option' : 'menu', key: "key_".concat(id, "_").concat(index + 1), id: "".concat(id, "_").concat(index + 1), item: item, tabIndex: -1, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), size: size, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value), ref: elRefs[index + 1], onClickHandler: function (e) {
+                        e.stopPropagation();
+                        customizationProps.onValueUpdate([item.value]);
+                        setSelectedValues([item.value]);
+                        setIsOpen(false);
+                        setFocused(null);
+                    } }))));
+        })));
+    };
+    var calculateOffset = function () {
+        var _a;
+        var rect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            dropdownContentRef.current.style.left = "".concat(rect.x + rect.width, "px");
+            dropdownContentRef.current.style.top = "".concat(rect.y + rect.height, "px");
+            dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
+        }
+        determineDropUp();
+    };
+    var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? (isUp ? 'up' : 'down') : '');
+    return (React.createElement(Overlay, null,
+        React.createElement(DropdownContentContainer, { role: ariaRolesType == "menu" ? "menu" : "optionlist", ref: dropdownContentRef, size: size, offsetTop: offset.top, id: id, offsetLeft: offset.left, tabIndex: -1, isButton: isButton, alignLeft: alignLeft, scrollable: customizationProps.scrollable, maxHeight: customizationProps.maxHeight, className: cls },
+            React.createElement(DropdownContentListContainer, { role: "group", size: size, itemsType: customizationProps.itemsType, onScroll: handleScroll, ref: itemsListRef, outline: outline, scrollable: customizationProps.scrollable },
+                customizationProps.menuContent && (React.createElement(DropdownContentMenuContentContainer, { size: size },
+                    customizationProps.menuContent,
+                    React.createElement(DividerContainer, { size: size },
+                        React.createElement("div", { className: "divider" })))),
+                customizationProps.pinTopItem && getTopItem(),
+                getElements(messageOnNoResults, size)),
+            customizationProps.action && customizationProps.actionLabel && (React.createElement(DropdownContentActionButtonContainer, { size: size, scrollable: customizationProps.scrollable },
+                React.createElement(Button, { width: "100%", role: "menuitem", icon: customizationProps.actionIcon, ref: actionButtonRef, loading: customizationProps.actionLoading, disabled: customizationProps.actionDisabled, variant: (_c = customizationProps.actionVariant) !== null && _c !== void 0 ? _c : 'primary', size: size, onClick: function () { return customizationProps.action() && setIsOpen(false); } }, customizationProps.actionLabel))))));
+});
+export default DropdownContent;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/Dropdown/DropdownFilter.js

@@ -0,0 +1,161 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { COLORS } from '../styles';
+import { SystemIcons } from '../icons';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { DropdownInputFieldStyles, DropdownContainer, DropdownInputField } from './CommonStyling';
+import DropdownContent from './DropdownContent';
+import { Size } from '../types';
+import { AutofilledMessage, ErrorMessage } from '../InputFields';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+import { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';
+import { IconButton } from '../Button';
+var DropdownFilter = React.forwardRef(function (_a, ref) {
+    var id = _a.id, list = _a.list, placeholder = _a.placeholder, onSelect = _a.onSelect, onInputChange = _a.onInputChange, value = _a.value, required = _a.required, messageOnNoResults = _a.messageOnNoResults, disabled = _a.disabled, readOnly = _a.readOnly, scrollable = _a.scrollable, activeValidationMessage = _a.activeValidationMessage, autofilledMessage = _a.autofilledMessage, size = _a.size, disableFiltering = _a.disableFiltering, margin = _a.margin, loading = _a.loading, onFocus = _a.onFocus, overflowTooltipPosition = _a.overflowTooltipPosition, onBlur = _a.onBlur, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "margin", "loading", "onFocus", "overflowTooltipPosition", "onBlur", "dataTestId"]);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.useState(), input = _c[0], setInput = _c[1];
+    var _d = React.useState(), activeDescendant = _d[0], setActiveDescendant = _d[1];
+    var _e = React.useState(false), restartFilter = _e[0], setRestartFilter = _e[1];
+    var _f = React.useState(), selectedItem = _f[0], setSelectedItem = _f[1];
+    var _g = React.useState([]), selectedValues = _g[0], setSelectedValues = _g[1];
+    var _h = React.useState(null), focused = _h[0], setFocused = _h[1];
+    var _j = React.useState(false), inputFocused = _j[0], setInputFocused = _j[1];
+    var _k = React.useState(true), init = _k[0], setInit = _k[1];
+    var styledFieldRef = useFocusVisibleRef();
+    var inputRef = useFocusVisibleRef([styledFieldRef]);
+    var clearButtonRef = React.useRef(null);
+    useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);
+    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
+    var containerRef = useClickOutsideRef(function () { return setIsOpen(false); }, [], useFocusOutsideRef(function () { return setIsOpen(false); }));
+    var handleInputKeyDown = function (e) {
+        if (e.key === 'Esc' || e.key === 'Escape') {
+            e.preventDefault();
+        }
+        if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {
+            e.preventDefault();
+            if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+    };
+    React.useEffect(function () {
+        setInit(true);
+        setSelectedValues(!!value ? [value] : []);
+    }, [value]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) {
+            var val_1 = selectedValues[0];
+            var item = list.find(function (a) { return a.value === val_1; });
+            setSelectedItem(item);
+            setInput((_b = (_a = item === null || item === void 0 ? void 0 : item.displayLabel) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.value) !== null && _b !== void 0 ? _b : '');
+            onSelect && !init && onSelect(val_1);
+        }
+        else {
+            setSelectedItem(undefined);
+            onSelect && !init && onSelect('');
+            setInput('');
+        }
+    }, [selectedValues]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (!isOpen) {
+            if (!!selectedItem) {
+                setInput((_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.displayLabel) !== null && _a !== void 0 ? _a : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== null && _b !== void 0 ? _b : '');
+            }
+            else {
+                setInput('');
+            }
+        }
+        setRestartFilter(true);
+    }, [isOpen, selectedItem]);
+    var handleInputClear = function (e) {
+        var _a;
+        setInput('');
+        setSelectedValues([]);
+        onSelect && onSelect('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1 });
+    };
+    var renderInput = function () {
+        return (React.createElement(DropdownInputFieldStyles, { ref: styledFieldRef, className: size ? size : '', onClick: function (e) {
+                var _a, _b;
+                if (!readOnly && !disabled) {
+                    e.stopPropagation();
+                    setIsOpen(!isOpen);
+                    if (isOpen) {
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                    }
+                    else {
+                        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                }
+            }, disabled: disabled || false, readOnly: readOnly || false, isPlaceholder: !input, showValidationMessage: !!activeValidationMessage, onMouseDown: defaultOnMouseDownHandler, "data-testid": "otherdiv_".concat(id) },
+            React.createElement(DropdownInputField, __assign({ id: id, ref: inputRef, autoComplete: 'off-' + Math.floor(Math.random() * 999999999999), type: "search", placeholder: inputFocused ? '' : placeholder, onKeyDown: handleInputKeyDown, ellipsis: true, value: input || '', onChange: function (e) {
+                    if (!e.target.value) {
+                        setSelectedValues([]);
+                    }
+                    if (!readOnly && !disabled && e.target.value !== input) {
+                        setRestartFilter(false);
+                        setIsOpen(true);
+                        setInput(e.target.value);
+                        if (onInputChange) {
+                            onInputChange(e.target.value || '');
+                        }
+                    }
+                }, onFocus: function (e) {
+                    setInputFocused(true);
+                    onFocus && onFocus(e);
+                }, onBlur: function (e) {
+                    setInputFocused(false);
+                    onBlur && onBlur(e);
+                }, required: required, tabIndex: disabled || readOnly ? -1 : 0, disabled: disabled || false, "data-testid": dataTestId }, rest)),
+            !isOpen ? React.createElement(TooltipOverflow, { position: overflowTooltipPosition, input: inputRef, withArrow: true, maxWidth: "100%", size: size, align: 'end' }, input) : null,
+            input && !readOnly && !disabled && !loading && (React.createElement(IconButton, { action: handleInputClear, ref: clearButtonRef, useTransparentBackground: true, shape: 'circular', style: { marginLeft: '-4px' }, variant: 'secondary' },
+                React.createElement(SystemIcons.Clear, null))),
+            !disabled && !readOnly && loading && (React.createElement("div", { style: { marginLeft: '-4xp' } },
+                React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 }))),
+            React.createElement("div", { className: 'dropdown-arrow' }, isOpen && !readOnly && !disabled ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px", className: size ? size : '' }) : React.createElement(SystemIcons.ArrowDropDown, { size: "24px", className: size ? size : '' }))));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownContainer, { ref: containerRef, role: "combobox", "aria-multiselectable": true, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, "aria-expanded": isOpen, disabled: disabled, isButton: false, readOnly: readOnly, className: size ? size : '', margin: margin },
+            renderInput(),
+            !readOnly && !disabled && (React.createElement(DropdownContent, { containerRef: containerRef, isOpen: isOpen && !loading, messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '', selectedValues: selectedValues, setSelectedValues: setSelectedValues, size: size !== null && size !== void 0 ? size : Size.Small, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, focused: focused, ariaRolesType: "input", setFocused: setFocused, outline: false, customizationProps: {
+                    itemsType: 'normal',
+                    scrollable: scrollable,
+                    multiSelect: false,
+                    action: function () { },
+                    onValueUpdate: function (values) {
+                        setRestartFilter(true);
+                        setInit(false);
+                    },
+                    items: list,
+                }, filter: !disableFiltering && !restartFilter ? input || '' : '', setIsOpen: setIsOpen, isButton: false, id: "".concat(id, "_dropdowncontent") }))),
+        activeValidationMessage && (React.createElement(ErrorMessage, { className: size || '' },
+            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
+            React.createElement("span", null, activeValidationMessage))),
+        autofilledMessage && (React.createElement(AutofilledMessage, { className: size || '' },
+            React.createElement(SystemIcons.Information, { color: COLORS.neutral_600 }),
+            React.createElement("span", null, autofilledMessage)))));
+});
+export default DropdownFilter;

package/dist/src/Dropdown/index.js

@@ -0,0 +1,8 @@
+export { default as DropdownContent } from './DropdownContent';
+export * from './DropdownContent';
+export { default as DropdownButton } from './DropdownButton';
+export * from './DropdownButton';
+export { default as DropdownFilter } from './DropdownFilter';
+export * from './DropdownFilter';
+export { default as BasicDropdown } from './BasicDropdown';
+export * from './BasicDropdown';

package/dist/src/Footer/Components/FooterBottomLinks.js

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { HyperLink } from '../../HyperLink';
+import { BREAKPOINTS, COLORS } from '../../styles';
+import { ComponentTextStyle, ComponentXSStyling } from '../../styles/typography';
+var FooterLinkSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 64px;\n  color: white;\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n  }\n"], ["\n  min-height: 64px;\n  color: white;\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var FooterLinks = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n\n  ", " {\n    flex-direction: row;\n    margin: auto auto auto 0;\n  }\n\n  a {\n    ", "\n    &:not(:first-child) {\n      margin: 16px 0 0 0;\n      ", " {\n        margin: 0 0 0 16px;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n\n  ", " {\n    flex-direction: row;\n    margin: auto auto auto 0;\n  }\n\n  a {\n    ", "\n    &:not(:first-child) {\n      margin: 16px 0 0 0;\n      ", " {\n        margin: 0 0 0 16px;\n      }\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.MEDIUM);
+var Copyright = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  margin: 16px auto 0 auto;\n\n  ", " {\n    margin: auto 0 auto auto;\n  }\n"], ["\n  ", "\n  margin: 16px auto 0 auto;\n\n  ", " {\n    margin: auto 0 auto auto;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
+var FooterBottomLinks = function (_a) {
+    var bottomLinks = _a.bottomLinks, copyrightText = _a.copyrightText;
+    return (React.createElement(FooterLinkSection, null,
+        React.createElement(FooterLinks, null, bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (bl, i) { return (React.createElement(HyperLink, { id: "FooterLink_".concat(Math.floor(Math.random() * 999999999999)), key: i, href: bl.to, variant: "inverted" }, bl.label)); })),
+        React.createElement(Copyright, null, copyrightText)));
+};
+export default FooterBottomLinks;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, invertedFocusStyles } from '../../styles';
+import { SystemIcons } from '../../icons';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { HyperLink } from '../../HyperLink';
+import { defaultOnMouseDownHandler } from '../../common';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\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(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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, invertedFocusStyles, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
+var LinkBlock = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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 (_a) {
+    var navSection = _a.navSection, width = _a.width;
+    var _b = React.useState(false), dropdownActive = _b[0], setDropdownActive = _b[1];
+    return (React.createElement(Wrapper, null,
+        React.createElement(DropdownLinkBlock, { width: width, className: dropdownActive ? 'open' : '', onMouseDown: defaultOnMouseDownHandler, onClick: function () { return setDropdownActive(!dropdownActive); } },
+            React.createElement("h3", null, navSection.header),
+            dropdownActive ? React.createElement(SystemIcons.ChevronUp, { size: "24px" }) : React.createElement(SystemIcons.ChevronDown, { size: "24px" })),
+        React.createElement(LinkBlock, { width: width, className: dropdownActive ? 'show' : '' }, navSection.links.map(function (item, index) { return (React.createElement(HyperLink, { key: index, id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)), variant: 'inverted', href: item.to, target: item.target || '_blank', rel: "noreferrer noopener" }, item.label)); }))));
+};
+export default FooterDropdownLinks;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/Footer/Components/FooterNavSection.js

@@ -0,0 +1,32 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
+import FooterDropdownLinks from './FooterDropdownLinks';
+import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
+import { HyperLink } from '../../HyperLink';
+import { hasWindow } from '../../utils/utils';
+var NavSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"])));
+var LinkBlock = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"], ["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"])), function (props) { return (props.width <= 768 ? 'none' : 'flex'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.LARGE, ComponentLStyling(ComponentTextStyle.Regular, 'inherit'), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white));
+var FooterNavSection = function (_a) {
+    var _b;
+    var navOptions = _a.navOptions;
+    var _c = React.useState(hasWindow() ? window.innerWidth : -1), width = _c[0], setWidth = _c[1];
+    React.useEffect(function () {
+        function handleResize() {
+            setWidth(window.innerWidth);
+        }
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return (React.createElement(NavSection, null, (_b = navOptions.sections) === null || _b === void 0 ? void 0 : _b.map(function (no, index) {
+        return width > 768 ? (React.createElement(LinkBlock, { key: "LinkBlock_".concat(index), width: width },
+            React.createElement("h3", null, no.header),
+            no.links.map(function (link, index) { return (React.createElement(HyperLink, { key: index, id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)), variant: 'inverted', href: link.to, target: link.target || '_blank', rel: "noreferrer noopener" }, link.label)); }))) : (React.createElement(FooterDropdownLinks, { "data-testid": 'footerDropLinks', key: "LinkBlockDropdown_".concat(index), navSection: no, width: width }));
+    })));
+};
+export default FooterNavSection;
+var templateObject_1, templateObject_2;