@norges-domstoler/dds-components 5.2.0-beta.1 → 5.3.0

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-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);
+})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " 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{", "}"], "url(\"".concat(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/DescriptionList/DescriptionList.js

@@ -3,16 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { descriptionListTermTokens } from './DescriptionListTerm.tokens.js';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
+var term = descriptionListTokens.term,
+    desc = descriptionListTokens.desc,
+    list = descriptionListTokens.list;
 var DList = styled.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
 })(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], typographyTokens.selection.base, function (_ref) {
   var appearance = _ref.appearance;
-  return appearance && css(["dt{", "}"], descriptionListTermTokens.appearance[appearance].base);
-}, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
+  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);
+}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
       appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,

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

@@ -0,0 +1,70 @@
+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;
+            };
+        };
+        firstOfType: {
+            marginTop: string;
+        };
+    };
+    desc: {
+        base: {
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            gap: string;
+            color: string;
+        };
+        lastChild: {
+            marginBottom: string;
+        };
+    };
+    list: {
+        beforeNextTerm: {
+            marginTop: string;
+        };
+    };
+    group: {
+        base: {
+            margin: string;
+        };
+    };
+};

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

@@ -0,0 +1,60 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages,
+    colors = ddsBaseTokens.colors;
+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
+    },
+    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
+    }
+  },
+  firstOfType: {
+    marginTop: spacing.SizesDdsSpacingLocalX1
+  }
+};
+var desc = {
+  base: {
+    font: fontPackages.body_sans_03.base,
+    gap: spacing.SizesDdsSpacingLocalX025,
+    color: colors.DdsColorNeutralsGray9
+  },
+  lastChild: {
+    marginBottom: spacing.SizesDdsSpacingLocalX1
+  }
+};
+var list = {
+  beforeNextTerm: {
+    marginTop: spacing.SizesDdsSpacingLocalX2
+  }
+};
+var group = {
+  base: {
+    margin: spacing.SizesDdsSpacingLocalX2
+  }
+};
+var descriptionListTokens = {
+  term: term,
+  desc: desc,
+  list: list,
+  group: group
+};
+
+export { descriptionListTokens };

package/dist/components/DescriptionList/DescriptionListDesc.js

@@ -2,14 +2,14 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { descriptionListDescTokens } from './DescriptionListDesc.tokens.js';
+import { descriptionListTokens } from './DescriptionList.tokens.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"
-})(["", " margin-inline-start:0;"], descriptionListDescTokens.base);
+})(["margin-inline-start:0;align-items:center;display:flex;color:", ";", ";gap:", ";"], descriptionListTokens.desc.base.color, descriptionListTokens.desc.base.font, descriptionListTokens.desc.base.gap);
 var DescriptionListDesc = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       icon = props.icon,

package/dist/components/DescriptionList/DescriptionListGroup.js

@@ -1,16 +1,16 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { descriptionListGroupTokens } from './DescriptionListGroup.tokens.js';
+import styled from 'styled-components';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var DListGroup = styled.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(["", " ", ""], descriptionListGroupTokens.base, function (_ref) {
+})(["margin:", ";"], function (_ref) {
   var margin = _ref.margin;
-  return margin && css(["margin:", ";"], margin);
+  return margin ? margin : descriptionListTokens.group.base.margin;
 });
 var DescriptionListGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,

package/dist/components/Drawer/Drawer.js

@@ -8,13 +8,13 @@ import { drawerTokens } from './Drawer.tokens.js';
 import { Paper } from '../../helpers/Paper/Paper.js';
 import { useMountTransition } from '../../hooks/useMountTransition.js';
 import { focusVisible } from '../../helpers/styling/focusVisible.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
 import { Button } from '../Button/Button.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { ScrollableContainer } from '../ScrollableContainer/ScrollableContainer.js';
 import { Typography } from '../Typography/Typography.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
 
