@norges-domstoler/dds-components 18.2.0 → 18.3.0

package/dist/index.mjs

@@ -95,6 +95,8 @@ import { forwardRef } from "react";
 // src/components/helpers/Backdrop/Backdrop.module.css
 var Backdrop_default = {
   backdrop: "Backdrop_backdrop",
+  drawer: "Backdrop_drawer",
+  modal: "Backdrop_modal",
   "backdrop--visible": "Backdrop_backdrop--visible",
   "backdrop--hidden": "Backdrop_backdrop--hidden"
 };
@@ -287,13 +289,17 @@ function useElementHeight(element) {
 // src/components/helpers/Backdrop/Backdrop.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Backdrop = forwardRef(
-  ({ isMounted, ...props }, ref) => {
+  ({ isMounted, zIndex, ...props }, ref) => {
     const isMountedCn = isMounted ? "visible" : "hidden";
     return /* @__PURE__ */ jsx2(
       "div",
       {
         ref,
-        className: cn(Backdrop_default.backdrop, Backdrop_default[`backdrop--${isMountedCn}`]),
+        className: cn(
+          Backdrop_default.backdrop,
+          Backdrop_default[zIndex],
+          Backdrop_default[`backdrop--${isMountedCn}`]
+        ),
         ...props
       }
     );
@@ -3367,6 +3373,8 @@ var OverflowMenu_default = {
   container: "OverflowMenu_container",
   list: "OverflowMenu_list",
   list__item: "OverflowMenu_list__item",
+  default: "OverflowMenu_default",
+  danger: "OverflowMenu_danger",
   "list__item--link": "OverflowMenu_list__item--link",
   icon: "OverflowMenu_icon",
   divider: "OverflowMenu_divider",
@@ -3463,7 +3471,15 @@ OverflowMenu.displayName = "OverflowMenu";
 import { forwardRef as forwardRef20, useEffect as useEffect13, useRef as useRef6 } from "react";
 import { jsx as jsx187, jsxs as jsxs28 } from "react/jsx-runtime";
 var OverflowMenuButton = forwardRef20((props, ref) => {
-  const { id, icon, children, className, onClick, ...rest } = props;
+  const {
+    id,
+    icon,
+    children,
+    className,
+    onClick,
+    purpose = "default",
+    ...rest
+  } = props;
   const itemRef = useRef6(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { onToggle, onClose, registerItem, unregisterItem, focusedRef } = useOverflowMenu();
@@ -3480,6 +3496,7 @@ var OverflowMenuButton = forwardRef20((props, ref) => {
       className: cn(
         className,
         OverflowMenu_default.list__item,
+        OverflowMenu_default[purpose],
         typographyStyles_default["body-small"],
         OverflowMenu_default["list__item--link"],
         focus_default["focusable--inset"]
@@ -3504,7 +3521,16 @@ OverflowMenuButton.displayName = "OverflowMenuButton";
 import { forwardRef as forwardRef21, useEffect as useEffect14, useRef as useRef7 } from "react";
 import { jsx as jsx188, jsxs as jsxs29 } from "react/jsx-runtime";
 var OverflowMenuLink = forwardRef21((props, ref) => {
-  const { id, href, icon, className, onClick, children, ...rest } = props;
+  const {
+    id,
+    href,
+    icon,
+    className,
+    onClick,
+    children,
+    purpose = "default",
+    ...rest
+  } = props;
   const itemRef = useRef7(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { onToggle, onClose, registerItem, unregisterItem, focusedRef } = useOverflowMenu();
@@ -3521,6 +3547,7 @@ var OverflowMenuLink = forwardRef21((props, ref) => {
       className: cn(
         className,
         OverflowMenu_default.list__item,
+        OverflowMenu_default[purpose],
         typographyStyles_default["body-small"],
         OverflowMenu_default["list__item--link"],
         focus_default["focusable--inset"]
@@ -3608,7 +3635,7 @@ var OverflowMenuList = forwardRef24((props, ref) => {
 import { forwardRef as forwardRef25 } from "react";
 import { jsx as jsx192, jsxs as jsxs30 } from "react/jsx-runtime";
 var OverflowMenuSpan = forwardRef25((props, ref) => {
-  const { icon, children, className, ...rest } = props;
+  const { icon, children, className, purpose = "default", ...rest } = props;
   return /* @__PURE__ */ jsx192("li", { children: /* @__PURE__ */ jsxs30(
     "span",
     {
@@ -3616,6 +3643,7 @@ var OverflowMenuSpan = forwardRef25((props, ref) => {
       className: cn(
         className,
         OverflowMenu_default.list__item,
+        OverflowMenu_default[purpose],
         typographyStyles_default["body-small"]
       ),
       ...rest,
@@ -5386,7 +5414,16 @@ var Drawer = forwardRef48((props, ref) => {
       ]
     }
   );
-  const component = withBackdrop ? /* @__PURE__ */ jsx225(Backdrop, { isMounted, ref: backdropRef, onClick: onBackdropClick, children: drawer }) : drawer;
+  const component = withBackdrop ? /* @__PURE__ */ jsx225(
+    Backdrop,
+    {
+      zIndex: "drawer",
+      isMounted,
+      ref: backdropRef,
+      onClick: onBackdropClick,
+      children: drawer
+    }
+  ) : drawer;
   return (isOpen || hasTransitionedIn) && portalTarget ? createPortal(component, portalTarget) : null;
 });
 Drawer.displayName = "Drawer";
@@ -6010,59 +6047,63 @@ var Tooltip = forwardRef52(
         "aria-describedby": uniqueTooltipId
       })
     );
-    const containerProps = {
-      ...getBaseHTMLProps(id, cn(className, Tooltip_default.container), htmlProps, rest),
-      style,
-      onMouseLeave: combineHandlers(closeTooltip, onMouseLeave),
-      onMouseOver: combineHandlers(openTooltip, onMouseOver)
-    };
-    const wrapperProps = {
-      id: uniqueTooltipId,
-      ref: combinedRef,
-      role: "tooltip",
-      "aria-hidden": !open,
-      open: open && inView,
-      style: { ...positionStyles.floating }
-    };
     const openCn = open && inView ? "open" : "closed";
-    return /* @__PURE__ */ jsxs47("div", { ...containerProps, children: [
-      anchorElement,
-      /* @__PURE__ */ jsxs47(
-        Paper,
-        {
-          ...wrapperProps,
-          elevation: 1,
-          border: "subtle",
-          className: cn(
-            Tooltip_default.paper,
-            typographyStyles_default["body-medium"],
-            utilStyles_default["visibility-transition"],
-            utilStyles_default[`visibility-transition--${openCn}`]
-          ),
-          children: [
-            text,
-            /* @__PURE__ */ jsx232("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ jsxs47("svg", { width: "36", height: "9", children: [
-              /* @__PURE__ */ jsx232(
-                "path",
-                {
-                  d: "M16.586 6.586L10 0h16.154a.373.373 0 00-.263.11l-6.477 6.476a2 2 0 01-2.828 0z",
-                  className: Tooltip_default["svg-arrow__background"]
-                }
+    return /* @__PURE__ */ jsxs47(
+      "div",
+      {
+        ...getBaseHTMLProps(
+          id,
+          cn(className, Tooltip_default.container),
+          htmlProps,
+          rest
+        ),
+        style,
+        onMouseLeave: combineHandlers(closeTooltip, onMouseLeave),
+        onMouseOver: combineHandlers(openTooltip, onMouseOver),
+        children: [
+          anchorElement,
+          /* @__PURE__ */ jsxs47(
+            Paper,
+            {
+              id: uniqueTooltipId,
+              ref: combinedRef,
+              role: "tooltip",
+              "aria-hidden": !open,
+              style: { ...positionStyles.floating },
+              elevation: 1,
+              border: "subtle",
+              className: cn(
+                Tooltip_default.paper,
+                typographyStyles_default["body-medium"],
+                utilStyles_default["visibility-transition"],
+                utilStyles_default[`visibility-transition--${openCn}`]
               ),
-              /* @__PURE__ */ jsx232(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  clipRule: "evenodd",
-                  d: "M26.5.5l-6.732 6.94a2.5 2.5 0 01-3.536 0L9.5.5H11l5.94 6.232a1.5 1.5 0 002.12 0L25 .5h1.5z",
-                  className: Tooltip_default["svg-arrow__border"]
-                }
-              )
-            ] }) })
-          ]
-        }
-      )
-    ] });
+              children: [
+                text,
+                /* @__PURE__ */ jsx232("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ jsxs47("svg", { width: "36", height: "9", children: [
+                  /* @__PURE__ */ jsx232(
+                    "path",
+                    {
+                      d: "M16.586 6.586L10 0h16.154a.373.373 0 00-.263.11l-6.477 6.476a2 2 0 01-2.828 0z",
+                      className: Tooltip_default["svg-arrow__background"]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx232(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      clipRule: "evenodd",
+                      d: "M26.5.5l-6.732 6.94a2.5 2.5 0 01-3.536 0L9.5.5H11l5.94 6.232a1.5 1.5 0 002.12 0L25 .5h1.5z",
+                      className: Tooltip_default["svg-arrow__border"]
+                    }
+                  )
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Tooltip.displayName = "Tooltip";
@@ -7867,6 +7908,7 @@ var Modal = forwardRef72((props, ref) => {
     /* @__PURE__ */ jsx261(
       Backdrop,
       {
+        zIndex: "modal",
         isMounted: isOpen && hasTransitionedIn,
         ref: backdropRef,
         onClick: onBackdropClick,
@@ -9549,7 +9591,7 @@ var getCallingCode = (s) => {
 };
 
 // src/components/Popover/Popover.tsx
-import { forwardRef as forwardRef79 } from "react";
+import { forwardRef as forwardRef79, useEffect as useEffect25 } from "react";
 
 // src/components/Popover/Popover.module.css
 var Popover_default = {
@@ -9559,6 +9601,14 @@ var Popover_default = {
   "close-button": "Popover_close-button"
 };
 
+// src/components/Popover/Popover.context.tsx
+import {
+  createContext as createContext5,
+  useContext as useContext12
+} from "react";
+var PopoverContext = createContext5({});
+var usePopoverContext = () => useContext12(PopoverContext);
+
 // src/components/Popover/Popover.tsx
 import { jsx as jsx269, jsxs as jsxs63 } from "react/jsx-runtime";
 var Popover = forwardRef79(
@@ -9576,17 +9626,12 @@ var Popover = forwardRef79(
       offset = 8,
       sizeProps,
       returnFocusOnBlur = true,
-      id,
       className,
       htmlProps = {},
       ...rest
     } = props;
     const hasTransitionedIn = useMountTransition(isOpen, 400);
-    const { refs, styles: floatingStyles } = useFloatPosition(null, {
-      placement,
-      offset
-    });
-    refs.setReference(anchorElement || null);
+    const { floatStyling, setFloatOptions, floatingRef, popoverId } = usePopoverContext();
     const popoverRef = useReturnFocusOnBlur(
       isOpen && hasTransitionedIn && returnFocusOnBlur,
       () => {
@@ -9595,23 +9640,27 @@ var Popover = forwardRef79(
       },
       anchorElement && anchorElement
     );
-    const multiRef = useCombinedRef(ref, popoverRef, refs.setFloating);
+    const multiRef = useCombinedRef(ref, popoverRef, floatingRef);
+    useEffect25(() => {
+      setFloatOptions && setFloatOptions({ placement, offset });
+    }, []);
     const elements = [popoverRef.current];
     if (anchorElement) elements.push(anchorElement);
     const hasTitle = !!title;
     useOnClickOutside(elements, () => {
       if (isOpen) onClose && onClose();
     });
+    const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
     return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs63(
       Paper,
       {
         ...getBaseHTMLProps(
-          id,
+          popoverId,
           cn(
             className,
             Popover_default.container,
             utilStyles_default["visibility-transition"],
-            hasTransitionedIn && isOpen ? utilStyles_default["visibility-transition--open"] : utilStyles_default["visibility-transition--closed"],
+            utilStyles_default[`visibility-transition--${openCn}`],
             focus_default.focusable
           ),
           htmlProps,
@@ -9619,7 +9668,11 @@ var Popover = forwardRef79(
         ),
         ref: multiRef,
         tabIndex: -1,
-        style: { ...htmlProps.style, ...floatingStyles.floating, ...sizeProps },
+        style: {
+          ...htmlProps.style,
+          ...floatStyling,
+          ...sizeProps
+        },
         role: "dialog",
         elevation: 3,
         border: "subtle",
@@ -9659,7 +9712,7 @@ import {
   useRef as useRef31,
   useState as useState21
 } from "react";
-import { Fragment as Fragment9, jsx as jsx270 } from "react/jsx-runtime";
+import { jsx as jsx270 } from "react/jsx-runtime";
 var PopoverGroup = ({
   isOpen = false,
   onCloseButtonClick,
@@ -9670,6 +9723,8 @@ var PopoverGroup = ({
   const [open, setOpen] = useState21(isOpen);
   const generatedId = useId18();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
+  const [floatOptions, setFloatOptions] = useState21();
+  const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
   const handleOnCloseButtonClick = () => {
     setOpen(false);
     onCloseButtonClick && onCloseButtonClick();
@@ -9679,7 +9734,8 @@ var PopoverGroup = ({
     onTriggerClick && onTriggerClick();
   };
   const buttonRef = useRef31(null);
-  const popoverRef = useRef31(null);
+  const anchorRef = refs.setReference;
+  const combinedRef = useCombinedRef(buttonRef, anchorRef);
   useOnKeyDown(["Esc", "Escape"], () => {
     var _a;
     if (open) {
@@ -9688,47 +9744,57 @@ var PopoverGroup = ({
     }
   });
   const handleClose = () => setOpen(false);
+  const isAnchorChild = (i) => i === 0;
   const Children8 = ReactChildren5.map(children, (child, childIndex) => {
-    return isValidElement7(child) && (childIndex === 0 ? cloneElement6(child, {
+    return isValidElement7(child) && (isAnchorChild(childIndex) ? cloneElement6(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniquePopoverId,
       "aria-expanded": open,
       onClick: handleOnTriggerClick,
-      ref: buttonRef
+      ref: combinedRef
     }) : cloneElement6(child, {
       isOpen: open,
       "aria-hidden": !open,
-      id: uniquePopoverId,
       onCloseButtonClick: handleOnCloseButtonClick,
       anchorElement: buttonRef.current,
-      ref: popoverRef,
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsx270(Fragment9, { children: Children8 });
+  return /* @__PURE__ */ jsx270(
+    PopoverContext.Provider,
+    {
+      value: {
+        floatStyling: positionStyles.floating,
+        setFloatOptions,
+        floatingRef: refs.setFloating,
+        popoverId: uniquePopoverId
+      },
+      children: Children8
+    }
+  );
 };
 PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
 import {
   Children as Children4,
-  Fragment as Fragment11,
+  Fragment as Fragment10,
   cloneElement as cloneElement7,
   forwardRef as forwardRef80,
   isValidElement as isValidElement8,
-  useEffect as useEffect25,
+  useEffect as useEffect26,
   useMemo as useMemo3,
   useState as useState22
 } from "react";
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-import { createContext as createContext5, useContext as useContext12 } from "react";
-var ProgressTrackerContext = createContext5(
+import { createContext as createContext6, useContext as useContext13 } from "react";
+var ProgressTrackerContext = createContext6(
   {
     activeStep: 0
   }
 );
-var useProgressTrackerContext = () => useContext12(ProgressTrackerContext);
+var useProgressTrackerContext = () => useContext13(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -9753,7 +9819,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment10, jsx as jsx271, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx271, jsxs as jsxs64 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -9803,7 +9869,7 @@ var ProgressTrackerItem = (props) => {
     }
     return index + 1;
   }, [completed, icon, index]);
-  const stepContent = /* @__PURE__ */ jsxs64(Fragment10, { children: [
+  const stepContent = /* @__PURE__ */ jsxs64(Fragment9, { children: [
     /* @__PURE__ */ jsx271(
       "div",
       {
@@ -9877,7 +9943,7 @@ var ProgressTracker = (() => {
       setActiveStep(step);
       onStepChange && onStepChange(step);
     };
-    useEffect25(() => {
+    useEffect26(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
@@ -9923,7 +9989,7 @@ var intersperseItemsWithConnector = (children) => Children4.map(children, (child
   if (index === 0) {
     return child;
   }
-  return /* @__PURE__ */ jsxs65(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs65(Fragment10, { children: [
     /* @__PURE__ */ jsx272("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
     child
   ] }, index);
@@ -10034,12 +10100,12 @@ import {
 
 // src/components/Search/AutocompleteSearch.context.tsx
 import {
-  createContext as createContext6,
-  useContext as useContext13
+  createContext as createContext7,
+  useContext as useContext14
 } from "react";
-var AutocompleteSearchContext = createContext6({});
+var AutocompleteSearchContext = createContext7({});
 var useAutocompleteSearch = () => {
-  return useContext13(AutocompleteSearchContext);
+  return useContext14(AutocompleteSearchContext);
 };
 
 // src/components/Search/Search.module.css
@@ -10094,7 +10160,7 @@ import { forwardRef as forwardRef83 } from "react";
 // src/components/Search/SearchSuggestionItem.tsx
 import {
   forwardRef as forwardRef82,
-  useEffect as useEffect26,
+  useEffect as useEffect27,
   useRef as useRef32
 } from "react";
 import { jsx as jsx274 } from "react/jsx-runtime";
@@ -10102,7 +10168,7 @@ var SearchSuggestionItem = forwardRef82((props, ref) => {
   const { focus, className, ...rest } = props;
   const itemRef = useRef32(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  useEffect26(() => {
+  useEffect27(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
@@ -10207,7 +10273,7 @@ var SearchSuggestions = forwardRef83((props, ref) => {
 SearchSuggestions.displayName = "SearchSuggestions";
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment12, jsx as jsx276, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx276, jsxs as jsxs68 } from "react/jsx-runtime";
 var getIconSize2 = (size2) => {
   switch (size2) {
     case "large":
@@ -10313,7 +10379,7 @@ var Search = forwardRef84(
                     )
                   }
                 ),
-                hasSuggestions && /* @__PURE__ */ jsxs68(Fragment12, { children: [
+                hasSuggestions && /* @__PURE__ */ jsxs68(Fragment11, { children: [
                   /* @__PURE__ */ jsx276(
                     SearchSuggestions,
                     {
@@ -10361,7 +10427,7 @@ Search.displayName = "Search";
 
 // src/components/Search/SearchAutocompleteWrapper.tsx
 import {
-  useEffect as useEffect27,
+  useEffect as useEffect28,
   useRef as useRef33,
   useState as useState24
 } from "react";
@@ -10381,7 +10447,7 @@ var SearchAutocompleteWrapper = (props) => {
   const [showSuggestions, setShowSuggestions] = useState24(false);
   const closeSuggestions = () => showSuggestions === true && setShowSuggestions(false);
   const openSuggestions = () => showSuggestions === false && setShowSuggestions(true);
-  useEffect27(() => {
+  useEffect28(() => {
     if (suggestions.length > 0) {
       openSuggestions();
     } else {
@@ -10454,10 +10520,10 @@ Search2.Suggestions = SearchSuggestions;
 import { forwardRef as forwardRef86, useId as useId21 } from "react";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
-import { createContext as createContext7, useContext as useContext14 } from "react";
-var CheckboxGroupContext = createContext7(null);
+import { createContext as createContext8, useContext as useContext15 } from "react";
+var CheckboxGroupContext = createContext8(null);
 var useCheckboxGroup = () => {
-  return useContext14(CheckboxGroupContext);
+  return useContext15(CheckboxGroupContext);
 };
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
@@ -10707,10 +10773,10 @@ CheckboxGroup.displayName = "CheckboxGroup";
 import { forwardRef as forwardRef87, useId as useId23 } from "react";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
-import { createContext as createContext8, useContext as useContext15 } from "react";
-var RadioButtonGroupContext = createContext8(null);
+import { createContext as createContext9, useContext as useContext16 } from "react";
+var RadioButtonGroupContext = createContext9(null);
 var useRadioButtonGroup = () => {
-  return useContext15(RadioButtonGroupContext);
+  return useContext16(RadioButtonGroupContext);
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
@@ -11060,21 +11126,21 @@ SplitButton.displayName = "SplitButton";
 // src/components/Table/collapsible/CollapsibleRow.tsx
 import {
   Children as Children5,
-  Fragment as Fragment13,
+  Fragment as Fragment12,
   cloneElement as cloneElement8,
   forwardRef as forwardRef99,
   isValidElement as isValidElement9,
-  useEffect as useEffect29,
+  useEffect as useEffect30,
   useState as useState28
 } from "react";
 
 // src/components/Table/collapsible/Table.context.tsx
-import { createContext as createContext9, useContext as useContext16 } from "react";
-var CollapsibleTableContext = createContext9({
+import { createContext as createContext10, useContext as useContext17 } from "react";
+var CollapsibleTableContext = createContext10({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => useContext16(CollapsibleTableContext);
+var useCollapsibleTableContext = () => useContext17(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 import { forwardRef as forwardRef92 } from "react";
@@ -11093,9 +11159,9 @@ import {
 
 // src/components/Table/normal/Head.tsx
 import {
-  createContext as createContext10,
+  createContext as createContext11,
   forwardRef as forwardRef93,
-  useContext as useContext17
+  useContext as useContext18
 } from "react";
 import { jsx as jsx287 } from "react/jsx-runtime";
 var Head = forwardRef93(
@@ -11104,9 +11170,9 @@ var Head = forwardRef93(
   }
 );
 Head.displayName = "Table.Head";
-var HeadContext = createContext10(false);
+var HeadContext = createContext11(false);
 function useIsInTableHead() {
-  const isInTableHead = useContext17(HeadContext);
+  const isInTableHead = useContext18(HeadContext);
   return isInTableHead;
 }
 
@@ -11287,14 +11353,14 @@ Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
 import {
-  useContext as useContext18,
-  useEffect as useEffect28,
+  useContext as useContext19,
+  useEffect as useEffect29,
   useRef as useRef34,
   useState as useState27
 } from "react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
-  const themeContext = useContext18(ThemeContext);
+  const themeContext = useContext19(ThemeContext);
   const container = themeContext == null ? void 0 : themeContext.el;
   const containerWidth = container ? container.clientWidth : 0;
   const [overflowX, setOverflowX] = useState27(false);
@@ -11303,14 +11369,14 @@ var TableWrapper = ({ className, ...rest }) => {
     return event.offsetWidth < event.scrollWidth;
   }
   const wrapperRef = useRef34(null);
-  useEffect28(() => {
+  useEffect29(() => {
     if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
       setOverflowX(true);
       return;
     }
     setOverflowX(false);
   }, [themeContainerWidth]);
-  useEffect28(() => {
+  useEffect29(() => {
     function handleResize() {
       setThemeContainerWidth(containerWidth);
     }
@@ -11344,7 +11410,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment14, jsx as jsx294, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx294, jsxs as jsxs75 } from "react/jsx-runtime";
 var CollapsibleRow = forwardRef99(
   ({
     type: _type,
@@ -11359,7 +11425,7 @@ var CollapsibleRow = forwardRef99(
     const type = _type != null ? _type : isInHead ? "head" : "body";
     const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
     const [childrenCollapsed, setChildrenCollapsed] = useState28(true);
-    useEffect29(() => {
+    useEffect30(() => {
       !isCollapsed && setChildrenCollapsed(true);
     }, [isCollapsed]);
     const rowProps = (isOpenCollapsibleHeader) => {
@@ -11386,7 +11452,7 @@ var CollapsibleRow = forwardRef99(
     const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
       const id = derivativeIdGenerator(prefix2, index.toString());
       collapsibleIds.push(id);
-      return /* @__PURE__ */ jsxs75(Fragment13, { children: [
+      return /* @__PURE__ */ jsxs75(Fragment12, { children: [
         /* @__PURE__ */ jsx294(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
         isValidElement9(child) && cloneElement8(child, {
           collapsibleProps: { isCollapsibleChild: true }
@@ -11399,7 +11465,7 @@ var CollapsibleRow = forwardRef99(
     });
     const headerRow = () => {
       if (type !== "head" || !isCollapsed) return null;
-      return /* @__PURE__ */ jsx294(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs75(Fragment14, { children: [
+      return /* @__PURE__ */ jsx294(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs75(Fragment13, { children: [
         definingColumnCells,
         /* @__PURE__ */ jsxs75(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
@@ -11436,9 +11502,9 @@ var CollapsibleRow = forwardRef99(
         ) })
       ] });
     };
-    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs75(Fragment14, { children: [
+    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs75(Fragment13, { children: [
       headerRow(),
-      type === "body" && /* @__PURE__ */ jsxs75(Fragment14, { children: [
+      type === "body" && /* @__PURE__ */ jsxs75(Fragment13, { children: [
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
@@ -11478,15 +11544,15 @@ CollapsibleTable2.Row = CollapsibleRow;
 // src/components/Tabs/Tabs.tsx
 import {
   forwardRef as forwardRef101,
-  useEffect as useEffect30,
+  useEffect as useEffect31,
   useId as useId25,
   useRef as useRef35,
   useState as useState29
 } from "react";
 
 // src/components/Tabs/Tabs.context.tsx
-import { createContext as createContext11, useContext as useContext19 } from "react";
-var TabsContext = createContext11({
+import { createContext as createContext12, useContext as useContext20 } from "react";
+var TabsContext = createContext12({
   activeTab: 0,
   tabsId: "",
   handleTabChange: () => null,
@@ -11496,7 +11562,7 @@ var TabsContext = createContext11({
   setHasTabFocus: () => null,
   tabContentDirection: "row"
 });
-var useTabsContext = () => useContext19(TabsContext);
+var useTabsContext = () => useContext20(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -11535,7 +11601,7 @@ var Tabs = forwardRef101((props, ref) => {
     setActiveTab(index);
     onChange && onChange(index);
   };
-  useEffect30(() => {
+  useEffect31(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -11580,18 +11646,18 @@ Tabs.displayName = "Tabs";
 import {
   forwardRef as forwardRef102,
   useCallback as useCallback7,
-  useEffect as useEffect31,
+  useEffect as useEffect32,
   useRef as useRef36
 } from "react";
 
 // src/components/Tabs/TabWidthContext.tsx
 import {
-  createContext as createContext12,
-  useContext as useContext20,
+  createContext as createContext13,
+  useContext as useContext21,
   useLayoutEffect as useLayoutEffect3
 } from "react";
 import { jsx as jsx297 } from "react/jsx-runtime";
-var TabContext = createContext12(null);
+var TabContext = createContext13(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
@@ -11620,7 +11686,7 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = useContext20(TabContext);
+  const context = useContext21(TabContext);
   useLayoutEffect3(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
@@ -11649,7 +11715,7 @@ var Tab = forwardRef102((props, ref) => {
   const itemRef = useRef36(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { tabContentDirection } = useTabsContext();
-  useEffect31(() => {
+  useEffect32(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
@@ -12274,11 +12340,11 @@ Toggle.displayName = "Toggle";
 import { useId as useId28, useState as useState32 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-import { createContext as createContext13, useContext as useContext21 } from "react";
-var ToggleBarContext = createContext13({
+import { createContext as createContext14, useContext as useContext22 } from "react";
+var ToggleBarContext = createContext14({
   size: "medium"
 });
-var useToggleBarContext = () => useContext21(ToggleBarContext);
+var useToggleBarContext = () => useContext22(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -12454,13 +12520,15 @@ var ToggleButton_default = {
   "group--column": "ToggleButton_group--column",
   container: "ToggleButton_container",
   content: "ToggleButton_content",
+  small: "ToggleButton_small",
+  xsmall: "ToggleButton_xsmall",
   "content--with-icon": "ToggleButton_content--with-icon"
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
 import { jsx as jsx307, jsxs as jsxs82 } from "react/jsx-runtime";
 var ToggleButton = forwardRef110(
-  ({ id, label, icon, className, htmlProps, ...rest }, ref) => {
+  ({ id, label, icon, size: size2 = "small", className, htmlProps, ...rest }, ref) => {
     const generatedId = useId30();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     const hasIcon = !!icon;
@@ -12487,8 +12555,9 @@ var ToggleButton = forwardRef110(
         {
           className: cn(
             ToggleButton_default.content,
+            ToggleButton_default[size2],
             hasIcon && ToggleButton_default["content--with-icon"],
-            typographyStyles_default["body-small"],
+            typographyStyles_default[`body-${size2}`],
             focus_default["focus-styled-sibling"]
           ),
           children: [