@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/components/Drawer/DrawerGroup.js

@@ -0,0 +1,61 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, Children, isValidElement, cloneElement } from 'react';
+
+var nextUniqueId = 0;
+var DrawerGroup = function DrawerGroup(_ref) {
+  var children = _ref.children,
+      drawerId = _ref.drawerId,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose;
+  var uniqueId = nextUniqueId++;
+
+  var _useState = useState(drawerId !== null && drawerId !== void 0 ? drawerId : "drawer-".concat(uniqueId)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueDrawerId = _useState2[0];
+
+  var buttonRef = useRef(null);
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      closed = _useState4[0],
+      setClosed = _useState4[1];
+
+  var open = function open() {
+    return setClosed(false);
+  };
+
+  var close = function close() {
+    return setClosed(true);
+  };
+
+  var handleOpen = function handleOpen() {
+    open();
+    onOpen && onOpen();
+  };
+
+  var handleClose = function handleClose() {
+    close();
+    onClose && onClose();
+  };
+
+  var Children$1 = Children.map(children, function (child, childIndex) {
+    return /*#__PURE__*/isValidElement(child) && (childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
+      'aria-haspopup': 'dialog',
+      'aria-controls': uniqueDrawerId,
+      'aria-expanded': !closed,
+      ref: buttonRef,
+      onClick: handleOpen
+    }) : /*#__PURE__*/cloneElement(child, {
+      id: uniqueDrawerId,
+      triggerRef: buttonRef,
+      isOpen: !closed,
+      onClose: handleClose
+    }));
+  });
+  return jsxs(Fragment, {
+    children: [" ", Children$1, " "]
+  });
+};
+
+export { DrawerGroup };

package/dist/components/GlobalMessage/GlobalMessage.js

@@ -0,0 +1,85 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { forwardRef, useState } from 'react';
+import { globalMessageTokens } from './GlobalMessage.tokens.js';
+import { Button } from '../Button/Button.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Container = styled.div.withConfig({
+  displayName: "GlobalMessage__Container",
+  componentId: "sc-bf2l65-0"
+})(["display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;", ""], function (_ref) {
+  var purpose = _ref.purpose;
+  return purpose && css(["", " ", ""], globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
+});
+var MessageIconWrapper = styled(IconWrapper).withConfig({
+  displayName: "GlobalMessage__MessageIconWrapper",
+  componentId: "sc-bf2l65-1"
+})(["margin-right:", ";"], globalMessageTokens.icon.marginRight);
+var ControlsContainer = styled.div.withConfig({
+  displayName: "GlobalMessage__ControlsContainer",
+  componentId: "sc-bf2l65-2"
+})(["display:flex;align-items:center;"]);
+var ContentContainer = styled.div.withConfig({
+  displayName: "GlobalMessage__ContentContainer",
+  componentId: "sc-bf2l65-3"
+})(["display:flex;align-items:center;", " ", ""], globalMessageTokens.contentContainer.base, function (_ref2) {
+  var closable = _ref2.closable;
+  return closable && css(["", ""], globalMessageTokens.contentContainer.withClosable.base);
+});
+var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var message = props.message,
+      _props$purpose = props.purpose,
+      purpose = _props$purpose === void 0 ? 'info' : _props$purpose,
+      closable = props.closable,
+      onClose = props.onClose,
+      children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["message", "purpose", "closable", "onClose", "children", "id", "className", "htmlProps"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isClosed = _useState2[0],
+      setClosed = _useState2[1];
+
+  var buttonPurpose = globalMessageTokens.button[purpose].purpose;
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref,
+    purpose: purpose
+  });
+  return !isClosed ? jsxs(Container, Object.assign({}, containerProps, {
+    children: [jsxs(ContentContainer, Object.assign({
+      closable: closable
+    }, {
+      children: [jsx(MessageIconWrapper, {
+        Icon: globalMessageTokens.icon[purpose].icon,
+        color: globalMessageTokens.icon[purpose].color
+      }), children !== null && children !== void 0 ? children : jsx(Typography, Object.assign({
+        as: "span"
+      }, {
+        children: message
+      }))]
+    })), jsx(ControlsContainer, {
+      children: closable && jsx(Button, {
+        Icon: CloseOutlinedIcon,
+        purpose: buttonPurpose,
+        appearance: "borderless",
+        onClick: function onClick() {
+          setClosed(true);
+          onClose && onClose();
+        },
+        size: "small",
+        "aria-label": "Lukk melding"
+      })
+    })]
+  })) : null;
+});
+
+export { GlobalMessage };

