@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -13,88 +13,53 @@ import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 import Icon from '../Icon/Icon.js';
 import PriorityNavigationItem from '../PriorityNavigationItem/PriorityNavigationItem.js';
 
-const Container = styled.div `
-    width: 100%;
-
-    ${media.md ` border-bottom: 1px solid ${theme.color.line.L03}; `}
-`;
-const Category = styled.span `
-    margin: 0;
-    color: ${theme.color.text.black};
-    font-size: ${theme.fontSize.h4};
-    font-weight: ${theme.fontWeight.bold};
-    line-height: ${theme.lineHeight.h4};
-    display: block;
-
-    ${media.md `
+const Container = styled.div.withConfig({
+  displayName: "PriorityNavigation__Container",
+  componentId: "sc-1fa414d-0"
+})(["width:100%;", ""], media.md` border-bottom: 1px solid ${theme.color.line.L03}; `);
+const Category = styled.span.withConfig({
+  displayName: "PriorityNavigation__Category",
+  componentId: "sc-1fa414d-1"
+})(["margin:0;color:", ";font-size:", ";font-weight:", ";line-height:", ";display:block;", ""], theme.color.text.black, theme.fontSize.h4, theme.fontWeight.bold, theme.lineHeight.h4, media.md`
         padding: 1.25rem 0.25rem 0;
         background: linear-gradient(
             ${theme.color.default.black}05 0%,
             ${theme.color.default.black}00 50%,
             ${theme.color.default.black}00 100%),
             ${theme.color.background.white.default};
-    `}
-`;
-const ListsContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    background-color: ${theme.color.background.white.default};
-
-    ${media.md `
+    `);
+const ListsContainer = styled.div.withConfig({
+  displayName: "PriorityNavigation__ListsContainer",
+  componentId: "sc-1fa414d-2"
+})(["display:flex;flex-direction:column;position:relative;background-color:", ";", ""], theme.color.background.white.default, media.md`
         justify-content: space-between;
         flex-direction: row;
         height: 100%;
         align-items: center;
         margin: 0 auto;
-    `}
-`;
-const MobileDropdown = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: ${({ $isCategoryLabel }) => ($isCategoryLabel ? '0.5rem' : '0.75rem')} 1.25rem;
-    color: ${theme.color.text.pink};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.bold};
-    border-bottom: 3px solid ${theme.color.default.pink};
-
-    & svg {
-        pointer-events: none;
-    }
-`;
-const MobileDropdownContent = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: baseline;
-    text-align: left;
-`;
-const CoreULStyles = styled.ul `
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-`;
-const NavigationList = styled(CoreULStyles) `
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    z-index: 1;
-    width: 100%;
-    background-color: ${theme.color.background.white.default};
-    position: absolute;
-    top: ${getMultipliedSize(theme.base.baseHeight, 5.6)};
-    visibility: ${({ $isMobileNavigationOpen }) => $isMobileNavigationOpen ? 'visible' : 'hidden'};
-    clip-path: inset(
-        0% 0% ${({ $isMobileNavigationOpen }) => ($isMobileNavigationOpen ? '0%' : '100%')} 0%
-    );
-    transition: all 0.2s ease-in-out;
-
-    ${media.md `
+    `);
+const MobileDropdown = styled.button.withConfig({
+  displayName: "PriorityNavigation__MobileDropdown",
+  componentId: "sc-1fa414d-3"
+})(["display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:none;border:none;padding:", " 1.25rem;color:", ";font-size:", ";line-height:", ";font-weight:", ";border-bottom:3px solid ", ";& svg{pointer-events:none;}"], ({
+  $isCategoryLabel
+}) => $isCategoryLabel ? '0.5rem' : '0.75rem', theme.color.text.pink, theme.fontSize.default, theme.lineHeight.default, theme.fontWeight.bold, theme.color.default.pink);
+const MobileDropdownContent = styled.div.withConfig({
+  displayName: "PriorityNavigation__MobileDropdownContent",
+  componentId: "sc-1fa414d-4"
+})(["display:flex;flex-direction:column;align-items:baseline;text-align:left;"]);
+const CoreULStyles = styled.ul.withConfig({
+  displayName: "PriorityNavigation__CoreULStyles",
+  componentId: "sc-1fa414d-5"
+})(["list-style:none;margin:0;padding:0;overflow:hidden;"]);
+const NavigationList = styled(CoreULStyles).withConfig({
+  displayName: "PriorityNavigation__NavigationList",
+  componentId: "sc-1fa414d-6"
+})(["display:flex;flex-direction:column;justify-content:flex-start;z-index:1;width:100%;background-color:", ";position:absolute;top:", ";visibility:", ";clip-path:inset( 0% 0% ", " 0% );transition:all 0.2s ease-in-out;", ""], theme.color.background.white.default, getMultipliedSize(theme.base.baseHeight, 5.6), ({
+  $isMobileNavigationOpen
+}) => $isMobileNavigationOpen ? 'visible' : 'hidden', ({
+  $isMobileNavigationOpen
+}) => $isMobileNavigationOpen ? '0%' : '100%', media.md`
         position: static;
         flex-direction: row;
         visibility: visible;
