@norges-domstoler/dds-components 5.2.0-beta.2 → 5.3.1

package/dist/components/Card/CardAccordion/CardAccordion.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, useState, useId, useEffect, Children, isValidElement, cloneElement } from 'react';
 import styled from 'styled-components';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 
@@ -9,7 +9,6 @@ var Wrapper = styled.div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
 })([""]);
-var nextUniqueId = 0;
 var CardAccordion = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$isExpanded = props.isExpanded,
       isExpanded = _props$isExpanded === void 0 ? false : _props$isExpanded,
@@ -24,12 +23,8 @@ var CardAccordion = /*#__PURE__*/forwardRef(function (props, ref) {
       expanded = _useState2[0],
       setExpanded = _useState2[1];
 
-  var uniqueId = nextUniqueId++;
-
-  var _useState3 = useState(id !== null && id !== void 0 ? id : "cardAccordion-".concat(uniqueId)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      accordionId = _useState4[0];
-
+  var generatedId = useId();
+  var accordionId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-cardAccordion");
   useEffect(function () {
     setExpanded(isExpanded);
   }, [isExpanded]);

package/dist/components/Checkbox/Checkbox.js

@@ -1,14 +1,12 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId } from 'react';
 import { Container, Input, CustomCheckbox } from './Checkbox.styles.js';
 import { useCheckboxGroup } from './CheckboxGroupContext.js';
 import { spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
 import { joinClassNames, getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
 
-var nextUniqueId = 0;
 var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   var id = props.id,
       name = props.name,
@@ -23,10 +21,8 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
       rest = __rest(props, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "htmlProps"]);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "checkbox-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-checkbox");
   var checkboxGroup = useCheckboxGroup();
 
   var style = htmlProps.style,

package/dist/components/Checkbox/CheckboxGroup.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useId } from 'react';
 import styled, { css } from 'styled-components';
 import { checkboxGroupTokens } from './CheckboxGroup.tokens.js';
 import { CheckboxGroupContext } from './CheckboxGroupContext.js';
@@ -26,7 +25,6 @@ var Label = styled(Typography).withConfig({
   displayName: "CheckboxGroup__Label",
   componentId: "sc-uixbzg-2"
 })(["padding-left:", ";"], checkboxGroupTokens.label.spaceLeft);
-var nextUniqueGroupId = 0;
 var CheckboxGroup = function CheckboxGroup(_a) {
   var label = _a.label,
       _a$direction = _a.direction,
@@ -41,10 +39,8 @@ var CheckboxGroup = function CheckboxGroup(_a) {
       htmlProps = _a.htmlProps,
       rest = __rest(_a, ["label", "direction", "errorMessage", "tip", "required", "groupId", "children", "id", "className", "htmlProps"]);
 
-  var _useState = useState(groupId !== null && groupId !== void 0 ? groupId : "checkboxGroup-".concat(nextUniqueGroupId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueGroupId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-checkboxGroup");
   var hasErrorMessage = !!errorMessage;
   var errorMessageId = derivativeIdGenerator(uniqueGroupId, 'errorMessage', errorMessage);
   var tipId = derivativeIdGenerator(uniqueGroupId, 'tip', tip);

package/dist/components/Datepicker/Datepicker.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId } from 'react';
 import styled from 'styled-components';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
 import CalendarIcon from '../../assets/svg/calendar_today.svg.js';
@@ -19,7 +18,6 @@ var StyledInput = styled(StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
 })(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
-var nextUniqueId = 0;
 var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,
       _a$type = _a.type,
@@ -37,10 +35,8 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       ariaDescribedby = _a['aria-describedby'],
       rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", "max", 'aria-describedby']);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-datepickerInput");
   var componentWidth = width ? width : getWidth(type);
   var hasLabel = !!label;
   var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';

package/dist/components/DescriptionList/DescriptionList.js

@@ -3,16 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { descriptionListTermTokens } from './DescriptionListTerm.tokens.js';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
+var term = descriptionListTokens.term,
+    desc = descriptionListTokens.desc,
+    list = descriptionListTokens.list;
 var DList = styled.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
 })(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], typographyTokens.selection.base, function (_ref) {
   var appearance = _ref.appearance;
-  return appearance && css(["dt{", "}"], descriptionListTermTokens.appearance[appearance].base);
-}, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
+  return appearance && css(["dt{", " color:", ";line-height:", ";font-size:", ";letter-spacing:", ";font-family:", ";font-weight:", ";font-style:", ";}"], term.appearance[appearance].font, term.appearance[appearance].color, term.appearance[appearance].lineHeight, term.appearance[appearance].fontSize, term.appearance[appearance].letterSpacing, term.appearance[appearance].fontFamily, term.appearance[appearance].fontWeight, term.appearance[appearance].fontStyle);
+}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
       appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,