package/dist/components/GlobalMessage/GlobalMessage.tokens.js

@@ -0,0 +1,83 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import WarningOutlinedIcon from '@mui/icons-material/ReportOutlined';
+import DangerOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages;
+var containerBase = Object.assign(Object.assign({
+  borderBottom: '2px solid',
+  padding: "0 ".concat(Spacing.SizesDdsSpacingLocalX1),
+  width: '100%'
+}, FontPackages.body_sans_02.base), {
+  color: Colors.DdsColorNeutralsGray8
+});
+var contentContainerBase = {
+  paddingRight: Spacing.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing.SizesDdsSpacingLocalX075
+};
+var contentContainerWithClosableBase = {
+  paddingRight: Spacing.SizesDdsSpacingLocalX075
+};
+var containerInfoBase = {
+  borderColor: Colors.DdsColorInfoLighter,
+  backgroundColor: Colors.DdsColorInfoLightest
+};
+var containerDangerBase = {
+  borderColor: Colors.DdsColorDangerLighter,
+  backgroundColor: Colors.DdsColorDangerLightest
+};
+var containerWarningBase = {
+  borderColor: Colors.DdsColorWarningLighter,
+  backgroundColor: Colors.DdsColorWarningLightest
+};
+var globalMessageTokens = {
+  container: {
+    base: containerBase,
+    info: {
+      base: containerInfoBase
+    },
+    danger: {
+      base: containerDangerBase
+    },
+    warning: {
+      base: containerWarningBase
+    }
+  },
+  contentContainer: {
+    base: contentContainerBase,
+    withClosable: {
+      base: contentContainerWithClosableBase
+    }
+  },
+  icon: {
+    marginRight: "".concat(Spacing.SizesDdsSpacingLocalX075),
+    info: {
+      icon: InfoOutlinedIcon,
+      color: Colors.DdsColorInfoDarkest
+    },
+    danger: {
+      icon: DangerOutlinedIcon,
+      color: Colors.DdsColorDangerDarkest
+    },
+    warning: {
+      icon: WarningOutlinedIcon,
+      color: Colors.DdsColorWarningDarkest
+    }
+  },
+  button: {
+    info: {
+      purpose: 'secondary'
+    },
+    danger: {
+      purpose: 'danger'
+    },
+    warning: {
+      purpose: 'secondary'
+    }
+  }
+};
+
+export { globalMessageTokens };

package/dist/components/IconWrapper/IconWrapper.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var getSize = function getSize(iconSize) {
+  switch (iconSize) {
+    case 'small':
+      return ddsBaseTokens.iconSizes.DdsIconsizeSmall;
+
+    case 'medium':
+      return ddsBaseTokens.iconSizes.DdsIconsizeMedium;
+
+    case 'large':
+      return ddsBaseTokens.iconSizes.DdsIconsizeLarge;
+
+    case 'inline':
+      return '1em';
+
+    default:
+      return ddsBaseTokens.iconSizes.DdsIconsizeMedium;
+  }
+};
+
+function IconWrapper(_ref) {
+  var Icon = _ref.Icon,
+      _ref$iconSize = _ref.iconSize,
+      iconSize = _ref$iconSize === void 0 ? 'medium' : _ref$iconSize,
+      color = _ref.color,
+      className = _ref.className,
+      style = _ref.style,
+      svgProps = _ref.svgProps;
+  var PropIcon = Icon;
+  var size = getSize(iconSize);
+  return jsx(PropIcon, Object.assign({}, svgProps, {
+    className: className,
+    style: Object.assign(Object.assign({}, style), {
+      color: color ? color : 'inherit',
+      fontSize: size
+    })
+  }));
+}
+
+export { IconWrapper };

package/dist/components/InputMessage/InputMessage.js