@@ -106,255 +71,268 @@ const NavigationList = styled(CoreULStyles) `
         & > li:first-child {
             margin-left: 0;
         }
-    `}
-`;
-const DropdownList = styled(CoreULStyles) `
-    position: absolute;
-    top: ${getMultipliedSize(theme.base.baseHeight, 6)};
-    right: 0;
-    z-index: 1;
-    padding-bottom: 0.5rem;
-    background-color: ${theme.color.background.white.default};
-    border: 1px solid ${theme.color.line.L04};
-    border-radius: 0 0 ${theme.radius.default} ${theme.radius.default};
-    visibility: ${({ $isDropdownListOpen }) => ($isDropdownListOpen ? 'visible' : 'hidden')};
-    clip-path: inset(
-        0% 0% ${({ $isDropdownListOpen }) => ($isDropdownListOpen ? '0%' : '100%')} 0%
-    );
-    transition: all 0.2s ease-in-out;
-
-    ${media.md `
+    `);
+const DropdownList = styled(CoreULStyles).withConfig({
+  displayName: "PriorityNavigation__DropdownList",
+  componentId: "sc-1fa414d-7"
+})(["position:absolute;top:", ";right:0;z-index:1;padding-bottom:0.5rem;background-color:", ";border:1px solid ", ";border-radius:0 0 ", " ", ";visibility:", ";clip-path:inset( 0% 0% ", " 0% );transition:all 0.2s ease-in-out;", " ", ""], getMultipliedSize(theme.base.baseHeight, 6), theme.color.background.white.default, theme.color.line.L04, theme.radius.default, theme.radius.default, ({
+  $isDropdownListOpen
+}) => $isDropdownListOpen ? 'visible' : 'hidden', ({
+  $isDropdownListOpen
+}) => $isDropdownListOpen ? '0%' : '100%', media.md`
         & > li {
             margin: auto 1.25rem;
         }
-    `}
-
-    ${getElevationShadow({ elevation: 'low' })}
-`;
+    `, getElevationShadow({
+  elevation: 'low'
+}));
 /**
  * TODO: Replace the VisuallyHidden styled component with the global class name.
  * Ticket: https://jira.dna.fi/browse/STYLE-916
  */
