@norges-domstoler/dds-components 18.1.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
       }
     );
@@ -2568,7 +2574,7 @@ import {
   useState as useState3
 } from "react";
 var isKeyboardEvent = (e) => e.key !== void 0;
-function useRoveFocus(size2, active, direction = "column") {
+function useRoveFocus(size2, active, direction = "column", noWrap) {
   const [currentFocusIndex, setCurrentFocusIndex] = useState3(-1);
   const nextKey = direction === "row" ? "ArrowRight" : "ArrowDown";
   const previousKey = direction === "row" ? "ArrowLeft" : "ArrowUp";
@@ -2577,16 +2583,19 @@ function useRoveFocus(size2, active, direction = "column") {
       if (!size2 || !isKeyboardEvent(e)) return;
       if (e.key === nextKey) {
         e.preventDefault();
-        setCurrentFocusIndex((prev) => prev === size2 - 1 ? 0 : prev + 1);
+        setCurrentFocusIndex((prev) => {
+          if (prev === size2 - 1) return noWrap ? prev : 0;
+          return prev + 1;
+        });
       } else if (e.key === previousKey) {
         e.preventDefault();
         setCurrentFocusIndex((prev) => {
-          if (prev === -1 || prev === 0) return size2 - 1;
+          if (prev === -1 || prev === 0) return noWrap ? prev : size2 - 1;
           return prev - 1;
         });
       }
     },
-    [size2, setCurrentFocusIndex]
+    [size2, setCurrentFocusIndex, direction, noWrap]
   );
   useEffect8(() => {
     if (!active) {
@@ -3364,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",
@@ -3460,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();
@@ -3477,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"]
@@ -3501,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();
@@ -3518,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"]
@@ -3605,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",
     {
@@ -3613,6 +3643,7 @@ var OverflowMenuSpan = forwardRef25((props, ref) => {
       className: cn(
         className,
         OverflowMenu_default.list__item,
+        OverflowMenu_default[purpose],
         typographyStyles_default["body-small"]
       ),
       ...rest,
@@ -5383,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";
@@ -6007,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";
@@ -6691,7 +6735,15 @@ var FileUploader = (props) => {
       style: { ...style, width },
       ...rest,
       children: [
-        hasLabel && /* @__PURE__ */ jsx238(Label, { id: labelId, showRequiredStyling: showRequiredMarker, children: label }),
+        hasLabel && /* @__PURE__ */ jsx238(
+          Label,
+          {
+            id: labelId,
+            showRequiredStyling: showRequiredMarker,
+            htmlFor: inputId,
+            children: label
+          }
+        ),
         hasTip && /* @__PURE__ */ jsx238(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
         withDragAndDrop ? /* @__PURE__ */ jsxs50(
           "div",
@@ -7856,6 +7908,7 @@ var Modal = forwardRef72((props, ref) => {
     /* @__PURE__ */ jsx261(
       Backdrop,
       {
+        zIndex: "modal",
         isMounted: isOpen && hasTransitionedIn,
         ref: backdropRef,
         onClick: onBackdropClick,
@@ -8012,7 +8065,11 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 // src/components/Select/Select.tsx
-import { forwardRef as forwardRef75, useContext as useContext11, useId as useId15 } from "react";
+import {
+  forwardRef as forwardRef75,
+  useContext as useContext11,
+  useId as useId15
+} from "react";
 import {
   default as ReactSelect
 } from "react-select";
@@ -9534,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 = {
@@ -9544,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(
@@ -9561,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,
       () => {
@@ -9580,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,
@@ -9604,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",
@@ -9644,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,
@@ -9655,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();
@@ -9664,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) {
@@ -9673,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 = {
@@ -9738,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";
@@ -9788,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",
       {
@@ -9862,7 +9943,7 @@ var ProgressTracker = (() => {
       setActiveStep(step);
       onStepChange && onStepChange(step);
     };
-    useEffect25(() => {
+    useEffect26(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
@@ -9908,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);
@@ -10019,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
@@ -10079,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";
@@ -10087,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();
@@ -10192,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":
@@ -10298,7 +10379,7 @@ var Search = forwardRef84(
                     )
                   }
                 ),
-                hasSuggestions && /* @__PURE__ */ jsxs68(Fragment12, { children: [
+                hasSuggestions && /* @__PURE__ */ jsxs68(Fragment11, { children: [
                   /* @__PURE__ */ jsx276(
                     SearchSuggestions,
                     {
@@ -10346,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";
@@ -10366,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 {
@@ -10439,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
@@ -10692,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
@@ -11045,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";
@@ -11078,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(
@@ -11089,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;
 }
 
@@ -11271,25 +11352,33 @@ var Table = forwardRef98(
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-import { useEffect as useEffect28, useRef as useRef34, useState as useState27 } from "react";
+import {
+  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 = useContext19(ThemeContext);
+  const container = themeContext == null ? void 0 : themeContext.el;
+  const containerWidth = container ? container.clientWidth : 0;
   const [overflowX, setOverflowX] = useState27(false);
-  const [windowWidth, setWindowWidth] = useState27(window.innerWidth);
+  const [themeContainerWidth, setThemeContainerWidth] = useState27(containerWidth);
   function isOverflowingX(event) {
     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);
-  }, [windowWidth]);
-  useEffect28(() => {
+  }, [themeContainerWidth]);
+  useEffect29(() => {
     function handleResize() {
-      setWindowWidth(window.innerWidth);
+      setThemeContainerWidth(containerWidth);
     }
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
@@ -11321,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,
@@ -11336,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) => {
@@ -11363,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 }
@@ -11376,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",
@@ -11413,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
       ] })
@@ -11455,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 useContext18 } from "react";
-var TabsContext = createContext11({
+import { createContext as createContext12, useContext as useContext20 } from "react";
+var TabsContext = createContext12({
   activeTab: 0,
   tabsId: "",
   handleTabChange: () => null,
@@ -11473,7 +11562,7 @@ var TabsContext = createContext11({
   setHasTabFocus: () => null,
   tabContentDirection: "row"
 });
-var useTabsContext = () => useContext18(TabsContext);
+var useTabsContext = () => useContext20(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -11512,7 +11601,7 @@ var Tabs = forwardRef101((props, ref) => {
     setActiveTab(index);
     onChange && onChange(index);
   };
-  useEffect30(() => {
+  useEffect31(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -11557,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 useContext19,
+  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
@@ -11597,7 +11686,7 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = useContext19(TabContext);
+  const context = useContext21(TabContext);
   useLayoutEffect3(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
@@ -11626,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();
@@ -12130,15 +12219,132 @@ var TextInput = forwardRef107(
 );
 TextInput.displayName = "TextInput";
 
+// src/components/Toggle/Toggle.tsx
+import {
+  forwardRef as forwardRef108,
+  useId as useId27
+} from "react";
+
+// src/components/Toggle/Toggle.module.css
+var Toggle_default = {
+  label: "Toggle_label",
+  track: "Toggle_track",
+  thumb: "Toggle_thumb",
+  checkmark: "Toggle_checkmark",
+  "labeltext--readonly": "Toggle_labeltext--readonly",
+  "icon--read-only": "Toggle_icon--read-only",
+  medium: "Toggle_medium",
+  large: "Toggle_large",
+  "label--is-loading": "Toggle_label--is-loading",
+  "label--disabled": "Toggle_label--disabled",
+  "label--read-only": "Toggle_label--read-only"
+};
+
+// src/components/Toggle/Toggle.tsx
+import { jsx as jsx304, jsxs as jsxs79 } from "react/jsx-runtime";
+var Toggle = forwardRef108(
+  ({
+    id,
+    children,
+    size: size2 = "medium",
+    checked: checkedProp,
+    defaultChecked,
+    onChange,
+    disabled,
+    readOnly,
+    isLoading,
+    className,
+    htmlProps = {},
+    ...rest
+  }, ref) => {
+    const generatedId = useId27();
+    const uniqueId = id != null ? id : `${generatedId}-toggle`;
+    const iconSize = size2 === "large" ? "medium" : "small";
+    const [checked, setChecked] = useControllableState({
+      value: checkedProp,
+      defaultValue: defaultChecked != null ? defaultChecked : false,
+      onChange
+    });
+    return /* @__PURE__ */ jsxs79(
+      "label",
+      {
+        htmlFor: uniqueId,
+        className: cn(
+          Toggle_default.label,
+          Toggle_default[size2],
+          isLoading && Toggle_default["label--is-loading"],
+          disabled && Toggle_default["label--disabled"],
+          readOnly && Toggle_default["label--read-only"]
+        ),
+        children: [
+          /* @__PURE__ */ jsx304(
+            "input",
+            {
+              ...getBaseHTMLProps(
+                uniqueId,
+                cn(
+                  className,
+                  focus_default["focusable-sibling"],
+                  utilStyles_default["hide-input"]
+                ),
+                htmlProps,
+                rest
+              ),
+              ref,
+              type: "checkbox",
+              checked,
+              onChange: (e) => setChecked(e.target.checked),
+              disabled,
+              "aria-disabled": isLoading,
+              "aria-readonly": readOnly,
+              onKeyDown: readOnlyKeyDownHandler(
+                "selectionControl",
+                readOnly || isLoading,
+                htmlProps.onKeyDown
+              ),
+              onClick: readOnlyClickHandler(
+                readOnly || isLoading,
+                htmlProps.onClick
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx304("span", { className: cn(Toggle_default.track, focus_default["focus-styled-sibling"]), children: /* @__PURE__ */ jsx304("span", { className: Toggle_default.thumb, children: isLoading ? /* @__PURE__ */ jsx304(Spinner, { size: `var(--dds-icon-size-${size2})` }) : /* @__PURE__ */ jsx304(
+            Icon,
+            {
+              className: Toggle_default.checkmark,
+              icon: CheckIcon,
+              iconSize
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs79("span", { className: cn(readOnly && Toggle_default["labeltext--readonly"]), children: [
+            readOnly && /* @__PURE__ */ jsx304(
+              Icon,
+              {
+                icon: LockIcon,
+                iconSize: "small",
+                className: Toggle_default["icon--read-only"]
+              }
+            ),
+            children,
+            " ",
+            isLoading && /* @__PURE__ */ jsx304(VisuallyHidden, { as: "span", children: "Innlastning p\xE5g\xE5r" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
 // src/components/ToggleBar/ToggleBar.tsx
-import { useId as useId27, useState as useState32 } from "react";
+import { useId as useId28, useState as useState32 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-import { createContext as createContext13, useContext as useContext20 } from "react";
-var ToggleBarContext = createContext13({
+import { createContext as createContext14, useContext as useContext22 } from "react";
+var ToggleBarContext = createContext14({
   size: "medium"
 });
-var useToggleBarContext = () => useContext20(ToggleBarContext);
+var useToggleBarContext = () => useContext22(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -12157,7 +12363,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx304, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs80 } from "react/jsx-runtime";
 var ToggleBar = (props) => {
   const {
     children,
@@ -12172,7 +12378,7 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = useId27();
+  const generatedId = useId28();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
   const [groupValue, setGroupValue] = useState32(value);
   const handleChange = combineHandlers(
@@ -12180,7 +12386,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ jsx304(
+  return /* @__PURE__ */ jsx305(
     ToggleBarContext.Provider,
     {
       value: {
@@ -12189,7 +12395,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ jsxs79(
+      children: /* @__PURE__ */ jsxs80(
         "div",
         {
           ...getBaseHTMLProps(
@@ -12202,8 +12408,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ jsx304(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
-            /* @__PURE__ */ jsx304("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ jsx305(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
+            /* @__PURE__ */ jsx305("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -12214,10 +12420,10 @@ ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
 import {
-  forwardRef as forwardRef108,
-  useId as useId28
+  forwardRef as forwardRef109,
+  useId as useId29
 } from "react";
-import { jsx as jsx305, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs81 } from "react/jsx-runtime";
 var typographyTypes4 = {
   large: "bodyLarge",
   medium: "bodyMedium",
@@ -12234,7 +12440,7 @@ var calculateChecked = (value, group, checked) => {
   }
   return !!value;
 };
-var ToggleRadio = forwardRef108(
+var ToggleRadio = forwardRef109(
   (props, ref) => {
     const {
       value,
@@ -12250,7 +12456,7 @@ var ToggleRadio = forwardRef108(
       id,
       ...rest
     } = props;
-    const generatedId = useId28();
+    const generatedId = useId29();
     const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
     const group = useToggleBarContext();
     const handleChange = (event) => {
@@ -12258,8 +12464,8 @@ var ToggleRadio = forwardRef108(
       (group == null ? void 0 : group.onChange) && group.onChange(event);
     };
     const contentTypeCn = label ? "with-text" : "just-icon";
-    return /* @__PURE__ */ jsxs80("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
-      /* @__PURE__ */ jsx305(
+    return /* @__PURE__ */ jsxs81("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
+      /* @__PURE__ */ jsx306(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12282,7 +12488,7 @@ var ToggleRadio = forwardRef108(
           "aria-labelledby": ariaLabelledBy
         }
       ),
-      /* @__PURE__ */ jsxs80(
+      /* @__PURE__ */ jsxs81(
         Typography,
         {
           as: "span",
@@ -12293,8 +12499,8 @@ var ToggleRadio = forwardRef108(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon && /* @__PURE__ */ jsx305(Icon, { icon, iconSize: "inherit" }),
-            label && /* @__PURE__ */ jsx305("span", { children: label })
+            icon && /* @__PURE__ */ jsx306(Icon, { icon, iconSize: "inherit" }),
+            label && /* @__PURE__ */ jsx306("span", { children: label })
           ]
         }
       )
@@ -12304,7 +12510,7 @@ var ToggleRadio = forwardRef108(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { forwardRef as forwardRef109, useId as useId29 } from "react";
+import { forwardRef as forwardRef110, useId as useId30 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -12314,18 +12520,20 @@ 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 jsx306, jsxs as jsxs81 } from "react/jsx-runtime";
-var ToggleButton = forwardRef109(
-  ({ id, label, icon, className, htmlProps, ...rest }, ref) => {
-    const generatedId = useId29();
+import { jsx as jsx307, jsxs as jsxs82 } from "react/jsx-runtime";
+var ToggleButton = forwardRef110(
+  ({ id, label, icon, size: size2 = "small", className, htmlProps, ...rest }, ref) => {
+    const generatedId = useId30();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     const hasIcon = !!icon;
-    return /* @__PURE__ */ jsxs81("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
-      /* @__PURE__ */ jsx306(
+    return /* @__PURE__ */ jsxs82("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
+      /* @__PURE__ */ jsx307(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12342,17 +12550,18 @@ var ToggleButton = forwardRef109(
           type: "checkbox"
         }
       ),
-      /* @__PURE__ */ jsxs81(
+      /* @__PURE__ */ jsxs82(
         "span",
         {
           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: [
-            hasIcon && /* @__PURE__ */ jsx306(Icon, { icon, iconSize: "inherit" }),
+            hasIcon && /* @__PURE__ */ jsx307(Icon, { icon, iconSize: "inherit" }),
             " ",
             label
           ]
@@ -12364,8 +12573,8 @@ var ToggleButton = forwardRef109(
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-import { useId as useId30 } from "react";
-import { jsx as jsx307, jsxs as jsxs82 } from "react/jsx-runtime";
+import { useId as useId31 } from "react";
+import { jsx as jsx308, jsxs as jsxs83 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -12377,9 +12586,9 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId30();
+  const generatedId = useId31();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     "div",
     {
       ...getBaseHTMLProps(
@@ -12391,8 +12600,8 @@ var ToggleButtonGroup = (props) => {
       role: "group",
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
-        !!label && /* @__PURE__ */ jsx307(Typography, { as: "span", typographyType: "labelMedium", id: uniqueLabelId, children: label }),
-        /* @__PURE__ */ jsx307("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
+        !!label && /* @__PURE__ */ jsx308(Typography, { as: "span", typographyType: "labelMedium", id: uniqueLabelId, children: label }),
+        /* @__PURE__ */ jsx308("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
       ]
     }
   );
@@ -12669,6 +12878,7 @@ export {
   TimePicker,
   TingrettIcon,
   TipIcon,
+  Toggle,
   ToggleBar,
   ToggleButton,
   ToggleButtonGroup,