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

package/dist/components/Card/Card.js

@@ -3,21 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
 import { cardTokens } from './Card.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
+import { focusVisibleWithBorder } from '../../helpers/styling/focusVisible.js';
+import { hoverWithBorder } from '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
+import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
 
 var Container = styled.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
-})(["", " &::selection,*::selection{", "}@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s;}", " ", ""], cardTokens.base, selection, function (_ref) {
+})(["border:", ";", ";&::selection,*::selection{", "}@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s;}", " ", ""], cardTokens.base.border, getFontStyling(defaultTypographyType), selection, function (_ref) {
   var color = _ref.color;
-  return color && css(["", ""], cardTokens.colors[color].base);
+  return color && css(["color:", ";background-color:", ";border-color:", ";"], cardTokens.colors[color].color, cardTokens.colors[color].backgroundColor, cardTokens.colors[color].borderColor);
 }, function (_ref2) {
   var cardType = _ref2.cardType;
-  return cardType === 'navigation' ? css(["text-decoration:none;&:hover{", "}&:focus{outline:none;", "}"], cardTokens.navigation.hover.base, cardTokens.navigation.focus.base) : cardType === 'expandable' ? css(["width:100%;box-sizing:border-box;&:not(:first-of-type){border-top:none;}"]) : '';
+  return cardType === 'navigation' ? css(["text-decoration:none;&:hover{", "}&:focus{", "}"], hoverWithBorder, focusVisibleWithBorder) : cardType === 'expandable' ? css(["width:100%;box-sizing:border-box;&:not(:first-of-type){border-top:none;}"]) : '';
 });
 var Card = function Card(props) {
   var _props$color = props.color,

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

@@ -1,26 +1,27 @@
-import { CSSObject } from 'styled-components';
 export declare const cardTokens: {
-    base: CSSObject;
-    navigation: {
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
+    base: {
+        border: string;
     };
     colors: {
-        filledDark: {
-            base: CSSObject;
-        };
         filledLight: {
-            base: CSSObject;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
         };
-        strokeLight: {
-            base: CSSObject;
+        filledDark: {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
         };
         strokeDark: {
-            base: CSSObject;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+        strokeLight: {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
         };
     };
 };

package/dist/components/Card/Card.tokens.js

@@ -1,64 +1,36 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import 'styled-components';
-import { focusVisibleWithBorder } from '../../helpers/styling/focusVisible.js';
-import { hoverWithBorder } from '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
 
-var Colors = ddsBaseTokens.colors,
-    Border = ddsBaseTokens.border,
-    FontPackages = ddsBaseTokens.fontPackages;
+var colors = ddsBaseTokens.colors,
+    border = ddsBaseTokens.border;
 var textDefault = ddsReferenceTokens.textDefault;
-var base = Object.assign({
-  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid")
-}, FontPackages.body_sans_02.base);
-var navigationHoverBase = Object.assign({}, hoverWithBorder);
-var navigationFocusBase = Object.assign({}, focusVisibleWithBorder);
-var filledDarkBase = {
-  backgroundColor: Colors.DdsColorPrimaryBase,
-  borderColor: Colors.DdsColorPrimaryBase,
-  color: Colors.DdsColorNeutralsWhite
+var base = {
+  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid")
 };
-var filledLightBase = {
-  backgroundColor: Colors.DdsColorPrimaryLightest,
-  borderColor: Colors.DdsColorPrimaryLightest,
-  color: textDefault.textColor
-};
-var strokeLightBase = {
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  borderColor: Border.BordersDdsBorderStyleLightStroke,
-  color: textDefault.textColor
-};
-var strokeDarkBase = {
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  borderColor: Border.BordersDdsBorderStyleDarkStroke,
-  color: textDefault.textColor
+var cardColors = {
+  filledLight: {
+    backgroundColor: colors.DdsColorPrimaryLightest,
+    borderColor: colors.DdsColorPrimaryLightest,
+    color: textDefault.textColor
+  },
+  filledDark: {
+    backgroundColor: colors.DdsColorPrimaryBase,
+    borderColor: colors.DdsColorPrimaryBase,
+    color: colors.DdsColorNeutralsWhite
+  },
+  strokeDark: {
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    borderColor: border.BordersDdsBorderStyleLightStroke,
+    color: textDefault.textColor
+  },
+  strokeLight: {
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    borderColor: border.BordersDdsBorderStyleLightStroke,
+    color: textDefault.textColor
+  }
 };
 var cardTokens = {
   base: base,
-  navigation: {
-    hover: {
-      base: navigationHoverBase
-    },
-    focus: {
-      base: navigationFocusBase
-    }
-  },
-  colors: {
-    filledDark: {
-      base: filledDarkBase
-    },
-    filledLight: {
-      base: filledLightBase
-    },
-    strokeLight: {
-      base: strokeLightBase
-    },
-    strokeDark: {
-      base: strokeDarkBase
-    }
-  }
+  colors: cardColors
 };
 
 export { cardTokens };

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

@@ -0,0 +1,28 @@
+import { StaticTypographyType } from '../../Typography';
+export declare const typographyTypes: {
+    body: StaticTypographyType;
+    header: StaticTypographyType;
+};
+export declare const cardAccordionTokens: {
+    header: {
+        padding: string;
+        hover: {
+            boxShadow: string;
+        };
+        focus: {
+            boxShadow: string;
+        };
+    };
+    body: {
+        padding: string;
+    };
+    chevronWrapper: {
+        width: string;
+        height: string;
+        marginLeft: string;
+    };
+    chevron: {
+        width: string;
+        height: string;
+    };
+};

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

@@ -0,0 +1,37 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var spacing = ddsBaseTokens.spacing,
+    border = ddsBaseTokens.border,
+    iconSizes = ddsBaseTokens.iconSizes;
+var typographyTypes = {
+  body: 'bodySans03',
+  header: 'headingSans03'
+};
+var header = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX15),
+  hover: {
+    boxShadow: "0 0 0 ".concat(border.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(border.BordersDdsBorderFocusInputfieldStroke)
+  },
+  focus: {
+    boxShadow: "0 0 0 ".concat(border.BordersDdsBorderFocusCardStrokeWeight, " ").concat(border.BordersDdsBorderFocusCardStroke)
+  }
+};
+var chevronWrapper = {
+  width: iconSizes.DdsIconsizeMedium,
+  height: iconSizes.DdsIconsizeMedium,
+  marginLeft: spacing.SizesDdsSpacingLocalX05
+};
+var body = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX2NumberPx + spacing.SizesDdsSpacingLocalX075NumberPx, "px ").concat(spacing.SizesDdsSpacingLocalX2, " ").concat(spacing.SizesDdsSpacingLocalX15)
+};
+var cardAccordionTokens = {
+  header: header,
+  body: body,
+  chevronWrapper: chevronWrapper,
+  chevron: {
+    width: iconSizes.DdsIconsizeMedium,
+    height: spacing.SizesDdsSpacingLocalX05
+  }
+};
+
+export { cardAccordionTokens, typographyTypes };

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

@@ -3,18 +3,19 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useLayoutEffect, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { cardAccordionBodyTokens } from './CardAccordionBody.tokens.js';
+import { cardAccordionTokens, typographyTypes } from './CardAccordion.tokens.js';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 import useIsMounted from '../../../hooks/useIsMounted.js';
+import { getFontStyling } from '../../Typography/Typography.utils.js';
 
 var expandingAnimation = css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
 var Body = styled.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
-})(["@media (prefers-reduced-motion:no-preference){", "}", " ", " ", ""], function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){", "}padding:", ";", " ", " ", ""], function (_ref) {
   var animate = _ref.animate;
   return animate && expandingAnimation;
-}, cardAccordionBodyTokens.base, function (_ref2) {
+}, cardAccordionTokens.body.padding, getFontStyling(typographyTypes.body), function (_ref2) {
   var paddingTop = _ref2.paddingTop;
   return paddingTop && css(["padding-top:", ";"], paddingTop);
 }, function (_ref3) {

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

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { cardAccordionHeaderTokens } from './CardAccordionHeader.tokens.js';
+import { cardAccordionTokens, typographyTypes } from './CardAccordion.tokens.js';
 import '../../../helpers/Backdrop/Backdrop.js';
 import { AnimatedChevronUpDown } from '../../../helpers/Chevron/AnimatedChevronUpDown.js';
 import '../../../helpers/HiddenInput/HiddenInput.js';
@@ -18,7 +18,10 @@ import '../../../helpers/styling/focus.js';
 import '../../../helpers/styling/danger.js';
 import '../../../helpers/styling/selection.js';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import { getFontStyling } from '../../Typography/Typography.utils.js';
 
+var header = cardAccordionTokens.header,
+    chevronWrapper = cardAccordionTokens.chevronWrapper;
 var ContentWrapper = styled.div.withConfig({
   displayName: "CardAccordionHeader__ContentWrapper",
   componentId: "sc-1qs6bkj-0"
@@ -26,15 +29,15 @@ var ContentWrapper = styled.div.withConfig({
 var HeaderContainer = styled.div.withConfig({
   displayName: "CardAccordionHeader__HeaderContainer",
   componentId: "sc-1qs6bkj-1"
-})(["display:flex;justify-content:space-between;align-items:center;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", ""], cardAccordionHeaderTokens.base);
+})(["display:flex;justify-content:space-between;align-items:center;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}padding:", ";", ""], header.padding, getFontStyling(typographyTypes.header));
 var HeaderWrapper = styled.button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
-})(["user-select:text;position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{", "}&:focus-visible,&.focus-visible{outline:none;", "}"], removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
+})(["user-select:text;position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{box-shadow:", ";}&:focus-visible,&.focus-visible{outline:none;box-shadow:", ";}"], removeButtonStyling, header.hover.boxShadow, header.focus.boxShadow);
 var ChevronWrapper = styled.span.withConfig({
   displayName: "CardAccordionHeader__ChevronWrapper",
   componentId: "sc-1qs6bkj-3"
-})(["display:flex;align-items:center;justify-content:center;", ""], cardAccordionHeaderTokens.chevronWrapper.base);
+})(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";margin-left:", ";"], chevronWrapper.width, chevronWrapper.height, chevronWrapper.marginLeft);
 var CardAccordionHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       _props$isExpanded = props.isExpanded,
