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

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

@@ -1,3 +1,17 @@
+import { InputSize, InputTypographyTypes } from '../../helpers';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyTypes: {
+    control: InputTypographyTypes;
+    option: InputTypographyTypes;
+    placeholder: {
+        [k in InputSize]: StaticTypographyType;
+    };
+    noOptionsMessage: {
+        [k in InputSize]: StaticTypographyType;
+    };
+    groupHeading: StaticTypographyType;
+    multiValueLabel: StaticTypographyType;
+};
 export declare const selectTokens: {
     control: {
         borderRadius: string;
@@ -25,36 +39,12 @@ export declare const selectTokens: {
         };
         sizes: {
             medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 padding: string;
             };
             small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 padding: string;
             };
             tiny: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 padding: string;
             };
         };
@@ -72,38 +62,6 @@ export declare const selectTokens: {
     };
     placeholder: {
         color: string;
-        sizes: {
-            medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            tiny: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-        };
     };
     menu: {
         border: string;
@@ -115,29 +73,12 @@ export declare const selectTokens: {
     };
     groupHeading: {
         color: string;
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
         padding: string;
     };
     option: {
         base: {
             gap: string;
             padding: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
-            color: string;
             backgroundColor: string;
         };
         hover: {
@@ -149,46 +90,8 @@ export declare const selectTokens: {
             backgroundColor: string;
         };
         selected: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
             backgroundColor: string;
         };
-        sizes: {
-            medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            tiny: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-        };
     };
     valueContainer: {
         isMulti: {
@@ -214,14 +117,6 @@ export declare const selectTokens: {
     multiValueLabel: {
         padding: string;
         color: string;
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
     };
     multiValueRemove: {
         base: {
@@ -239,14 +134,6 @@ export declare const selectTokens: {
     noOptionsMessage: {
         padding: string;
         color: string;
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
     };
     clearIndicator: {
         base: {

package/dist/components/Select/Select.tokens.js

@@ -1,4 +1,13 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+import '../../helpers/Backdrop/Backdrop.js';
+import 'react/jsx-runtime';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import { inputTypographyTypes } from '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { calculateHeightWithLineHeight } from '../../utils/text.js';
 import '../../utils/color.js';
 
@@ -7,7 +16,20 @@ var colors = ddsBaseTokens.colors,
     fontPackages = ddsBaseTokens.fontPackages,
     borderRadius = ddsBaseTokens.borderRadius,
     border = ddsBaseTokens.border;
-var textDefault = ddsReferenceTokens.textDefault; //custom spacing so that multiselect has same height as single value select
+var textDefault = ddsReferenceTokens.textDefault;
+var placeholderTypographyTypes = {
+  medium: 'supportingStylePlaceholderText01',
+  small: 'supportingStylePlaceholderText02',
+  tiny: 'supportingStylePlaceholderText03'
+};
+var typographyTypes = {
+  control: inputTypographyTypes,
+  option: inputTypographyTypes,
+  placeholder: placeholderTypographyTypes,
+  noOptionsMessage: placeholderTypographyTypes,
+  groupHeading: 'supportingStyleHelperText01',
+  multiValueLabel: 'bodySans01'
+}; //custom spacing so that multiselect has same height as single value select
 
 var controlPaddingBottomMultiMedium = "".concat(spacing.SizesDdsSpacingLocalX075NumberPx - 1, "px");
 var controlPaddingBottomMultiSmall = "".concat(spacing.SizesDdsSpacingLocalX05NumberPx - 1, "px");
@@ -38,32 +60,18 @@ var control = {
   },
   sizes: {
     medium: {
-      font: fontPackages.body_sans_02.base,
       padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX075)
     },
     small: {
-      font: fontPackages.body_sans_01.base,
       padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      font: fontPackages.supportingStyle_tiny_01.base,
       padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05)
     }
   }
 };
 var placeholder = {
-  color: colors.DdsColorNeutralsGray6,
-  sizes: {
-    medium: {
-      font: fontPackages.supportingStyle_placeholdertext_01.base
-    },
-    small: {
-      font: fontPackages.supportingStyle_placeholdertext_02.base
-    },
-    tiny: {
-      font: fontPackages.supportingStyle_placeholdertext_03.base
-    }
-  }
+  color: colors.DdsColorNeutralsGray6
 };
 var dropdownIndicator = {
   base: {
@@ -97,15 +105,12 @@ var menu = {
 };
 var groupHeading = {
   color: colors.DdsColorNeutralsGray7,
-  font: fontPackages.supportingStyle_helpertext_01.base,
   padding: "".concat(spacing.SizesDdsSpacingLocalX05, "  ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
     gap: spacing.SizesDdsSpacingLocalX05,
     padding: "".concat(spacing.SizesDdsSpacingLocalX075),
-    font: fontPackages.body_sans_02.base,
-    color: textDefault.textColor,
     backgroundColor: colors.DdsColorNeutralsWhite
   },
   hover: {
@@ -116,25 +121,13 @@ var option = {
     color: textDefault.textColor,
     backgroundColor: colors.DdsColorInteractiveLightest
   },
-  selected: Object.assign({
+  selected: {
     backgroundColor: colors.DdsColorNeutralsWhite
-  }, fontPackages.body_sans_02.base),
-  sizes: {
-    medium: {
-      font: fontPackages.body_sans_02.base
-    },
-    small: {
-      font: fontPackages.body_sans_01.base
-    },
-    tiny: {
-      font: fontPackages.supportingStyle_tiny_01.base
-    }
   }
 };
 var noOptionsMessage = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX1),
-  color: colors.DdsColorNeutralsGray6,
-  font: fontPackages.supportingStyle_placeholdertext_01.base
+  color: colors.DdsColorNeutralsGray6
 };
 var multiValue = {
   base: {
@@ -149,8 +142,7 @@ var multiValue = {
 };
 var multiValueLabel = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
-  color: colors.DdsColorNeutralsGray9,
-  font: fontPackages.body_sans_01.base
+  color: colors.DdsColorNeutralsGray9
 };
 var multiValueRemove = {
   base: {
@@ -196,4 +188,4 @@ var selectTokens = {
   icon: icon
 };
 
-export { selectTokens };
+export { selectTokens, typographyTypes };

package/dist/components/SkipToContent/SkipToContent.d.ts

@@ -6,7 +6,7 @@ export declare type SkipToContentProps = BaseComponentProps<HTMLAnchorElement, {
     /**Spesifiserer hvor det skal hoppes til via `id`-attributtet til innholdet. */
     href: string;
     /**Avstand fra top i nærmeste posisjonert container. */
-    top?: Property.Top<string | number>;
+    top?: Property.Top;
 }>;
 export declare const SkipToContent: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "className" | "id"> & {
     /** Teksten som vises i lenka. */
@@ -14,7 +14,7 @@ export declare const SkipToContent: import("react").ForwardRefExoticComponent<Pi
     /**Spesifiserer hvor det skal hoppes til via `id`-attributtet til innholdet. */
     href: string;
     /**Avstand fra top i nærmeste posisjonert container. */
-    top?: Property.Top<string | number> | undefined;
+    top?: Property.Top<0 | (string & {})> | undefined;
 } & {
     htmlProps?: import("react").HTMLAttributes<HTMLAnchorElement> | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/SkipToContent/SkipToContent.js

@@ -3,24 +3,27 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { skipToContentTokens } from './SkipToContent.tokens.js';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { focusVisibleTransitionValue, focusVisibleOnDark } 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';
 import { joinClassNames, getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
 
+var wrapper = skipToContentTokens.wrapper,
+    link = skipToContentTokens.link;
 var Wrapper = styled.div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
-})(["box-sizing:border-box;position:absolute;top:", ";text-align:center;opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;", " &:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:200;opacity:1;}"], function (_ref) {
+})(["box-sizing:border-box;position:absolute;top:", ";text-align:center;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;background-color:", ";padding:", ";opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}&:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:200;opacity:1;}"], function (_ref) {
   var top = _ref.top;
   return top;
-}, skipToContentTokens.wrapper.base);
+}, wrapper.backgroundColor, wrapper.padding);
 var Link = styled.a.withConfig({
   displayName: "SkipToContent__Link",
   componentId: "sc-57o1qv-1"
-})(["", " &:focus{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}&:hover{", "}"], skipToContentTokens.link.base, skipToContentTokens.link.focus.base, focusVisibleTransitionValue, skipToContentTokens.link.hover.base);
+})(["text-decoration:none;color:", ";", " @media (prefers-reduced-motion:no-preference){transition:", ";}&:focus{", "}&:hover{color:", ";}"], link.base.color, getFontStyling(defaultTypographyType), focusVisibleTransitionValue, focusVisibleOnDark, link.base.color);
 var SkipToContent = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$text = props.text,
       text = _props$text === void 0 ? 'Til hovedinnhold' : _props$text,

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

@@ -4,7 +4,7 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "id" | "className"> & {
         text?: string | undefined;
         href: string;
-        top?: import("csstype").Property.Top<string | number> | undefined;
+        top?: import("csstype").Property.Top<0 | (string & {})> | undefined;
     } & {
         htmlProps?: import("react").HTMLAttributes<HTMLAnchorElement> | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -1,19 +1,14 @@
-import { CSSObject } from 'styled-components';
 export declare const skipToContentTokens: {
     link: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
+        base: {
+            color: string;
         };
-        focusOutline: {
+        hover: {
             color: string;
-            width: string;
         };
     };
     wrapper: {
-        base: CSSObject;
+        backgroundColor: string;
+        padding: string;
     };
 };

package/dist/components/SkipToContent/SkipToContent.tokens.js

@@ -1,45 +1,22 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import 'styled-components';
-import { focusVisibleOnDark } 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 Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages,
-    Border = ddsBaseTokens.border;
-var linkBase = Object.assign(Object.assign({
-  color: Colors.DdsColorNeutralsWhite
-}, FontPackages.body_sans_02.base), {
-  textDecoration: 'none'
-});
-var linkHoverBase = {
-  color: Colors.DdsColorNeutralsWhite
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var link = {
+  base: {
+    color: colors.DdsColorNeutralsWhite
+  },
+  hover: {
+    color: colors.DdsColorNeutralsWhite
+  }
 };
-var linkFocusBase = Object.assign({}, focusVisibleOnDark);
-var wrapperBase = {
-  backgroundColor: Colors.DdsColorPrimaryBase,
-  padding: Spacing.SizesDdsSpacingLocalX025
+var wrapper = {
+  backgroundColor: colors.DdsColorPrimaryBase,
+  padding: spacing.SizesDdsSpacingLocalX025
 };
 var skipToContentTokens = {
-  link: {
-    base: linkBase,
-    hover: {
-      base: linkHoverBase
-    },
-    focus: {
-      base: linkFocusBase
-    },
-    focusOutline: {
-      color: Colors.DdsColorWarningDark,
-      width: Border.BordersDdsBorderFocusBaseStrokeWeight
-    }
-  },
-  wrapper: {
-    base: wrapperBase
-  }
+  link: link,
+  wrapper: wrapper
 };
 
 export { skipToContentTokens };

package/dist/components/Spinner/Spinner.js

@@ -4,7 +4,6 @@ import React, { useId } from 'react';
 import styled from 'styled-components';
 import { getTextColor } from '../../utils/color.js';
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import { spinnerTokens } from './Spinner.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var StyledSpinner = styled.svg.withConfig({
@@ -23,7 +22,7 @@ var StyledSpinner = styled.svg.withConfig({
 var Circle = styled.circle.withConfig({
   displayName: "Spinner__Circle",
   componentId: "sc-13hsttm-1"
-})(["", " stroke:", ";stroke-linecap:round;@media (prefers-reduced-motion:no-preference){animation:dash 1.5s ease-in-out infinite;animation-delay:", "ms;@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}}"], spinnerTokens.circle.base, function (_ref4) {
+})(["stroke:", ";stroke-linecap:round;@media (prefers-reduced-motion:no-preference){animation:dash 1.5s ease-in-out infinite;animation-delay:", "ms;@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}}"], function (_ref4) {
   var color = _ref4.color;
   return color && getTextColor(color);
 }, function (_ref5) {

package/dist/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps, ButtonSize } from '../Button';
+import { OverflowMenuButtonItem } from '../OverflowMenu';
+export declare type SplitButtonProps = {
+    /**Størrelse på komponenten. */
+    size?: ButtonSize;
+    /**Props for primær handling. Samme props som for `<Button />` unntatt `size`, `purpose`, og `appearance`. */
+    primaryAction: Omit<ButtonProps, 'size' | 'apperance' | 'purpose'>;
+    /**Props for sekunære handlinger. */
+    secondaryActions: OverflowMenuButtonItem[];
+};
+export declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SplitButton/SplitButton.js

@@ -0,0 +1,62 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import styled from 'styled-components';
+import '../../icons/utils/StyledSvg.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
+import { ChevronUpIcon } from '../../icons/tsx/chevronUp.js';
+import { Button } from '../Button/Button.js';
+import { OverflowMenu } from '../OverflowMenu/OverflowMenu.js';
+import { OverflowMenuGroup } from '../OverflowMenu/OverflowMenuGroup.js';
+
+var Container = styled.div.withConfig({
+  displayName: "SplitButton__Container",
+  componentId: "sc-ybpqu3-0"
+})(["display:flex;"]);
+var MainButton = styled(Button).withConfig({
+  displayName: "SplitButton__MainButton",
+  componentId: "sc-ybpqu3-1"
+})(["border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;&:focus{position:relative;z-index:0;}"]);
+var OptionButton = styled(Button).withConfig({
+  displayName: "SplitButton__OptionButton",
+  componentId: "sc-ybpqu3-2"
+})(["border-top-left-radius:0;border-bottom-left-radius:0;&:focus{position:relative;z-index:0;}"]);
+var SplitButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var size = props.size,
+      primaryAction = props.primaryAction,
+      secondaryActions = props.secondaryActions;
+      __rest(props, ["size", "primaryAction", "secondaryActions"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var buttonStyleProps = {
+    appearance: 'filled',
+    purpose: 'secondary',
+    size: size
+  };
+  return jsxs(Container, Object.assign({
+    ref: ref
+  }, {
+    children: [jsx(MainButton, Object.assign({}, buttonStyleProps, primaryAction, {
+      iconPosition: "left"
+    })), jsxs(OverflowMenuGroup, Object.assign({
+      onToggle: function onToggle() {
+        return setIsOpen(!isOpen);
+      }
+    }, {
+      children: [jsx(OptionButton, Object.assign({}, buttonStyleProps, {
+        icon: isOpen ? ChevronUpIcon : ChevronDownIcon,
+        "aria-label": "\xC5pne liste med flere valg"
+      })), jsx(OverflowMenu, {
+        items: secondaryActions,
+        placement: "bottom-end"
+      })]
+    }))]
+  }));
+});
+
+export { SplitButton };

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

@@ -0,0 +1,9 @@
+import { SplitButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Overview: (args: SplitButtonProps) => JSX.Element;
+export declare const Default: (args: SplitButtonProps) => JSX.Element;
+export declare const FullWidth: () => JSX.Element;

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

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

package/dist/components/Table/Row.js

@@ -7,6 +7,7 @@ import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
+import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
 import { tableTokens } from './Table.tokens.js';
 
 var row = tableTokens.row;
@@ -18,7 +19,7 @@ var bodyStyles = function bodyStyles(mode, selected) {
 var StyledRow = styled.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-15vvjkk-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " color:", ";", " ", ""], row.base.font, row.base.color, function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", " ", ""], getFontStyling(defaultTypographyType, true), function (_ref) {
   var type = _ref.type;
   return type === 'head' && css(["font-weight:600;text-align:left;"]);
 }, function (_ref2) {

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

@@ -1,16 +1,5 @@
 export declare const tableTokens: {
     row: {
-        base: {
-            color: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
-        };
         body: {
             odd: {
                 backgroundColor: string;
@@ -26,14 +15,6 @@ export declare const tableTokens: {
             };
             mode: {
                 sum: {
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     borderTop: string;
                     borderBottom: string;
                     backgroundColor: string;

package/dist/components/Table/Table.tokens.js

@@ -1,15 +1,9 @@
-import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
-    fontPackages = ddsBaseTokens.fontPackages,
     border = ddsBaseTokens.border,
     spacing = ddsBaseTokens.spacing;
-var textDefault = ddsReferenceTokens.textDefault;
 var row = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_sans_02.base
-  },
   body: {
     odd: {
       backgroundColor: colors.DdsColorNeutralsWhite
@@ -25,7 +19,6 @@ var row = {
     },
     mode: {
       sum: {
-        font: fontPackages.body_sans_02.base,
         borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray4),
         borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray4),
         backgroundColor: colors.DdsColorNeutralsWhite