@@ -35,7 +35,7 @@ var Container = styled(Paper).withConfig({
 var ContentContainer = styled.div.withConfig({
   displayName: "Drawer__ContentContainer",
   componentId: "sc-i9luw3-1"
-})(["display:flex;flex-direction:column;overflow-x:auto;", " ", ""], scrollbarStyling, drawerTokens.contentContainer.base);
+})(["display:flex;flex-direction:column;", ""], drawerTokens.contentContainer.base);
 var HeaderContainer = styled.div.withConfig({
   displayName: "Drawer__HeaderContainer",
   componentId: "sc-i9luw3-2"
@@ -98,14 +98,16 @@ var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
     id: headerId
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsxs(Container, Object.assign({}, containerProps, {
-    children: [jsxs(ContentContainer, {
-      children: [hasHeader && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
-        children: typeof header === 'string' ? jsx(Typography, Object.assign({
-          typographyType: "headingSans03"
-        }, {
-          children: header
-        })) : header
-      })), children]
+    children: [jsx(ScrollableContainer, {
+      children: jsxs(ContentContainer, {
+        children: [hasHeader && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
+          children: typeof header === 'string' ? jsx(Typography, Object.assign({
+            typographyType: "headingSans03"
+          }, {
+            children: header
+          })) : header
+        })), children]
+      })
     }), jsx(StyledButton, {
       "data-testid": "drawer-close-btn",
       size: "small",

package/dist/components/List/List.js

@@ -20,7 +20,7 @@ var StyledList = styled.ul.withConfig({
   return typographyType && css(["", " ul,ol{", "}"], listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
 }, function (_ref2) {
   var listType = _ref2.listType;
-  return listType === 'unordered' ? css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:url(\"", "\");}ul > li:before{background-image:url(\"", "\");}ul > li > ul > li:before{background-image:url(\"", "\");}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), bullet, bulletLvl2, bulletLvl3) : css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
+  return listType === 'unordered' ? css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), "url(\"".concat(bullet, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
 });
 var List = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$listType = props.listType,

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

@@ -10,10 +10,4 @@ export declare const modalTokens: {
     actionsContainer: {
         base: CSSObject;
     };
-    bodyScrollable: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-    };
 };

package/dist/components/Modal/Modal.tokens.js

@@ -19,10 +19,6 @@ var actionsContainerBase = {
   gap: Spacing.SizesDdsSpacingLocalX1
 };
 var focusBase = Object.assign({}, focusVisible);
-var bodyScrollableBase = {
-  overflowY: 'auto'
-};
-var bodyScrollableFocusBase = Object.assign({}, focusVisible);
 var modalTokens = {
   base: base,
   focus: {
@@ -33,12 +29,6 @@ var modalTokens = {
   },
   actionsContainer: {
     base: actionsContainerBase
-  },
-  bodyScrollable: {
-    base: bodyScrollableBase,
-    focus: {
-      base: bodyScrollableFocusBase
-    }
   }
 };
 

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

@@ -1,13 +1,18 @@
 import { BaseComponentPropsWithChildren } from '../../types';
+import { Property } from 'csstype';
 export declare type ModalBodyProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Gjør at innholdet kan scrolles. Det må eventuelt settes (max)bredde og (max)høyde styling på både denne subkomponenten og `<Modal />`.  */
     scrollable?: boolean;
+    /**Høyde på container. */
+    height?: Property.Height;
 }>;
 export declare const ModalBody: import("react").ForwardRefExoticComponent<{
     htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Gjør at innholdet kan scrolles. Det må eventuelt settes (max)bredde og (max)høyde styling på både denne subkomponenten og `<Modal />`.  */
     scrollable?: boolean | undefined;
+    /**Høyde på container. */
+    height?: Property.Height<0 | (string & {})> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/ModalBody.js

@@ -1,33 +1,33 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { modalTokens } from './Modal.tokens.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import styled from 'styled-components';
+import { ScrollableContainer } from '../ScrollableContainer/ScrollableContainer.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var Container = styled.div.withConfig({
   displayName: "ModalBody__Container",
   componentId: "sc-134o0zg-0"
-})(["", " transition:", ";", ""], scrollbarStyling, focusVisibleTransitionValue, function (_ref) {
-  var scrollable = _ref.scrollable;
-  return scrollable && css(["", " &:focus-visible,&.focus-visible{", "}"], modalTokens.bodyScrollable.base, modalTokens.bodyScrollable.focus.base);
-});
+})([""]);
 var ModalBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       scrollable = props.scrollable,
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = __rest(props, ["children", "scrollable", "id", "className", "htmlProps"]);
+      height = props.height,
+      rest = __rest(props, ["children", "scrollable", "id", "className", "htmlProps", "height"]);
 
   var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    ref: ref,
-    tabIndex: scrollable ? 0 : undefined,
-    scrollable: scrollable
+    ref: ref
   });
-  return jsx(Container, Object.assign({}, containerProps, {
+  return scrollable ? jsx(Container, Object.assign({}, containerProps, {
+    children: jsx(ScrollableContainer, Object.assign({
+      contentHeight: height
+    }, {
+      children: children
+    }))
+  })) : jsx(Container, Object.assign({}, containerProps, {
     children: children
   }));
 });

package/dist/components/OverflowMenu/OverflowMenu.js

@@ -14,17 +14,17 @@ import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useRoveFocus } from '../../hooks/useRoveFocus.js';
 import { PersonIcon } from '../../icons/tsx/person.js';
 import { useId } from '../../hooks/useId.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var Container = styled.div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " ", " ", " *::selection{", "}"], function (_ref) {
+})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " ", " ", " ", " *::selection{", "}"], function (_ref) {
   var isOpen = _ref.isOpen;
   return visibilityTransition(isOpen);
-}, overflowMenuTokens.container.base, scrollbarStyling, typographyTokens.selection.base);
+}, overflowMenuTokens.container.base, scrollbarStyling.webkit, scrollbarStyling.firefox, typographyTokens.selection.base);
 var OverflowMenuList = styled.ul.withConfig({
   displayName: "OverflowMenu__OverflowMenuList",
   componentId: "sc-kh744b-1"

package/dist/components/Pagination/Pagination.js

@@ -36,7 +36,7 @@ var Container = styled.div.withConfig({
   componentId: "sc-5ltegq-3"
 })(["display:inline-flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
   var smallScreen = _ref2.smallScreen;
-  return smallScreen ? css(["flex-direction:column;align-items:center;"]) : css(["justify-content:space-around;flex-wrap:wrap;"]);
+  return smallScreen ? css(["flex-direction:column;align-items:center;"]) : css(["justify-content:space-between;flex-wrap:wrap;"]);
 });
 var IndicatorsContainer = styled.div.withConfig({
   displayName: "Pagination__IndicatorsContainer",

package/dist/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -0,0 +1,7 @@
+import { BaseComponentPropsWithChildren } from '../../types';
+import { Property } from 'csstype';
+export declare type ScrollableContainerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /**Høyde på innholdscontainer. */
+    contentHeight?: Property.Height;
+}>;
+export declare const ScrollableContainer: (props: ScrollableContainerProps) => JSX.Element;

package/dist/components/ScrollableContainer/ScrollableContainer.js

@@ -0,0 +1,47 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { Scrollbar } from './Scrollbar.js';
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var track = scrollbarTokens.track,
+    content = scrollbarTokens.content,
+    outerContainer = scrollbarTokens.outerContainer;
+var StyledScrollableContainer = styled.div.withConfig({
+  displayName: "ScrollableContainer__StyledScrollableContainer",
+  componentId: "sc-t0dczu-0"
+})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track.width, outerContainer.padding);
+var Content = styled.div.withConfig({
+  displayName: "ScrollableContainer__Content",
+  componentId: "sc-t0dczu-1"
+})(["height:", ";overflow:auto;scrollbar-width:none;::-webkit-scrollbar{display:none;}padding-right:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}:focus-visible,.focus-visible{outline:", ";outline-offset:", ";}"], function (_ref) {
+  var height = _ref.height;
+  return height;
+}, content.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
+var ScrollableContainer = function ScrollableContainer(props) {
+  var children = props.children,
+      id = props.id,
+      className = props.className,
+      _props$contentHeight = props.contentHeight,
+      contentHeight = _props$contentHeight === void 0 ? '90vh' : _props$contentHeight,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "id", "className", "contentHeight", "htmlProps"]);
+
+  var ref = useRef(null);
+  return jsxs(StyledScrollableContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: [jsx(Content, Object.assign({
+      height: contentHeight,
+      ref: ref,
+      tabIndex: 0
+    }, {
+      children: children
+    })), jsx(Scrollbar, {
+      contentRef: ref
+    })]
+  }));
+};
+
+export { ScrollableContainer };

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

