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

package/dist/components/LocalMessage/LocalMessage.tokens.js

@@ -8,147 +8,114 @@ import { InfoIcon } from '../../icons/tsx/info.js';
 import { TipIcon } from '../../icons/tsx/tip.js';
 import { WarningIcon } from '../../icons/tsx/warning.js';
 
-var Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages,
-    BorderRadius = ddsBaseTokens.borderRadius,
-    Border = ddsBaseTokens.border,
-    OuterShadow = ddsBaseTokens.outerShadow;
-var containerBase = Object.assign(Object.assign({
-  boxShadow: OuterShadow.DdsShadow1Onlight,
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  padding: "0 ".concat(Spacing.SizesDdsSpacingLocalX1)
-}, FontPackages.body_sans_02.base), {
-  color: Colors.DdsColorNeutralsGray8
-});
-var defaultWidth = '400px';
-var contentContainerBase = {
-  paddingRight: Spacing.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing.SizesDdsSpacingLocalX075
-};
-var contentContainerWithClosableBase = {
-  paddingRight: Spacing.SizesDdsSpacingLocalX075
-};
-var contentContainerVericalBase = {
-  paddingBottom: Spacing.SizesDdsSpacingLocalX15
-};
-var topContainerBase = {
-  paddingTop: Spacing.SizesDdsSpacingLocalX15
-};
-var topContainerWithClosableBase = {
-  paddingTop: Spacing.SizesDdsSpacingLocalX1
-};
-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 containerSuccessBase = {
-  borderColor: Colors.DdsColorSuccessLighter,
-  backgroundColor: Colors.DdsColorSuccessLightest
-};
-var containerTipsBase = {
-  borderColor: Colors.DdsColorPrimaryLighter,
-  backgroundColor: Colors.DdsColorPrimaryLightest
-};
-var containerConfidentialBase = {
-  borderColor: Colors.DdsColorDangerBase,
-  backgroundColor: Colors.DdsColorDangerLightest
-};
-var localMessageTokens = {
-  container: {
-    base: containerBase,
-    defaultWidth: defaultWidth,
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    borderRadius = ddsBaseTokens.borderRadius,
+    border = ddsBaseTokens.border,
+    outerShadow = ddsBaseTokens.outerShadow;
+var container = {
+  base: {
+    boxShadow: outerShadow.DdsShadow1Onlight,
+    borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+    border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+    padding: "0 ".concat(spacing.SizesDdsSpacingLocalX1)
+  },
+  purpose: {
     info: {
-      base: containerInfoBase
-    },
-    danger: {
-      base: containerDangerBase
+      borderColor: colors.DdsColorInfoLighter,
+      backgroundColor: colors.DdsColorInfoLightest
     },
     warning: {
-      base: containerWarningBase
+      borderColor: colors.DdsColorWarningLighter,
+      backgroundColor: colors.DdsColorWarningLightest
+    },
+    danger: {
+      borderColor: colors.DdsColorDangerLighter,
+      backgroundColor: colors.DdsColorDangerLightest
     },
     success: {
-      base: containerSuccessBase
+      borderColor: colors.DdsColorSuccessLighter,
+      backgroundColor: colors.DdsColorSuccessLightest
     },
     tips: {
-      base: containerTipsBase
+      borderColor: colors.DdsColorPrimaryLighter,
+      backgroundColor: colors.DdsColorPrimaryLightest
     },
     confidential: {
-      base: containerConfidentialBase
+      borderColor: colors.DdsColorDangerBase,
+      backgroundColor: colors.DdsColorDangerLightest
     }
+  }
+};
+var purposeVariants = {
+  info: {
+    icon: InfoIcon,
+    closeButtonPurpose: 'secondary'
   },
-  contentContainer: {
-    base: contentContainerBase,
-    withClosable: {
-      base: contentContainerWithClosableBase
-    },
-    vertical: {
-      base: contentContainerVericalBase
-    }
+  danger: {
+    icon: ErrorIcon,
+    closeButtonPurpose: 'danger'
   },
-  topContainer: {
-    base: topContainerBase,
-    withClosable: {
-      base: topContainerWithClosableBase
-    }
+  warning: {
+    icon: WarningIcon,
+    closeButtonPurpose: 'secondary'
   },
-  icon: {
-    marginRight: "".concat(Spacing.SizesDdsSpacingLocalX075),
-    info: {
-      icon: InfoIcon,
-      color: Colors.DdsColorInfoDarkest
-    },
-    danger: {
-      icon: ErrorIcon,
-      color: Colors.DdsColorDangerDarkest
-    },
-    warning: {
-      icon: WarningIcon,
-      color: Colors.DdsColorWarningDarkest
-    },
-    success: {
-      icon: CheckCircledIcon,
-      color: Colors.DdsColorSuccessDarkest
-    },
-    tips: {
-      icon: TipIcon,
-      color: Colors.DdsColorPrimaryDarkest
-    },
-    confidential: {
-      icon: ErrorIcon,
-      color: Colors.DdsColorDangerDarkest
-    }
+  success: {
+    icon: CheckCircledIcon,
+    closeButtonPurpose: 'secondary'
   },
-  button: {
-    info: {
-      purpose: 'secondary'
-    },
-    danger: {
-      purpose: 'danger'
-    },
-    warning: {
-      purpose: 'secondary'
-    },
-    success: {
-      purpose: 'secondary'
-    },
-    confidential: {
-      purpose: 'danger'
-    },
-    tips: {
-      purpose: 'secondary'
-    }
+  tips: {
+    icon: TipIcon,
+    closeButtonPurpose: 'secondary'
+  },
+  confidential: {
+    icon: ErrorIcon,
+    closeButtonPurpose: 'danger'
+  }
+};
+var icon = {
+  marginRight: "".concat(spacing.SizesDdsSpacingLocalX075),
+  info: {
+    color: colors.DdsColorInfoDarkest
+  },
+  danger: {
+    color: colors.DdsColorDangerDarkest
+  },
+  warning: {
+    color: colors.DdsColorWarningDarkest
+  },
+  success: {
+    color: colors.DdsColorSuccessDarkest
+  },
+  tips: {
+    color: colors.DdsColorPrimaryDarkest
+  },
+  confidential: {
+    color: colors.DdsColorDangerDarkest
   }
 };
+var contentContainer = {
+  paddingRight: spacing.SizesDdsSpacingLocalX15,
+  paddingTop: spacing.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing.SizesDdsSpacingLocalX075,
+  withClosable: {
+    paddingRight: spacing.SizesDdsSpacingLocalX075
+  },
+  vertical: {
+    paddingBottom: spacing.SizesDdsSpacingLocalX15
+  }
+};
+var topContainer = {
+  paddingTop: spacing.SizesDdsSpacingLocalX15,
+  withClosable: {
+    paddingTop: spacing.SizesDdsSpacingLocalX1
+  }
+};
+var localMessageTokens = {
+  container: container,
+  contentContainer: contentContainer,
+  topContainer: topContainer,
+  icon: icon
+};
 
-export { localMessageTokens };
+export { localMessageTokens, purposeVariants };

package/dist/components/Modal/Modal.js

@@ -21,26 +21,28 @@ import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
 import '../InputMessage/InputMessage.js';
-import '../../helpers/Paper/Paper.js';
+import { Paper } from '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
-import '../../helpers/styling/focusVisible.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
 
-var Container = styled.div.withConfig({
+var container = modalTokens.container,
+    contentContainer = modalTokens.contentContainer;
+var Container = styled(Paper).withConfig({
   displayName: "Modal__Container",
   componentId: "sc-12c14zx-0"
-})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;margin:0;min-width:200px;&::selection,*::selection{", "}", " :focus-visible,&.focus-visible{", "}"], selection, modalTokens.base, modalTokens.focus.base);
+})(["display:flex;flex-direction:column-reverse;min-width:200px;padding:", ";&::selection,*::selection{", "}:focus-visible,&.focus-visible{", "}"], container.padding, selection, focusVisible);
 var ContentContainer = styled.div.withConfig({
   displayName: "Modal__ContentContainer",
   componentId: "sc-12c14zx-1"
-})(["display:grid;", ""], modalTokens.contentContainer.base);
+})(["display:grid;padding-right:", ";gap:", ";"], contentContainer.paddingRight, contentContainer.gap);
 var HeaderContainer = styled.div.withConfig({
   displayName: "Modal__HeaderContainer",
   componentId: "sc-12c14zx-2"
@@ -109,6 +111,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsx(Backdrop, Object.assign({}, backdropProps, {
     children: jsxs(Container, Object.assign({}, containerProps, {
+      elevation: 4
+    }, {
       children: [jsxs(ContentContainer, {
         children: [header && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
           children: typeof header === 'string' ? jsx(Typography, Object.assign({

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

@@ -1,13 +1,12 @@
-import { CSSObject } from 'styled-components';
 export declare const modalTokens: {
-    base: CSSObject;
-    focus: {
-        base: CSSObject;
+    container: {
+        padding: string;
     };
     contentContainer: {
-        base: CSSObject;
+        paddingRight: string;
+        gap: string;
     };
     actionsContainer: {
-        base: CSSObject;
+        gap: string;
     };
 };

package/dist/components/Modal/Modal.tokens.js

@@ -1,40 +1,20 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import 'styled-components';
-import { focusVisible } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
 
-var BorderRadius = ddsBaseTokens.borderRadius,
-    Colors = ddsBaseTokens.colors,
-    OuterShadow = ddsBaseTokens.outerShadow,
-    Spacing = ddsBaseTokens.spacing;
-var base = {
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  boxShadow: OuterShadow.DdsShadow4Onlight,
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+var spacing = ddsBaseTokens.spacing;
+var container = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX15, " ").concat(spacing.SizesDdsSpacingLocalX15)
 };
-var contentContainerBase = {
-  paddingRight: Spacing.SizesDdsSpacingLocalX1,
-  gap: Spacing.SizesDdsSpacingLocalX1
+var contentContainer = {
+  paddingRight: spacing.SizesDdsSpacingLocalX1,
+  gap: spacing.SizesDdsSpacingLocalX1
 };
-var actionsContainerBase = {
-  gap: Spacing.SizesDdsSpacingLocalX1
+var actionsContainer = {
+  gap: spacing.SizesDdsSpacingLocalX1
 };
-var focusBase = Object.assign({}, focusVisible);
 var modalTokens = {
-  base: base,
-  focus: {
-    base: focusBase
-  },
-  contentContainer: {
-    base: contentContainerBase
-  },
-  actionsContainer: {
-    base: actionsContainerBase
-  }
+  container: container,
+  contentContainer: contentContainer,
+  actionsContainer: actionsContainer
 };
 
 export { modalTokens };

package/dist/components/Modal/ModalActions.js

@@ -7,7 +7,7 @@ import { modalTokens } from './Modal.tokens.js';
 var Container = styled.div.withConfig({
   displayName: "ModalActions__Container",
   componentId: "sc-ehph9l-0"
-})(["display:flex;flex-wrap:wrap;", ""], modalTokens.actionsContainer.base);
+})(["display:flex;flex-wrap:wrap;gap:", ";"], modalTokens.actionsContainer.gap);
 var ModalActions = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -1,4 +1,4 @@
-import { OverflowMenuContextItem, OverflowMenuNavItem } from '.';
+import { OverflowMenuContextItem } from '.';
 declare type ContainerProps = {
     isOpen: boolean;
 };
@@ -9,10 +9,11 @@ export declare const OverflowMenu: import("react").ForwardRefExoticComponent<Pic
     userProps?: ({
         name: string;
         href?: string | undefined;
-    } & (import("react").AnchorHTMLAttributes<HTMLAnchorElement> | import("react").ButtonHTMLAttributes<HTMLButtonElement>)) | undefined;
-    navItems?: OverflowMenuNavItem[] | undefined;
+    } & (import("react").ButtonHTMLAttributes<HTMLButtonElement> | import("react").AnchorHTMLAttributes<HTMLAnchorElement>)) | undefined;
+    navItems?: import("./OverflowMenu.types").OverflowMenuLinkItem[] | undefined;
     isOpen?: boolean | undefined;
     onClose?: (() => void) | undefined;
+    onToggle?: (() => void) | undefined;
     anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
     placement?: import("../../hooks").Placement | undefined;
     offset?: number | undefined;

package/dist/components/OverflowMenu/OverflowMenu.js

@@ -48,6 +48,7 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var anchorRef = props.anchorRef,
       onClose = props.onClose,
+      onToggle = props.onToggle,
       _props$isOpen = props.isOpen,
       isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
       _props$placement = props.placement,
@@ -61,7 +62,7 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       _props$htmlProps = props.htmlProps,
       htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = __rest(props, ["anchorRef", "onClose", "isOpen", "placement", "items", "navItems", "userProps", "id", "offset", "className", "htmlProps"]);
+      rest = __rest(props, ["anchorRef", "onClose", "onToggle", "isOpen", "placement", "items", "navItems", "userProps", "id", "offset", "className", "htmlProps"]);
 
   var _useFloatPosition = useFloatPosition(null, {
     placement: placement,
@@ -77,18 +78,25 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
     anchorRef ? reference(anchorRef.current) : reference(null);
   }, [anchorRef]);
   useOnClickOutside([(_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current, (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current], function () {
-    if (isOpen) onClose && onClose();
+    if (isOpen) {
+      onClose && onClose();
+      onToggle && onToggle();
+    }
   });
   useOnKeyDown(['Esc', 'Escape'], function () {
     var _a;
 
     if (isOpen) {
       onClose && onClose();
+      onToggle && onToggle();
       anchorRef && ((_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus());
     }
   });
   useOnKeyDown(['Tab'], function () {
-    if (isOpen) onClose && onClose();
+    if (isOpen) {
+      onClose && onClose();
+      onToggle && onToggle();
+    }
   });
   var interactiveItems = [];
   var hasContextItems = !!items && items.length > 0;
@@ -122,6 +130,7 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
       }, item, {
         onClick: function onClick(e) {
           item.onClick && item.onClick(e);
+          onToggle && onToggle();
           onClose && onClose();
         }
       }))

package/dist/components/OverflowMenu/OverflowMenu.stories.d.ts

@@ -1,4 +1,4 @@
-import { OverflowMenuProps, OverflowMenuContextItem, OverflowMenuNavItem } from '.';
+import { OverflowMenuProps, OverflowMenuContextItem } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
@@ -6,10 +6,11 @@ declare const _default: {
         userProps?: ({
             name: string;
             href?: string | undefined;
-        } & (import("react").AnchorHTMLAttributes<HTMLAnchorElement> | import("react").ButtonHTMLAttributes<HTMLButtonElement>)) | undefined;
-        navItems?: OverflowMenuNavItem[] | undefined;
+        } & (import("react").ButtonHTMLAttributes<HTMLButtonElement> | import("react").AnchorHTMLAttributes<HTMLAnchorElement>)) | undefined;
+        navItems?: import("./OverflowMenu.types").OverflowMenuLinkItem[] | undefined;
         isOpen?: boolean | undefined;
         onClose?: (() => void) | undefined;
+        onToggle?: (() => void) | undefined;
         anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
         placement?: import("../..").Placement | undefined;
         offset?: number | undefined;

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

@@ -1,3 +1,5 @@
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const overflowMenuTokens: {
     container: {
         border: string;
@@ -11,14 +13,6 @@ export declare const overflowMenuTokens: {
             backgroundColor: string;
             padding: string;
             gap: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
         };
     };
     link: {

package/dist/components/OverflowMenu/OverflowMenu.tokens.js

@@ -3,16 +3,16 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 var border = ddsBaseTokens.border,
     borderRadius = ddsBaseTokens.borderRadius,
     colors = ddsBaseTokens.colors,
-    spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages;
+    spacing = ddsBaseTokens.spacing;
+    ddsBaseTokens.fontPackages;
+var typographyType = 'bodySans01';
 var element = {
   base: {
     color: colors.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors.DdsColorNeutralsWhite,
     padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1),
-    gap: spacing.SizesDdsSpacingLocalX025,
-    font: fontPackages.body_sans_01.base
+    gap: spacing.SizesDdsSpacingLocalX025
   }
 };
 var link = {
@@ -40,4 +40,4 @@ var overflowMenuTokens = {
   offset: spacing.SizesDdsSpacingLocalX0125NumberPx
 };
 
-export { overflowMenuTokens };
+export { overflowMenuTokens, typographyType };

package/dist/components/OverflowMenu/OverflowMenu.types.d.ts

@@ -2,14 +2,14 @@ import { Placement } from '../../hooks/useFloatPosition';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, RefObject } from 'react';
 import { BaseComponentProps } from '../../types';
 import { SvgIcon } from '../../icons/utils';
-export declare type OverflowMenuContextItem = {
+declare type OverflowMenuItemBase = {
     title: string;
     icon?: SvgIcon;
-} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
-export declare type OverflowMenuNavItem = {
-    title: string;
-    icon?: SvgIcon;
-} & AnchorHTMLAttributes<HTMLAnchorElement>;
+};
+export declare type OverflowMenuButtonItem = OverflowMenuItemBase & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type OverflowMenuLinkItem = OverflowMenuItemBase & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare type OverflowMenuContextItem = OverflowMenuButtonItem | OverflowMenuLinkItem;
+export declare type OverflowMenuNavItem = OverflowMenuLinkItem;
 declare type UserProps = {
     name: string;
     href?: string;
@@ -25,6 +25,8 @@ export declare type OverflowMenuProps = BaseComponentProps<HTMLDivElement, {
     isOpen?: boolean;
     /**Callback for å lukke menyen. **OBS!** nødvendig kun hvis `<OverflowMenuGroup />` ikke brukes.  */
     onClose?: () => void;
+    /**Callback for å toggle menyen. **OBS!** nødvendig kun hvis `<OverflowMenuGroup />` ikke brukes.  */
+    onToggle?: () => void;
     /**Ref til elementet som styrer menyen. **OBS!** nødvendig kun hvis ``<OverflowMenuGroup />` ikke brukes.  */
     anchorRef?: RefObject<HTMLButtonElement>;
     /**Plassering av menyen i forhold til anchor-elementet. */

package/dist/components/OverflowMenu/OverflowMenuGroup.js

@@ -49,6 +49,7 @@ var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
       isOpen: isOpen,
       id: uniqueOverflowMenuId,
       onClose: handleClose,
+      onToggle: handleToggle,
       anchorRef: buttonRef
     }));
   });

package/dist/components/OverflowMenu/OverflowMenuItem.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { overflowMenuTokens } from './OverflowMenu.tokens.js';
+import { overflowMenuTokens, typographyType } from './OverflowMenu.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import '../../hooks/useFloatPosition.js';
@@ -14,10 +14,11 @@ import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
 var element = overflowMenuTokens.element,
     link = overflowMenuTokens.link;
-var elementBaseCSS = css(["display:flex;align-items:center;box-sizing:border-box;color:", ";text-decoration:", ";background-color:", ";padding:", ";gap:", ";", ""], element.base.color, element.base.textDecoration, element.base.backgroundColor, element.base.padding, element.base.gap, element.base.font);
+var elementBaseCSS = css(["display:flex;align-items:center;box-sizing:border-box;color:", ";text-decoration:", ";background-color:", ";padding:", ";gap:", ";", ""], element.base.color, element.base.textDecoration, element.base.backgroundColor, element.base.padding, element.base.gap, getFontStyling(typographyType));
 var Span = styled.span.withConfig({
   displayName: "OverflowMenuItem__Span",
   componentId: "sc-1ka2asi-0"

package/dist/components/Pagination/Pagination.js

@@ -26,6 +26,10 @@ import { ChevronLeftIcon } from '../../icons/tsx/chevronLeft.js';
 import { ChevronRightIcon } from '../../icons/tsx/chevronRight.js';
 import { MoreHorizontalIcon } from '../../icons/tsx/moreHorizontal.js';
 
+var outerContainer = paginationTokens.outerContainer,
+    indicatorsContainer = paginationTokens.indicatorsContainer,
+    truncationIcon = paginationTokens.truncationIcon,
+    list = paginationTokens.list;
 var Nav = styled.nav.withConfig({
   displayName: "Pagination__Nav",
   componentId: "sc-5ltegq-0"
@@ -33,25 +37,25 @@ var Nav = styled.nav.withConfig({
 var List = styled.ol.withConfig({
   displayName: "Pagination__List",
   componentId: "sc-5ltegq-1"
-})(["display:grid;grid-auto-flow:column;gap:", ";", " margin:0;padding:0;"], paginationTokens.paginationItem.spacing, paginationTokens.list.base);
+})(["display:grid;grid-auto-flow:column;gap:", ";margin:0;padding:0;"], list.gap);
 var ListItem = styled.li.withConfig({
   displayName: "Pagination__ListItem",
   componentId: "sc-5ltegq-2"
-})(["list-style:none;display:inline-grid;align-content:center;", ""], function (_ref) {
+})(["display:inline-grid;align-content:center;", ""], function (_ref) {
   var isHidden = _ref.isHidden;
   return isHidden && css(["visibility:hidden;"]);
 });
-var Container = styled.div.withConfig({
-  displayName: "Pagination__Container",
+var OuterContainer = styled.div.withConfig({
+  displayName: "Pagination__OuterContainer",
   componentId: "sc-5ltegq-3"
-})(["display:flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
+})(["display:flex;gap:", ";", ""], outerContainer.gap, function (_ref2) {
   var smallScreen = _ref2.smallScreen;
   return smallScreen ? css(["flex-direction:column;align-items:center;"]) : css(["justify-content:space-between;flex-wrap:wrap;"]);
 });
 var IndicatorsContainer = styled.div.withConfig({
   displayName: "Pagination__IndicatorsContainer",
   componentId: "sc-5ltegq-4"
-})(["display:grid;grid-auto-flow:column;align-items:center;gap:", ";"], paginationTokens.indicatorsContainer.spacing);
+})(["display:grid;grid-auto-flow:column;align-items:center;gap:", ";"], indicatorsContainer.gap);
 var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
   var itemsAmount = props.itemsAmount,
       _props$defaultItemsPe = props.defaultItemsPerPage,
@@ -126,7 +130,8 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
         },
         "aria-label": isActive ? "N\xE5v\xE6rende side (side ".concat(item, ")") : "G\xE5 til side ".concat(item)
       }) : jsx(Icon, {
-        icon: MoreHorizontalIcon
+        icon: MoreHorizontalIcon,
+        color: truncationIcon.color
       })
     }, "pagination-item-".concat(i));
   }) : undefined;
@@ -234,7 +239,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
   var activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
   var activePageLastItem = activePage === pagesLength ? itemsAmount : activePage * itemsPerPage;
   var navigationToBeRendered = smallScreen ? smallScreenNavigation : navigation;
-  return !withCounter && !withSelect ? navigationToBeRendered : jsxs(Container, Object.assign({}, containerProps, {
+  return !withCounter && !withSelect ? navigationToBeRendered : jsxs(OuterContainer, Object.assign({}, containerProps, {
     children: [jsxs(IndicatorsContainer, {
       children: [withSelect && jsx(Select, {
         options: selectOptions,

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

@@ -1,15 +1,14 @@
-import { CSSObject } from 'styled-components';
 export declare const paginationTokens: {
-    container: {
-        spaceBetweenItems: string;
+    outerContainer: {
+        gap: string;
     };
     indicatorsContainer: {
-        spacing: string;
+        gap: string;
     };
-    list: {
-        base: CSSObject;
+    truncationIcon: {
+        color: string;
     };
-    paginationItem: {
-        spacing: string;
+    list: {
+        gap: string;
     };
 };