@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

package/dist/components/DescriptionList/DescriptionListDesc.js

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

package/dist/components/Divider/Divider.js

@@ -3,14 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { dividerTokens, dividerColors } from './Divider.tokens.js';
+import { dividerTokens } from './Divider.tokens.js';
 
-var DividerLine = styled.hr.withConfig({
-  displayName: "Divider__DividerLine",
+var StyledDivider = styled.hr.withConfig({
+  displayName: "Divider__StyledDivider",
   componentId: "sc-ggdopz-0"
-})(["", " ", ""], dividerTokens.base, function (_ref) {
+})(["border:0;background-color:transparent;border-top:", ";margin-top:", ";margin-bottom:", ";", ""], dividerTokens.borderTop, dividerTokens.marginTop, dividerTokens.marginBottom, function (_ref) {
   var color = _ref.color;
-  return color && css(["border-color:", ";"], dividerColors[color]);
+  return color && css(["border-color:", ";"], dividerTokens.color[color].borderColor);
 });
 var Divider = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$color = props.color,
@@ -23,7 +23,7 @@ var Divider = /*#__PURE__*/forwardRef(function (props, ref) {
   var lineProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     color: color
   });
-  return jsx(DividerLine, Object.assign({
+  return jsx(StyledDivider, Object.assign({
     ref: ref
   }, lineProps));
 });

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

@@ -1,8 +1,13 @@
-import { CSSObject } from 'styled-components';
-export declare const dividerColors: {
-    primary: string;
-    primaryLighter: string;
-};
 export declare const dividerTokens: {
-    base: CSSObject;
+    borderTop: string;
+    marginTop: string;
+    marginBottom: string;
+    color: {
+        primary: {
+            borderColor: string;
+        };
+        primaryLighter: {
+            borderColor: string;
+        };
+    };
 };

package/dist/components/Divider/Divider.tokens.js

@@ -1,20 +1,20 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Border = ddsBaseTokens.border,
-    Spacing = ddsBaseTokens.spacing;
-var dividerColors = {
-  primary: Border.BordersDdsBorderStyleDarkStroke,
-  primaryLighter: Border.BordersDdsBorderStyleLightStroke
-};
-var base = {
-  border: 0,
-  backgroundColor: 'transparent',
-  borderTop: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: Spacing.SizesDdsSpacingLocalX1,
-  marginBottom: Spacing.SizesDdsSpacingLocalX1
-};
-var dividerTokens = {
-  base: base
+var border = ddsBaseTokens.border,
+    spacing = ddsBaseTokens.spacing;
+var divider = {
+  borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  marginTop: spacing.SizesDdsSpacingLocalX1,
+  marginBottom: spacing.SizesDdsSpacingLocalX1,
+  color: {
+    primary: {
+      borderColor: border.BordersDdsBorderStyleDarkStroke
+    },
+    primaryLighter: {
+      borderColor: border.BordersDdsBorderStyleLightStroke
+    }
+  }
 };
+var dividerTokens = Object.assign({}, divider);
 
-export { dividerColors, dividerTokens };
+export { dividerTokens };

package/dist/components/Drawer/Drawer.js

@@ -35,12 +35,19 @@ import '../ScrollableContainer/Scrollbar.js';
 import { ScrollableContainer } from '../ScrollableContainer/ScrollableContainer.js';
 import '../ScrollableContainer/ScrollableContainer.tokens.js';
 
+var container = drawerTokens.container,
+    contentContainer = drawerTokens.contentContainer;
+
+var getMaxWidth = function getMaxWidth(size) {
+  if (size === 'large') return '800px';else return '400px';
+};
+
 var Container = styled(Paper).withConfig({
   displayName: "Drawer__Container",
   componentId: "sc-i9luw3-0"
-})(["position:fixed;top:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:300px;", " ", " z-index:50;", " @media (prefers-reduced-motion:no-preference){transition:transform 0.5s;}", " &:focus-visible,&.focus-visible{", "}"], function (_ref) {
+})(["position:fixed;top:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:300px;z-index:50;padding:", ";", " ", " ", " @media (prefers-reduced-motion:no-preference){transition:transform 0.5s;}&:focus-visible,&.focus-visible{", "}"], container.padding, function (_ref) {
   var size = _ref.size;
-  return css(["", ""], drawerTokens.container.size[size].base);
+  return css(["max-width:", ";"], getMaxWidth(size));
 }, function (_ref2) {
   var widthProps = _ref2.widthProps;
   return widthProps && css(["", ""], widthProps);
@@ -48,11 +55,11 @@ var Container = styled(Paper).withConfig({
   var placement = _ref3.placement,
       isOpen = _ref3.isOpen;
   return placement === 'left' ? css(["left:0;transform:", ";"], isOpen ? 'translate(0px)' : 'translateX(-100%)') : placement === 'right' ? css(["right:0;transform:", ";"], isOpen ? 'translate(0px)' : 'translateX(100%)') : '';
-}, drawerTokens.container.base, focusVisible);
+}, focusVisible);
 var ContentContainer = styled.div.withConfig({
   displayName: "Drawer__ContentContainer",
   componentId: "sc-i9luw3-1"
-})(["display:flex;flex-direction:column;", ""], drawerTokens.contentContainer.base);
+})(["display:flex;flex-direction:column;gap:", ";padding:", ";"], contentContainer.gap, contentContainer.padding);
 var HeaderContainer = styled.div.withConfig({
   displayName: "Drawer__HeaderContainer",
   componentId: "sc-i9luw3-2"

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

@@ -1,17 +1,9 @@
-import { CSSObject } from 'styled-components';
 export declare const drawerTokens: {
     container: {
-        base: CSSObject;
-        size: {
-            large: {
-                base: CSSObject;
-            };
-            small: {
-                base: CSSObject;
-            };
-        };
+        padding: string;
     };
     contentContainer: {
-        base: CSSObject;
+        gap: string;
+        padding: string;
     };
 };

package/dist/components/Drawer/Drawer.tokens.js

@@ -1,34 +1,18 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Spacing = ddsBaseTokens.spacing;
-var containerBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX1NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX1NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX1NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX15NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px")
+var spacing = ddsBaseTokens.spacing;
+var contentContainerPaddingNumberPx = spacing.SizesDdsSpacingLocalX025NumberPx;
+var contentContainerPadding = "".concat(contentContainerPaddingNumberPx, "px");
+var container = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing.SizesDdsSpacingLocalX15NumberPx - contentContainerPaddingNumberPx, "px")
 };
-var contentContainerBase = {
-  gap: Spacing.SizesDdsSpacingLocalX1,
-  padding: Spacing.SizesDdsSpacingLocalX025
-};
-var containerLarge = {
-  maxWidth: '800px'
-};
-var containerSmall = {
-  maxWidth: '400px'
+var contentContainer = {
+  gap: spacing.SizesDdsSpacingLocalX1,
+  padding: contentContainerPadding
 };
 var drawerTokens = {
-  container: {
-    base: containerBase,
-    size: {
-      large: {
-        base: containerLarge
-      },
-      small: {
-        base: containerSmall
-      }
-    }
-  },
-  contentContainer: {
-    base: contentContainerBase
-  }
+  container: container,
+  contentContainer: contentContainer
 };
 
 export { drawerTokens };

package/dist/components/GlobalMessage/GlobalMessage.js

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
 import { Button } from '../Button/Button.js';
 import { forwardRef, useState } from 'react';
-import { globalMessageTokens } from './GlobalMessage.tokens.js';
+import { globalMessageTokens, typographyType, purposeVariants } from './GlobalMessage.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import { Typography } from '../Typography/Typography/Typography.js';
 import '../../helpers/Backdrop/Backdrop.js';
@@ -19,18 +19,22 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
+var container = globalMessageTokens.container,
+    contentContainer = globalMessageTokens.contentContainer,
+    icon = globalMessageTokens.icon;
 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) {
+})(["display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;padding:", ";border-bottom:", ";", " ", ""], container.padding, container.borderBottom, getFontStyling(typographyType, true), function (_ref) {
   var purpose = _ref.purpose;
-  return purpose && css(["", " ", ""], globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
+  return purpose && css(["border-color:", ";background-color:", ";"], container[purpose].borderColor, container[purpose].backgroundColor);
 });
 var MessageIconWrapper = styled(Icon).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
   componentId: "sc-bf2l65-1"
-})(["margin-right:", ";"], globalMessageTokens.icon.marginRight);
+})(["margin-right:", ";"], icon.marginRight);
 var ControlsContainer = styled.div.withConfig({
   displayName: "GlobalMessage__ControlsContainer",
   componentId: "sc-bf2l65-2"
@@ -38,9 +42,9 @@ var ControlsContainer = styled.div.withConfig({
 var ContentContainer = styled.div.withConfig({
   displayName: "GlobalMessage__ContentContainer",
   componentId: "sc-bf2l65-3"
-})(["display:flex;align-items:center;", " ", ""], globalMessageTokens.contentContainer.base, function (_ref2) {
+})(["display:flex;align-items:center;padding-top:", ";padding-bottom:", ";padding-right:", ";"], contentContainer.paddingTop, contentContainer.paddingBottom, function (_ref2) {
   var closable = _ref2.closable;
-  return closable && css(["", ""], globalMessageTokens.contentContainer.withClosable.base);
+  return closable ? contentContainer.withClosable.paddingRight : contentContainer.paddingRight;
 });
 var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   var message = props.message,
@@ -59,7 +63,6 @@ var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
       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
@@ -69,8 +72,8 @@ var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
       closable: closable
     }, {
       children: [jsx(MessageIconWrapper, {
-        icon: globalMessageTokens.icon[purpose].icon,
-        color: globalMessageTokens.icon[purpose].color
+        icon: purposeVariants[purpose].icon,
+        color: icon[purpose].color
       }), children !== null && children !== void 0 ? children : jsx(Typography, Object.assign({
         as: "span"
       }, {
@@ -79,7 +82,7 @@ var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
     })), jsx(ControlsContainer, {
       children: closable && jsx(Button, {
         icon: CloseIcon,
-        purpose: buttonPurpose,
+        purpose: purposeVariants[purpose].closeButtonPurpose,
         appearance: "borderless",
         onClick: function onClick() {
           setClosed(true);

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

@@ -1,48 +1,50 @@
-import { CSSObject } from 'styled-components';
-import { ErrorIcon, InfoIcon, WarningIcon } from '../../icons/tsx';
+import { SvgIcon } from '../../icons/utils';
+import { ButtonPurpose } from '../Button';
+import { StaticTypographyType } from '../Typography';
+import { GlobalMessagePurpose } from './GlobalMessage';
+export declare const typographyType: StaticTypographyType;
+export declare const purposeVariants: {
+    [k in GlobalMessagePurpose]: {
+        icon: SvgIcon;
+        closeButtonPurpose: ButtonPurpose;
+    };
+};
 export declare const globalMessageTokens: {
     container: {
-        base: CSSObject;
+        borderBottom: string;
+        padding: string;
         info: {
-            base: CSSObject;
+            borderColor: string;
+            backgroundColor: string;
         };
         danger: {
-            base: CSSObject;
+            borderColor: string;
+            backgroundColor: string;
         };
         warning: {
-            base: CSSObject;
+            borderColor: string;
+            backgroundColor: string;
         };
     };
     contentContainer: {
-        base: CSSObject;
+        paddingRight: string;
+        paddingTop: string;
+        paddingBottom: string;
+        gap: string;
         withClosable: {
-            base: CSSObject;
+            paddingRight: string;
         };
     };
     icon: {
         marginRight: string;
         info: {
-            icon: typeof InfoIcon;
             color: string;
         };
         danger: {
-            icon: typeof ErrorIcon;
             color: string;
         };
         warning: {
-            icon: typeof WarningIcon;
             color: string;
         };
     };
-    button: {
-        info: {
-            purpose: string;
-        };
-        danger: {
-            purpose: string;
-        };
-        warning: {
-            purpose: string;
-        };
-    };
 };

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

@@ -6,82 +6,63 @@ import { ErrorIcon } from '../../icons/tsx/error.js';
 import { InfoIcon } from '../../icons/tsx/info.js';
 import { WarningIcon } from '../../icons/tsx/warning.js';
 
-var Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages;
-var containerBase = Object.assign(Object.assign({
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var typographyType = 'bodySans02';
+var container = {
   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,
-  gap: Spacing.SizesDdsSpacingLocalX075
-};
-var contentContainerWithClosableBase = {
-  paddingRight: Spacing.SizesDdsSpacingLocalX075
-};
-var containerInfoBase = {
-  borderColor: Colors.DdsColorInfoLighter,
-  backgroundColor: Colors.DdsColorInfoLightest
-};
-var containerDangerBase = {
-  borderColor: Colors.DdsColorDangerLighter,
-  backgroundColor: Colors.DdsColorDangerLightest
+  padding: "0 ".concat(spacing.SizesDdsSpacingLocalX1),
+  info: {
+    borderColor: colors.DdsColorInfoLighter,
+    backgroundColor: colors.DdsColorInfoLightest
+  },
+  danger: {
+    borderColor: colors.DdsColorDangerLighter,
+    backgroundColor: colors.DdsColorDangerLightest
+  },
+  warning: {
+    borderColor: colors.DdsColorWarningLighter,
+    backgroundColor: colors.DdsColorWarningLightest
+  }
 };
-var containerWarningBase = {
-  borderColor: Colors.DdsColorWarningLighter,
-  backgroundColor: Colors.DdsColorWarningLightest
+var contentContainer = {
+  paddingRight: spacing.SizesDdsSpacingLocalX15,
+  paddingTop: spacing.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing.SizesDdsSpacingLocalX075,
+  gap: spacing.SizesDdsSpacingLocalX075,
+  withClosable: {
+    paddingRight: spacing.SizesDdsSpacingLocalX075
+  }
 };
-var globalMessageTokens = {
-  container: {
-    base: containerBase,
-    info: {
-      base: containerInfoBase
-    },
-    danger: {
-      base: containerDangerBase
-    },
-    warning: {
-      base: containerWarningBase
-    }
+var purposeVariants = {
+  info: {
+    icon: InfoIcon,
+    closeButtonPurpose: 'secondary'
   },
-  contentContainer: {
-    base: contentContainerBase,
-    withClosable: {
-      base: contentContainerWithClosableBase
-    }
+  danger: {
+    icon: ErrorIcon,
+    closeButtonPurpose: 'danger'
   },
+  warning: {
+    icon: WarningIcon,
+    closeButtonPurpose: 'secondary'
+  }
+};
+var globalMessageTokens = {
+  container: container,
+  contentContainer: contentContainer,
   icon: {
-    marginRight: "".concat(Spacing.SizesDdsSpacingLocalX075),
-    info: {
-      icon: InfoIcon,
-      color: Colors.DdsColorInfoDarkest
-    },
-    danger: {
-      icon: ErrorIcon,
-      color: Colors.DdsColorDangerDarkest
-    },
-    warning: {
-      icon: WarningIcon,
-      color: Colors.DdsColorWarningDarkest
-    }
-  },
-  button: {
+    marginRight: "".concat(spacing.SizesDdsSpacingLocalX075),
     info: {
-      purpose: 'secondary'
+      color: colors.DdsColorInfoDarkest
     },
     danger: {
-      purpose: 'danger'
+      color: colors.DdsColorDangerDarkest
     },
     warning: {
-      purpose: 'secondary'
+      color: colors.DdsColorWarningDarkest
     }
   }
 };
 
-export { globalMessageTokens };
+export { globalMessageTokens, purposeVariants, typographyType };

package/dist/components/Grid/Grid.d.ts

@@ -1,16 +1,17 @@
 import { BaseComponentPropsWithChildren } from '../../types';
-import { Property } from 'csstype';
+import { StandardProperties } from 'csstype';
+import { ScreenSizeLiteral } from './Grid.utils';
 import { HTMLAttributes } from 'react';
-declare type MaxWidthGrid = {
-    xs?: Property.MaxWidth;
-    sm?: Property.MaxWidth;
-    md?: Property.MaxWidth;
-    lg?: Property.MaxWidth;
-    xl?: Property.MaxWidth;
+declare type BreakpointBasedProps<T extends keyof StandardProperties> = {
+    [k in ScreenSizeLiteral]?: StandardProperties[T];
 };
+declare type RowGapGrid = BreakpointBasedProps<'rowGap'>;
+declare type MaxWidthGrid = BreakpointBasedProps<'maxWidth'>;
 declare type BaseGridProps = {
     /**Maksimal bredde. Gjøres per brekkepunkt.  */
     maxWidth?: MaxWidthGrid;
+    /** CSS `row-gap`. Gjøres per brekkepunkt. */
+    rowGap?: RowGapGrid;
 } & Pick<HTMLAttributes<HTMLElement>, 'style'>;
 declare type GridDivProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**HTML tag som returneres. */

package/dist/components/Grid/Grid.js

@@ -10,14 +10,15 @@ import { gridTokens } from './Grid.tokens.js';
 import { GridContext } from './Grid.context.js';
 import { getLiteralScreenSize } from './Grid.utils.js';
 
-var getHooksGridStyling = function getHooksGridStyling(screenSize, maxWidth) {
+var getHooksGridStyling = function getHooksGridStyling(screenSize, maxWidth, rowGap) {
   var tokens = gridTokens[screenSize].grid;
   return {
     gridTemplateColumns: "repeat(".concat(tokens.columns, ", minmax(0, 1fr))"),
-    gap: tokens.gap,
+    columnGap: tokens.columnGap,
     marginLeft: tokens.marginLeft,
     marginRight: tokens.marginRight,
-    maxWidth: maxWidth && maxWidth[getLiteralScreenSize(screenSize)]
+    rowGap: rowGap && rowGap[getLiteralScreenSize(screenSize)] ? rowGap[getLiteralScreenSize(screenSize)] : tokens.columnGap,
+    maxWidth: maxWidth && maxWidth[getLiteralScreenSize(screenSize)] && maxWidth[getLiteralScreenSize(screenSize)]
   };
 };
 
@@ -29,8 +30,9 @@ var StyledGrid = styled.div.withConfig({
   return css(["max-width:", ";"], maxWidth);
 }, function (_ref2) {
   var screenSize = _ref2.screenSize,
-      maxWidth = _ref2.maxWidth;
-  return getHooksGridStyling(screenSize, maxWidth);
+      maxWidth = _ref2.maxWidth,
+      rowGap = _ref2.rowGap;
+  return getHooksGridStyling(screenSize, maxWidth, rowGap);
 });
 var Grid = function Grid(props) {
   var id = props.id,

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

@@ -2,7 +2,7 @@ export declare const gridTokens: {
     0: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -18,7 +18,7 @@ export declare const gridTokens: {
     1: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -34,7 +34,7 @@ export declare const gridTokens: {
     2: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -50,7 +50,7 @@ export declare const gridTokens: {
     3: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -66,7 +66,7 @@ export declare const gridTokens: {
     4: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };

package/dist/components/Grid/Grid.tokens.js

@@ -13,7 +13,7 @@ var halfWayColumn = (_halfWayColumn = {}, _defineProperty(_halfWayColumn, Screen
 var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, ScreenSize.XSmall, {
   grid: {
     columns: grid.DdsGridXs0599Count,
-    gap: grid.DdsGridXs0599GutterSize,
+    columnGap: grid.DdsGridXs0599GutterSize,
     marginLeft: spacing.SizesDdsSpacingLayoutX1,
     marginRight: spacing.SizesDdsSpacingLayoutX1
   },
@@ -28,7 +28,7 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, ScreenSize.XSma
 }), _defineProperty(_gridTokens, ScreenSize.Small, {
   grid: {
     columns: grid.DdsGridSm600959Count,
-    gap: grid.DdsGridSm600959GutterSize,
+    columnGap: grid.DdsGridSm600959GutterSize,
     marginLeft: spacing.SizesDdsSpacingLayoutX2,
     marginRight: spacing.SizesDdsSpacingLayoutX2
   },
@@ -43,7 +43,7 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, ScreenSize.XSma
 }), _defineProperty(_gridTokens, ScreenSize.Medium, {
   grid: {
     columns: grid.DdsGridMd9601279Count,
-    gap: grid.DdsGridMd9601279GutterSize,
+    columnGap: grid.DdsGridMd9601279GutterSize,
     marginLeft: spacing.SizesDdsSpacingLayoutX4,
     marginRight: spacing.SizesDdsSpacingLayoutX4
   },
@@ -58,7 +58,7 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, ScreenSize.XSma
 }), _defineProperty(_gridTokens, ScreenSize.Large, {
   grid: {
     columns: grid.DdsGridLg12801919Count,
-    gap: grid.DdsGridLg12801919GutterSize,
+    columnGap: grid.DdsGridLg12801919GutterSize,
     marginLeft: spacing.SizesDdsSpacingLayoutX6,
     marginRight: spacing.SizesDdsSpacingLayoutX6
   },
@@ -73,7 +73,7 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, ScreenSize.XSma
 }), _defineProperty(_gridTokens, ScreenSize.XLarge, {
   grid: {
     columns: grid.DdsGridXl1920Count,
-    gap: grid.DdsGridXl1920GutterSize,
+    columnGap: grid.DdsGridXl1920GutterSize,
     marginLeft: spacing.SizesDdsSpacingLayoutX10,
     marginRight: spacing.SizesDdsSpacingLayoutX10
   },

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

@@ -16,10 +16,11 @@ export declare const StyledOverflowMenu: import("styled-components").StyledCompo
     userProps?: ({
         name: string;
         href?: string | undefined;
-    } & (import("react").AnchorHTMLAttributes<HTMLAnchorElement> | import("react").ButtonHTMLAttributes<HTMLButtonElement>)) | undefined;
-    navItems?: import("../OverflowMenu").OverflowMenuNavItem[] | undefined;
+    } & (import("react").ButtonHTMLAttributes<HTMLButtonElement> | import("react").AnchorHTMLAttributes<HTMLAnchorElement>)) | undefined;
+    navItems?: import("../OverflowMenu").OverflowMenuLinkItem[] | undefined;
     isOpen?: boolean | undefined;
     onClose?: (() => void) | undefined;
+    onToggle?: (() => void) | undefined;
     anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
     placement?: import("../..").Placement | undefined;
     offset?: number | undefined;