@@ -0,0 +1,46 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import DangerOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
+import { inputMessageTokens } from './InputMessage.tokens.js';
+import { forwardRef } from 'react';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Typography } from '../Typography/Typography.js';
+
+var InputMessageWrapper = styled.div.withConfig({
+  displayName: "InputMessage__InputMessageWrapper",
+  componentId: "sc-c954fy-0"
+})(["display:flex;align-items:center;width:fit-content;word-break:break-word;", " ", " svg{margin-right:", ";position:relative;}"], inputMessageTokens.base, function (_ref) {
+  var messageType = _ref.messageType;
+  return messageType && css(["", ""], inputMessageTokens[messageType].base);
+}, inputMessageTokens.icon.spaceRight);
+var InputMessage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var message = props.message,
+      messageType = props.messageType,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["message", "messageType", "id", "className", "htmlProps"]);
+
+  var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref,
+    messageType: messageType
+  });
+  var isError = messageType === 'error';
+  return jsxs(InputMessageWrapper, Object.assign({}, wrapperProps, {
+    children: [isError && jsx(IconWrapper, {
+      Icon: DangerOutlinedIcon,
+      iconSize: "inline"
+    }), jsx(Typography, Object.assign({
+      typographyType: isError ? 'supportingStyleLabel01' : 'supportingStyleHelperText01',
+      as: "span",
+      bold: isError ? true : undefined,
+      color: isError ? inputMessageTokens.error.base.color : undefined
+    }, {
+      children: message
+    }))]
+  }));
+});
+
+export { InputMessage };

package/dist/components/InputMessage/InputMessage.tokens.js

@@ -0,0 +1,30 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing;
+var base = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX05),
+  maxWidth: '100%'
+};
+var tipBase = {
+  backgroundColor: Colors.DdsColorNeutralsWhite
+};
+var errorBase = {
+  color: Colors.DdsColorDangerBase,
+  backgroundColor: Colors.DdsColorDangerLightest
+};
+var inputMessageTokens = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX05),
+  base: base,
+  tip: {
+    base: tipBase
+  },
+  error: {
+    base: errorBase
+  },
+  icon: {
+    spaceRight: Spacing.SizesDdsSpacingLocalX05
+  }
+};
+
+export { inputMessageTokens };

package/dist/components/InternalHeader/InternalHeader.js

@@ -0,0 +1,122 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import MoreVertOutlinedIcon from '@mui/icons-material/MoreVertOutlined';
+import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
+import { Navigation, NavigationList, Wrapper, BannerWrapper, BannerLeftWrapper, LovisaWrapper, ApplicationNameWrapper, ContextMenuGroup, StyledOverflowMenu } from './InternalHeader.styles.js';
+import { NavigationItem } from './NavigationItem.js';
+import { InternalHeaderListItem } from './InternalHeaderListItem.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+import { Button } from '../Button/Button.js';
+
+var InternalHeader = function InternalHeader(props) {
+  var applicationName = props.applicationName,
+      smallScreen = props.smallScreen,
+      navigationElements = props.navigationElements,
+      contextMenuElements = props.contextMenuElements,
+      currentPageHref = props.currentPageHref,
+      userProps = props.userProps,
+      onCurrentPageChange = props.onCurrentPageChange,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "className", "htmlProps"]);
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      contextMenuIsClosed = _useState2[0],
+      setContextMenuIsClosed = _useState2[1];
+
+  var _useState3 = useState(currentPageHref),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentPage = _useState4[0],
+      setCurrentPage = _useState4[1];
+
+  var buttonRef = useRef(null);
+
+  var handleCurrentPageChange = function handleCurrentPageChange(href) {
+    setCurrentPage(href);
+    onCurrentPageChange && onCurrentPageChange();
+  };
+
+  var handleContextMenuClick = function handleContextMenuClick() {
+    setContextMenuIsClosed(!contextMenuIsClosed);
+  };
+
+  var onOveflowMenuClose = function onOveflowMenuClose() {
+    return setContextMenuIsClosed(true);
+  };
+
+  var hasNavigationElements = !!navigationElements && navigationElements.length > 0;
+  var hasContextMenuElements = !!contextMenuElements && contextMenuElements.length > 0;
+  var hasNavInContextMenu = smallScreen && hasNavigationElements;
+  var navigation = hasNavigationElements && !smallScreen ? jsx(Navigation, Object.assign({
+    "aria-label": "sidenavigasjon"
+  }, {
+    children: jsx(NavigationList, {
+      children: navigationElements.map(function (item, index) {
+        var href = item.href,
+            rest = __rest(item, ["href"]);
+
+        var isCurrent = href === currentPage;
+        return jsx(InternalHeaderListItem, {
+          children: jsx(NavigationItem, Object.assign({
+            href: href
+          }, rest, {
+            isCurrent: isCurrent,
+            onClick: function onClick() {
+              return handleCurrentPageChange(href);
+            }
+          }))
+        }, index);
+      })
+    })
+  })) : null;
+  var hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
+  return jsxs(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: [jsx(BannerWrapper, Object.assign({
+      hasContextMenu: hasContextMenu
+    }, {
+      children: jsxs(BannerLeftWrapper, {
+        children: [jsx(LovisaWrapper, {
+          children: jsx(Typography, Object.assign({
+            typographyType: "bodySans02",
+            bold: true,
+            as: "span"
+          }, {
+            children: "Lovisa Next"
+          }))
+        }), jsx(ApplicationNameWrapper, {
+          children: jsx(Typography, Object.assign({
+            typographyType: "bodySans02",
+            as: "span"
+          }, {
+            children: applicationName
+          }))
+        })]
+      })
+    })), navigation, hasContextMenu && jsxs(ContextMenuGroup, {
+      children: [jsx(Button, {
+        ref: buttonRef,
+        Icon: hasNavInContextMenu ? MenuOutlinedIcon : MoreVertOutlinedIcon,
+        appearance: "borderless",
+        purpose: "secondary",
+        onClick: handleContextMenuClick,
+        "aria-haspopup": "menu",
+        "aria-expanded": !contextMenuIsClosed ? true : undefined,
+        "aria-label": "\xE5pne meny"
+      }), jsx(StyledOverflowMenu, {
+        isOpen: !contextMenuIsClosed,
+        onClose: onOveflowMenuClose,
+        anchorRef: buttonRef,
+        navItems: hasNavInContextMenu ? navigationElements : undefined,
+        items: hasContextMenuElements ? contextMenuElements : undefined,
+        userProps: userProps
+      })]
+    })]
+  }));
+};
+
+export { InternalHeader };

