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

package/dist/components/ScrollableContainer/Scrollbar.js

@@ -0,0 +1,178 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var track = scrollbarTokens.track,
+    thumb = scrollbarTokens.thumb,
+    minThumbHeightPx = scrollbarTokens.minThumbHeightPx;
+var ScrollbarOuterWrapper = styled.div.withConfig({
+  displayName: "Scrollbar__ScrollbarOuterWrapper",
+  componentId: "sc-mphi5n-0"
+})([""]);
+var ScrollbarElements = styled.div.withConfig({
+  displayName: "Scrollbar__ScrollbarElements",
+  componentId: "sc-mphi5n-1"
+})(["display:block;height:100%;position:relative;display:grid;justify-items:center;"]);
+var Track = styled.div.withConfig({
+  displayName: "Scrollbar__Track",
+  componentId: "sc-mphi5n-2"
+})(["bottom:0;top:0;position:absolute;background-color:", ";border-radius:", ";width:", ";"], track.backgroundColor, track.borderRadius, track.width);
+var Thumb = styled.div.withConfig({
+  displayName: "Scrollbar__Thumb",
+  componentId: "sc-mphi5n-3"
+})(["position:absolute;background-color:", ";border-radius:", ";width:", ";transition:background-color 0.2s;&:hover{background-color:", ";}"], thumb.base.backgroundColor, thumb.base.borderRadius, thumb.base.width, thumb.hover.backgroundColor);
+var Scrollbar = function Scrollbar(props) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      contentRef = props.contentRef,
+      rest = __rest(props, ["id", "className", "htmlProps", "contentRef"]);
+
+  var trackRef = useRef(null);
+  var thumbRef = useRef(null);
+
+  var _useState = useState(minThumbHeightPx),
+      _useState2 = _slicedToArray(_useState, 2),
+      thumbHeight = _useState2[0],
+      setThumbHeight = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isScrollable = _useState4[0],
+      setIsScrollable = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      thumbTop = _useState6[0],
+      setThumbTop = _useState6[1];
+
+  var observer = useRef(null);
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      scrollStartPosition = _useState8[0],
+      setScrollStartPosition = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      initialScrollTop = _useState10[0],
+      setInitialScrollTop = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isDragging = _useState12[0],
+      setIsDragging = _useState12[1];
+
+  function handleResize(ref, trackSize) {
+    var clientHeight = ref.clientHeight,
+        scrollHeight = ref.scrollHeight;
+    setIsScrollable(clientHeight !== scrollHeight);
+    setThumbHeight(Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx));
+  }
+
+  var handleTrackClick = useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      var trackCurrent = trackRef.current;
+      var contentCurrent = contentRef.current;
+
+      if (trackCurrent && contentCurrent) {
+        var clientY = e.clientY;
+        var target = e.target;
+        var rect = target.getBoundingClientRect();
+        var trackTop = rect.top;
+        var thumbOffset = -(thumbHeight / 2);
+        var clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
+        var scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
+        contentCurrent.scrollTo({
+          top: scrollAmount,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [thumbHeight]);
+  var handleThumbPositioning = useCallback(function () {
+    console.log('positioning');
+
+    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
+      return;
+    }
+
+    var _contentRef$current = contentRef.current,
+        contentTop = _contentRef$current.scrollTop,
+        contentHeight = _contentRef$current.scrollHeight;
+    var clientHeight = trackRef.current.clientHeight;
+    var newTop = +contentTop / +contentHeight * clientHeight;
+    newTop = Math.min(newTop, clientHeight - thumbHeight);
+    setThumbTop(newTop);
+  }, []);
+  useEffect(function () {
+    if (contentRef && contentRef.current && trackRef.current) {
+      var ref = contentRef.current;
+      var clientHeight = trackRef.current.clientHeight;
+      observer.current = new ResizeObserver(function () {
+        handleResize(ref, clientHeight);
+      });
+      observer.current.observe(ref);
+      ref.addEventListener('scroll', handleThumbPositioning);
+      return function () {
+        var _a;
+
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(ref);
+        ref.removeEventListener('scroll', handleThumbPositioning);
+      };
+    }
+  }, []);
+  var handleThumbMousedown = useCallback(function (e) {
+    setScrollStartPosition(e.clientY);
+    if (contentRef && contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
+    setIsDragging(true);
+  }, []);
+  var handleThumbMouseup = useCallback(function () {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
+  var handleThumbMousemove = useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      if (isDragging) {
+        var _contentRef$current2 = contentRef.current,
+            contentScrollHeight = _contentRef$current2.scrollHeight,
+            contentOffsetHeight = _contentRef$current2.offsetHeight;
+        var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
+        var newScrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+        contentRef.current.scrollTop = newScrollTop;
+      }
+    }
+  }, [isDragging, scrollStartPosition, thumbHeight]);
+  useEffect(function () {
+    document.addEventListener('mousemove', handleThumbMousemove);
+    document.addEventListener('mouseup', handleThumbMouseup);
+    document.addEventListener('mouseleave', handleThumbMouseup);
+    return function () {
+      document.removeEventListener('mousemove', handleThumbMousemove);
+      document.removeEventListener('mouseup', handleThumbMouseup);
+      document.removeEventListener('mouseleave', handleThumbMouseup);
+    };
+  }, [handleThumbMousemove, handleThumbMouseup]);
+  return isScrollable ? jsx(ScrollbarOuterWrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: jsxs(ScrollbarElements, {
+      children: [jsx(Track, {
+        ref: trackRef,
+        onClick: handleTrackClick
+      }), jsx(Thumb, {
+        style: {
+          height: thumbHeight,
+          top: thumbTop
+        },
+        ref: thumbRef,
+        onMouseDown: handleThumbMousedown
+      })]
+    })
+  })) : null;
+};
+
+export { Scrollbar };

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

