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

package/dist/cjs/types/BaseComponentProps.d.ts

@@ -19,7 +19,7 @@ export declare type BaseComponentProps<TElement extends Element, TOtherProps ext
  *
  * {@link BaseComponentProps}
  */
-export declare type BaseComponentPropsWithChildren<T extends Element, TProps extends Record<string, unknown>, THTMLProps extends HTMLAttributes<T> = HTMLAttributes<T>> = BaseComponentProps<T, PropsWithChildren<TProps>, THTMLProps>;
+export declare type BaseComponentPropsWithChildren<T extends Element, TProps extends Record<string, unknown> = Record<string, unknown>, THTMLProps extends HTMLAttributes<T> = HTMLAttributes<T>> = BaseComponentProps<T, PropsWithChildren<TProps>, THTMLProps>;
 export declare const joinClassNames: (...classNames: (string | undefined)[]) => string;
 declare type GetBaseHTMLProps = {
     <T extends Element>(id: HTMLAttributes<T>['id'], className: HTMLAttributes<T>['className'], htmlProps: HTMLAttributes<T> | undefined, unknownProps: object): HTMLAttributes<T> & object;

package/dist/components/Breadcrumbs/Breadcrumb.tokens.js

@@ -1,14 +1,15 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages;
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages;
 var iconBase = {
-  color: Colors.DdsColorInteractiveBase,
-  marginLeft: Spacing.SizesDdsSpacingLocalX05,
-  marginRight: Spacing.SizesDdsSpacingLocalX05
+  color: colors.DdsColorInteractiveBase,
+  marginLeft: spacing.SizesDdsSpacingLocalX05
 };
-var breadcrumbBase = Object.assign({}, FontPackages.body_sans_02.base);
+var breadcrumbBase = Object.assign(Object.assign({}, fontPackages.body_sans_02.base), {
+  gap: spacing.SizesDdsSpacingLocalX05
+});
 var breadcrumbTokens = {
   breadcrumb: {
     base: breadcrumbBase

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type BreadcrumbsProps = BaseComponentPropsWithChildren<HTMLElement, {
     /** Spesifiserer om versjonen for små skjermer skal vises; den viser `<Breadcrumb />` kun til den forrige siden.  */

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -2,10 +2,10 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, Children } from 'react';
 import styled from 'styled-components';
-import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined';
-import ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';
 import { breadcrumbTokens } from './Breadcrumb.tokens.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { ArrowLeftIcon } from '../../icons/tsx/arrowLeft.js';
+import { ChevronRightIcon } from '../../icons/tsx/chevronRight.js';
+import { Icon } from '../Icon/Icon.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var List = styled.ol.withConfig({
@@ -16,14 +16,19 @@ var ListItem = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
 })(["align-items:center;display:flex;", ""], breadcrumbTokens.breadcrumb.base);
-var BreadcrumbIcon = styled(ChevronRightOutlinedIcon).withConfig({
-  displayName: "Breadcrumbs__BreadcrumbIcon",
+var StyledIcon = styled(Icon).attrs(function (_ref) {
+  var _ref$iconSize = _ref.iconSize,
+      iconSize = _ref$iconSize === void 0 ? breadcrumbTokens.icon.size : _ref$iconSize,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? breadcrumbTokens.icon.base.color : _ref$color;
+  return {
+    iconSize: iconSize,
+    color: color
+  };
+}).withConfig({
+  displayName: "Breadcrumbs__StyledIcon",
   componentId: "sc-xdj21o-2"
 })(["", ""], breadcrumbTokens.icon.base);
-var BackIcon = styled(ArrowBackOutlinedIcon).withConfig({
-  displayName: "Breadcrumbs__BackIcon",
-  componentId: "sc-xdj21o-3"
-})(["", ""], breadcrumbTokens.icon.base);
 var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
   var smallScreen = props.smallScreen,
       children = props.children,
@@ -32,21 +37,16 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = __rest(props, ["smallScreen", "children", "id", "className", "htmlProps"]);
 
-  var breadcrumbIconSize = breadcrumbTokens.icon.size;
   var childrenArray = Children.toArray(children);
   var breadcrumbChildren = smallScreen ? jsxs(ListItem, {
-    children: [jsx(IconWrapper, {
-      Icon: BackIcon,
-      iconSize: breadcrumbIconSize,
-      color: breadcrumbTokens.icon.base.color
+    children: [jsx(StyledIcon, {
+      icon: ArrowLeftIcon
     }), childrenArray[childrenArray.length - 2]]
   }) : childrenArray.map(function (item, index) {
     return jsxs(ListItem, {
-      children: [index !== 0 ? jsx(IconWrapper, {
-        Icon: BreadcrumbIcon,
-        iconSize: breadcrumbIconSize,
-        color: breadcrumbTokens.icon.base.color
-      }) : '', item]
+      children: [index !== 0 && jsx(StyledIcon, {
+        icon: ChevronRightIcon
+      }), item]
     }, "breadcrumb-".concat(index));
   });
   return jsx("nav", Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {

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

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

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Button: import("react").ForwardRefExoticComponent<{
     htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onFocus" | "onBlur" | "type"> | undefined;
 } & Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onFocus" | "onBlur" | "type">, "id" | "className"> & {
@@ -8,7 +7,7 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     iconPosition?: import("./Button.types").IconPosition | undefined;
     appearance?: import("./Button.types").ButtonAppearance | undefined;
     loading?: boolean | undefined;
-    Icon?: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+    icon?: import("../../icons/utils").SvgIcon | undefined;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
     target?: string | undefined;

package/dist/components/Button/Button.js

@@ -5,7 +5,7 @@ import { buttonTokens } from './Button.tokens.js';
 import { StyledIconWrapperSpan, ButtonWrapper, Label } from './Button.styles.js';
 import { Spinner } from '../Spinner/Spinner.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
 
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
@@ -23,18 +23,18 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       loading = _props$loading === void 0 ? false : _props$loading,
       _props$fullWidth = props.fullWidth,
       fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
-      Icon = props.Icon,
+      icon = props.icon,
       onClick = props.onClick,
       onFocus = props.onFocus,
       onBlur = props.onBlur,
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = __rest(props, ["label", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "Icon", "onClick", "onFocus", "onBlur", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["label", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "icon", "onClick", "onFocus", "onBlur", "id", "className", "htmlProps"]);
 
   var as = href ? 'a' : 'button';
   var hasLabel = !!label;
-  var hasIcon = !!Icon;
+  var hasIcon = !!icon;
   var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     href: href,
     label: label,
@@ -56,14 +56,14 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var isIconButton = !hasLabel && hasIcon;
 
-  var iconElement = Icon && jsx(StyledIconWrapperSpan, Object.assign({
+  var iconElement = icon && jsx(StyledIconWrapperSpan, Object.assign({
     iconPosition: isIconButton ? undefined : iconPosition,
     size: size,
     isHidden: hasIcon && loading
   }, {
-    children: jsx(IconWrapper, {
-      Icon: Icon,
-      iconSize: "inline"
+    children: jsx(Icon, {
+      icon: icon,
+      iconSize: "inherit"
     })
   }));
 

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '.';
 declare const _default: {
     title: string;
@@ -11,7 +10,7 @@ declare const _default: {
         iconPosition?: import("./Button.types").IconPosition | undefined;
         appearance?: import("./Button.types").ButtonAppearance | undefined;
         loading?: boolean | undefined;
-        Icon?: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+        icon?: import("../../icons/utils").SvgIcon | undefined;
         fullWidth?: boolean | undefined;
         href?: string | undefined;
         target?: string | undefined;
@@ -56,7 +55,7 @@ export declare const OverviewSizes: (args: ButtonProps) => JSX.Element;
 export declare const OverviewLoading: (args: ButtonProps) => JSX.Element;
 export declare const OverviewFullWidth: (args: ButtonProps) => JSX.Element;
 export declare const Default: (args: ButtonProps) => JSX.Element;
-export declare const WithIcon: (args: ButtonProps) => JSX.Element;
+export declare const TextWithIcon: (args: ButtonProps) => JSX.Element;
 export declare const Icon: (args: ButtonProps) => JSX.Element;
 export declare const Ghost: (args: ButtonProps) => JSX.Element;
 export declare const Borderless: (args: ButtonProps) => JSX.Element;

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

@@ -1,6 +1,5 @@
-import { SvgIconTypeMap } from '@mui/material/SvgIcon';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { ButtonHTMLAttributes } from 'react';
+import { SvgIcon } from '../../icons/utils/propTypes';
 import { BaseComponentProps } from '../../types';
 export declare type ButtonPurpose = 'primary' | 'secondary' | 'danger';
 export declare type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
@@ -21,7 +20,7 @@ export declare type ButtonProps = BaseComponentProps<HTMLButtonElement, {
     /**Indikerer en loading-knapp. */
     loading?: boolean;
     /**Ikonet som ligger i knappen.  */
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
     /**Knapp med full bredde. */
     fullWidth?: boolean;
     /**URL for knapper som skal brukes som lenke. Knappen blir til et `<a>`-element. */

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

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

package/dist/components/Card/CardAccordion/CardAccordion.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../../types';
 export declare type CardAccordionProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Spesifiserer om body skal være utvidet ved innlastning. */

package/dist/components/Card/CardAccordion/CardAccordionBody.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { BaseComponentPropsWithChildren } from '../../../types';
 export declare type CardAccordionBodyProps = BaseComponentPropsWithChildren<HTMLDivElement, {

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur"> | undefined;
 } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur">, "id" | "className"> & {

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CheckboxProps } from './Checkbox.types';
 export declare const CustomCheckbox: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Input: import("styled-components").StyledComponent<"input", any, {

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 declare type Direction = 'column' | 'row';
 export declare type CheckboxGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {

package/dist/components/Checkbox/CheckboxGroup.stories.d.ts

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

package/dist/components/Chip/Chip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentProps } from '../../types';
 export declare type ChipProps = BaseComponentProps<HTMLDivElement, {
     /** Teksten som vises i komponenten. */

package/dist/components/Chip/Chip.js

@@ -4,9 +4,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import styled from 'styled-components';
 import { chipTokens } from './Chip.tokens.js';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Button } from '../Button/Button.js';
+import { CloseIcon } from '../../icons/tsx/close.js';
 
 var Container = styled.div.withConfig({
   displayName: "Chip__Container",
@@ -45,7 +45,7 @@ var Chip = /*#__PURE__*/forwardRef(function (props, ref) {
       children: text
     }), jsx(Button, {
       size: "tiny",
-      Icon: CloseOutlinedIcon,
+      icon: CloseIcon,
       appearance: "borderless",
       purpose: "secondary",
       onClick: onClick,

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

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

package/dist/components/Chip/ChipGroup.stories.d.ts

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

package/dist/components/Datepicker/Datepicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from '../../helpers';
 import { Property } from 'csstype';
 export declare type DatepickerProps = InputProps;

package/dist/components/Datepicker/Datepicker.js

@@ -18,7 +18,7 @@ var getWidth = function getWidth(type) {
 var StyledInput = styled(StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(["::-webkit-calendar-picker-indicator{background-image:url(\"", "\");", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}::-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{", "}"], CalendarIcon, datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+})(["::-webkit-calendar-picker-indicator{background-image:url(\"", "\");", " 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{", "}"], 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,

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type DescriptionListAppearance = 'small' | 'bold';
 export declare type DescriptionListProps = BaseComponentPropsWithChildren<HTMLDListElement, {

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

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

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

@@ -1,16 +1,14 @@
-/// <reference types="react" />
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material';
 import { BaseComponentPropsWithChildren } from '../../types';
+import { SvgIcon } from '../../icons/utils';
 export declare type DescriptionListDescProps = BaseComponentPropsWithChildren<HTMLElement, {
     /**Ikon som vises ved siden av teksten. */
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
 }>;
 export declare const DescriptionListDesc: import("react").ForwardRefExoticComponent<{
     htmlProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
 } & Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "id"> & {
     /**Ikon som vises ved siden av teksten. */
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+    icon?: SvgIcon | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/DescriptionList/DescriptionListDesc.js

@@ -3,32 +3,28 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { descriptionListDescTokens } from './DescriptionListDesc.tokens.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.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"
-})(["", " display:flex;align-items:center;margin-inline-start:0;"], descriptionListDescTokens.base);
-var StyledIconWrapper = styled(IconWrapper).withConfig({
-  displayName: "DescriptionListDesc__StyledIconWrapper",
-  componentId: "sc-1djcf0s-1"
-})(["", ""], descriptionListDescTokens.icon.base);
+})(["", " margin-inline-start:0;"], descriptionListDescTokens.base);
 var DescriptionListDesc = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      Icon = props.Icon,
+      icon = props.icon,
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = __rest(props, ["children", "Icon", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["children", "icon", "id", "className", "htmlProps"]);
 
   var dListDescProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     children: children,
     ref: ref
   });
   return jsxs(DListDesc, Object.assign({}, dListDescProps, {
-    children: [Icon && jsx(StyledIconWrapper, {
-      Icon: Icon
+    children: [icon && jsx(Icon, {
+      icon: icon
     }), " ", children]
   }));
 });

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

@@ -1,13 +1,16 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages;
+var spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages;
 var textDefault = ddsReferenceTokens.textDefault;
-var base = Object.assign(Object.assign({}, FontPackages.body_sans_03.base), {
+var base = Object.assign(Object.assign({}, fontPackages.body_sans_03.base), {
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing.SizesDdsSpacingLocalX025,
   color: textDefault.textColor
 });
 var iconBase = {
-  marginRight: Spacing.SizesDdsSpacingLocalX025
+  marginRight: spacing.SizesDdsSpacingLocalX025
 };
 var descriptionListDescTokens = {
   base: base,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type DescriptionListGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentProps } from '../../types';
 export declare type DividerColor = 'primary' | 'primaryLighter';
 export declare type DividerProps = BaseComponentProps<HTMLHRElement, {

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

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

package/dist/components/Drawer/Drawer.js

@@ -5,7 +5,6 @@ import { forwardRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import { drawerTokens } from './Drawer.tokens.js';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import { Paper } from '../../helpers/Paper/Paper.js';
 import { useMountTransition } from '../../hooks/useMountTransition.js';
 import { focusVisible } from '../../helpers/styling/focusVisible.js';
@@ -17,6 +16,7 @@ import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
+import { CloseIcon } from '../../icons/tsx/close.js';
 
 var Container = styled(Paper).withConfig({
   displayName: "Drawer__Container",
@@ -113,7 +113,7 @@ var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
       appearance: "borderless",
       onClick: onClose,
       "aria-label": "Lukk",
-      Icon: CloseOutlinedIcon
+      icon: CloseIcon
     })]
   })), parentElement) : null;
 });

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type GlobalMessagePurpose = 'info' | 'warning' | 'danger';
 export declare type GlobalMessageProps = BaseComponentPropsWithChildren<HTMLDivElement, {

package/dist/components/GlobalMessage/GlobalMessage.js

@@ -2,11 +2,11 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import { forwardRef, useState } from 'react';
 import { globalMessageTokens } from './GlobalMessage.tokens.js';
 import { Button } from '../Button/Button.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { CloseIcon } from '../../icons/tsx/close.js';
+import { Icon } from '../Icon/Icon.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
 
@@ -17,7 +17,7 @@ var Container = styled.div.withConfig({
   var purpose = _ref.purpose;
   return purpose && css(["", " ", ""], globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
 });
-var MessageIconWrapper = styled(IconWrapper).withConfig({
+var MessageIconWrapper = styled(Icon).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
   componentId: "sc-bf2l65-1"
 })(["margin-right:", ";"], globalMessageTokens.icon.marginRight);
@@ -59,7 +59,7 @@ var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
       closable: closable
     }, {
       children: [jsx(MessageIconWrapper, {
-        Icon: globalMessageTokens.icon[purpose].icon,
+        icon: globalMessageTokens.icon[purpose].icon,
         color: globalMessageTokens.icon[purpose].color
       }), children !== null && children !== void 0 ? children : jsx(Typography, Object.assign({
         as: "span"
@@ -68,7 +68,7 @@ var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
       }))]
     })), jsx(ControlsContainer, {
       children: closable && jsx(Button, {
-        Icon: CloseOutlinedIcon,
+        icon: CloseIcon,
         purpose: buttonPurpose,
         appearance: "borderless",
         onClick: function onClick() {

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

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

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

@@ -1,4 +1,5 @@
 import { CSSObject } from 'styled-components';
+import { ErrorIcon, InfoIcon, WarningIcon } from '../../icons/tsx';
 export declare const globalMessageTokens: {
     container: {
         base: CSSObject;
@@ -21,21 +22,15 @@ export declare const globalMessageTokens: {
     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;
         };
     };

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

@@ -1,7 +1,7 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import WarningOutlinedIcon from '@mui/icons-material/ReportOutlined';
-import DangerOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { InfoIcon } from '../../icons/tsx/info.js';
+import { WarningIcon } from '../../icons/tsx/warning.js';
+import { ErrorIcon } from '../../icons/tsx/error.js';
 
 var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing,
@@ -16,7 +16,8 @@ var containerBase = Object.assign(Object.assign({
 var contentContainerBase = {
   paddingRight: Spacing.SizesDdsSpacingLocalX15,
   paddingTop: Spacing.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing.SizesDdsSpacingLocalX075
+  paddingBottom: Spacing.SizesDdsSpacingLocalX075,
+  gap: Spacing.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase = {
   paddingRight: Spacing.SizesDdsSpacingLocalX075
@@ -55,15 +56,15 @@ var globalMessageTokens = {
   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
     }
   },

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

@@ -0,0 +1,13 @@
+import { Property } from 'csstype';
+import { BaseComponentProps } from '../../types';
+import { SvgIcon } from '../../icons/utils/propTypes';
+export declare type IconSize = 'small' | 'medium' | 'large' | 'inherit';
+export declare type IconProps = BaseComponentProps<SVGSVGElement, {
+    /**Ikonet importert fra `@norges-domstoler/dds-components`. */
+    icon: SvgIcon;
+    /**Størrelsen på ikonet. */
+    iconSize?: IconSize;
+    /**Fargen på ikonet. */
+    color?: Property.Color;
+}>;
+export declare function Icon(props: IconProps): JSX.Element;