@norges-domstoler/dds-components 7.1.0 → 8.0.0

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

@@ -1,7 +1,7 @@
 import { SearchProps } from './Search';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../helpers").InputProps, "tip"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../helpers").InputProps, "label" | "tip"> & {
         componentSize?: import("./Search").SearchSize | undefined;
         buttonProps?: ({
             onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -15,6 +15,11 @@ declare const _default: {
                 type: string;
             };
         };
+        label: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {
@@ -24,5 +29,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Overview: (args: SearchProps) => JSX.Element;
+export declare const OverviewSizes: (args: SearchProps) => JSX.Element;
 export declare const Default: (args: SearchProps) => JSX.Element;
 export declare const WithButton: (args: SearchProps) => JSX.Element;

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

@@ -61,7 +61,10 @@ export declare const searchTokens: {
             top: string;
         };
     };
-    container: {
+    horisontalContainer: {
+        gap: string;
+    };
+    outerContainer: {
         gap: string;
     };
 };

package/dist/components/Search/Search.tokens.js

@@ -33,9 +33,12 @@ var input = {
     }
   }
 };
-var container = {
+var horisontalContainer = {
   gap: spacing.SizesDdsSpacingLocalX05
 };
+var outerContainer = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
 var icon = {
   base: {
     left: spacing.SizesDdsSpacingLocalX075,
@@ -54,7 +57,8 @@ var icon = {
 var searchTokens = {
   input: input,
   icon: icon,
-  container: container
+  horisontalContainer: horisontalContainer,
+  outerContainer: outerContainer
 };
 
 export { searchTokens };

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

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

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

@@ -4,7 +4,7 @@ export declare type TableCellLayout = 'left' | 'right' | 'center' | 'text and ic
 export declare type TableCellProps = {
     /**Type celle. Returnerer enten `<td>` eller `<th>`. */
     type?: TableCellType;
-    /**Layout av innholdet i cellen. 'tekst and icon' legger margin mellom første barnet og andre barnet i cellen, og skal hovedsakelig brukes når innholdet er tekst og ikon; tekst må bli wrappet i `<span>` hvis det er det første barnet.  */
+    /**Layout av innholdet i cellen. 'tekst and icon' legger `gap` mellom barna og andre barnet i cellen.  */
     layout?: TableCellLayout;
 } & (TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>);
 export declare const Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/Table/Cell.js

@@ -2,7 +2,9 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { cellTokens } from './Cell.tokens.js';
+import { tableTokens } from './Table.tokens.js';
+
+var cell = tableTokens.cell;
 
 var layoutStyle = function layoutStyle(layout) {
   switch (layout) {
@@ -13,7 +15,7 @@ var layoutStyle = function layoutStyle(layout) {
       return css(["justify-content:flex-end;"]);
 
     case 'text and icon':
-      return css(["& > *:first-of-type{", "}"], cellTokens.data.layout.textAndIcon.base);
+      return css(["gap:", ";"], cell.layout.textAndIcon.gap);
 
     default:
     case 'left':
@@ -24,9 +26,9 @@ var layoutStyle = function layoutStyle(layout) {
 var StyledCell = styled.td.withConfig({
   displayName: "Cell__StyledCell",
   componentId: "sc-ghfpfs-0"
-})(["", " ", ""], cellTokens.base, function (_ref) {
+})(["", ""], function (_ref) {
   var type = _ref.type;
-  return type && css(["", ""], cellTokens[type].base);
+  return type === 'head' && css(["background-color:", ";"], cell.head.backgroundColor);
 });
 var InnerCell = styled.div.withConfig({
   displayName: "Cell__InnerCell",

package/dist/components/Table/Row.js

@@ -2,24 +2,31 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { rowTokens } from './Row.tokens.js';
+import { focusVisibleInset } 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 { tableTokens } from './Table.tokens.js';
+
+var row = tableTokens.row;
 
 var bodyStyles = function bodyStyles(mode, selected) {
-  return css(["", " ", ""], mode && css(["", ""], rowTokens.body.mode[mode].base), selected && css(["", ""], rowTokens.body.selected.base));
+  return css(["", " ", ""], mode === 'sum' && css(["font-weight:600;border-top:", ";border-bottom:", ";background-color:", ";"], row.body.mode.sum.borderTop, row.body.mode.sum.borderBottom, row.body.mode.sum.backgroundColor), selected && css(["background-color:", ";"], row.body.selected.backgroundColor));
 };
 
 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;}", " ", ""], function (_ref) {
+})(["@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) {
   var type = _ref.type;
-  return type && css(["", ""], rowTokens[type].base);
+  return type === 'head' && css(["font-weight:600;text-align:left;"]);
 }, function (_ref2) {
   var type = _ref2.type,
       mode = _ref2.mode,
       selected = _ref2.selected,
       hoverable = _ref2.hoverable;
-  return type === 'body' && css(["&:nth-of-type(even){", " ", "}&:nth-of-type(odd){", " ", "}", " &:focus-visible,&.focus-visible{", "}"], rowTokens.body.even.base, bodyStyles(mode, selected), rowTokens.body.odd.base, bodyStyles(mode, selected), hoverable && css(["&:hover{", "}"], rowTokens.body.hover.base), rowTokens.body.focus.base);
+  return type === 'body' && css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyStyles(mode, selected), row.body.odd.backgroundColor, bodyStyles(mode, selected), hoverable && css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
 });
 var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$type = _a.type,

package/dist/components/Table/SortCell.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Cell } from './Cell.js';
-import { cellTokens } from './Cell.tokens.js';
+import { tableTokens } from './Table.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import '../../icons/utils/StyledSvg.js';
 import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
@@ -10,33 +10,30 @@ import { ChevronUpIcon } from '../../icons/tsx/chevronUp.js';
 import { UnfoldMoreIcon } from '../../icons/tsx/unfoldMore.js';
 import styled from 'styled-components';
 import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
-import '../../helpers/styling/focusVisible.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
 
-var SortIcon = styled(Icon).withConfig({
-  displayName: "SortCell__SortIcon",
-  componentId: "sc-1l3jzvh-0"
-})(["", ""], cellTokens.head.sortCell.icon.base);
+var cell = tableTokens.cell;
 var StyledButton = styled.button.withConfig({
   displayName: "SortCell__StyledButton",
-  componentId: "sc-1l3jzvh-1"
-})(["", " display:flex;align-items:center;&:focus-visible{", "}"], removeButtonStyling, cellTokens.head.sortCell.focus.base);
+  componentId: "sc-1l3jzvh-0"
+})(["user-select:text;", " display:flex;align-items:center;gap:", ";&:focus-visible{", "}"], removeButtonStyling, cell.sort.gap, focusVisible);
 
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
-    return jsx(SortIcon, {
+    return jsx(Icon, {
       icon: UnfoldMoreIcon,
       iconSize: "inherit"
     });
   }
 
-  return sortOrder === 'ascending' ? jsx(SortIcon, {
+  return sortOrder === 'ascending' ? jsx(Icon, {
     icon: ChevronDownIcon,
     iconSize: "inherit"
-  }) : jsx(SortIcon, {
+  }) : jsx(Icon, {
     icon: ChevronUpIcon,
     iconSize: "inherit"
   });

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

@@ -5,10 +5,14 @@ export declare type TableProps = {
     density?: TableDensity;
     /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
     stickyHeader?: boolean;
+    /**Legger skillelinjer mellom radene. */
+    withDividers?: boolean;
 } & HTMLAttributes<HTMLTableElement>;
 export declare const Table: import("react").ForwardRefExoticComponent<{
     /**Spesifiserer hvor romslige cellene i tabellen skal være. */
     density?: TableDensity | undefined;
     /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
     stickyHeader?: boolean | undefined;
+    /**Legger skillelinjer mellom radene. */
+    withDividers?: boolean | undefined;
 } & HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/components/Table/Table.js

@@ -10,17 +10,22 @@ import { selection } from '../../helpers/styling/selection.js';
 import '../ScrollableContainer/Scrollbar.js';
 import '../ScrollableContainer/ScrollableContainer.js';
 import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
-import { cellTokens } from './Cell.tokens.js';
+import { tableTokens } from './Table.tokens.js';
 
+var cell = tableTokens.cell,
+    row = tableTokens.row;
 var StyledTable = styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
-  return density && css(["td,th{", "}"], cellTokens.density[density].base);
+  return css(["td,th{padding:", ";}"], cell.density[density].padding);
 }, function (_ref2) {
   var stickyHeader = _ref2.stickyHeader;
   return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;}}"]);
+}, function (_ref3) {
+  var withDividers = _ref3.withDividers;
+  return withDividers && css(["tr[type='body']{border-bottom:", ";}"], row.body.withDividers.borderBottom);
 });
 var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$density = _a.density,

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

@@ -4,6 +4,7 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<{
         density?: import("./Table").TableDensity | undefined;
         stickyHeader?: boolean | undefined;
+        withDividers?: boolean | undefined;
     } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
     argTypes: {
         stickyHeader: {
@@ -11,10 +12,16 @@ declare const _default: {
                 type: string;
             };
         };
+        withDividers: {
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;
 export declare const Default: (args: TableProps) => JSX.Element;
+export declare const withDividers: (args: TableProps) => JSX.Element;
 export declare const Focusable: (args: TableProps) => JSX.Element;
 export declare const Compact: (args: TableProps) => JSX.Element;
 export declare const StickyHeader: (args: TableProps) => JSX.Element;

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

@@ -0,0 +1,72 @@
+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;
+            };
+            even: {
+                backgroundColor: string;
+            };
+            hover: {
+                backgroundColor: string;
+            };
+            selected: {
+                backgroundColor: string;
+            };
+            mode: {
+                sum: {
+                    font: {
+                        lineHeight: any;
+                        fontSize: string;
+                        letterSpacing: any;
+                        fontFamily: any;
+                        fontWeight: any;
+                        fontStyle: any;
+                    };
+                    borderTop: string;
+                    borderBottom: string;
+                    backgroundColor: string;
+                };
+            };
+            withDividers: {
+                borderBottom: string;
+            };
+        };
+    };
+    cell: {
+        density: {
+            normal: {
+                padding: string;
+            };
+            compact: {
+                padding: string;
+            };
+        };
+        head: {
+            backgroundColor: string;
+        };
+        sort: {
+            gap: string;
+            icon: {
+                marginInlineStart: string;
+            };
+        };
+        layout: {
+            textAndIcon: {
+                gap: string;
+                marginRight: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,69 @@
+import { ddsBaseTokens, ddsReferenceTokens } 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
+    },
+    even: {
+      backgroundColor: colors.DdsColorNeutralsGray1
+    },
+    hover: {
+      backgroundColor: colors.DdsColorInteractiveLightest
+    },
+    selected: {
+      backgroundColor: colors.DdsColorInteractiveLightest
+    },
+    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
+      }
+    },
+    withDividers: {
+      borderBottom: "1px solid ".concat(colors.DdsColorNeutralsGray4)
+    }
+  }
+};
+var cell = {
+  density: {
+    normal: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX15, " ").concat(spacing.SizesDdsSpacingLocalX075)
+    },
+    compact: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX075)
+    }
+  },
+  head: {
+    backgroundColor: colors.DdsColorPrimaryLightest
+  },
+  sort: {
+    gap: spacing.SizesDdsSpacingLocalX05,
+    icon: {
+      marginInlineStart: spacing.SizesDdsSpacingLocalX05
+    }
+  },
+  layout: {
+    textAndIcon: {
+      gap: spacing.SizesDdsSpacingLocalX075,
+      marginRight: spacing.SizesDdsSpacingLocalX075
+    }
+  }
+};
+var tableTokens = {
+  row: row,
+  cell: cell
+};
+
+export { tableTokens };