package/dist/components/DescriptionList/DescriptionList.tokens.d.ts

@@ -0,0 +1,70 @@
+export declare const descriptionListTokens: {
+    term: {
+        appearance: {
+            small: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                color: string;
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            bold: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: number;
+                fontStyle: any;
+                color: string;
+            };
+        };
+        firstOfType: {
+            marginTop: string;
+        };
+    };
+    desc: {
+        base: {
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            gap: string;
+            color: string;
+        };
+        lastChild: {
+            marginBottom: string;
+        };
+    };
+    list: {
+        beforeNextTerm: {
+            marginTop: string;
+        };
+    };
+    group: {
+        base: {
+            margin: string;
+        };
+    };
+};

package/dist/components/DescriptionList/DescriptionList.tokens.js

@@ -0,0 +1,60 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages,
+    colors = ddsBaseTokens.colors;
+var term = {
+  appearance: {
+    small: {
+      font: fontPackages.body_sans_01.base,
+      color: colors.DdsColorNeutralsGray7,
+      lineHeight: fontPackages.body_sans_01.base.lineHeight,
+      fontSize: fontPackages.body_sans_01.base.fontSize,
+      letterSpacing: fontPackages.body_sans_01.base.letterSpacing,
+      fontFamily: fontPackages.body_sans_01.base.fontFamily,
+      fontWeight: fontPackages.body_sans_01.base.fontWeight,
+      fontStyle: fontPackages.body_sans_01.base.fontStyle
+    },
+    bold: {
+      font: fontPackages.body_sans_03.base,
+      lineHeight: fontPackages.body_sans_03.base.lineHeight,
+      fontSize: fontPackages.body_sans_03.base.fontSize,
+      letterSpacing: fontPackages.body_sans_03.base.letterSpacing,
+      fontFamily: fontPackages.body_sans_03.base.fontFamily,
+      fontWeight: 600,
+      fontStyle: fontPackages.body_sans_03.base.fontStyle,
+      color: colors.DdsColorNeutralsGray9
+    }
+  },
+  firstOfType: {
+    marginTop: spacing.SizesDdsSpacingLocalX1
+  }
+};
+var desc = {
+  base: {
+    font: fontPackages.body_sans_03.base,
+    gap: spacing.SizesDdsSpacingLocalX025,
+    color: colors.DdsColorNeutralsGray9
+  },
+  lastChild: {
+    marginBottom: spacing.SizesDdsSpacingLocalX1
+  }
+};
+var list = {
+  beforeNextTerm: {
+    marginTop: spacing.SizesDdsSpacingLocalX2
+  }
+};
+var group = {
+  base: {
+    margin: spacing.SizesDdsSpacingLocalX2
+  }
+};
+var descriptionListTokens = {
+  term: term,
+  desc: desc,
+  list: list,
+  group: group
+};
+
+export { descriptionListTokens };

package/dist/components/DescriptionList/DescriptionListDesc.js

@@ -2,14 +2,14 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { descriptionListDescTokens } from './DescriptionListDesc.tokens.js';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Icon } from '../Icon/Icon.js';
 
 var DListDesc = styled.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(["", " margin-inline-start:0;"], descriptionListDescTokens.base);
+})(["margin-inline-start:0;align-items:center;display:flex;color:", ";", ";gap:", ";"], descriptionListTokens.desc.base.color, descriptionListTokens.desc.base.font, descriptionListTokens.desc.base.gap);
 var DescriptionListDesc = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       icon = props.icon,

package/dist/components/DescriptionList/DescriptionListGroup.js

@@ -1,16 +1,16 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { descriptionListGroupTokens } from './DescriptionListGroup.tokens.js';
+import styled from 'styled-components';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var DListGroup = styled.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(["", " ", ""], descriptionListGroupTokens.base, function (_ref) {
+})(["margin:", ";"], function (_ref) {
   var margin = _ref.margin;
-  return margin && css(["margin:", ";"], margin);
+  return margin ? margin : descriptionListTokens.group.base.margin;
 });
 var DescriptionListGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,

package/dist/components/Drawer/Drawer.js