@@ -0,0 +1,15 @@
+import { ScrollableContainerProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: ScrollableContainerProps) => JSX.Element;
+    argTypes: {
+        contentHeight: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: ScrollableContainerProps) => JSX.Element;
+export declare const JustScrollbar: () => JSX.Element;

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

@@ -0,0 +1,25 @@
+export declare const scrollbarWidthNumberPx = 10;
+export declare const scrollbarTokens: {
+    minThumbHeightPx: number;
+    track: {
+        backgroundColor: string;
+        borderRadius: string;
+        width: string;
+    };
+    thumb: {
+        base: {
+            backgroundColor: string;
+            borderRadius: string;
+            width: string;
+        };
+        hover: {
+            backgroundColor: string;
+        };
+    };
+    content: {
+        paddingRight: string;
+    };
+    outerContainer: {
+        padding: string;
+    };
+};

package/dist/components/ScrollableContainer/ScrollableContainer.tokens.js

@@ -0,0 +1,36 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var scrollbarWidthNumberPx = 10;
+var scrollbarWidth = "".concat(scrollbarWidthNumberPx, "px");
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var track = {
+  backgroundColor: 'transparent',
+  borderRadius: '100px',
+  width: scrollbarWidth
+};
+var thumb = {
+  base: {
+    backgroundColor: colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    borderRadius: '100px',
+    width: scrollbarWidth
+  },
+  hover: {
+    backgroundColor: colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+  }
+};
+var content = {
+  paddingRight: spacing.SizesDdsSpacingLocalX05
+};
+var outerContainer = {
+  padding: spacing.SizesDdsSpacingLocalX025
+};
+var scrollbarTokens = {
+  minThumbHeightPx: 15,
+  track: track,
+  thumb: thumb,
+  content: content,
+  outerContainer: outerContainer
+};
+
+export { scrollbarTokens, scrollbarWidthNumberPx };

package/dist/components/ScrollableContainer/Scrollbar.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { BaseComponentProps } from '../../types';
+export declare type ScrollbarProps = BaseComponentProps<HTMLDivElement, {
+    /** Ref til container med innholdet som skal scrolles. */
+    contentRef?: RefObject<HTMLDivElement>;
+}>;
+export declare const Scrollbar: (props: ScrollbarProps) => JSX.Element | null;