@norges-domstoler/dds-components 5.2.0-beta.2 → 5.3.1

package/dist/components/Spinner/Spinner.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState } from 'react';
+import React, { useId } from 'react';
 import styled from 'styled-components';
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import { spinnerTokens } from './Spinner.tokens.js';
@@ -31,7 +30,6 @@ var Circle = styled.circle.withConfig({
   var innerAnimationDelay = _ref5.innerAnimationDelay;
   return innerAnimationDelay;
 });
-var nextUniqueId = 0;
 function Spinner(props) {
   var _props$size = props.size,
       size = _props$size === void 0 ? ddsBaseTokens.iconSizes.DdsIconsizeMedium : _props$size,
@@ -45,11 +43,8 @@ function Spinner(props) {
   var mountTime = React.useRef(Date.now());
   var outerAnimationDelay = -(mountTime.current % 2000);
   var innerAnimationDelay = -(mountTime.current % 1500);
-
-  var _useState = useState("spinnerTitle-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = "".concat(generatedId, "-spinnerTitle");
   var spinnerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     outerAnimationDelay: outerAnimationDelay,
     size: size

package/dist/components/Table/SortCell.js

@@ -6,9 +6,9 @@ import { cellTokens } from './Cell.tokens.js';
 import styled from 'styled-components';
 import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
 import { UnfoldMoreIcon } from '../../icons/tsx/unfoldMore.js';
-import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 import { ChevronUpIcon } from '../../icons/tsx/chevronUp.js';
 import { Icon } from '../Icon/Icon.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 
 var SortIcon = styled(Icon).withConfig({
   displayName: "SortCell__SortIcon",

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

@@ -1,11 +1,11 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 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,
@@ -30,10 +30,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
       tabPanelsRef = _useTabsContext.tabPanelsRef,
       setHasTabFocus = _useTabsContext.setHasTabFocus;
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "".concat(tabsId, "-tablist")),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(tabsId, "-tablist");
   var childrenArray = Children.toArray(children).length;
 
   var _useRoveFocus = useRoveFocus(childrenArray, !hasTabFocus, 'row'),

package/dist/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect } from 'react';
+import { forwardRef, useId, useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { TabsContext } from './Tabs.context.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
@@ -10,7 +10,6 @@ var Container = styled.div.withConfig({
   displayName: "Tabs__Container",
   componentId: "sc-7ta5g2-0"
 })([""]);
-var nextUniqueId = 0;
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var id = props.id,
       _props$activeTab = props.activeTab,
@@ -25,19 +24,18 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = __rest(props, ["id", "activeTab", "onChange", "tabContentDirection", "tabWidth", "children", "className", "htmlProps"]);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "tabs-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-tabs");
 
-  var _useState3 = useState(activeTab),
-      _useState4 = _slicedToArray(_useState3, 2),
-      thisActiveTab = _useState4[0],
-      setActiveTab = _useState4[1];
+  var _useState = useState(activeTab),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisActiveTab = _useState2[0],
+      setActiveTab = _useState2[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hasTabFocus = _useState6[0],
-      setHasTabFocus = _useState6[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasTabFocus = _useState4[0],
+      setHasTabFocus = _useState4[1];
 
   var tabListRef = useRef(null);
   var tabPanelsRef = useRef(null);

package/dist/components/TextInput/CharCounter.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useId } from 'react';
 import styled from 'styled-components';
 import { charCounterTokens } from './CharCounter.tokens.js';
 import { Typography } from '../Typography/Typography.js';
@@ -11,7 +10,6 @@ var Wrapper = styled(Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
 })(["margin-left:auto;", ""], charCounterTokens.base);
-var nextUniqueId = 0;
 
 function CharCounter(props) {
   var current = props.current,
@@ -21,10 +19,8 @@ function CharCounter(props) {
       htmlProps = props.htmlProps,
       rest = __rest(props, ["current", "max", "id", "className", "htmlProps"]);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "characterCounter-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-characterCounter");
   return jsxs(Wrapper, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",

package/dist/components/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, useId } from 'react';
 import { textInputTokens } from './TextInput.tokens.js';
 import CharCounter from './CharCounter.js';
 import { TextArea, Label, MessageContainer } from './TextInput.styles.js';
@@ -10,7 +10,6 @@ import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../util
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 
-var nextUniqueId = 0;
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
       disabled = _a.disabled,
@@ -64,10 +63,8 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   };
 
-  var _useState3 = useState(id !== null && id !== void 0 ? id : "textInput-".concat(nextUniqueId++)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniqueId = _useState4[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textInput");
   var hasErrorMessage = !!errorMessage;
   var hasTip = !!tip;
   var hasLabel = !!label;

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/components/ToggleButton/ToggleButton.js

@@ -1,7 +1,6 @@
-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 { forwardRef, useId } from 'react';
 import styled from 'styled-components';
 import { buttonTokens } from '../Button/Button.tokens.js';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
@@ -23,7 +22,6 @@ var Container = styled.label.withConfig({
   displayName: "ToggleButton__Container",
   componentId: "sc-ya01sa-2"
 })(["width:fit-content;", ":checked + ", "{", "}", ":checked + ", ":hover{", "}", ":focus-visible + ", "{", "}"], Input, Content, toggleButtonTokens.checked.base, Input, Content, toggleButtonTokens.checked.hover.base, Input, Content, toggleButtonTokens.focus.base);
-var nextUniqueId = 0;
 var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,
       label = _a.label,
@@ -32,10 +30,8 @@ var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
       htmlProps = _a.htmlProps,
       rest = __rest(_a, ["id", "label", "icon", "className", "htmlProps"]);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "toggleButton-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-toggleButton");
   var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
     ref: ref,
     type: 'checkbox'

package/dist/components/ToggleButton/ToggleButtonGroup.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useId } from 'react';
 import styled, { css } from 'styled-components';
 import { toggleButtonTokens } from './ToggleButton.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
@@ -18,7 +17,6 @@ var Container = styled.div.withConfig({
   displayName: "ToggleButtonGroup__Container",
   componentId: "sc-14ijdag-1"
 })(["", ""], toggleButtonTokens.container.base);
-var nextUniqueId = 0;
 var ToggleButtonGroup = function ToggleButtonGroup(props) {
   var children = props.children,
       _props$direction = props.direction,
@@ -30,10 +28,8 @@ var ToggleButtonGroup = function ToggleButtonGroup(props) {
       htmlProps = props.htmlProps,
       rest = __rest(props, ["children", "direction", "label", "labelId", "id", "className", "htmlProps"]);
 
-  var _useState = useState(labelId !== null && labelId !== void 0 ? labelId : "ToggleButtonGroupLabel-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueLabelId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueLabelId = labelId !== null && labelId !== void 0 ? labelId : "".concat(generatedId, "-ToggleButtonGroupLabel");
   var groupProps = {
     direction: direction
   };

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

@@ -16,7 +16,7 @@ export declare type TooltipProps = BaseComponentProps<HTMLDivElement, {
     tooltipId?: string;
 } & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
 export declare const Tooltip: React.ForwardRefExoticComponent<{
-    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children"> | undefined;
+    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children"> | undefined; /**`id` for tooltip. */
 } & Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children">, "className" | "id"> & {
     /**Innhold i tooltip. */
     text: string;

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, useId, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { Container, TooltipWrapper, ArrowWrapper, SvgArrow } from './Tooltip.styles.js';
 import { tooltipTokens } from './Tooltip.tokens.js';
 import { useFloatPosition } from '../../hooks/useFloatPosition.js';
@@ -10,7 +10,6 @@ import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { combineHandlers } from '../../utils/combineHandlers.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
-var nextUniqueId = 0;
 var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
       _props$placement = props.placement,
@@ -27,21 +26,18 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = __rest(props, ["text", "placement", "children", "tooltipId", "delay", "style", "onMouseLeave", "onMouseOver", "id", "className", "htmlProps"]);
 
-  var uniqueId = nextUniqueId++;
+  var generatedId = useId();
+  var uniqueTooltipId = tooltipId !== null && tooltipId !== void 0 ? tooltipId : "".concat(generatedId, "-tooltip");
 
-  var _useState = useState(tooltipId !== null && tooltipId !== void 0 ? tooltipId : "tooltip-".concat(uniqueId)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueTooltipId = _useState2[0];
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      arrowElement = _useState6[0],
-      setArrowElement = _useState6[1];
+      arrowElement = _useState4[0],
+      setArrowElement = _useState4[1];
 
   var _useFloatPosition = useFloatPosition(arrowElement, placement),
       reference = _useFloatPosition.reference,

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/icons/tsx/closeSmall.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function CloseSmallIcon(props: SvgProps): JSX.Element;

package/dist/icons/tsx/closeSmall.js

@@ -0,0 +1,25 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { StyledSvg } from '../utils/StyledSvg.js';
+
+function CloseSmallIcon(props) {
+  var title = props.title,
+      rest = __rest(props, ["title"]);
+
+  return jsxs(StyledSvg, Object.assign({
+    width: 24,
+    height: 24,
+    fill: "currentColor"
+  }, rest, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, {
+    children: [title && jsx("title", {
+      children: title
+    }), jsx("path", {
+      d: "M7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293-1.414-1.414L10.586 12 7.293 8.707z"
+    })]
+  }));
+}
+
+export { CloseSmallIcon };

package/dist/icons/tsx/index.d.ts

@@ -28,6 +28,7 @@ export * from './chevronLeft';
 export * from './chevronRight';
 export * from './chevronUp';
 export * from './close';
+export * from './closeSmall';
 export * from './closeCircled';
 export * from './cloud';
 export * from './collapse';

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';
@@ -89,6 +92,7 @@ export { ChevronLeftIcon } from './icons/tsx/chevronLeft.js';
 export { ChevronRightIcon } from './icons/tsx/chevronRight.js';
 export { ChevronUpIcon } from './icons/tsx/chevronUp.js';
 export { CloseIcon } from './icons/tsx/close.js';
+export { CloseSmallIcon } from './icons/tsx/closeSmall.js';
 export { CloseCircledIcon } from './icons/tsx/closeCircled.js';
 export { CloudIcon } from './icons/tsx/cloud.js';
 export { CollapseIcon } from './icons/tsx/collapse.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.2.0-beta.2",
+  "version": "5.3.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -80,7 +80,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-storybook": "^0.6.4",
     "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.78.1",
@@ -116,8 +116,6 @@
     }
   },
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
     "@floating-ui/react-dom": "^1.0.0",
     "focus-visible": "^5.2.0",
     "react-select": "^5.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;
-    };
-};

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

@@ -1,22 +0,0 @@
-import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-
-var spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages;
-var textDefault = ddsReferenceTokens.textDefault;
-var base = Object.assign(Object.assign({}, fontPackages.body_sans_03.base), {
-  display: 'flex',
-  alignItems: 'center',
-  gap: spacing.SizesDdsSpacingLocalX025,
-  color: textDefault.textColor
-});
-var iconBase = {
-  marginRight: spacing.SizesDdsSpacingLocalX025
-};
-var descriptionListDescTokens = {
-  base: base,
-  icon: {
-    base: iconBase
-  }
-};
-
-export { descriptionListDescTokens };

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

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

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

@@ -1,11 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var Spacing = ddsBaseTokens.spacing;
-var base = {
-  margin: Spacing.SizesDdsSpacingLocalX2
-};
-var descriptionListGroupTokens = {
-  base: base
-};
-
-export { descriptionListGroupTokens };

package/dist/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/components/DescriptionList/DescriptionListTerm.tokens.js

@@ -1,27 +0,0 @@
-import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import { typographyTokens } from '../Typography/Typography.tokens.js';
-
-var Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages,
-    Colors = ddsBaseTokens.colors;
-var textDefault = ddsReferenceTokens.textDefault;
-var boldBase = Object.assign(Object.assign(Object.assign({}, FontPackages.body_sans_03.base), typographyTokens.style.bold.base), {
-  color: textDefault.textColor
-});
-var smallBase = Object.assign(Object.assign({}, FontPackages.body_sans_01.base), {
-  color: Colors.DdsColorNeutralsGray7
-});
-var descriptionListTermTokens = {
-  appearance: {
-    small: {
-      base: smallBase
-    },
-    bold: {
-      base: boldBase
-    }
-  },
-  unwrappedTopAndBottomSpace: Spacing.SizesDdsSpacingLocalX1,
-  unwrappedBetweenSpace: Spacing.SizesDdsSpacingLocalX2
-};
-
-export { descriptionListTermTokens };

package/dist/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/helpers/styling/scrollbarStyling.js

@@ -1,8 +0,0 @@
-import { css } from 'styled-components';
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var scrollbarWidthNumberPx = 10;
-var scrollbarWidth = "".concat(scrollbarWidthNumberPx, "px");
-var scrollbarStyling = css(["&::-webkit-scrollbar{width:", ";height:", ";}&::-webkit-scrollbar-track{background:transparent;border-radius:100px;}&::-webkit-scrollbar-thumb{background:", ";border-radius:100px;}&::-webkit-scrollbar-thumb:hover{background:", ";}scrollbar-color:", " transparent;scrollbar-width:thin;"], scrollbarWidth, scrollbarWidth, ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
-
-export { scrollbarStyling, scrollbarWidth, scrollbarWidthNumberPx };