@@ -1,20 +1,19 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import { drawerTokens } from './Drawer.tokens.js';
 import { Paper } from '../../helpers/Paper/Paper.js';
 import { useMountTransition } from '../../hooks/useMountTransition.js';
 import { focusVisible } from '../../helpers/styling/focusVisible.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
 import { Button } from '../Button/Button.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { ScrollableContainer } from '../ScrollableContainer/ScrollableContainer.js';
 import { Typography } from '../Typography/Typography.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
 
@@ -35,7 +34,7 @@ var Container = styled(Paper).withConfig({
 var ContentContainer = styled.div.withConfig({
   displayName: "Drawer__ContentContainer",
   componentId: "sc-i9luw3-1"
-})(["display:flex;flex-direction:column;overflow-x:auto;", " ", ""], scrollbarStyling, drawerTokens.contentContainer.base);
+})(["display:flex;flex-direction:column;", ""], drawerTokens.contentContainer.base);
 var HeaderContainer = styled.div.withConfig({
   displayName: "Drawer__HeaderContainer",
   componentId: "sc-i9luw3-2"
@@ -44,7 +43,6 @@ var StyledButton = styled(Button).withConfig({
   displayName: "Drawer__StyledButton",
   componentId: "sc-i9luw3-3"
 })(["align-self:flex-end;"]);
-var nextUniqueId = 0;
 var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       onClose = props.onClose,
@@ -63,10 +61,8 @@ var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = __rest(props, ["children", "onClose", "header", "isOpen", "placement", "parentElement", "size", "triggerRef", "id", "className", "htmlProps"]);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "drawer-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-drawer");
   var hasHeader = !!header;
   var headerId = hasHeader ? "".concat(uniqueId, "-header") : undefined;
   var drawerRef = useFocusTrap(isOpen);
@@ -98,14 +94,16 @@ var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
     id: headerId
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsxs(Container, Object.assign({}, containerProps, {
-    children: [jsxs(ContentContainer, {
-      children: [hasHeader && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
-        children: typeof header === 'string' ? jsx(Typography, Object.assign({
-          typographyType: "headingSans03"
-        }, {
-          children: header
-        })) : header
-      })), children]
+    children: [jsx(ScrollableContainer, {
+      children: jsxs(ContentContainer, {
+        children: [hasHeader && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
+          children: typeof header === 'string' ? jsx(Typography, Object.assign({
+            typographyType: "headingSans03"
+          }, {
+            children: header
+          })) : header
+        })), children]
+      })
     }), jsx(StyledButton, {
       "data-testid": "drawer-close-btn",
       size: "small",

package/dist/components/Drawer/DrawerGroup.js

@@ -1,25 +1,20 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, Children, isValidElement, cloneElement } from 'react';
+import { useId, useRef, useState, 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 generatedId = useId();
+  var uniqueDrawerId = drawerId !== null && drawerId !== void 0 ? drawerId : "".concat(generatedId, "-drawer");
   var buttonRef = useRef(null);
 
-  var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      closed = _useState4[0],
-      setClosed = _useState4[1];
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      closed = _useState2[0],
+      setClosed = _useState2[1];
 
   var open = function open() {
     return setClosed(false);

package/dist/components/InternalHeader/InternalHeader.js

@@ -2,7 +2,7 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
-import { Navigation, NavigationList, Wrapper, BannerWrapper, BannerLeftWrapper, LovisaWrapper, ApplicationNameWrapper, ContextMenuGroup, StyledOverflowMenu } from './InternalHeader.styles.js';
+import { Navigation, NavigationList, OuterContainer, BannerWrapper, BannerLeftWrapper, LovisaWrapper, ApplicationNameWrapper, ContextMenuGroup, StyledOverflowMenu } from './InternalHeader.styles.js';
 import { NavigationItem } from './NavigationItem.js';
 import { InternalHeaderListItem } from './InternalHeaderListItem.js';
 import { MenuIcon } from '../../icons/tsx/menu.js';
@@ -75,7 +75,7 @@ var InternalHeader = function InternalHeader(props) {
     })
   })) : null;
   var hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return jsxs(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxs(OuterContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     children: [jsx(BannerWrapper, Object.assign({
       hasContextMenu: hasContextMenu
     }, {

package/dist/components/InternalHeader/InternalHeader.styles.d.ts

@@ -1,5 +1,5 @@
 import { InternalHeaderProps } from './InternalHeader.types';
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OuterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type BannerProps = {
     hasContextMenu?: boolean;
 };

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

@@ -3,33 +3,39 @@ 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",
+var outerContainer = internalHeaderTokens.outerContainer,
+    applicationNameWrapper = internalHeaderTokens.applicationNameWrapper,
+    lovisaWrapper = internalHeaderTokens.lovisaWrapper,
+    banner = internalHeaderTokens.banner,
+    navigation = internalHeaderTokens.navigation,
+    contextGroup = internalHeaderTokens.contextGroup;
+var OuterContainer = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__OuterContainer",
   componentId: "sc-91bnca-0"
-})(["position:relative;*::selection{", "}", ""], typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
+})(["position:relative;*::selection{", "}background-color:", ";"], typographyTokens.selection.base, outerContainer.backgroundColor);
 var BannerWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__BannerWrapper",
   componentId: "sc-91bnca-1"
-})(["position:relative;display:flex;align-items:center;", " ", ""], internalHeaderTokens.banner.base, function (_ref) {
+})(["position:relative;display:flex;align-items:center;border-bottom:", ";padding-right:", ";", ""], banner.borderBottom, banner.paddingRight, function (_ref) {
   var hasContextMenu = _ref.hasContextMenu;
-  return hasContextMenu && css(["padding-right:", ";"], internalHeaderTokens.banner.contextMenuSpacing);
+  return hasContextMenu && css(["padding-right:", ";"], banner.hasContextMenu.paddingRight);
 });
 var BannerLeftWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__BannerLeftWrapper",
   componentId: "sc-91bnca-2"
-})(["display:flex;", ""], internalHeaderTokens.bannerLeft.base);
+})(["display:flex;"]);
 var ApplicationNameWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__ApplicationNameWrapper",
   componentId: "sc-91bnca-3"