package/dist/components/InternalHeader/InternalHeader.styles.js

@@ -0,0 +1,49 @@
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import styled, { css } from 'styled-components';
+import { internalHeaderTokens } from './InternalHeader.tokens.js';
+import { OverflowMenu } from '../OverflowMenu/OverflowMenu.js';
+
+var Wrapper = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__Wrapper",
+  componentId: "sc-91bnca-0"
+})(["position:relative;*::selection{", "}", ""], typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
+var BannerWrapper = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__BannerWrapper",
+  componentId: "sc-91bnca-1"
+})(["position:relative;display:flex;align-items:center;", " ", ""], internalHeaderTokens.banner.base, function (_ref) {
+  var hasContextMenu = _ref.hasContextMenu;
+  return hasContextMenu && css(["padding-right:", ";"], internalHeaderTokens.banner.contextMenuSpacing);
+});
+var BannerLeftWrapper = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__BannerLeftWrapper",
+  componentId: "sc-91bnca-2"
+})(["display:flex;", ""], internalHeaderTokens.bannerLeft.base);
+var ApplicationNameWrapper = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__ApplicationNameWrapper",
+  componentId: "sc-91bnca-3"
+})(["display:flex;align-items:center;", ""], internalHeaderTokens.applicationNameWrapper.base);
+var LovisaWrapper = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__LovisaWrapper",
+  componentId: "sc-91bnca-4"
+})(["", ""], internalHeaderTokens.lovisaWrapper.base);
+var Navigation = styled.nav.withConfig({
+  displayName: "InternalHeaderstyles__Navigation",
+  componentId: "sc-91bnca-5"
+})(["", ""], internalHeaderTokens.navigation.base);
+var NavigationList = styled.ul.withConfig({
+  displayName: "InternalHeaderstyles__NavigationList",
+  componentId: "sc-91bnca-6"
+})(["box-sizing:border-box;display:flex;", " list-style-type:none;padding:0;margin:0;"], function (_ref2) {
+  var smallScreen = _ref2.smallScreen;
+  return smallScreen && css(["flex-direction:column;"]);
+});
+var ContextMenuGroup = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__ContextMenuGroup",
+  componentId: "sc-91bnca-7"
+})(["position:absolute;", ""], internalHeaderTokens.contextGroup.base);
+var StyledOverflowMenu = styled(OverflowMenu).withConfig({
+  displayName: "InternalHeaderstyles__StyledOverflowMenu",
+  componentId: "sc-91bnca-8"
+})(["max-height:calc(100vh - 110px);"]);
+
+export { ApplicationNameWrapper, BannerLeftWrapper, BannerWrapper, ContextMenuGroup, LovisaWrapper, Navigation, NavigationList, StyledOverflowMenu, Wrapper };

