@norges-domstoler/dds-components 18.1.0 → 18.3.0

package/dist/index.js

@@ -29,8 +29,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Accordion: () => Accordion,
   AccordionBody: () => AccordionBody,
   AccordionHeader: () => AccordionHeader,
@@ -301,6 +301,7 @@ __export(src_exports, {
   TimePicker: () => TimePicker,
   TingrettIcon: () => TingrettIcon,
   TipIcon: () => TipIcon,
+  Toggle: () => Toggle,
   ToggleBar: () => ToggleBar,
   ToggleButton: () => ToggleButton,
   ToggleButtonGroup: () => ToggleButtonGroup,
@@ -378,7 +379,7 @@ __export(src_exports, {
   useTheme: () => useTheme,
   visibilityTransition: () => visibilityTransition
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/components/Typography/typographyStyles.module.css
 var typographyStyles_default = {
@@ -470,6 +471,8 @@ var import_react2 = require("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"
 };
@@ -662,13 +665,17 @@ function useElementHeight(element) {
 // src/components/helpers/Backdrop/Backdrop.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Backdrop = (0, import_react2.forwardRef)(
-  ({ isMounted, ...props }, ref) => {
+  ({ isMounted, zIndex, ...props }, ref) => {
     const isMountedCn = isMounted ? "visible" : "hidden";
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         ref,
-        className: cn(Backdrop_default.backdrop, Backdrop_default[`backdrop--${isMountedCn}`]),
+        className: cn(
+          Backdrop_default.backdrop,
+          Backdrop_default[zIndex],
+          Backdrop_default[`backdrop--${isMountedCn}`]
+        ),
         ...props
       }
     );
@@ -2928,7 +2935,7 @@ function useReturnFocusOnBlur(active, onBlur, triggerElement) {
 // src/hooks/useRoveFocus.tsx
 var import_react22 = require("react");
 var isKeyboardEvent = (e) => e.key !== void 0;
-function useRoveFocus(size2, active, direction = "column") {
+function useRoveFocus(size2, active, direction = "column", noWrap) {
   const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react22.useState)(-1);
   const nextKey = direction === "row" ? "ArrowRight" : "ArrowDown";
   const previousKey = direction === "row" ? "ArrowLeft" : "ArrowUp";
@@ -2937,16 +2944,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]
   );
   (0, import_react22.useEffect)(() => {
     if (!active) {
@@ -3705,6 +3715,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",
@@ -3801,7 +3813,15 @@ OverflowMenu.displayName = "OverflowMenu";
 var import_react35 = require("react");
 var import_jsx_runtime187 = require("react/jsx-runtime");
 var OverflowMenuButton = (0, import_react35.forwardRef)((props, ref) => {
-  const { id, icon, children, className, onClick, ...rest } = props;
+  const {
+    id,
+    icon,
+    children,
+    className,
+    onClick,
+    purpose = "default",
+    ...rest
+  } = props;
   const itemRef = (0, import_react35.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { onToggle, onClose, registerItem, unregisterItem, focusedRef } = useOverflowMenu();
@@ -3818,6 +3838,7 @@ var OverflowMenuButton = (0, import_react35.forwardRef)((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"]
@@ -3842,7 +3863,16 @@ OverflowMenuButton.displayName = "OverflowMenuButton";
 var import_react36 = require("react");
 var import_jsx_runtime188 = require("react/jsx-runtime");
 var OverflowMenuLink = (0, import_react36.forwardRef)((props, ref) => {
-  const { id, href, icon, className, onClick, children, ...rest } = props;
+  const {
+    id,
+    href,
+    icon,
+    className,
+    onClick,
+    children,
+    purpose = "default",
+    ...rest
+  } = props;
   const itemRef = (0, import_react36.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { onToggle, onClose, registerItem, unregisterItem, focusedRef } = useOverflowMenu();
@@ -3859,6 +3889,7 @@ var OverflowMenuLink = (0, import_react36.forwardRef)((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"]
@@ -3946,7 +3977,7 @@ var OverflowMenuList = (0, import_react39.forwardRef)((props, ref) => {
 var import_react40 = require("react");
 var import_jsx_runtime192 = require("react/jsx-runtime");
 var OverflowMenuSpan = (0, import_react40.forwardRef)((props, ref) => {
-  const { icon, children, className, ...rest } = props;
+  const { icon, children, className, purpose = "default", ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
     "span",
     {
@@ -3954,6 +3985,7 @@ var OverflowMenuSpan = (0, import_react40.forwardRef)((props, ref) => {
       className: cn(
         className,
         OverflowMenu_default.list__item,
+        OverflowMenu_default[purpose],
         typographyStyles_default["body-small"]
       ),
       ...rest,
@@ -5669,7 +5701,16 @@ var Drawer = (0, import_react72.forwardRef)((props, ref) => {
       ]
     }
   );
-  const component = withBackdrop ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Backdrop, { isMounted, ref: backdropRef, onClick: onBackdropClick, children: drawer }) : drawer;
+  const component = withBackdrop ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+    Backdrop,
+    {
+      zIndex: "drawer",
+      isMounted,
+      ref: backdropRef,
+      onClick: onBackdropClick,
+      children: drawer
+    }
+  ) : drawer;
   return (isOpen || hasTransitionedIn) && portalTarget ? (0, import_react_dom2.createPortal)(component, portalTarget) : null;
 });
 Drawer.displayName = "Drawer";
@@ -6277,59 +6318,63 @@ var Tooltip = (0, import_react79.forwardRef)(
         "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__ */ (0, import_jsx_runtime233.jsxs)("div", { ...containerProps, children: [
-      anchorElement,
-      /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
-        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__ */ (0, import_jsx_runtime233.jsx)("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("svg", { width: "36", height: "9", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
-                "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__ */ (0, import_jsx_runtime233.jsxs)(
+      "div",
+      {
+        ...getBaseHTMLProps(
+          id,
+          cn(className, Tooltip_default.container),
+          htmlProps,
+          rest
+        ),
+        style,
+        onMouseLeave: combineHandlers(closeTooltip, onMouseLeave),
+        onMouseOver: combineHandlers(openTooltip, onMouseOver),
+        children: [
+          anchorElement,
+          /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+            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__ */ (0, import_jsx_runtime233.jsx)(
-                "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__ */ (0, import_jsx_runtime233.jsx)("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("svg", { width: "36", height: "9", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+                    "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__ */ (0, import_jsx_runtime233.jsx)(
+                    "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";
@@ -6959,7 +7004,15 @@ var FileUploader = (props) => {
       style: { ...style, width },
       ...rest,
       children: [
-        hasLabel && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Label, { id: labelId, showRequiredStyling: showRequiredMarker, children: label }),
+        hasLabel && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+          Label,
+          {
+            id: labelId,
+            showRequiredStyling: showRequiredMarker,
+            htmlFor: inputId,
+            children: label
+          }
+        ),
         hasTip && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
         withDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(
           "div",
@@ -8113,6 +8166,7 @@ var Modal = (0, import_react104.forwardRef)((props, ref) => {
     /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
       Backdrop,
       {
+        zIndex: "modal",
         isMounted: isOpen && hasTransitionedIn,
         ref: backdropRef,
         onClick: onBackdropClick,
@@ -9780,7 +9834,7 @@ var getCallingCode = (s) => {
 };
 
 // src/components/Popover/Popover.tsx
-var import_react111 = require("react");
+var import_react112 = require("react");
 
 // src/components/Popover/Popover.module.css
 var Popover_default = {
@@ -9790,9 +9844,14 @@ var Popover_default = {
   "close-button": "Popover_close-button"
 };
 
+// src/components/Popover/Popover.context.tsx
+var import_react111 = require("react");
+var PopoverContext = (0, import_react111.createContext)({});
+var usePopoverContext = () => (0, import_react111.useContext)(PopoverContext);
+
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime271 = require("react/jsx-runtime");
-var Popover = (0, import_react111.forwardRef)(
+var Popover = (0, import_react112.forwardRef)(
   (props, ref) => {
     const {
       title,
@@ -9807,17 +9866,12 @@ var Popover = (0, import_react111.forwardRef)(
       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,
       () => {
@@ -9826,23 +9880,27 @@ var Popover = (0, import_react111.forwardRef)(
       },
       anchorElement && anchorElement
     );
-    const multiRef = useCombinedRef(ref, popoverRef, refs.setFloating);
+    const multiRef = useCombinedRef(ref, popoverRef, floatingRef);
+    (0, import_react112.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime271.jsxs)(
       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,
@@ -9850,7 +9908,11 @@ var Popover = (0, import_react111.forwardRef)(
         ),
         ref: multiRef,
         tabIndex: -1,
-        style: { ...htmlProps.style, ...floatingStyles.floating, ...sizeProps },
+        style: {
+          ...htmlProps.style,
+          ...floatStyling,
+          ...sizeProps
+        },
         role: "dialog",
         elevation: 3,
         border: "subtle",
@@ -9882,7 +9944,7 @@ var Popover = (0, import_react111.forwardRef)(
 Popover.displayName = "Popover";
 
 // src/components/Popover/PopoverGroup.tsx
-var import_react112 = require("react");
+var import_react113 = require("react");
 var import_jsx_runtime272 = require("react/jsx-runtime");
 var PopoverGroup = ({
   isOpen = false,
@@ -9891,9 +9953,11 @@ var PopoverGroup = ({
   children,
   popoverId
 }) => {
-  const [open, setOpen] = (0, import_react112.useState)(isOpen);
-  const generatedId = (0, import_react112.useId)();
+  const [open, setOpen] = (0, import_react113.useState)(isOpen);
+  const generatedId = (0, import_react113.useId)();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
+  const [floatOptions, setFloatOptions] = (0, import_react113.useState)();
+  const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
   const handleOnCloseButtonClick = () => {
     setOpen(false);
     onCloseButtonClick && onCloseButtonClick();
@@ -9902,8 +9966,9 @@ var PopoverGroup = ({
     setOpen(!open);
     onTriggerClick && onTriggerClick();
   };
-  const buttonRef = (0, import_react112.useRef)(null);
-  const popoverRef = (0, import_react112.useRef)(null);
+  const buttonRef = (0, import_react113.useRef)(null);
+  const anchorRef = refs.setReference;
+  const combinedRef = useCombinedRef(buttonRef, anchorRef);
   useOnKeyDown(["Esc", "Escape"], () => {
     var _a;
     if (open) {
@@ -9912,38 +9977,48 @@ var PopoverGroup = ({
     }
   });
   const handleClose = () => setOpen(false);
-  const Children8 = import_react112.Children.map(children, (child, childIndex) => {
-    return (0, import_react112.isValidElement)(child) && (childIndex === 0 ? (0, import_react112.cloneElement)(child, {
+  const isAnchorChild = (i) => i === 0;
+  const Children8 = import_react113.Children.map(children, (child, childIndex) => {
+    return (0, import_react113.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react113.cloneElement)(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniquePopoverId,
       "aria-expanded": open,
       onClick: handleOnTriggerClick,
-      ref: buttonRef
-    }) : (0, import_react112.cloneElement)(child, {
+      ref: combinedRef
+    }) : (0, import_react113.cloneElement)(child, {
       isOpen: open,
       "aria-hidden": !open,
-      id: uniquePopoverId,
       onCloseButtonClick: handleOnCloseButtonClick,
       anchorElement: buttonRef.current,
-      ref: popoverRef,
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(import_jsx_runtime272.Fragment, { children: Children8 });
+  return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
+    PopoverContext.Provider,
+    {
+      value: {
+        floatStyling: positionStyles.floating,
+        setFloatOptions,
+        floatingRef: refs.setFloating,
+        popoverId: uniquePopoverId
+      },
+      children: Children8
+    }
+  );
 };
 PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-var import_react115 = require("react");
+var import_react116 = require("react");
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-var import_react113 = require("react");
-var ProgressTrackerContext = (0, import_react113.createContext)(
+var import_react114 = require("react");
+var ProgressTrackerContext = (0, import_react114.createContext)(
   {
     activeStep: 0
   }
 );
-var useProgressTrackerContext = () => (0, import_react113.useContext)(ProgressTrackerContext);
+var useProgressTrackerContext = () => (0, import_react114.useContext)(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -9967,7 +10042,7 @@ var ProgressTracker_default = {
 };
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
-var import_react114 = require("react");
+var import_react115 = require("react");
 var import_jsx_runtime273 = require("react/jsx-runtime");
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
@@ -10009,7 +10084,7 @@ var ProgressTrackerItem = (props) => {
       handleStepChange && handleStepChange(index);
     }
   };
-  const stepNumberContent = (0, import_react114.useMemo)(() => {
+  const stepNumberContent = (0, import_react115.useMemo)(() => {
     if (completed) {
       return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Icon, { icon: CheckIcon, iconSize: "small" });
     }
@@ -10077,7 +10152,7 @@ ProgressTrackerItem.displayName = "ProgressTracker.Item";
 // src/components/ProgressTracker/ProgressTracker.tsx
 var import_jsx_runtime274 = require("react/jsx-runtime");
 var ProgressTracker = (() => {
-  const Res = (0, import_react115.forwardRef)((props, ref) => {
+  const Res = (0, import_react116.forwardRef)((props, ref) => {
     const {
       id,
       activeStep = 0,
@@ -10087,12 +10162,12 @@ var ProgressTracker = (() => {
       htmlProps,
       ...rest
     } = props;
-    const [thisActiveStep, setActiveStep] = (0, import_react115.useState)(activeStep);
+    const [thisActiveStep, setActiveStep] = (0, import_react116.useState)(activeStep);
     const handleChange = (step) => {
       setActiveStep(step);
       onStepChange && onStepChange(step);
     };
-    (0, import_react115.useEffect)(() => {
+    (0, import_react116.useEffect)(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
@@ -10101,7 +10176,7 @@ var ProgressTracker = (() => {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       ref
     };
-    const steps = (0, import_react115.useMemo)(() => {
+    const steps = (0, import_react116.useMemo)(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
       const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
@@ -10123,29 +10198,29 @@ var ProgressTracker = (() => {
   return Res;
 })();
 function removeInvalidChildren(children) {
-  return import_react115.Children.toArray(children).filter(import_react115.isValidElement);
+  return import_react116.Children.toArray(children).filter(import_react116.isValidElement);
 }
 function passIndexPropToProgressTrackerItem(children) {
-  return import_react115.Children.map(
+  return import_react116.Children.map(
     children,
-    (item, index) => (0, import_react115.cloneElement)(item, {
+    (item, index) => (0, import_react116.cloneElement)(item, {
       ...item.props,
       index
     })
   );
 }
-var intersperseItemsWithConnector = (children) => import_react115.Children.map(children, (child, index) => {
+var intersperseItemsWithConnector = (children) => import_react116.Children.map(children, (child, index) => {
   if (index === 0) {
     return child;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(import_react115.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(import_react116.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
     child
   ] }, index);
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_react116 = require("react");
+var import_react117 = require("react");
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -10162,7 +10237,7 @@ var ProgressBar_default = {
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_jsx_runtime275 = require("react/jsx-runtime");
-var ProgressBar = (0, import_react116.forwardRef)(
+var ProgressBar = (0, import_react117.forwardRef)(
   (props, ref) => {
     const {
       label,
@@ -10178,7 +10253,7 @@ var ProgressBar = (0, import_react116.forwardRef)(
       style,
       ...rest
     } = props;
-    const generatedId = (0, import_react116.useId)();
+    const generatedId = (0, import_react117.useId)();
     const uniqueId = id != null ? id : `${generatedId}-searchInput`;
     const hasErrorMessage = !!errorMessage;
     const hasTip = !!tip;
@@ -10241,13 +10316,13 @@ var ProgressBar = (0, import_react116.forwardRef)(
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
-var import_react120 = require("react");
+var import_react121 = require("react");
 
 // src/components/Search/AutocompleteSearch.context.tsx
-var import_react117 = require("react");
-var AutocompleteSearchContext = (0, import_react117.createContext)({});
+var import_react118 = require("react");
+var AutocompleteSearchContext = (0, import_react118.createContext)({});
 var useAutocompleteSearch = () => {
-  return (0, import_react117.useContext)(AutocompleteSearchContext);
+  return (0, import_react118.useContext)(AutocompleteSearchContext);
 };
 
 // src/components/Search/Search.module.css
@@ -10297,16 +10372,16 @@ function createEmptyChangeEvent(inputElementId) {
 }
 
 // src/components/Search/SearchSuggestions.tsx
-var import_react119 = require("react");
+var import_react120 = require("react");
 
 // src/components/Search/SearchSuggestionItem.tsx
-var import_react118 = require("react");
+var import_react119 = require("react");
 var import_jsx_runtime276 = require("react/jsx-runtime");
-var SearchSuggestionItem = (0, import_react118.forwardRef)((props, ref) => {
+var SearchSuggestionItem = (0, import_react119.forwardRef)((props, ref) => {
   const { focus, className, ...rest } = props;
-  const itemRef = (0, import_react118.useRef)(null);
+  const itemRef = (0, import_react119.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  (0, import_react118.useEffect)(() => {
+  (0, import_react119.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
@@ -10332,7 +10407,7 @@ SearchSuggestionItem.displayName = "SearchSuggestionItem";
 
 // src/components/Search/SearchSuggestions.tsx
 var import_jsx_runtime277 = require("react/jsx-runtime");
-var SearchSuggestions = (0, import_react119.forwardRef)((props, ref) => {
+var SearchSuggestions = (0, import_react120.forwardRef)((props, ref) => {
   const {
     id,
     searchId,
@@ -10422,7 +10497,7 @@ var getIconSize2 = (size2) => {
       return "small";
   }
 };
-var Search = (0, import_react120.forwardRef)(
+var Search = (0, import_react121.forwardRef)(
   ({
     componentSize = "medium",
     buttonProps,
@@ -10438,7 +10513,7 @@ var Search = (0, import_react120.forwardRef)(
     ...rest
   }, ref) => {
     var _a;
-    const generatedId = (0, import_react120.useId)();
+    const generatedId = (0, import_react121.useId)();
     const uniqueId = id != null ? id : `${generatedId}-searchInput`;
     const hasLabel = !!label;
     const tipId = derivativeIdGenerator(uniqueId, "tip");
@@ -10447,7 +10522,7 @@ var Search = (0, import_react120.forwardRef)(
       uniqueId,
       "suggestions-description"
     );
-    const [hasValue, setHasValue] = (0, import_react120.useState)(!!value);
+    const [hasValue, setHasValue] = (0, import_react121.useState)(!!value);
     const context = useAutocompleteSearch();
     const combinedRef = context.inputRef ? useCombinedRef(context.inputRef, ref) : ref;
     const handleChange = (e) => {
@@ -10564,7 +10639,7 @@ var Search = (0, import_react120.forwardRef)(
 Search.displayName = "Search";
 
 // src/components/Search/SearchAutocompleteWrapper.tsx
-var import_react121 = require("react");
+var import_react122 = require("react");
 var import_jsx_runtime279 = require("react/jsx-runtime");
 var SearchAutocompleteWrapper = (props) => {
   const {
@@ -10576,12 +10651,12 @@ var SearchAutocompleteWrapper = (props) => {
     onSuggestionSelection,
     children
   } = props;
-  const [inputValue, setInputValue] = (0, import_react121.useState)(value != null ? value : "");
-  const [suggestions, setSuggestions] = (0, import_react121.useState)([]);
-  const [showSuggestions, setShowSuggestions] = (0, import_react121.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react122.useState)(value != null ? value : "");
+  const [suggestions, setSuggestions] = (0, import_react122.useState)([]);
+  const [showSuggestions, setShowSuggestions] = (0, import_react122.useState)(false);
   const closeSuggestions = () => showSuggestions === true && setShowSuggestions(false);
   const openSuggestions = () => showSuggestions === false && setShowSuggestions(true);
-  (0, import_react121.useEffect)(() => {
+  (0, import_react122.useEffect)(() => {
     if (suggestions.length > 0) {
       openSuggestions();
     } else {
@@ -10626,8 +10701,8 @@ var SearchAutocompleteWrapper = (props) => {
   const handleSetInputValue = (value2) => {
     setInputValue(value2 != null ? value2 : "");
   };
-  const inputRef = (0, import_react121.useRef)(null);
-  const suggestionsRef = (0, import_react121.useRef)(null);
+  const inputRef = (0, import_react122.useRef)(null);
+  const suggestionsRef = (0, import_react122.useRef)(null);
   useOnClickOutside([inputRef.current, suggestionsRef.current], () => {
     closeSuggestions();
   });
@@ -10651,17 +10726,17 @@ Search2.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search2.Suggestions = SearchSuggestions;
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-var import_react124 = require("react");
+var import_react125 = require("react");
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
-var import_react122 = require("react");
-var CheckboxGroupContext = (0, import_react122.createContext)(null);
+var import_react123 = require("react");
+var CheckboxGroupContext = (0, import_react123.createContext)(null);
 var useCheckboxGroup = () => {
-  return (0, import_react122.useContext)(CheckboxGroupContext);
+  return (0, import_react123.useContext)(CheckboxGroupContext);
 };
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
-var import_react123 = require("react");
+var import_react124 = require("react");
 
 // src/components/SelectionControl/SelectionControl.module.css
 var SelectionControl_default = {
@@ -10682,7 +10757,7 @@ var SelectionControl_default = {
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
 var import_jsx_runtime280 = require("react/jsx-runtime");
-var SelectionControl = (0, import_react123.forwardRef)((props, ref) => {
+var SelectionControl = (0, import_react124.forwardRef)((props, ref) => {
   const { controlType, className, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
     "span",
@@ -10697,7 +10772,7 @@ var SelectionControl = (0, import_react123.forwardRef)((props, ref) => {
     }
   );
 });
-var Label2 = (0, import_react123.forwardRef)(
+var Label2 = (0, import_react124.forwardRef)(
   (props, ref) => {
     const {
       disabled,
@@ -10740,7 +10815,7 @@ var selectionControlTypographyProps = {
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
 var import_jsx_runtime281 = require("react/jsx-runtime");
-var Checkbox = (0, import_react124.forwardRef)(
+var Checkbox = (0, import_react125.forwardRef)(
   (props, ref) => {
     const {
       id,
@@ -10755,7 +10830,7 @@ var Checkbox = (0, import_react124.forwardRef)(
       htmlProps = {},
       ...rest
     } = props;
-    const generatedId = (0, import_react124.useId)();
+    const generatedId = (0, import_react125.useId)();
     const uniqueId = id != null ? id : `${generatedId}-checkbox`;
     const checkboxGroup = useCheckboxGroup();
     const hasLabel = !!label;
@@ -10825,7 +10900,7 @@ var Checkbox = (0, import_react124.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
-var import_react125 = require("react");
+var import_react126 = require("react");
 var import_jsx_runtime282 = require("react/jsx-runtime");
 var CheckboxGroup = (props) => {
   const {
@@ -10844,7 +10919,7 @@ var CheckboxGroup = (props) => {
     ...rest
   } = props;
   const { "aria-required": ariaRequired } = htmlProps;
-  const generatedId = (0, import_react125.useId)();
+  const generatedId = (0, import_react126.useId)();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
   const showRequiredMarker = required || ariaRequired;
@@ -10902,13 +10977,13 @@ var CheckboxGroup = (props) => {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-var import_react127 = require("react");
+var import_react128 = require("react");
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
-var import_react126 = require("react");
-var RadioButtonGroupContext = (0, import_react126.createContext)(null);
+var import_react127 = require("react");
+var RadioButtonGroupContext = (0, import_react127.createContext)(null);
 var useRadioButtonGroup = () => {
-  return (0, import_react126.useContext)(RadioButtonGroupContext);
+  return (0, import_react127.useContext)(RadioButtonGroupContext);
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
@@ -10927,7 +11002,7 @@ var getIsChecked = ({
   }
   return !!value;
 };
-var RadioButton = (0, import_react127.forwardRef)(
+var RadioButton = (0, import_react128.forwardRef)(
   (props, ref) => {
     const {
       id,
@@ -10951,7 +11026,7 @@ var RadioButton = (0, import_react127.forwardRef)(
       style,
       ...restHtmlProps
     } = htmlProps;
-    const generatedId = (0, import_react127.useId)();
+    const generatedId = (0, import_react128.useId)();
     const uniqueId = id != null ? id : `${generatedId}-radioButton`;
     const hasLabel = !!label;
     const radioButtonGroup = useRadioButtonGroup();
@@ -11021,7 +11096,7 @@ var RadioButton = (0, import_react127.forwardRef)(
 RadioButton.displayName = "RadioButton";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
-var import_react128 = require("react");
+var import_react129 = require("react");
 var import_jsx_runtime284 = require("react/jsx-runtime");
 var RadioButtonGroupInner = (props, ref) => {
   const {
@@ -11044,10 +11119,10 @@ var RadioButtonGroupInner = (props, ref) => {
     ...rest
   } = props;
   const { "aria-required": ariaRequired = false } = htmlProps;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react128.useState)(
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react129.useState)(
     defaultValue
   );
-  const generatedId = (0, import_react128.useId)();
+  const generatedId = (0, import_react129.useId)();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-radioButtonGroup`;
   const isControlled = value !== void 0;
   const groupValue = isControlled ? value : uncontrolledValue;
@@ -11118,11 +11193,11 @@ var RadioButtonGroupInner = (props, ref) => {
     }
   );
 };
-var RadioButtonGroup = (0, import_react128.forwardRef)(RadioButtonGroupInner);
+var RadioButtonGroup = (0, import_react129.forwardRef)(RadioButtonGroupInner);
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
 // src/components/Skeleton/Skeleton.tsx
-var import_react129 = require("react");
+var import_react130 = require("react");
 
 // src/components/Skeleton/Skeleton.module.css
 var Skeleton_default = {
@@ -11132,7 +11207,7 @@ var Skeleton_default = {
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime285 = require("react/jsx-runtime");
-var Skeleton = (0, import_react129.forwardRef)(
+var Skeleton = (0, import_react130.forwardRef)(
   (props, ref) => {
     const {
       width,
@@ -11156,7 +11231,7 @@ var Skeleton = (0, import_react129.forwardRef)(
 Skeleton.displayName = "Skeleton";
 
 // src/components/SkipToContent/SkipToContent.tsx
-var import_react130 = require("react");
+var import_react131 = require("react");
 
 // src/components/SkipToContent/SkipToContent.module.css
 var SkipToContent_default = {
@@ -11165,7 +11240,7 @@ var SkipToContent_default = {
 
 // src/components/SkipToContent/SkipToContent.tsx
 var import_jsx_runtime286 = require("react/jsx-runtime");
-var SkipToContent = (0, import_react130.forwardRef)(
+var SkipToContent = (0, import_react131.forwardRef)(
   (props, ref) => {
     const {
       text = "Til hovedinnhold",
@@ -11193,7 +11268,7 @@ var SkipToContent = (0, import_react130.forwardRef)(
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-var import_react131 = require("react");
+var import_react132 = require("react");
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -11205,7 +11280,7 @@ var SplitButton_default = {
 
 // src/components/SplitButton/SplitButton.tsx
 var import_jsx_runtime287 = require("react/jsx-runtime");
-var SplitButton = (0, import_react131.forwardRef)(
+var SplitButton = (0, import_react132.forwardRef)(
   (props, ref) => {
     const {
       size: size2,
@@ -11215,7 +11290,7 @@ var SplitButton = (0, import_react131.forwardRef)(
       className,
       ...rest
     } = props;
-    const [isOpen, setIsOpen] = (0, import_react131.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react132.useState)(false);
     const buttonStyleProps = {
       purpose,
       size: size2
@@ -11252,20 +11327,20 @@ var SplitButton = (0, import_react131.forwardRef)(
 SplitButton.displayName = "SplitButton";
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_react141 = require("react");
+var import_react142 = require("react");
 
 // src/components/Table/collapsible/Table.context.tsx
-var import_react132 = require("react");
-var CollapsibleTableContext = (0, import_react132.createContext)({
+var import_react133 = require("react");
+var CollapsibleTableContext = (0, import_react133.createContext)({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => (0, import_react132.useContext)(CollapsibleTableContext);
+var useCollapsibleTableContext = () => (0, import_react133.useContext)(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
-var import_react133 = require("react");
+var import_react134 = require("react");
 var import_jsx_runtime288 = require("react/jsx-runtime");
-var Body = (0, import_react133.forwardRef)(
+var Body = (0, import_react134.forwardRef)(
   (props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime288.jsx)("tbody", { ref, ...props });
   }
@@ -11273,20 +11348,20 @@ var Body = (0, import_react133.forwardRef)(
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Cell.tsx
-var import_react135 = require("react");
+var import_react136 = require("react");
 
 // src/components/Table/normal/Head.tsx
-var import_react134 = require("react");
+var import_react135 = require("react");
 var import_jsx_runtime289 = require("react/jsx-runtime");
-var Head = (0, import_react134.forwardRef)(
+var Head = (0, import_react135.forwardRef)(
   ({ children, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)("thead", { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(HeadContext.Provider, { value: true, children }) });
   }
 );
 Head.displayName = "Table.Head";
-var HeadContext = (0, import_react134.createContext)(false);
+var HeadContext = (0, import_react135.createContext)(false);
 function useIsInTableHead() {
-  const isInTableHead = (0, import_react134.useContext)(HeadContext);
+  const isInTableHead = (0, import_react135.useContext)(HeadContext);
   return isInTableHead;
 }
 
@@ -11317,7 +11392,7 @@ var Table_default = {
 
 // src/components/Table/normal/Cell.tsx
 var import_jsx_runtime290 = require("react/jsx-runtime");
-var Cell = (0, import_react135.forwardRef)(
+var Cell = (0, import_react136.forwardRef)(
   ({
     children,
     type: _type,
@@ -11356,9 +11431,9 @@ var Cell = (0, import_react135.forwardRef)(
 Cell.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
-var import_react136 = require("react");
+var import_react137 = require("react");
 var import_jsx_runtime291 = require("react/jsx-runtime");
-var Foot = (0, import_react136.forwardRef)(
+var Foot = (0, import_react137.forwardRef)(
   (props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime291.jsx)("tfoot", { ref, ...props });
   }
@@ -11366,9 +11441,9 @@ var Foot = (0, import_react136.forwardRef)(
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
-var import_react137 = require("react");
+var import_react138 = require("react");
 var import_jsx_runtime292 = require("react/jsx-runtime");
-var Row = (0, import_react137.forwardRef)(
+var Row = (0, import_react138.forwardRef)(
   ({ type: _type, mode = "normal", hoverable, selected, className, ...rest }, ref) => {
     const isInHeader = useIsInTableHead();
     const type = _type != null ? _type : isInHeader ? "head" : "body";
@@ -11394,7 +11469,7 @@ var Row = (0, import_react137.forwardRef)(
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-var import_react138 = require("react");
+var import_react139 = require("react");
 var import_jsx_runtime293 = require("react/jsx-runtime");
 var makeSortIcon = (isSorted, sortOrder) => {
   if (!isSorted || !sortOrder) {
@@ -11402,7 +11477,7 @@ var makeSortIcon = (isSorted, sortOrder) => {
   }
   return sortOrder === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
 };
-var SortCell = (0, import_react138.forwardRef)(
+var SortCell = (0, import_react139.forwardRef)(
   ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
     Cell,
     {
@@ -11434,9 +11509,9 @@ var SortCell = (0, import_react138.forwardRef)(
 SortCell.displayName = "Table.SortCell";
 
 // src/components/Table/normal/Table.tsx
-var import_react139 = require("react");
+var import_react140 = require("react");
 var import_jsx_runtime294 = require("react/jsx-runtime");
-var Table = (0, import_react139.forwardRef)(
+var Table = (0, import_react140.forwardRef)(
   ({
     size: size2 = "medium",
     stickyHeader,
@@ -11466,25 +11541,28 @@ var Table = (0, import_react139.forwardRef)(
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-var import_react140 = require("react");
+var import_react141 = require("react");
 var import_jsx_runtime295 = require("react/jsx-runtime");
 var TableWrapper = ({ className, ...rest }) => {
-  const [overflowX, setOverflowX] = (0, import_react140.useState)(false);
-  const [windowWidth, setWindowWidth] = (0, import_react140.useState)(window.innerWidth);
+  const themeContext = (0, import_react141.useContext)(ThemeContext);
+  const container = themeContext == null ? void 0 : themeContext.el;
+  const containerWidth = container ? container.clientWidth : 0;
+  const [overflowX, setOverflowX] = (0, import_react141.useState)(false);
+  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react141.useState)(containerWidth);
   function isOverflowingX(event) {
     return event.offsetWidth < event.scrollWidth;
   }
-  const wrapperRef = (0, import_react140.useRef)(null);
-  (0, import_react140.useEffect)(() => {
+  const wrapperRef = (0, import_react141.useRef)(null);
+  (0, import_react141.useEffect)(() => {
     if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
       setOverflowX(true);
       return;
     }
     setOverflowX(false);
-  }, [windowWidth]);
-  (0, import_react140.useEffect)(() => {
+  }, [themeContainerWidth]);
+  (0, import_react141.useEffect)(() => {
     function handleResize() {
-      setWindowWidth(window.innerWidth);
+      setThemeContainerWidth(containerWidth);
     }
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
@@ -11517,7 +11595,7 @@ Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
 var import_jsx_runtime296 = require("react/jsx-runtime");
-var CollapsibleRow = (0, import_react141.forwardRef)(
+var CollapsibleRow = (0, import_react142.forwardRef)(
   ({
     type: _type,
     className,
@@ -11530,8 +11608,8 @@ var CollapsibleRow = (0, import_react141.forwardRef)(
     const isInHead = useIsInTableHead();
     const type = _type != null ? _type : isInHead ? "head" : "body";
     const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
-    const [childrenCollapsed, setChildrenCollapsed] = (0, import_react141.useState)(true);
-    (0, import_react141.useEffect)(() => {
+    const [childrenCollapsed, setChildrenCollapsed] = (0, import_react142.useState)(true);
+    (0, import_react142.useEffect)(() => {
       !isCollapsed && setChildrenCollapsed(true);
     }, [isCollapsed]);
     const rowProps = (isOpenCollapsibleHeader) => {
@@ -11549,7 +11627,7 @@ var CollapsibleRow = (0, import_react141.forwardRef)(
     const collapsedHeaderValues = headerValues.filter(
       (column, index) => definingColumnIndex.indexOf(index) === -1
     );
-    const childrenArray = import_react141.Children.toArray(children);
+    const childrenArray = import_react142.Children.toArray(children);
     const collapsedChildren = childrenArray.filter(
       (column, index) => definingColumnIndex.indexOf(index) === -1
     );
@@ -11558,9 +11636,9 @@ var CollapsibleRow = (0, import_react141.forwardRef)(
     const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
       const id = derivativeIdGenerator(prefix2, index.toString());
       collapsibleIds.push(id);
-      return /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(import_react141.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(import_react142.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-        (0, import_react141.isValidElement)(child) && (0, import_react141.cloneElement)(child, {
+        (0, import_react142.isValidElement)(child) && (0, import_react142.cloneElement)(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
@@ -11620,9 +11698,9 @@ var CollapsibleRow = (0, import_react141.forwardRef)(
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
-var import_react142 = require("react");
+var import_react143 = require("react");
 var import_jsx_runtime297 = require("react/jsx-runtime");
-var CollapsibleTable = (0, import_react142.forwardRef)((props, ref) => {
+var CollapsibleTable = (0, import_react143.forwardRef)((props, ref) => {
   const {
     isCollapsed,
     headerValues,
@@ -11648,11 +11726,11 @@ var CollapsibleTable2 = CollapsibleTable;
 CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/Tabs.tsx
-var import_react144 = require("react");
+var import_react145 = require("react");
 
 // src/components/Tabs/Tabs.context.tsx
-var import_react143 = require("react");
-var TabsContext = (0, import_react143.createContext)({
+var import_react144 = require("react");
+var TabsContext = (0, import_react144.createContext)({
   activeTab: 0,
   tabsId: "",
   handleTabChange: () => null,
@@ -11662,7 +11740,7 @@ var TabsContext = (0, import_react143.createContext)({
   setHasTabFocus: () => null,
   tabContentDirection: "row"
 });
-var useTabsContext = () => (0, import_react143.useContext)(TabsContext);
+var useTabsContext = () => (0, import_react144.useContext)(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -11679,7 +11757,7 @@ var Tabs_default = {
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime298 = require("react/jsx-runtime");
-var Tabs = (0, import_react144.forwardRef)((props, ref) => {
+var Tabs = (0, import_react145.forwardRef)((props, ref) => {
   const {
     id,
     activeTab,
@@ -11691,17 +11769,17 @@ var Tabs = (0, import_react144.forwardRef)((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react144.useId)();
+  const generatedId = (0, import_react145.useId)();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
-  const [thisActiveTab, setActiveTab] = (0, import_react144.useState)(activeTab != null ? activeTab : 0);
-  const [hasTabFocus, setHasTabFocus] = (0, import_react144.useState)(false);
-  const tabListRef = (0, import_react144.useRef)(null);
-  const tabPanelsRef = (0, import_react144.useRef)(null);
+  const [thisActiveTab, setActiveTab] = (0, import_react145.useState)(activeTab != null ? activeTab : 0);
+  const [hasTabFocus, setHasTabFocus] = (0, import_react145.useState)(false);
+  const tabListRef = (0, import_react145.useRef)(null);
+  const tabPanelsRef = (0, import_react145.useRef)(null);
   const handleTabChange = (index) => {
     setActiveTab(index);
     onChange && onChange(index);
   };
-  (0, import_react144.useEffect)(() => {
+  (0, import_react145.useEffect)(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -11743,12 +11821,12 @@ var Tabs = (0, import_react144.forwardRef)((props, ref) => {
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react146 = require("react");
+var import_react147 = require("react");
 
 // src/components/Tabs/TabWidthContext.tsx
-var import_react145 = require("react");
+var import_react146 = require("react");
 var import_jsx_runtime299 = require("react/jsx-runtime");
-var TabContext = (0, import_react145.createContext)(null);
+var TabContext = (0, import_react146.createContext)(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
@@ -11777,8 +11855,8 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = (0, import_react145.useContext)(TabContext);
-  (0, import_react145.useLayoutEffect)(() => {
+  const context = (0, import_react146.useContext)(TabContext);
+  (0, import_react146.useLayoutEffect)(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
   }, [index, width]);
@@ -11786,7 +11864,7 @@ function useSetTabWidth(index, width) {
 
 // src/components/Tabs/Tab.tsx
 var import_jsx_runtime300 = require("react/jsx-runtime");
-var Tab = (0, import_react146.forwardRef)((props, ref) => {
+var Tab = (0, import_react147.forwardRef)((props, ref) => {
   const {
     active = false,
     icon,
@@ -11803,16 +11881,16 @@ var Tab = (0, import_react146.forwardRef)((props, ref) => {
     ...rest
   } = props;
   useSetTabWidth(index, width);
-  const itemRef = (0, import_react146.useRef)(null);
+  const itemRef = (0, import_react147.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { tabContentDirection } = useTabsContext();
-  (0, import_react146.useEffect)(() => {
+  (0, import_react147.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react146.useCallback)(() => {
+  const handleSelect = (0, import_react147.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -11857,9 +11935,9 @@ var Tab = (0, import_react146.forwardRef)((props, ref) => {
 Tab.displayName = "Tab";
 
 // src/components/Tabs/TabList.tsx
-var import_react147 = require("react");
+var import_react148 = require("react");
 var import_jsx_runtime301 = require("react/jsx-runtime");
-var TabList = (0, import_react147.forwardRef)(
+var TabList = (0, import_react148.forwardRef)(
   ({ children, id, style, onFocus, ...rest }, ref) => {
     const {
       activeTab,
@@ -11870,11 +11948,11 @@ var TabList = (0, import_react147.forwardRef)(
       setHasTabFocus
     } = useTabsContext();
     const uniqueId = id != null ? id : `${tabsId}-tablist`;
-    const childrenArray = import_react147.Children.toArray(children).length;
+    const childrenArray = import_react148.Children.toArray(children).length;
     const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
     const combinedRef = useCombinedRef(ref, tabListRef);
-    const tabListChildren = import_react147.Children.map(children, (child, index) => {
-      return (0, import_react147.isValidElement)(child) && (0, import_react147.cloneElement)(child, {
+    const tabListChildren = import_react148.Children.map(children, (child, index) => {
+      return (0, import_react148.isValidElement)(child) && (0, import_react148.cloneElement)(child, {
         id: `${tabsId}-tab-${index}`,
         "aria-controls": `${tabsId}-panel-${index}`,
         active: activeTab === index,
@@ -11884,7 +11962,7 @@ var TabList = (0, import_react147.forwardRef)(
         onClick: () => handleTabChange(index)
       });
     });
-    const [widths, setWidths] = (0, import_react147.useState)([]);
+    const [widths, setWidths] = (0, import_react148.useState)([]);
     const handleOnFocus = (event) => {
       setHasTabFocus(true);
       onFocus && onFocus(event);
@@ -11928,9 +12006,9 @@ var TabList = (0, import_react147.forwardRef)(
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
-var import_react148 = require("react");
+var import_react149 = require("react");
 var import_jsx_runtime302 = require("react/jsx-runtime");
-var TabPanel = (0, import_react148.forwardRef)(
+var TabPanel = (0, import_react149.forwardRef)(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
       "div",
@@ -11953,15 +12031,15 @@ var TabPanel = (0, import_react148.forwardRef)(
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabPanels.tsx
-var import_react149 = require("react");
+var import_react150 = require("react");
 var import_jsx_runtime303 = require("react/jsx-runtime");
-var TabPanels = (0, import_react149.forwardRef)(
+var TabPanels = (0, import_react150.forwardRef)(
   ({ children, ...rest }, ref) => {
     const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
     const combinedRef = useCombinedRef(ref, tabPanelsRef);
-    const panelChildren = import_react149.Children.map(children, (child, index) => {
+    const panelChildren = import_react150.Children.map(children, (child, index) => {
       const active = index === activeTab;
-      return (0, import_react149.isValidElement)(child) && (0, import_react149.cloneElement)(child, {
+      return (0, import_react150.isValidElement)(child) && (0, import_react150.cloneElement)(child, {
         id: `${tabsId}-panel-${index}`,
         "aria-labelledby": `${tabsId}-tab-${index}`,
         active,
@@ -11974,7 +12052,7 @@ var TabPanels = (0, import_react149.forwardRef)(
 TabPanels.displayName = "TabPanels";
 
 // src/components/Tag/Tag.tsx
-var import_react150 = require("react");
+var import_react151 = require("react");
 
 // src/components/Tag/Tag.module.css
 var Tag_default = {
@@ -12001,7 +12079,7 @@ var icons3 = {
   success: CheckCircledIcon,
   default: void 0
 };
-var Tag = (0, import_react150.forwardRef)((props, ref) => {
+var Tag = (0, import_react151.forwardRef)((props, ref) => {
   const {
     text,
     purpose = "default",
@@ -12040,7 +12118,7 @@ var Tag = (0, import_react150.forwardRef)((props, ref) => {
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-var import_react151 = require("react");
+var import_react152 = require("react");
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
@@ -12067,7 +12145,7 @@ var TextInput_default = {
 
 // src/components/TextInput/TextInput.tsx
 var import_jsx_runtime305 = require("react/jsx-runtime");
-var TextInput = (0, import_react151.forwardRef)(
+var TextInput = (0, import_react152.forwardRef)(
   ({
     label,
     disabled,
@@ -12093,14 +12171,14 @@ var TextInput = (0, import_react151.forwardRef)(
     suffix,
     ...rest
   }, ref) => {
-    const [text, setText] = (0, import_react151.useState)(
+    const [text, setText] = (0, import_react152.useState)(
       getDefaultText(value, defaultValue)
     );
-    const prefixRef = (0, import_react151.useRef)(null);
-    const suffixRef = (0, import_react151.useRef)(null);
-    const [prefixLength, setPrefixLength] = (0, import_react151.useState)(0);
-    const [suffixLength, setSuffixLength] = (0, import_react151.useState)(0);
-    (0, import_react151.useLayoutEffect)(() => {
+    const prefixRef = (0, import_react152.useRef)(null);
+    const suffixRef = (0, import_react152.useRef)(null);
+    const [prefixLength, setPrefixLength] = (0, import_react152.useState)(0);
+    const [suffixLength, setSuffixLength] = (0, import_react152.useState)(0);
+    (0, import_react152.useLayoutEffect)(() => {
       if (prefixRef.current) {
         setPrefixLength(prefixRef.current.offsetWidth);
       }
@@ -12114,7 +12192,7 @@ var TextInput = (0, import_react151.forwardRef)(
         onChange(event);
       }
     };
-    const generatedId = (0, import_react151.useId)();
+    const generatedId = (0, import_react152.useId)();
     const uniqueId = id != null ? id : `${generatedId}-textInput`;
     const hasErrorMessage = !!errorMessage;
     const hasTip = !!tip;
@@ -12293,15 +12371,129 @@ var TextInput = (0, import_react151.forwardRef)(
 );
 TextInput.displayName = "TextInput";
 
-// src/components/ToggleBar/ToggleBar.tsx
+// src/components/Toggle/Toggle.tsx
 var import_react153 = require("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
+var import_jsx_runtime306 = require("react/jsx-runtime");
+var Toggle = (0, import_react153.forwardRef)(
+  ({
+    id,
+    children,
+    size: size2 = "medium",
+    checked: checkedProp,
+    defaultChecked,
+    onChange,
+    disabled,
+    readOnly,
+    isLoading,
+    className,
+    htmlProps = {},
+    ...rest
+  }, ref) => {
+    const generatedId = (0, import_react153.useId)();
+    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__ */ (0, import_jsx_runtime306.jsxs)(
+      "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__ */ (0, import_jsx_runtime306.jsx)(
+            "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__ */ (0, import_jsx_runtime306.jsx)("span", { className: cn(Toggle_default.track, focus_default["focus-styled-sibling"]), children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: Toggle_default.thumb, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Spinner, { size: `var(--dds-icon-size-${size2})` }) : /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+            Icon,
+            {
+              className: Toggle_default.checkmark,
+              icon: CheckIcon,
+              iconSize
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("span", { className: cn(readOnly && Toggle_default["labeltext--readonly"]), children: [
+            readOnly && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+              Icon,
+              {
+                icon: LockIcon,
+                iconSize: "small",
+                className: Toggle_default["icon--read-only"]
+              }
+            ),
+            children,
+            " ",
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(VisuallyHidden, { as: "span", children: "Innlastning p\xE5g\xE5r" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/components/ToggleBar/ToggleBar.tsx
+var import_react155 = require("react");
+
 // src/components/ToggleBar/ToggleBar.context.tsx
-var import_react152 = require("react");
-var ToggleBarContext = (0, import_react152.createContext)({
+var import_react154 = require("react");
+var ToggleBarContext = (0, import_react154.createContext)({
   size: "medium"
 });
-var useToggleBarContext = () => (0, import_react152.useContext)(ToggleBarContext);
+var useToggleBarContext = () => (0, import_react154.useContext)(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -12320,7 +12512,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_jsx_runtime306 = require("react/jsx-runtime");
+var import_jsx_runtime307 = require("react/jsx-runtime");
 var ToggleBar = (props) => {
   const {
     children,
@@ -12335,15 +12527,15 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = (0, import_react153.useId)();
+  const generatedId = (0, import_react155.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
-  const [groupValue, setGroupValue] = (0, import_react153.useState)(value);
+  const [groupValue, setGroupValue] = (0, import_react155.useState)(value);
   const handleChange = combineHandlers(
     (e) => setGroupValue(e.target.value),
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
     ToggleBarContext.Provider,
     {
       value: {
@@ -12352,7 +12544,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
         "div",
         {
           ...getBaseHTMLProps(
@@ -12365,8 +12557,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -12376,8 +12568,8 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-var import_react154 = require("react");
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_react156 = require("react");
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var typographyTypes4 = {
   large: "bodyLarge",
   medium: "bodyMedium",
@@ -12394,7 +12586,7 @@ var calculateChecked = (value, group, checked) => {
   }
   return !!value;
 };
-var ToggleRadio = (0, import_react154.forwardRef)(
+var ToggleRadio = (0, import_react156.forwardRef)(
   (props, ref) => {
     const {
       value,
@@ -12410,7 +12602,7 @@ var ToggleRadio = (0, import_react154.forwardRef)(
       id,
       ...rest
     } = props;
-    const generatedId = (0, import_react154.useId)();
+    const generatedId = (0, import_react156.useId)();
     const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
     const group = useToggleBarContext();
     const handleChange = (event) => {
@@ -12418,8 +12610,8 @@ var ToggleRadio = (0, import_react154.forwardRef)(
       (group == null ? void 0 : group.onChange) && group.onChange(event);
     };
     const contentTypeCn = label ? "with-text" : "just-icon";
-    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12442,7 +12634,7 @@ var ToggleRadio = (0, import_react154.forwardRef)(
           "aria-labelledby": ariaLabelledBy
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
         Typography,
         {
           as: "span",
@@ -12453,8 +12645,8 @@ var ToggleRadio = (0, import_react154.forwardRef)(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { icon, iconSize: "inherit" }),
-            label && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { children: label })
+            icon && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Icon, { icon, iconSize: "inherit" }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { children: label })
           ]
         }
       )
@@ -12464,7 +12656,7 @@ var ToggleRadio = (0, import_react154.forwardRef)(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_react155 = require("react");
+var import_react157 = require("react");
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -12474,18 +12666,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
-var import_jsx_runtime308 = require("react/jsx-runtime");
-var ToggleButton = (0, import_react155.forwardRef)(
-  ({ id, label, icon, className, htmlProps, ...rest }, ref) => {
-    const generatedId = (0, import_react155.useId)();
+var import_jsx_runtime309 = require("react/jsx-runtime");
+var ToggleButton = (0, import_react157.forwardRef)(
+  ({ id, label, icon, size: size2 = "small", className, htmlProps, ...rest }, ref) => {
+    const generatedId = (0, import_react157.useId)();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     const hasIcon = !!icon;
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12502,17 +12696,18 @@ var ToggleButton = (0, import_react155.forwardRef)(
           type: "checkbox"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
         "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__ */ (0, import_jsx_runtime308.jsx)(Icon, { icon, iconSize: "inherit" }),
+            hasIcon && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(Icon, { icon, iconSize: "inherit" }),
             " ",
             label
           ]
@@ -12524,8 +12719,8 @@ var ToggleButton = (0, import_react155.forwardRef)(
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-var import_react156 = require("react");
-var import_jsx_runtime309 = require("react/jsx-runtime");
+var import_react158 = require("react");
+var import_jsx_runtime310 = require("react/jsx-runtime");
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -12537,9 +12732,9 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react156.useId)();
+  const generatedId = (0, import_react158.useId)();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
     "div",
     {
       ...getBaseHTMLProps(
@@ -12551,8 +12746,8 @@ var ToggleButtonGroup = (props) => {
       role: "group",
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
-        !!label && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(Typography, { as: "span", typographyType: "labelMedium", id: uniqueLabelId, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
+        !!label && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(Typography, { as: "span", typographyType: "labelMedium", id: uniqueLabelId, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
       ]
     }
   );
@@ -12830,6 +13025,7 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   TimePicker,
   TingrettIcon,
   TipIcon,
+  Toggle,
   ToggleBar,
   ToggleButton,
   ToggleButtonGroup,