-const VisuallyHidden = styled.span `
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-`;
+const VisuallyHidden = styled.span.withConfig({
+  displayName: "PriorityNavigation__VisuallyHidden",
+  componentId: "sc-1fa414d-8"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;"]);
 const reducer = (state, action) => {
-    var _a, _b;
-    switch (action.type) {
-        case 'resetNavigationState': {
-            const navigationItems = Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
-            return Object.assign(Object.assign({}, state), { navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length), dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length) });
-        }
-        case 'moveItemToDropdown': {
-            const lastChild = state.navigationItems[state.navigationItems.length - 1];
-            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
-                lastItemWidth: [
-                    ...state.lastItemWidth,
-                    action.payload.lastItem.offsetWidth + 40,
-                ],
-            }));
+  var _a, _b;
+  switch (action.type) {
+    case 'resetNavigationState':
+      {
+        const navigationItems = Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
+        return Object.assign(Object.assign({}, state), {
+          navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length),
+          dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length)
+        });
+      }
+    case 'moveItemToDropdown':
+      {
+        const lastChild = state.navigationItems[state.navigationItems.length - 1];
+        return Object.assign(Object.assign(Object.assign({}, state), {
+          navigationItems: state.navigationItems.slice(0, -1),
+          dropdownItems: [lastChild, ...state.dropdownItems]
+        }), ((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
+          lastItemWidth: [...state.lastItemWidth, action.payload.lastItem.offsetWidth + 40]
+        });
+      }
+    case 'moveItemToNavigation':
+      {
+        const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
+        const [, ...lastItemWidth] = state.lastItemWidth;
+        return {
+          navigationItems: [...state.navigationItems, firstItemFromList],
+          dropdownItems,
+          lastItemWidth
+        };
+      }
+    default:
+      return state;
+  }
+};
+const getReactNodeText = reactNode => {
+  if (reactNode === null) {
+    return '';
+  }
+  switch (typeof reactNode) {
+    case 'string':
+    case 'number':
+      return reactNode.toString();
+    case 'boolean':
+      return '';
+    case 'object':
+      {
+        if (reactNode instanceof Array) {
+          return reactNode.map(getReactNodeText).join('');
         }
-        case 'moveItemToNavigation': {
-            const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
-            const [, ...lastItemWidth] = state.lastItemWidth;
-            return {
-                navigationItems: [...state.navigationItems, firstItemFromList],
-                dropdownItems,
-                lastItemWidth,
-            };
+        if ('props' in reactNode) {
+          // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
+          // eslint-disable-next-line
+          return getReactNodeText(reactNode.props.children);
         }
-        default:
-            return state;
-    }
-};
-const getReactNodeText = (reactNode) => {
-    if (reactNode === null) {
         return '';
-    }
-    switch (typeof reactNode) {
-        case 'string':
-        case 'number':
-            return reactNode.toString();
-        case 'boolean':
-            return '';
-        case 'object': {
-            if (reactNode instanceof Array) {
-                return reactNode.map(getReactNodeText).join('');
-            }
-            if ('props' in reactNode) {
-                // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
-                // eslint-disable-next-line
-                return getReactNodeText(reactNode.props.children);
-            }
-            return '';
-        }
-        default:
-            return '';
-    }
+      }
+    default:
+      return '';
+  }
 };
 /**
  * @visibleName Priority Navigation
  */