-})(["display:flex;align-items:center;", ""], internalHeaderTokens.applicationNameWrapper.base);
+})(["display:flex;align-items:center;padding:", ";"], applicationNameWrapper.padding);
 var LovisaWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__LovisaWrapper",
   componentId: "sc-91bnca-4"
-})(["", ""], internalHeaderTokens.lovisaWrapper.base);
+})(["padding:", ";border-right:", ";"], lovisaWrapper.padding, lovisaWrapper.borderRight);
 var Navigation = styled.nav.withConfig({
   displayName: "InternalHeaderstyles__Navigation",
   componentId: "sc-91bnca-5"
-})(["", ""], internalHeaderTokens.navigation.base);
+})(["border-bottom:", ";"], navigation.borderBottom);
 var NavigationList = styled.ul.withConfig({
   displayName: "InternalHeaderstyles__NavigationList",
   componentId: "sc-91bnca-6"
@@ -40,10 +46,10 @@ var NavigationList = styled.ul.withConfig({
 var ContextMenuGroup = styled.div.withConfig({
   displayName: "InternalHeaderstyles__ContextMenuGroup",
   componentId: "sc-91bnca-7"
-})(["position:absolute;", ""], internalHeaderTokens.contextGroup.base);
+})(["position:absolute;top:", ";right:", ";"], contextGroup.top, contextGroup.right);
 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 };
+export { ApplicationNameWrapper, BannerLeftWrapper, BannerWrapper, ContextMenuGroup, LovisaWrapper, Navigation, NavigationList, OuterContainer, StyledOverflowMenu };

package/dist/components/InternalHeader/InternalHeader.tokens.d.ts

@@ -1,40 +1,52 @@
-import { CSSObject } from 'styled-components';
 export declare const internalHeaderTokens: {
-    wrapper: {
-        base: CSSObject;
+    navLink: {
+        base: {
+            color: string;
+            textDecoration: string;
+            backgroundColor: string;
+            padding: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+        };
+        hover: {
+            color: string;
+        };
+        active: {
+            color: string;
+        };
+        current: {
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    outerContainer: {
+        backgroundColor: string;
     };
     applicationNameWrapper: {
-        base: CSSObject;
+        padding: string;
     };
     lovisaWrapper: {
-        base: CSSObject;
+        padding: string;
+        borderRight: string;
     };
     banner: {
-        base: CSSObject;
-        contextMenuSpacing: string;
-    };
-    bannerLeft: {
-        base: CSSObject;
+        borderBottom: string;
+        paddingRight: string;
+        hasContextMenu: {
+            paddingRight: string;
+        };
     };
     navigation: {
-        base: CSSObject;
-    };
-    navigationLink: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        active: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
-        current: {
-            base: CSSObject;
-        };
+        borderBottom: string;
     };
     contextGroup: {
-        base: CSSObject;
+        right: string;
+        top: string;
     };
 };