package/dist/components/Tabs/Tab.js

@@ -7,6 +7,7 @@ import { tabsTokens } from './Tabs.tokens.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { useTabsContext } from './Tabs.context.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
@@ -19,7 +20,7 @@ import '../../helpers/styling/selection.js';
 var Button = styled.button.withConfig({
   displayName: "Tab__Button",
   componentId: "sc-1dd8soq-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " ", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
+})(["user-select:text;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " ", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
   var direction = _ref.direction;
   return tabsTokens.tab.direction[direction].base;
 }, function (_ref2) {

package/dist/components/Tabs/TabList.js

@@ -9,6 +9,7 @@ import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import '../../hooks/useFloatPosition.js';
 import { useRoveFocus } from '../../hooks/useRoveFocus.js';
+import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { useTabsContext } from './Tabs.context.js';
 import '../ScrollableContainer/Scrollbar.js';

package/dist/components/Tabs/TabPanels.js

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { useTabsContext } from './Tabs.context.js';
 

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

@@ -1,7 +1,7 @@
 import { TagProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
         text?: string | undefined;
         purpose?: import("./Tag").TagPurpose | undefined;
     } & {

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

@@ -1,7 +1,7 @@
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
         label?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
     } & {

package/dist/components/Tooltip/Tooltip.js

@@ -5,10 +5,10 @@ import { forwardRef, useId, useState, useEffect, Children, isValidElement, clone
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useFloatPosition } from '../../hooks/useFloatPosition.js';
-import '../../hooks/useScreenSize.js';
-import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { combineHandlers } from '../../utils/combineHandlers.js';
 import '../../utils/color.js';
+import '../../hooks/useScreenSize.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Container, TooltipWrapper, ArrowWrapper, SvgArrow } from './Tooltip.styles.js';
 import { tooltipTokens } from './Tooltip.tokens.js';
 

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

@@ -1,7 +1,7 @@
 import { TooltipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
         placement?: import("../..").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;

package/dist/components/Typography/Caption/Caption.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & CaptionProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLTableCaptionElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLTableCaptionElement>, "id" | "className"> & {
         withMargins?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Typography/Heading/Heading.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & HeadingProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHeadingElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHeadingElement>, "id" | "className"> & {
         level: import("./Heading").HeadingLevel;
         typographyType?: import("..").TypographyHeadingType | undefined;
     } & {

package/dist/components/Typography/Label/Label.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & LabelProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "id" | "className"> & {
         showRequiredStyling?: boolean | undefined;
     } & {
         withMargins?: boolean | undefined;

package/dist/components/Typography/Legend/Legend.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & LegendProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLLegendElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLLegendElement>, "id" | "className"> & {
         withMargins?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Typography/Link/Link.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & LinkProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "href" | "target">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "href" | "target">, "id" | "className"> & {
         external?: boolean | undefined;
         typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | undefined;
     } & {

package/dist/components/Typography/Paragraph/Paragraph.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & ParagraphProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "id" | "className"> & {
         typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | import("..").TypographyLeadType | undefined;
     } & {
         withMargins?: boolean | undefined;

package/dist/components/Typography/Typography/Typography.js

@@ -18,7 +18,7 @@ import { getTextColor } from '../../../utils/color.js';
 var StyledTypography = styled.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-1tegrnl-0"
-})(["&::selection,*::selection{", "}", " ", " ", " color:", ";", " ", ";"], selection, function (_ref) {
+})(["user-select:text;&::selection,*::selection{", "}", " ", " ", " color:", ";", " ", ";"], selection, function (_ref) {
   var typographyType = _ref.typographyType,
       externalLink = _ref.externalLink,
       interactionProps = _ref.interactionProps;

package/dist/helpers/Paper/Paper.d.ts

@@ -1 +1,8 @@
-export declare const Paper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type Elevation = 1 | 2 | 3 | 4;
+declare type Border = 'light' | 'dark';
+declare type PaperProps = {
+    elevation?: Elevation;
+    border?: Border;
+};
+export declare const Paper: import("styled-components").StyledComponent<"div", any, PaperProps, never>;
+export {};

package/dist/helpers/Paper/Paper.js

@@ -1,14 +1,50 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import '../styling/focusVisible.js';
 import '../styling/hover.js';
 import '../styling/focus.js';
 import '../styling/danger.js';
 import { selection } from '../styling/selection.js';
 import { paperTokens } from './Paper.tokens.js';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var outerShadow = ddsBaseTokens.outerShadow,
+    border = ddsBaseTokens.border;
+
+var getElevation = function getElevation(elevation) {
+  switch (elevation) {
+    case 1:
+      return outerShadow.DdsShadow1Onlight;
+
+    case 2:
+      return outerShadow.DdsShadow2Onlight;
+
+    case 3:
+      return outerShadow.DdsShadow3Onlight;
+
+    case 4:
+      return outerShadow.DdsShadow4Onlight;
+  }
+};
+
+var getBorder = function getBorder(borderStyle) {
+  switch (borderStyle) {
+    case 'light':
+      return "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(border.BordersDdsBorderStyleLightStroke);
+
+    case 'dark':
+      return "".concat(border.BordersDdsBorderStyleDarkStrokeWeight, " solid ").concat(border.BordersDdsBorderStyleDarkStroke);
+  }
+};
 
 var Paper = styled.div.withConfig({
   displayName: "Paper",
   componentId: "sc-mrbi8q-0"
-})(["box-sizing:border-box;margin:0;&::selection,*::selection{", "}", ""], selection, paperTokens.base);
+})(["box-sizing:border-box;margin:0;background-color:", ";font-family:", ";border-radius:", ";&::selection,*::selection{", "}", " border:", ""], paperTokens.paper.backgroundColor, paperTokens.paper.fontFamily, paperTokens.paper.borderRadius, selection, function (_ref) {
+  var elevation = _ref.elevation;
+  return elevation && css(["box-shadow:", ";"], getElevation(elevation));
+}, function (_ref2) {
+  var border = _ref2.border;
+  return border ? getBorder(border) : 'none';
+});
 
 export { Paper };