@@ -0,0 +1,3 @@
+export * from './Scrollbar';
+export * from './ScrollableContainer';
+export * from './scrollbarStyling';

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

@@ -0,0 +1,26 @@
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+export declare const scrollbarStyling: {
+    webkit: {
+        '&::-webkit-scrollbar': {
+            width: string;
+            height: string;
+        };
+        '&::-webkit-scrollbar-track': {
+            background: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar-thumb': {
+            background: string;
+            borderRadius: string;
+        };
+    };
+    '&::-webkit-scrollbar-thumb:hover': {
+        background: string;
+    };
+    firefox: {
+        scrollbarColor: string;
+        scrollbarWidth: string;
+    };
+};

package/dist/components/ScrollableContainer/scrollbarStyling.js

@@ -0,0 +1,40 @@
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+
+var thumb = scrollbarTokens.thumb,
+    track = scrollbarTokens.track;
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+
+var scrollbarStyling = {
+  webkit: {
+    /* width */
+    '&::-webkit-scrollbar': {
+      width: track.width,
+      height: track.width
+    },
+
+    /* Track */
+    '&::-webkit-scrollbar-track': {
+      background: track.backgroundColor,
+      borderRadius: track.borderRadius
+    },
+
+    /* Handle */
+    '&::-webkit-scrollbar-thumb': {
+      background: thumb.base.backgroundColor,
+      borderRadius: thumb.base.borderRadius
+    }
+  },
+
+  /* Handle on hover */
+  '&::-webkit-scrollbar-thumb:hover': {
+    background: thumb.hover.backgroundColor
+  },
+  firefox: {
+    scrollbarColor: thumb.base.backgroundColor + ' ' + track.backgroundColor,
+    scrollbarWidth: 'thin'
+  }
+};
+
+export { scrollbarStyling };

package/dist/components/Select/Select.styles.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { selectTokens } from './Select.tokens.js';
 import { Typography } from '../Typography/Typography.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var prefix = 'dds-select';
 var Label = styled(Typography).withConfig({
@@ -12,14 +12,14 @@ var Label = styled(Typography).withConfig({
 var Container = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " ", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", " ", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, typographyTokens.selection.base, function (_ref) {
   var hasLabel = _ref.hasLabel,
       isMulti = _ref.isMulti;
   return isMulti && hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
 }, selectTokens.container.hover.base, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_ref2) {
   var errorMessage = _ref2.errorMessage;
   return errorMessage && css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
-}, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
+}, prefix, scrollbarStyling.webkit, scrollbarStyling.firefox, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
   var isDisabled = _ref3.isDisabled;
   return isDisabled && css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_ref4) {

package/dist/components/Table/Table.js

@@ -4,12 +4,12 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { cellTokens } from './Cell.tokens.js';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var StyledTable = styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
   return density && css(["td,th{", "}"], cellTokens.density[density].base);
 }, function (_ref2) {

package/dist/components/Table/TableWrapper.js

@@ -3,15 +3,15 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var Wrapper = styled.div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
-})(["", " ", ""], function (_ref) {
+})(["", " ", " ", ""], function (_ref) {
   var overflowX = _ref.overflowX;
   return overflowX && css(["overflow-x:auto;"]);
-}, scrollbarStyling);
+}, scrollbarStyling.webkit, scrollbarStyling.firefox);
 var TableWrapper = function TableWrapper(_a) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);

package/dist/components/Tabs/TabList.js