-const PriorityNavigation = (_a) => {
-    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId, mobileDropdownAriaLabel, currentPageAriaLabel, openMoreSubpagesAriaLabel } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid', "mobileDropdownAriaLabel", "currentPageAriaLabel", "openMoreSubpagesAriaLabel"]);
-    const listsContainerRef = useRef(null);
-    const navigationListRef = useRef(null);
-    const dropdownButtonRef = useRef(null);
-    const categoryId = useId();
-    const { isMobile } = useWindowSize(theme.breakpoints.md);
-    const { width: wrapperContainerWidth } = useResizeObserver(listsContainerRef);
-    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
-    const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
-    const [isDropdownListOpen, setIsDropdownListOpen] = useState(false);
-    const toggleDropdown = () => {
-        if (props.onDropdownListToggle) {
-            props.onDropdownListToggle(!isDropdownListOpen);
-        }
-        setIsDropdownListOpen(!isDropdownListOpen);
-    };
-    const navigationItems = useRef(new Map()).current;
-    const initialState = {
-        navigationItems: Children.toArray(props.children),
-        dropdownItems: [],
-        lastItemWidth: [],
-    };
-    const [state, dispatch] = useReducer(reducer, initialState);
-    const checkHorizontalOverflow = useDebounce(() => {
-        var _a, _b;
-        if (navigationListRef.current && listsContainerRef.current) {
-            const navigationListWidth = navigationListRef.current.scrollWidth;
-            const dropdownButtonWidth = ((_b = (_a = dropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 80) + 20;
-            if (state.navigationItems.length > 0 &&
-                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
-                dispatch({
-                    type: 'moveItemToDropdown',
-                    payload: {
-                        lastItem: navigationItems.get(state.navigationItems.length - 1),
-                    },
-                });
-            }
-            else if (state.dropdownItems.length > 0 &&
-                wrapperContainerWidth >
-                    navigationListWidth +
-                        state.lastItemWidth[state.lastItemWidth.length - 1] +
-                        dropdownButtonWidth +
-                        20) {
-                dispatch({
-                    type: 'moveItemToNavigation',
-                });
-            }
-        }
-    }, 100);
-    const activeItem = [...state.navigationItems, ...state.dropdownItems].find(child => isValidElement(child) &&
-        child.type === PriorityNavigationItem &&
-        child.props.isActive);
-    const selectedItem = isMobile
-        ? getReactNodeText(activeItem === null || activeItem === void 0 ? void 0 : activeItem.props.children) ||
-            ''
-        : props.categoryLabel;
-    useOutsideClick(listsContainerRef, () => {
-        if (isMobileNavigationOpen) {
-            setIsMobileNavigationOpen(false);
-        }
-        if (isDropdownListOpen) {
-            if (props.onDropdownListToggle) {
-                props.onDropdownListToggle(false);
-            }
-            setIsDropdownListOpen(false);
-        }
-    });
-    useEffect(() => {
-        if (!isMobile) {
-            requestAnimationFrame(() => {
-                dispatch({
-                    type: 'resetNavigationState',
-                    payload: {
-                        navigationItems: props.children,
-                    },
-                });
-                setTimeout(() => {
-                    checkHorizontalOverflow();
-                }, 0);
-            });
-        }
-        setIsMobileNavigationOpen(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isMobile, props.children]);
-    useLayoutEffect(() => {
-        if (!isMobile) {
-            requestAnimationFrame(() => {
-                checkHorizontalOverflow();
-            });
-        }
-    }, [
-        isMobile,
-        wrapperContainerWidth,
-        state.navigationItems.length,
-        state.dropdownItems.length,
-        checkHorizontalOverflow,
-    ]);
-    const handleNavigationListKeyDown = useCallback((e) => {
-        var _a, _b;
-        if (isMobile && isMobileNavigationOpen && e.key === 'Tab') {
-            const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
-            const lastElement = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
-            const goingForward = !e.shiftKey;
-            if (goingForward && document.activeElement === lastElement) {
-                e.preventDefault();
-                setIsMobileNavigationOpen(false);
-                (_b = dropdownButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-        }
-    }, [isMobile, isMobileNavigationOpen]);
-    const handleItemClick = (e) => {
+const PriorityNavigation = _a => {
+  var {
+      dropdownButtonLabel = 'Lisää',
+      'data-testid': dataTestId,
+      mobileDropdownAriaLabel,
+      currentPageAriaLabel,
+      openMoreSubpagesAriaLabel
+    } = _a,
+    props = __rest(_a, ["dropdownButtonLabel", 'data-testid', "mobileDropdownAriaLabel", "currentPageAriaLabel", "openMoreSubpagesAriaLabel"]);
+  const listsContainerRef = useRef(null);
+  const navigationListRef = useRef(null);
+  const dropdownButtonRef = useRef(null);
+  const categoryId = useId();
+  const {
+    isMobile
+  } = useWindowSize(theme.breakpoints.md);
+  const {
+    width: wrapperContainerWidth
+  } = useResizeObserver(listsContainerRef);
+  const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
+  const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
+  const [isDropdownListOpen, setIsDropdownListOpen] = useState(false);
+  const toggleDropdown = () => {
+    if (props.onDropdownListToggle) {
+      props.onDropdownListToggle(!isDropdownListOpen);
+    }
+    setIsDropdownListOpen(!isDropdownListOpen);
+  };
+  const navigationItems = useRef(new Map()).current;
+  const initialState = {
+    navigationItems: Children.toArray(props.children),
+    dropdownItems: [],
+    lastItemWidth: []
+  };
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const checkHorizontalOverflow = useDebounce(() => {
+    var _a, _b;
+    if (navigationListRef.current && listsContainerRef.current) {
+      const navigationListWidth = navigationListRef.current.scrollWidth;
+      const dropdownButtonWidth = ((_b = (_a = dropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 80) + 20;
+      if (state.navigationItems.length > 0 && navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
+        dispatch({
+          type: 'moveItemToDropdown',
+          payload: {
+            lastItem: navigationItems.get(state.navigationItems.length - 1)
+          }
+        });
+      } else if (state.dropdownItems.length > 0 && wrapperContainerWidth > navigationListWidth + state.lastItemWidth[state.lastItemWidth.length - 1] + dropdownButtonWidth + 20) {
+        dispatch({
+          type: 'moveItemToNavigation'
+        });
+      }
+    }
+  }, 100);
+  const activeItem = [...state.navigationItems, ...state.dropdownItems].find(child => /*#__PURE__*/isValidElement(child) && child.type === PriorityNavigationItem && child.props.isActive);
+  const selectedItem = isMobile ? getReactNodeText(activeItem === null || activeItem === void 0 ? void 0 : activeItem.props.children) || '' : props.categoryLabel;
+  useOutsideClick(listsContainerRef, () => {
+    if (isMobileNavigationOpen) {
+      setIsMobileNavigationOpen(false);
+    }
+    if (isDropdownListOpen) {
+      if (props.onDropdownListToggle) {
+        props.onDropdownListToggle(false);
+      }
+      setIsDropdownListOpen(false);
+    }
+  });
+  useEffect(() => {
+    if (!isMobile) {
+      requestAnimationFrame(() => {
+        dispatch({
+          type: 'resetNavigationState',
+          payload: {
+            navigationItems: props.children
+          }
+        });
+        setTimeout(() => {
+          checkHorizontalOverflow();
+        }, 0);
+      });
+    }
+    setIsMobileNavigationOpen(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMobile, props.children]);
+  useLayoutEffect(() => {
+    if (!isMobile) {
+      requestAnimationFrame(() => {
+        checkHorizontalOverflow();
+      });
+    }
+  }, [isMobile, wrapperContainerWidth, state.navigationItems.length, state.dropdownItems.length, checkHorizontalOverflow]);
+  const handleNavigationListKeyDown = useCallback(e => {
+    var _a, _b;
+    if (isMobile && isMobileNavigationOpen && e.key === 'Tab') {
+      const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
+      const lastElement = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
+      const goingForward = !e.shiftKey;
+      if (goingForward && document.activeElement === lastElement) {
+        e.preventDefault();
         setIsMobileNavigationOpen(false);
-        if (props.onClick) {
-            props.onClick(e);
+        (_b = dropdownButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+    }
+  }, [isMobile, isMobileNavigationOpen]);
+  const handleItemClick = e => {
+    setIsMobileNavigationOpen(false);
+    if (props.onClick) {
+      props.onClick(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Container, {
+    id: props.id,
+    className: props.className,
+    "data-testid": dataTestId
+  }, !isMobile && props.categoryLabel && (/*#__PURE__*/React__default.createElement(Category, {
+    id: categoryId
+  }, props.categoryLabel)), /*#__PURE__*/React__default.createElement("nav", {
+    "aria-labelledby": categoryId
+  }, /*#__PURE__*/React__default.createElement(ListsContainer, {
+    ref: listsContainerRef
+  }, isMobile && selectedItem && (/*#__PURE__*/React__default.createElement(MobileDropdown, {
+    onClick: toggleMobileNavigation,
+    "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`,
+    "aria-expanded": isMobileNavigationOpen,
+    "$isCategoryLabel": Boolean(props.categoryLabel)
+  }, /*#__PURE__*/React__default.createElement(MobileDropdownContent, null, props.categoryLabel && /*#__PURE__*/React__default.createElement(Category, null, props.categoryLabel), selectedItem), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: isMobileNavigationOpen ? OvalChevronUp : OvalChevronDown,
+    size: "2.5rem"
+  }))), /*#__PURE__*/React__default.createElement(NavigationList, {
+    ref: navigationListRef,
+    "$isMobileNavigationOpen": isMobileNavigationOpen,
+    onKeyDown: handleNavigationListKeyDown
+  }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
+    if (/*#__PURE__*/isValidElement(navigationItem) && navigationItem.type === PriorityNavigationItem) {
+      return /*#__PURE__*/React__default.createElement(PriorityNavigationItem, {
+        id: navigationItem.props.id,
+        key: navigationItem.key,
+        onClick: handleItemClick,
+        onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown,
+        isActive: navigationItem.props.isActive,
+        className: navigationItem.props.className,
+        "data-testid": navigationItem.props['data-testid'],
+        ref: instance => {
+          if (instance) {
+            navigationItems.set(index, instance);
+          }
         }
-    };
-    return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        !isMobile && props.categoryLabel && (React__default.createElement(Category, { id: categoryId }, props.categoryLabel)),
-        React__default.createElement("nav", { "aria-labelledby": categoryId },
-            React__default.createElement(ListsContainer, { ref: listsContainerRef },
-                isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`, "aria-expanded": isMobileNavigationOpen, "$isCategoryLabel": Boolean(props.categoryLabel) },
-                    React__default.createElement(MobileDropdownContent, null,
-                        props.categoryLabel && React__default.createElement(Category, null, props.categoryLabel),
-                        selectedItem),
-                    React__default.createElement(Icon, { icon: isMobileNavigationOpen ? OvalChevronUp : OvalChevronDown, size: "2.5rem" }))),
-                React__default.createElement(NavigationList, { ref: navigationListRef, "$isMobileNavigationOpen": isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
-                    if (isValidElement(navigationItem) &&
-                        navigationItem.type === PriorityNavigationItem) {
-                        return (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: handleItemClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], ref: instance => {
-                                if (instance) {
-                                    navigationItems.set(index, instance);
-                                }
-                            } },
-                            navigationItem.props.isActive
-                                ? cloneElement(navigationItem.props.children, {
-                                    'aria-current': 'page',
-                                })
-                                : navigationItem.props.children,
-                            navigationItem.props.isActive && isMobile && (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement(Icon, { icon: Check, "aria-hidden": true, color: theme.color.default.pink }),
-                                React__default.createElement(VisuallyHidden, null, currentPageAriaLabel)))));
-                    }
-                    return null;
-                })),
-                !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", null,
-                        React__default.createElement(ButtonIcon, { ref: dropdownButtonRef, ariaLabel: openMoreSubpagesAriaLabel, ariaExpanded: isDropdownListOpen, onClick: toggleDropdown, icon: isDropdownListOpen ? ChevronUp : ChevronDown, isReversed: true, "data-testid": "dropdown-button" }, dropdownButtonLabel)),
-                    isDropdownListOpen && (React__default.createElement(DropdownList, { "$isDropdownListOpen": isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
-                        dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown ||
-                            props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))))));
+      }, navigationItem.props.isActive ? /*#__PURE__*/cloneElement(navigationItem.props.children, {
+        'aria-current': 'page'
+      }) : navigationItem.props.children, navigationItem.props.isActive && isMobile && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
+        icon: Check,
+        "aria-hidden": true,
+        color: theme.color.default.pink
+      }), /*#__PURE__*/React__default.createElement(VisuallyHidden, null, currentPageAriaLabel))));
+    }
+    return null;
+  })), !isMobile && Boolean(state.dropdownItems.length) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ButtonIcon, {
+    ref: dropdownButtonRef,
+    ariaLabel: openMoreSubpagesAriaLabel,
+    ariaExpanded: isDropdownListOpen,
+    onClick: toggleDropdown,
+    icon: isDropdownListOpen ? ChevronUp : ChevronDown,
+    isReversed: true,
+    "data-testid": "dropdown-button"
+  }, dropdownButtonLabel)), isDropdownListOpen && (/*#__PURE__*/React__default.createElement(DropdownList, {
+    "$isDropdownListOpen": isDropdownListOpen
+  }, state.dropdownItems.map(dropdownItem => /*#__PURE__*/isValidElement(dropdownItem) && dropdownItem.type === PriorityNavigationItem && (/*#__PURE__*/React__default.createElement(PriorityNavigationItem, {
+    id: dropdownItem.props.id,
+    key: dropdownItem.key,
+    onClick: dropdownItem.props.onClick || props.onClick,
+    onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown,
+    isActive: dropdownItem.props.isActive,
+    className: dropdownItem.props.className,
+    "data-testid": dropdownItem.props['data-testid']
+  }, dropdownItem.props.children))))))))));
 };
 
 export { PriorityNavigation as default };