@@ -60,8 +63,8 @@ var CardAccordionHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var chevronProps = {
     isUp: isExpanded,
-    width: cardAccordionHeaderTokens.chevron.width,
-    height: cardAccordionHeaderTokens.chevron.height
+    width: cardAccordionTokens.chevron.width,
+    height: cardAccordionTokens.chevron.height
   };
   return jsx(HeaderWrapper, Object.assign({}, headerWrapperProps, {
     children: jsxs(HeaderContainer, {

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

@@ -1,14 +1,14 @@
 import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         indeterminate?: boolean | undefined;
     } & import("../../types").CheckboxPickedHTMLAttributes & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,5 +1,4 @@
-import { BaseComponentPropsWithChildren } from '../../types';
-declare type Direction = 'column' | 'row';
+import { BaseComponentPropsWithChildren, Direction } from '../../types';
 export declare type CheckboxGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Ledetekst for gruppen. */
     label?: string;
@@ -14,4 +13,3 @@ export declare type CheckboxGroupProps = BaseComponentPropsWithChildren<HTMLDivE
     required?: boolean;
 }>;
 export declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
-export {};

package/dist/components/Checkbox/CheckboxGroup.js

@@ -1,7 +1,6 @@
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
-import styled, { css } from 'styled-components';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
@@ -10,27 +9,15 @@ import '../../helpers/Input/Input.tokens.js';
 import { renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
-import { checkboxGroupTokens } from './CheckboxGroup.tokens.js';
 import { CheckboxGroupContext } from './CheckboxGroupContext.js';
 import { Typography } from '../Typography/Typography/Typography.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import { derivativeIdGenerator } from '../../utils/idGenerator.js';
 import '../../utils/color.js';
+import { OuterGroupContainer, GroupContainer } from '../../helpers/SelectionControl/SelectionControl.styles.js';
+import '../../helpers/SelectionControl/SelectionControl.tokens.js';
 
-var outerContainer = checkboxGroupTokens.outerContainer,
-    groupContainer = checkboxGroupTokens.groupContainer;
-var Container = styled.div.withConfig({
-  displayName: "CheckboxGroup__Container",
-  componentId: "sc-uixbzg-0"
-})(["display:flex;flex-direction:column;gap:", ";"], outerContainer.gap);
-var GroupContainer = styled.div.withConfig({
-  displayName: "CheckboxGroup__GroupContainer",
-  componentId: "sc-uixbzg-1"
-})(["display:flex;", ""], function (_ref) {
-  var direction = _ref.direction;
-  return css(["flex-direction:", ";gap:", ";"], direction, groupContainer[direction].gap);
-});
 var CheckboxGroup = function CheckboxGroup(props) {
   var label = props.label,
       _props$direction = props.direction,
@@ -59,7 +46,7 @@ var CheckboxGroup = function CheckboxGroup(props) {
     uniqueGroupId: uniqueGroupId,
     tipId: tip ? tipId : undefined
   };
-  return jsxs(Container, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
+  return jsxs(OuterGroupContainer, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
     'aria-required': ariaRequired
   }), rest), {
     children: [jsxs(Typography, Object.assign({

package/dist/components/Chip/Chip.js

@@ -4,19 +4,18 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import styled from 'styled-components';
 import { Button } from '../Button/Button.js';
-import { chipTokens } from './Chip.tokens.js';
+import { chipTokens, typographyType } from './Chip.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
+import { TextOverflowEllipsisWrapper, TextOverflowEllipsisInner } from '../../helpers/TextOverflowEllipsis/TextOverflowEllipsis.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
-var Container = styled.div.withConfig({
+var container = chipTokens.container;
+var Container = styled(TextOverflowEllipsisWrapper).withConfig({
   displayName: "Chip__Container",
   componentId: "sc-1l242zs-0"
-})(["", ""], chipTokens.container.base);
-var TextWrapper = styled.span.withConfig({
-  displayName: "Chip__TextWrapper",
-  componentId: "sc-1l242zs-1"
-})(["", ""], chipTokens.text.base);
+})(["display:flex;align-items:center;max-width:100%;gap:", ";padding:", ";border:", ";border-radius:", ";background-color:", ";", ";"], container.gap, container.padding, container.border, container.borderRadius, container.backgroundColor, getFontStyling(typographyType, true));
 var Chip = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
       onClose = props.onClose,
@@ -40,9 +39,10 @@ var Chip = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   return isOpen ? jsxs(Container, Object.assign({}, getBaseHTMLProps(id, className, restHTMLprops, rest), {
-    ref: ref
+    ref: ref,
+    as: "div"
   }, {
-    children: [jsx(TextWrapper, {
+    children: [jsx(TextOverflowEllipsisInner, {
       children: text
     }), jsx(Button, {
       size: "tiny",

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

@@ -1,12 +1,14 @@
-import { CSSObject } from 'styled-components';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const chipTokens: {
     container: {
-        base: CSSObject;
+        gap: string;
+        padding: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
     };
     group: {
-        base: CSSObject;
-    };
-    text: {
-        base: CSSObject;
+        gap: string;
     };
 };

package/dist/components/Chip/Chip.tokens.js

@@ -2,38 +2,21 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing,
-    borderRadius = ddsBaseTokens.borderRadius,
-    fontPackages = ddsBaseTokens.fontPackages;
-var containerBase = {
-  display: 'flex',
-  alignItems: 'center',
+    borderRadius = ddsBaseTokens.borderRadius;
+var typographyType = 'bodySans01';
+var container = {
   gap: spacing.SizesDdsSpacingLocalX025,
   padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
   backgroundColor: colors.DdsColorNeutralsGray1,
   border: "1px solid ".concat(colors.DdsColorNeutralsGray3),
-  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
-  color: colors.DdsColorNeutralsGray9,
-  maxWidth: '100%'
+  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius
 };
-var textBase = Object.assign({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-}, fontPackages.body_sans_01.base);
-var groupBase = {
-  display: 'flex',
+var group = {
   gap: spacing.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
-  container: {
-    base: containerBase
-  },
-  group: {
-    base: groupBase
-  },
-  text: {
-    base: textBase
-  }
+  container: container,
+  group: group
 };
 
-export { chipTokens };
+export { chipTokens, typographyType };

package/dist/components/Chip/ChipGroup.js

@@ -8,7 +8,7 @@ import { chipTokens } from './Chip.tokens.js';
 var Group = styled.ul.withConfig({
   displayName: "ChipGroup__Group",
   componentId: "sc-evmxhv-0"
-})(["", " ", ""], removeListStyling, chipTokens.group.base);
+})(["", " display:flex;gap:", ";"], removeListStyling, chipTokens.group.gap);
 var ChipGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);

package/dist/components/DescriptionList/DescriptionList.js

@@ -8,7 +8,8 @@ import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { descriptionListTokens } from './DescriptionList.tokens.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
+import { descriptionListTokens, termTypographyTypes } from './DescriptionList.tokens.js';
 
 var term = descriptionListTokens.term,
     desc = descriptionListTokens.desc,
@@ -18,7 +19,7 @@ var DList = styled.dl.withConfig({
   componentId: "sc-1ob73hm-0"
 })(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
-  return appearance && css(["dt{", " color:", ";line-height:", ";font-size:", ";letter-spacing:", ";font-family:", ";font-weight:", ";font-style:", ";}"], term.appearance[appearance].font, term.appearance[appearance].color, term.appearance[appearance].lineHeight, term.appearance[appearance].fontSize, term.appearance[appearance].letterSpacing, term.appearance[appearance].fontFamily, term.appearance[appearance].fontWeight, term.appearance[appearance].fontStyle);
+  return appearance && css(["dt{color:", ";", " ", ""], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && css(["font-weight:600;"]));
 }, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

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

@@ -1,38 +1,16 @@
+import { StaticTypographyType } from '../Typography';
+import { DescriptionListAppearance } from './DescriptionList';
+export declare const termTypographyTypes: {
+    [k in DescriptionListAppearance]: StaticTypographyType;
+};
+export declare const descTypographyType: StaticTypographyType;
 export declare const descriptionListTokens: {
     term: {
         appearance: {
             small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 color: string;
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
             };
             bold: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: number;
-                fontStyle: any;
                 color: string;
             };
         };
@@ -42,14 +20,6 @@ export declare const descriptionListTokens: {
     };
     desc: {
         base: {
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
             gap: string;
             color: string;
         };

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

@@ -1,28 +1,18 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages,
     colors = ddsBaseTokens.colors;
+var termTypographyTypes = {
+  bold: 'bodySans03',
+  small: 'bodySans01'
+};
+var descTypographyType = 'bodySans03';
 var term = {
   appearance: {
     small: {
-      font: fontPackages.body_sans_01.base,
-      color: colors.DdsColorNeutralsGray7,
-      lineHeight: fontPackages.body_sans_01.base.lineHeight,
-      fontSize: fontPackages.body_sans_01.base.fontSize,
-      letterSpacing: fontPackages.body_sans_01.base.letterSpacing,
-      fontFamily: fontPackages.body_sans_01.base.fontFamily,
-      fontWeight: fontPackages.body_sans_01.base.fontWeight,
-      fontStyle: fontPackages.body_sans_01.base.fontStyle
+      color: colors.DdsColorNeutralsGray7
     },
     bold: {
-      font: fontPackages.body_sans_03.base,
-      lineHeight: fontPackages.body_sans_03.base.lineHeight,
-      fontSize: fontPackages.body_sans_03.base.fontSize,
-      letterSpacing: fontPackages.body_sans_03.base.letterSpacing,
-      fontFamily: fontPackages.body_sans_03.base.fontFamily,
-      fontWeight: 600,
-      fontStyle: fontPackages.body_sans_03.base.fontStyle,
       color: colors.DdsColorNeutralsGray9
     }
   },
@@ -32,7 +22,6 @@ var term = {
 };
 var desc = {
   base: {
-    font: fontPackages.body_sans_03.base,
     gap: spacing.SizesDdsSpacingLocalX025,
     color: colors.DdsColorNeutralsGray9
   },
@@ -57,4 +46,4 @@ var descriptionListTokens = {
   group: group
 };
 
-export { descriptionListTokens };
+export { descTypographyType, descriptionListTokens, termTypographyTypes };