@@ -5,7 +5,7 @@ import { forwardRef, useState, Children, isValidElement, cloneElement } from 're
 import styled from 'styled-components';
 import { tabsTokens } from './Tabs.tokens.js';
 import { useTabsContext } from './Tabs.context.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { useRoveFocus } from '../../hooks/useRoveFocus.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
@@ -14,7 +14,7 @@ import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 var TabRow = styled.div.withConfig({
   displayName: "TabList__TabRow",
   componentId: "sc-1ldr0lz-0"
-})(["", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling, tabsTokens.tabList.focus.base);
+})(["", " ", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling.webkit, scrollbarStyling.firefox, tabsTokens.tabList.focus.base);
 var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       id = _a.id,

package/dist/components/TextInput/TextInput.styles.js

@@ -1,13 +1,13 @@
 import styled, { css } from 'styled-components';
 import { textInputTokens } from './TextInput.tokens.js';
 import { StatefulInput, Label as Label$1 } from '../../helpers/Input/Input.styles.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { inputTokens } from '../../helpers/Input/Input.tokens.js';
 
 var TextArea = styled(StatefulInput).withConfig({
   displayName: "TextInputstyles__TextArea",
   componentId: "sc-165zflr-0"
-})(["", " ", " ", " &:hover:enabled:read-write ~ label{background-color:", ";}"], scrollbarStyling, textInputTokens.multiline.base, function (_ref) {
+})(["", " ", " ", " ", " &:hover:enabled:read-write ~ label{background-color:", ";}"], scrollbarStyling.webkit, scrollbarStyling.firefox, textInputTokens.multiline.base, function (_ref) {
   var hasLabel = _ref.hasLabel;
   return css(["", ""], textInputTokens.multiline[hasLabel].base);
 }, function (_ref2) {

package/dist/components/TextInput/TextInput.tokens.js

@@ -1,5 +1,5 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import { scrollbarWidthNumberPx } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarWidthNumberPx } from '../ScrollableContainer/ScrollableContainer.tokens.js';
 
 var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing;

package/dist/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -4,5 +4,5 @@ declare type SvgChevronProps = {
     height?: Property.Height<string>;
     width?: Property.Width<string>;
 };
-export declare const AnimatedChevronUpDown: ({ isUp, height, width }: SvgChevronProps) => JSX.Element;
+export declare const AnimatedChevronUpDown: ({ isUp, height, width, }: SvgChevronProps) => JSX.Element;
 export {};

package/dist/helpers/styling/focusVisible.js

@@ -1,8 +1,9 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var Border = ddsBaseTokens.border,
-    Colors = ddsBaseTokens.colors;
-var outlineOffset = '2px';
+    Colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var outlineOffset = spacing.SizesDdsSpacingLocalX0125;
 var focusVisible = {
   outline: "".concat(Border.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset

package/dist/helpers/styling/index.d.ts

@@ -5,4 +5,3 @@ export * from './hover';
 export * from './focus';
 export * from './danger';
 export * from './hideInput';
-export * from './scrollbarStyling';

package/dist/hooks/useRoveFocus.d.ts

@@ -1,3 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, KeyboardEvent } from 'react';
 import { Direction } from '../types';
+export declare const isKeyboardEvent: (e: Event | KeyboardEvent<Element>) => e is KeyboardEvent<Element>;
 export declare function useRoveFocus(size: number | undefined, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];

package/dist/hooks/useRoveFocus.js

@@ -1,6 +1,9 @@
 import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useCallback, useEffect } from 'react';
 
+var isKeyboardEvent = function isKeyboardEvent(e) {
+  return e.key !== undefined;
+};
 function useRoveFocus(size, reset) {
   var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'column';
 
@@ -9,17 +12,17 @@ function useRoveFocus(size, reset) {
       currentFocus = _useState2[0],
       setCurrentFocus = _useState2[1];
 
-  var nextKey = direction === 'row' ? 39 : 40;
-  var previousKey = direction === 'row' ? 37 : 38;
+  var nextKey = direction === 'row' ? 'ArrowRight' : 'ArrowDown';
+  var previousKey = direction === 'row' ? 'ArrowLeft' : 'ArrowUp';
   var handleKeyDown = useCallback(function (e) {
-    if (!size) return;
+    if (!size || !isKeyboardEvent(e)) return;
     if (reset) setCurrentFocus(-1);
 
-    if (e.keyCode === nextKey) {
+    if (e.key === nextKey) {
       // Down arrow
       e.preventDefault();
       setCurrentFocus(currentFocus === size - 1 ? 0 : currentFocus + 1);
-    } else if (e.keyCode === previousKey) {
+    } else if (e.key === previousKey) {
       // Up arrow
       e.preventDefault();
 
@@ -37,4 +40,4 @@ function useRoveFocus(size, reset) {
   return [currentFocus, setCurrentFocus];
 }
 
-export { useRoveFocus };
+export { isKeyboardEvent, useRoveFocus };

package/dist/index.d.ts

@@ -33,5 +33,6 @@ export * from './components/Tabs';
 export * from './components/Tag';
 export * from './components/Chip';
 export * from './components/VisuallyHidden';
+export * from './components/ScrollableContainer';
 export * from './icons/tsx';
 export * from './components/Stepper';

package/dist/index.js

@@ -59,6 +59,9 @@ export { Tag } from './components/Tag/Tag.js';
 export { Chip } from './components/Chip/Chip.js';
 export { ChipGroup } from './components/Chip/ChipGroup.js';
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
+export { Scrollbar } from './components/ScrollableContainer/Scrollbar.js';
+export { ScrollableContainer } from './components/ScrollableContainer/ScrollableContainer.js';
+export { scrollbarStyling } from './components/ScrollableContainer/scrollbarStyling.js';
 export { AppsIcon } from './icons/tsx/apps.js';
 export { ArchiveIcon } from './icons/tsx/archive.js';
 export { ArrowDownIcon } from './icons/tsx/arrowDown.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.2.0-beta.0",
+  "version": "5.2.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -20,16 +20,21 @@
   "homepage": "https://design.domstol.no",
   "scripts": {
     "clean": "rm -r dist || :",
-    "test": "jest --no-cache",
-    "test:watch": "jest --no-cache --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
     "storybook": "start-storybook -p 6006 -s ./.storybook/images",
     "build-storybook": "build-storybook -o docs",
     "lint": "eslint --ext=jsx,ts,tsx src",
-    "prettier": "prettier --write '**/*.{ts,tsx}'",
-    "check:types": "tsc --noEmit",
-    "build:clean": "npm run clean && npm run build"
+    "prettier": "prettier --write .",
+    "prettier:check": "prettier --check .",
+    "build:clean": "npm run clean && npm run build",
+    "verify:types": "tsc --noEmit",
+    "verify:lint": "npm run lint",
+    "verify:test": "npm test",
+    "verify:prettier": "npm run prettier:check",
+    "verify": "concurrently 'npm:verify:*'"
   },
   "keywords": [
     "dds",
@@ -42,53 +47,55 @@
     "elsa"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@mdx-js/react": "^2.1.1",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@mdx-js/react": "^2.1.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-node-resolve": "^13.2.0",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
     "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.5.9",
-    "@storybook/theming": "^6.5.9",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/user-event": "^14.1.0",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^17.0.2",
+    "@storybook/react": "^6.5.10",
+    "@storybook/theming": "^6.5.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.7",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.9",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.19.0",
-    "babel-loader": "^8.2.4",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
+    "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
-    "eslint": "^8.13.0",
+    "concurrently": "^7.3.0",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-storybook": "^0.6.1",
-    "jest": "^27.5.1 ",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "rollup": "^2.70.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-storybook": "^0.6.4",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^2.78.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.0.3",
-    "rollup-plugin-sass": "^1.2.12",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3"
+    "rollup-plugin-sass": "^1.2.13",
+    "rollup-plugin-typescript2": "^0.33.0",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
+    "@norges-domstoler/dds-design-tokens": "^1.3.0",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
-    "styled-components": "^5",
-    "@norges-domstoler/dds-design-tokens": "^1"
+    "styled-components": "^5"
   },
   "jest": {
     "preset": "ts-jest",
@@ -109,11 +116,9 @@
     }
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
     "@floating-ui/react-dom": "^1.0.0",
     "focus-visible": "^5.2.0",
-    "react-select": "^5.3.0",
+    "react-select": "^5.4.0",
     "tslib": "^2.4.0"
   }
 }

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

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const descriptionListDescTokens: {
-    base: CSSObject;
-    icon: {
-        base: CSSObject;
-    };
-};

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

@@ -1,4 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const descriptionListGroupTokens: {
-    base: CSSObject;
-};

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

@@ -1,13 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const descriptionListTermTokens: {
-    appearance: {
-        small: {
-            base: CSSObject;
-        };
-        bold: {
-            base: CSSObject;
-        };
-    };
-    unwrappedTopAndBottomSpace: string;
-    unwrappedBetweenSpace: string;
-};

package/dist/cjs/helpers/styling/scrollbarStyling.d.ts

@@ -1,3 +0,0 @@
-export declare const scrollbarWidthNumberPx = 10;
-export declare const scrollbarWidth: string;
-export declare const scrollbarStyling: import("styled-components").FlattenSimpleInterpolation;

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

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const descriptionListDescTokens: {
-    base: CSSObject;
-    icon: {
-        base: CSSObject;
-    };
-};