@norges-domstoler/dds-components 4.3.0 → 5.2.0-beta.0

package/dist/components/Icon/Icon.js

@@ -0,0 +1,50 @@
+import { __rest } from 'tslib';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+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 'inherit':
+      return '1em';
+
+    default:
+      return ddsBaseTokens.iconSizes.DdsIconsizeMedium;
+  }
+};
+
+function Icon(props) {
+  var id = props.id,
+      _props$iconSize = props.iconSize,
+      iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'currentcolor' : _props$color,
+      icon = props.icon,
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = __rest(props, ["id", "iconSize", "color", "icon", "className", "htmlProps"]);
+
+  var title = htmlProps.title,
+      _htmlProps$ariaHidde = htmlProps['aria-hidden'],
+      ariaHidden = _htmlProps$ariaHidde === void 0 ? true : _htmlProps$ariaHidde;
+  var size = getSize(iconSize);
+  return icon(Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    title: title,
+    height: size,
+    width: size,
+    fill: color,
+    viewBox: '0 0 24 24',
+    'aria-hidden': ariaHidden
+  }));
+}
+
+export { Icon };

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

@@ -0,0 +1,21 @@
+import { Icon, IconProps } from '.';
+declare const _default: {
+    title: string;
+    component: typeof Icon;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: IconProps) => JSX.Element;
+export declare const Default: (args: IconProps) => JSX.Element;
+export declare const Inherit: (args: IconProps) => JSX.Element;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/components/InputMessage/InputMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentProps } from '../../types';
 export declare type InputMessageType = 'error' | 'tip';
 export declare type InputMessageProps = BaseComponentProps<HTMLDivElement, {

package/dist/components/InputMessage/InputMessage.js

@@ -1,11 +1,11 @@
 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 { ErrorIcon } from '../../icons/tsx/error.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
 import { Typography } from '../Typography/Typography.js';
 
 var InputMessageWrapper = styled.div.withConfig({
@@ -29,9 +29,9 @@ var InputMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var isError = messageType === 'error';
   return jsxs(InputMessageWrapper, Object.assign({}, wrapperProps, {
-    children: [isError && jsx(IconWrapper, {
-      Icon: DangerOutlinedIcon,
-      iconSize: "inline"
+    children: [isError && jsx(Icon, {
+      icon: ErrorIcon,
+      iconSize: "inherit"
     }), jsx(Typography, Object.assign({
       typographyType: isError ? 'supportingStyleLabel01' : 'supportingStyleHelperText01',
       as: "span",

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputMessageProps } from '.';
 declare const _default: {
     title: string;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { InternalHeaderProps } from './InternalHeader.types';
 export declare const InternalHeader: (props: InternalHeaderProps) => JSX.Element;

package/dist/components/InternalHeader/InternalHeader.js

@@ -2,11 +2,11 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 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 { MenuIcon } from '../../icons/tsx/menu.js';
+import { MoreVerticalIcon } from '../../icons/tsx/moreVertical.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
 import { Button } from '../Button/Button.js';
@@ -100,7 +100,7 @@ var InternalHeader = function InternalHeader(props) {
     })), navigation, hasContextMenu && jsxs(ContextMenuGroup, {
       children: [jsx(Button, {
         ref: buttonRef,
-        Icon: hasNavInContextMenu ? MenuOutlinedIcon : MoreVertOutlinedIcon,
+        icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
         appearance: "borderless",
         purpose: "secondary",
         onClick: handleContextMenuClick,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InternalHeaderProps } from '.';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InternalHeaderProps } from './InternalHeader.types';
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type BannerProps = {

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

@@ -1,6 +1,5 @@
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { SvgIcon } from '../../icons/utils';
 import { BaseComponentProps } from '../../types';
 declare type NavigationLinkProps = {
     href: string;
@@ -9,7 +8,7 @@ declare type NavigationLinkProps = {
 declare type ContextMenuElementProps = {
     title: string;
     href?: string;
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
     onClick?: () => void;
 } & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
 declare type InternaHeaderUserProps = {

package/dist/components/List/List.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyBodyType } from '../Typography';
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type ListType = 'ordered' | 'unordered';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListProps } from '.';
 declare const _default: {
     title: string;

package/dist/components/LocalMessage/LocalMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type LocalMessagePurpose = 'info' | 'warning' | 'danger' | 'confidential' | 'success' | 'tips';

package/dist/components/LocalMessage/LocalMessage.js

@@ -2,14 +2,14 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import { forwardRef, useState } from 'react';
 import { localMessageTokens } from './LocalMessage.tokens.js';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
 import { Button } from '../Button/Button.js';
+import { CloseIcon } from '../../icons/tsx/close.js';
 
 var Container = styled.div.withConfig({
   displayName: "LocalMessage__Container",
@@ -27,7 +27,7 @@ var Container = styled.div.withConfig({
   var width = _ref4.width;
   return width;
 });
-var MessageIconWrapper = styled(IconWrapper).withConfig({
+var MessageIconWrapper = styled(Icon).withConfig({
   displayName: "LocalMessage__MessageIconWrapper",
   componentId: "sc-kmfp8w-1"
 })(["margin-right:", ";"], localMessageTokens.icon.marginRight);
@@ -82,7 +82,7 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var messageIconWrapper = jsx(MessageIconWrapper, {
-    Icon: localMessageTokens.icon[purpose].icon,
+    icon: localMessageTokens.icon[purpose].icon,
     color: localMessageTokens.icon[purpose].color
   });
 
@@ -93,7 +93,7 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 
   var closeButton = closable && jsx(Button, {
-    Icon: CloseOutlinedIcon,
+    icon: CloseIcon,
     purpose: buttonPurpose,
     appearance: "borderless",
     onClick: function onClick() {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LocalMessageProps } from './LocalMessage';
 declare const _default: {
     title: string;

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

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { Property } from 'csstype';
+import { ErrorIcon, TipIcon, InfoIcon, WarningIcon, CheckCircledIcon } from '../../icons/tsx';
 export declare const localMessageTokens: {
     container: {
         base: CSSObject;
@@ -41,39 +42,27 @@ export declare const localMessageTokens: {
     icon: {
         marginRight: string;
         info: {
-            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-                muiName: string;
-            };
+            icon: typeof InfoIcon;
             color: string;
         };
         danger: {
-            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-                muiName: string;
-            };
+            icon: typeof ErrorIcon;
             color: string;
         };
         warning: {
-            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-                muiName: string;
-            };
+            icon: typeof WarningIcon;
             color: string;
         };
         success: {
-            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-                muiName: string;
-            };
+            icon: typeof CheckCircledIcon;
             color: string;
         };
         tips: {
-            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-                muiName: string;
-            };
+            icon: typeof TipIcon;
             color: string;
         };
         confidential: {
-            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-                muiName: string;
-            };
+            icon: typeof ErrorIcon;
             color: string;
         };
     };

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

@@ -1,9 +1,9 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
-import WarningOutlinedIcon from '@mui/icons-material/ReportOutlined';
-import DangerOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import EmojiObjectsOutlinedIcon from '@mui/icons-material/EmojiObjectsOutlined';
+import { CheckCircledIcon } from '../../icons/tsx/checkCircled.js';
+import { TipIcon } from '../../icons/tsx/tip.js';
+import { InfoIcon } from '../../icons/tsx/info.js';
+import { ErrorIcon } from '../../icons/tsx/error.js';
+import { WarningIcon } from '../../icons/tsx/warning.js';
 
 var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing,
@@ -102,27 +102,27 @@ var localMessageTokens = {
   icon: {
     marginRight: "".concat(Spacing.SizesDdsSpacingLocalX075),
     info: {
-      icon: InfoOutlinedIcon,
+      icon: InfoIcon,
       color: Colors.DdsColorInfoDarkest
     },
     danger: {
-      icon: DangerOutlinedIcon,
+      icon: ErrorIcon,
       color: Colors.DdsColorDangerDarkest
     },
     warning: {
-      icon: WarningOutlinedIcon,
+      icon: WarningIcon,
       color: Colors.DdsColorWarningDarkest
     },
     success: {
-      icon: CheckCircleOutlinedIcon,
+      icon: CheckCircledIcon,
       color: Colors.DdsColorSuccessDarkest
     },
     tips: {
-      icon: EmojiObjectsOutlinedIcon,
+      icon: TipIcon,
       color: Colors.DdsColorPrimaryDarkest
     },
     confidential: {
-      icon: DangerOutlinedIcon,
+      icon: ErrorIcon,
       color: Colors.DdsColorDangerDarkest
     }
   },

package/dist/components/Modal/Modal.js

@@ -4,7 +4,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { modalTokens } from './Modal.tokens.js';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import { createPortal } from 'react-dom';
 import { useMountTransition } from '../../hooks/useMountTransition.js';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
@@ -17,6 +16,7 @@ import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
+import { CloseIcon } from '../../icons/tsx/close.js';
 
 var Container = styled.div.withConfig({
   displayName: "Modal__Container",
@@ -111,7 +111,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
         size: "small",
         appearance: "borderless",
         purpose: "secondary",
-        Icon: CloseOutlinedIcon,
+        icon: CloseIcon,
         onClick: handleClose,
         "aria-label": "Lukk dialog"
       })]

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ModalProps } from '.';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type ModalBodyProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Gjør at innholdet kan scrolles. Det må eventuelt settes (max)bredde og (max)høyde styling på både denne subkomponenten og `<Modal />`.  */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverflowMenuContextItem, OverflowMenuNavItem } from '.';
 declare type ContainerProps = {
     isOpen: boolean;

package/dist/components/OverflowMenu/OverflowMenu.js

@@ -5,7 +5,6 @@ import { forwardRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { OverflowMenuItem } from './OverflowMenuItem.js';
 import { overflowMenuTokens } from './OverflowMenu.tokens.js';
-import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { visibilityTransition } from '../../helpers/styling/visibilityTransition.js';
 import { Divider } from '../Divider/Divider.js';
@@ -13,6 +12,7 @@ import { useFloatPosition } from '../../hooks/useFloatPosition.js';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useRoveFocus } from '../../hooks/useRoveFocus.js';
+import { PersonIcon } from '../../icons/tsx/person.js';
 import { useId } from '../../hooks/useId.js';
 import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
@@ -105,7 +105,7 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
         index: index,
         focus: focus === index && isOpen,
         setFocus: setFocus,
-        Icon: hasInteractiveUser && index === 0 ? PersonOutlineOutlinedIcon : undefined
+        icon: hasInteractiveUser && index === 0 ? PersonIcon : undefined
       }, item, {
         onClick: function onClick(e) {
           item.onClick && item.onClick(e);
@@ -156,7 +156,7 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   }, {
     children: [hasStaticUser && jsx(OverflowMenuItem, {
       title: username,
-      Icon: PersonOutlineOutlinedIcon
+      icon: PersonIcon
     }), interactiveContent()]
   }));
 });

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverflowMenuProps, OverflowMenuContextItem, OverflowMenuNavItem } from '.';
 declare const _default: {
     title: string;

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

@@ -1,15 +1,14 @@
-import { SvgIconTypeMap } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { Placement } from '../../hooks/useFloatPosition';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, RefObject } from 'react';
 import { BaseComponentProps } from '../../types';
+import { SvgIcon } from '../../icons/utils';
 export declare type OverflowMenuContextItem = {
     title: string;
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
 } & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
 export declare type OverflowMenuNavItem = {
     title: string;
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
 declare type UserProps = {
     name: string;

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

@@ -1,14 +1,11 @@
-import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material/SvgIcon';
-import { IconWrapper } from '../IconWrapper';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
 import { BaseComponentProps } from '../../types';
+import { SvgIcon } from '../../icons/utils';
 export declare const Span: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Link: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const StyledIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
 declare type BaseOverflowMenuItemProps = {
     title: string;
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
     focus?: boolean;
     setFocus?: Dispatch<SetStateAction<number>>;
     index?: number;
@@ -20,5 +17,5 @@ declare type AnchorOverflowMenuItemProps = BaseOverflowMenuItemProps & BaseCompo
 declare type ButtonOverflowMenuItemProps = BaseOverflowMenuItemProps & BaseComponentProps<HTMLButtonElement, Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>, ButtonHTMLAttributes<HTMLButtonElement>>;
 declare type OtherOverflowMenuItemProps = BaseOverflowMenuItemProps & BaseComponentProps<HTMLSpanElement>;
 export declare type OverflowMenuItemProps = AnchorOverflowMenuItemProps | ButtonOverflowMenuItemProps | OtherOverflowMenuItemProps;
-export declare const OverflowMenuItem: React.ForwardRefExoticComponent<(AnchorOverflowMenuItemProps | ButtonOverflowMenuItemProps | Pick<OtherOverflowMenuItemProps, string>) & React.RefAttributes<HTMLAnchorElement>>;
+export declare const OverflowMenuItem: import("react").ForwardRefExoticComponent<(AnchorOverflowMenuItemProps | ButtonOverflowMenuItemProps | Pick<OtherOverflowMenuItemProps, string>) & import("react").RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/components/OverflowMenu/OverflowMenuItem.js

@@ -4,7 +4,7 @@ import { forwardRef, useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { overflowMenuTokens } from './OverflowMenu.tokens.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var Span = styled.span.withConfig({
@@ -15,10 +15,6 @@ var Link = styled.a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
 })(["box-sizing:border-box;background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;width:100%;", " display:flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{", "}&:active{", "}&:focus-visible,&.focus-visible{", "}"], overflowMenuTokens.link.base, overflowMenuTokens.link.hover.base, overflowMenuTokens.link.active.base, overflowMenuTokens.link.focus.base);
-var StyledIconWrapper = styled(IconWrapper).withConfig({
-  displayName: "OverflowMenuItem__StyledIconWrapper",
-  componentId: "sc-1ka2asi-2"
-})([""]);
 
 var isAnchorProps = function isAnchorProps(props) {
   return props.href !== undefined;
@@ -30,7 +26,7 @@ var isButtonProps = function isButtonProps(props) {
 
 var OverflowMenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
-      Icon = props.Icon,
+      icon = props.icon,
       focus = props.focus,
       setFocus = props.setFocus,
       index = props.index,
@@ -38,7 +34,7 @@ var OverflowMenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       _props$htmlProps = props.htmlProps,
       htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = __rest(props, ["title", "Icon", "focus", "setFocus", "index", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["title", "icon", "focus", "setFocus", "index", "id", "className", "htmlProps"]);
 
   var onKeyDown = htmlProps.onKeyDown;
   var href;
@@ -83,16 +79,16 @@ var OverflowMenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: focus ? 0 : -1
   };
 
-  var icon = Icon && jsx(StyledIconWrapper, {
-    iconSize: "inline",
-    Icon: Icon
+  var iconElement = icon && jsx(Icon, {
+    iconSize: "inherit",
+    icon: icon
   });
 
   if (!href && !onClick) {
     return jsxs(Span, Object.assign({}, Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
       ref: ref
     }), {
-      children: [icon, title]
+      children: [iconElement, title]
     }));
   }
 
@@ -101,7 +97,7 @@ var OverflowMenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
       as: "button",
       ref: combinedRef
     }, {
-      children: [icon, title]
+      children: [iconElement, title]
     }));
   }
 
@@ -109,8 +105,8 @@ var OverflowMenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "a",
     ref: combinedRef
   }, {
-    children: [icon, title]
+    children: [iconElement, title]
   }));
 });
 
-export { Link, OverflowMenuItem, Span, StyledIconWrapper };
+export { Link, OverflowMenuItem, Span };

package/dist/components/Pagination/Pagination.js

@@ -3,16 +3,16 @@ import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined';
-import ChevronLeftOutlinedIcon from '@mui/icons-material/ChevronLeftOutlined';
-import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
-import FirstPageOutlinedIcon from '@mui/icons-material/FirstPageOutlined';
-import LastPageOutlinedIcon from '@mui/icons-material/LastPageOutlined';
 import { PaginationGenerator } from './paginationGenerator.js';
 import { paginationTokens } from './Pagination.tokens.js';
+import { MoreHorizontalIcon } from '../../icons/tsx/moreHorizontal.js';
+import { ChevronLeftIcon } from '../../icons/tsx/chevronLeft.js';
+import { ChevronFirstIcon } from '../../icons/tsx/chevronFirst.js';
+import { ChevronLastIcon } from '../../icons/tsx/chevronLast.js';
 import { Select } from '../Select/Select.js';
 import { Button } from '../Button/Button.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
+import { ChevronRightIcon } from '../../icons/tsx/chevronRight.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
 
@@ -115,8 +115,8 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
           onPageChange(event, item);
         },
         "aria-label": isActive ? "N\xE5v\xE6rende side (side ".concat(item, ")") : "G\xE5 til side ".concat(item)
-      }) : jsx(IconWrapper, {
-        Icon: MoreHorizOutlinedIcon
+      }) : jsx(Icon, {
+        icon: MoreHorizontalIcon
       })
     }, "pagination-item-".concat(i));
   }) : undefined;
@@ -125,7 +125,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     purpose: "secondary",
     appearance: "ghost",
     size: "small",
-    Icon: ChevronLeftOutlinedIcon,
+    icon: ChevronLeftIcon,
     onClick: function onClick(event) {
       onPageChange(event, activePage - 1);
     },
@@ -136,7 +136,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     purpose: "secondary",
     appearance: "ghost",
     size: "small",
-    Icon: ChevronRightOutlinedIcon,
+    icon: ChevronRightIcon,
     onClick: function onClick(event) {
       onPageChange(event, activePage + 1);
     },
@@ -180,7 +180,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
           purpose: "secondary",
           appearance: "ghost",
           size: "small",
-          Icon: FirstPageOutlinedIcon,
+          icon: ChevronFirstIcon,
           onClick: function onClick(event) {
             onPageChange(event, 1);
           },
@@ -212,7 +212,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
           purpose: "secondary",
           appearance: "ghost",
           size: "small",
-          Icon: LastPageOutlinedIcon,
+          icon: ChevronLastIcon,
           onClick: function onClick(event) {
             onPageChange(event, pagesLength);
           },

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PaginationProps } from '.';
 declare const _default: {
     title: string;