package/dist/components/InternalHeader/InternalHeader.tokens.js

@@ -0,0 +1,93 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
+
+var Border = ddsBaseTokens.border,
+    Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages;
+var borderColor = Border.BordersDdsBorderStyleLightStroke;
+var linkBase = Object.assign({
+  color: Colors.DdsColorNeutralsGray9,
+  textDecoration: 'none',
+  backgroundColor: Colors.DdsColorNeutralsWhite
+}, FontPackages.body_sans_01.base);
+var linkHoverBase = {
+  color: Colors.DdsColorInteractiveDark,
+  backgroundColor: Colors.DdsColorPrimaryLightest
+};
+var linkActiveBase = {
+  color: Colors.DdsColorInteractiveBase
+};
+var wrapperBase = {
+  backgroundColor: Colors.DdsColorNeutralsWhite
+};
+var applicationNameWrapperBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+};
+var lovisaWrapperBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15),
+  borderRight: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid ")
+};
+var bannerBase = {
+  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid "),
+  paddingRight: Spacing.SizesDdsSpacingLocalX1
+};
+var bannerLeftBase = {};
+var navigationBase = {
+  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid ")
+};
+var navigationLinkBase = Object.assign({
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+}, linkBase);
+var navigationLinkHoverBase = Object.assign({}, linkHoverBase);
+var navigationLinkActiveBase = Object.assign({}, linkActiveBase);
+var navigationLinkFocusBase = Object.assign({}, focusVisibleLink);
+var navigationLinkCurrentBase = {
+  color: Colors.DdsColorInteractiveDarker,
+  backgroundColor: Colors.DdsColorPrimaryLightest
+};
+var contextGroupBase = {
+  right: Spacing.SizesDdsSpacingLocalX075,
+  top: Spacing.SizesDdsSpacingLocalX025
+};
+var internalHeaderTokens = {
+  wrapper: {
+    base: wrapperBase
+  },
+  applicationNameWrapper: {
+    base: applicationNameWrapperBase
+  },
+  lovisaWrapper: {
+    base: lovisaWrapperBase
+  },
+  banner: {
+    base: bannerBase,
+    contextMenuSpacing: Spacing.SizesDdsSpacingLayoutX4
+  },
+  bannerLeft: {
+    base: bannerLeftBase
+  },
+  navigation: {
+    base: navigationBase
+  },
+  navigationLink: {
+    base: navigationLinkBase,
+    hover: {
+      base: navigationLinkHoverBase
+    },
+    active: {
+      base: navigationLinkActiveBase
+    },
+    focus: {
+      base: navigationLinkFocusBase
+    },
+    current: {
+      base: navigationLinkCurrentBase
+    }
+  },
+  contextGroup: {
+    base: contextGroupBase
+  }
+};
+
+export { internalHeaderTokens };

package/dist/components/InternalHeader/InternalHeaderListItem.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+var Li = styled.li.withConfig({
+  displayName: "InternalHeaderListItem__Li",
+  componentId: "sc-g1dd6e-0"
+})(["box-sizing:border-box;"]);
+var InternalHeaderListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var props = Object.assign({
+    ref: ref
+  }, rest);
+  return jsx(Li, Object.assign({}, props, {
+    children: children
+  }));
+});
+
+export { InternalHeaderListItem };

package/dist/components/InternalHeader/NavigationItem.js

@@ -0,0 +1,30 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { internalHeaderTokens } from './InternalHeader.tokens.js';
+
+var Link = styled.a.withConfig({
+  displayName: "NavigationItem__Link",
+  componentId: "sc-1fua9kw-0"
+})(["display:flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}height:100%;box-sizing:border-box;", " &:hover{", "}&:active{", "}&:focus-visible,&.focus-visible{", "}", ""], internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_ref) {
+  var isCurrent = _ref.isCurrent;
+  return isCurrent && css(["", ""], internalHeaderTokens.navigationLink.current.base);
+});
+var NavigationItem = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var title = _a.title,
+      isCurrent = _a.isCurrent,
+      rest = __rest(_a, ["title", "isCurrent"]);
+
+  var linkProps = Object.assign({
+    ref: ref,
+    isCurrent: isCurrent
+  }, rest);
+  return jsx(Link, Object.assign({}, linkProps, {
+    "aria-current": isCurrent ? 'page' : undefined
+  }, {
+    children: title
+  }));
+});
+
+export { Link, NavigationItem };