@norges-domstoler/dds-components 17.0.0 → 17.1.0

package/dist/index.js

@@ -292,6 +292,7 @@ __export(src_exports, {
   SearchSuggestions: () => SearchSuggestions,
   Select: () => Select,
   SettingsIcon: () => SettingsIcon,
+  Skeleton: () => Skeleton,
   SkipToContent: () => SkipToContent,
   SmsIcon: () => SmsIcon,
   Spinner: () => Spinner,
@@ -810,7 +811,8 @@ var Input_default = {
   "input--tiny": "Input_input--tiny",
   "input--with-affix": "Input_input--with-affix",
   label: "Input_label",
-  "char-counter": "Input_char-counter"
+  "char-counter": "Input_char-counter",
+  icon: "Input_icon"
 };
 
 // src/components/Typography/Caption/Caption.tsx
@@ -3246,7 +3248,7 @@ var isPropValid = /* @__PURE__ */ memoize(
   /* Z+1 */
 );
 
-// ../../node_modules/.pnpm/styled-components@6.1.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.esm.js
+// ../../node_modules/.pnpm/styled-components@6.1.13_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.esm.js
 var import_react23 = __toESM(require("react"));
 var import_shallowequal = __toESM(require_shallowequal());
 
@@ -3842,11 +3844,11 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-// ../../node_modules/.pnpm/styled-components@6.1.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.esm.js
+// ../../node_modules/.pnpm/styled-components@6.1.13_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.esm.js
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.12";
+var v = "6.1.13";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : "production" !== process.env.NODE_ENV);
@@ -9225,7 +9227,9 @@ var Select_default = {
   "container--disabled": "Select_container--disabled",
   "container--readonly": "Select_container--readonly",
   "inner-single-value": "Select_inner-single-value",
-  icon: "Select_icon",
+  "icon--medium": "Select_icon--medium",
+  "icon--small": "Select_icon--small",
+  "icon--tiny": "Select_icon--tiny",
   control: "Select_control",
   "control--readonly": "Select_control--readonly",
   "dropdown-indicator": "Select_dropdown-indicator",
@@ -9292,22 +9296,37 @@ var typography = {
 var prefix2 = "dds-select";
 var control = {
   medium: {
-    paddingBlock: "var(--dds-spacing-x0-75)",
-    paddingInline: "var(--dds-spacing-x0-5) var(--dds-spacing-x0-75)",
-    ...optionTypography.medium
+    base: {
+      paddingBlock: "var(--dds-spacing-x0-75)",
+      paddingLeft: "var(--dds-spacing-x0-75)",
+      ...optionTypography.medium
+    },
+    hasIcon: {
+      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5))"
+    }
   },
   small: {
-    paddingBlock: "var(--dds-spacing-x0-5)",
-    paddingInline: "var(--dds-spacing-x0-5) var(--dds-spacing-x0-75)",
-    ...optionTypography.small
+    base: {
+      paddingBlock: "var(--dds-spacing-x0-5)",
+      paddingLeft: "var(--dds-spacing-x0-75)",
+      ...optionTypography.small
+    },
+    hasIcon: {
+      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5))"
+    }
   },
   tiny: {
-    paddingBlock: "var(--dds-spacing-x0-25)",
-    paddingInline: "var(--dds-spacing-x0-5) ",
-    ...optionTypography.tiny
+    base: {
+      paddingBlock: "var(--dds-spacing-x0-25)",
+      paddingLeft: "var(--dds-spacing-x0-5)",
+      ...optionTypography.tiny
+    },
+    hasIcon: {
+      paddingLeft: "calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5))"
+    }
   }
 };
-var getCustomStyles = (size2, hasError, isReadOnly) => ({
+var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
   control: (provided, state) => ({
     position: "relative",
     display: "flex",
@@ -9319,7 +9338,9 @@ var getCustomStyles = (size2, hasError, isReadOnly) => ({
     borderColor: "var(--dds-color-border-default)",
     backgroundColor: "var(--dds-color-surface-default)",
     transition: "box-shadow 0.2s, border-color 0.2s",
-    ...control[size2],
+    paddingRight: "var(--dds-spacing-x0-5)",
+    ...control[size2].base,
+    ...hasIcon && control[size2].hasIcon,
     "&:hover": {
       ...!isReadOnly && hoverInputfield
     },
@@ -9503,6 +9524,16 @@ var {
   MultiValueRemove,
   Control
 } = import_react_select.components;
+var getIndicatorIconSize = (componentSize) => {
+  switch (componentSize) {
+    case "medium":
+      return "medium";
+    case "small":
+      return "small";
+    case "tiny":
+      return "small";
+  }
+};
 var DDSOption = (props, componentSize) => /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(Option, { ...props, children: [
   props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
@@ -9510,7 +9541,7 @@ var DDSOption = (props, componentSize) => /* @__PURE__ */ (0, import_jsx_runtime
 var CustomOption = (props, Element) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Option, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Element, { ...props }) });
 var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(SingleValue, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Element, { ...props }) : props.children }) });
 var DDSNoOptionsMessage = (props) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(NoOptionsMessage, { ...props, children: "Ingen treff" });
-var DDSClearIndicator = (props, size2) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
+var DDSClearIndicator = (props, size2) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon, { icon: CloseSmallIcon, iconSize: getIndicatorIconSize(size2) }) });
 var DDSMultiValueRemove = (props) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(MultiValueRemove, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
 var DDSDropdownIndicator = (props, size2) => {
   const { className, ...rest } = props;
@@ -9519,7 +9550,7 @@ var DDSDropdownIndicator = (props, size2) => {
     {
       ...rest,
       className: cn(className, Select_default["dropdown-indicator"]),
-      children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon, { icon: ChevronDownIcon, iconSize: getIndicatorIconSize(size2) })
     }
   );
 };
@@ -9553,7 +9584,7 @@ var DDSControl = (props, componentSize, readOnly, icon, dataTestId) => {
               {
                 icon,
                 iconSize: getFormInputIconSize(componentSize),
-                className: Select_default.icon
+                className: cn(Input_default.icon, Select_default[`icon--${componentSize}`])
               }
             ),
             props.children
@@ -9599,6 +9630,7 @@ function SelectInner(props, ref) {
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasLabel = !!label;
   const hasErrorMessage = !!errorMessage;
+  const hasIcon = !!icon;
   const showRequiredStyling = !!(required || ariaRequired);
   const tipId = derivativeIdGenerator(uniqueId, "tip");
   const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
@@ -9614,7 +9646,12 @@ function SelectInner(props, ref) {
     inputId: uniqueId,
     name: uniqueId,
     classNamePrefix: prefix2,
-    styles: getCustomStyles(componentSize, hasErrorMessage, readOnly),
+    styles: getCustomStyles(
+      componentSize,
+      hasErrorMessage,
+      hasIcon,
+      readOnly
+    ),
     filterOption: (option, inputValue) => {
       const { label: label2 } = option;
       return searchFilter(label2, inputValue) || inputValue === "";
@@ -10633,7 +10670,7 @@ var Search = (0, import_react108.forwardRef)(
                   {
                     icon: SearchIcon,
                     iconSize: getIconSize(componentSize),
-                    className: cn(Search_default["search-icon"])
+                    className: cn(Input_default.icon, Search_default["search-icon"])
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
@@ -10657,7 +10694,6 @@ var Search = (0, import_react108.forwardRef)(
                     "aria-expanded": context.showSuggestions,
                     role: hasSuggestions ? "combobox" : void 0,
                     className: cn(
-                      Input_default.input,
                       Search_default.input,
                       Search_default[`input--${componentSize}`],
                       typographyStyles_default[getTypographyCn(typographyTypes3[componentSize])]
@@ -11251,9 +11287,43 @@ var RadioButtonGroupInner = (props, ref) => {
 var RadioButtonGroup = (0, import_react116.forwardRef)(RadioButtonGroupInner);
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
-// src/components/SkipToContent/SkipToContent.tsx
+// src/components/Skeleton/Skeleton.tsx
 var import_react117 = require("react");
 
+// src/components/Skeleton/Skeleton.module.css
+var Skeleton_default = {
+  ddsSkeletonAnimation: "Skeleton_ddsSkeletonAnimation",
+  container: "Skeleton_container"
+};
+
+// src/components/Skeleton/Skeleton.tsx
+var import_jsx_runtime273 = require("react/jsx-runtime");
+var Skeleton = (0, import_react117.forwardRef)(
+  (props, ref) => {
+    const {
+      width,
+      height,
+      borderRadius = "var(--dds-border-radius-surface)",
+      className,
+      style,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(className, Skeleton_default.container),
+        style: { ...style, width, height, borderRadius },
+        ...rest
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/components/SkipToContent/SkipToContent.tsx
+var import_react118 = require("react");
+
 // src/components/SkipToContent/SkipToContent.module.css
 var SkipToContent_default = {
   wrapper: "SkipToContent_wrapper",
@@ -11261,8 +11331,8 @@ var SkipToContent_default = {
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
-var import_jsx_runtime273 = require("react/jsx-runtime");
-var SkipToContent = (0, import_react117.forwardRef)(
+var import_jsx_runtime274 = require("react/jsx-runtime");
+var SkipToContent = (0, import_react118.forwardRef)(
   (props, ref) => {
     const {
       text = "Til hovedinnhold",
@@ -11277,12 +11347,12 @@ var SkipToContent = (0, import_react117.forwardRef)(
       style,
       ...restHtmlProps
     } = htmlProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
       "div",
       {
         className: cn(className, htmlPropsClassName, SkipToContent_default.wrapper),
         style: { ...style, top },
-        children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
           Link,
           {
             ...getBaseHTMLProps(id, restHtmlProps, rest),
@@ -11299,7 +11369,7 @@ var SkipToContent = (0, import_react117.forwardRef)(
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-var import_react118 = require("react");
+var import_react119 = require("react");
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -11310,8 +11380,8 @@ var SplitButton_default = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-var import_jsx_runtime274 = require("react/jsx-runtime");
-var SplitButton = (0, import_react118.forwardRef)(
+var import_jsx_runtime275 = require("react/jsx-runtime");
+var SplitButton = (0, import_react119.forwardRef)(
   (props, ref) => {
     const {
       size: size2,
@@ -11321,13 +11391,13 @@ var SplitButton = (0, import_react118.forwardRef)(
       className,
       ...rest
     } = props;
-    const [isOpen, setIsOpen] = (0, import_react118.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react119.useState)(false);
     const buttonStyleProps = {
       purpose,
       size: size2
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)("div", { ref, className: cn(className, SplitButton_default.container), ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)("div", { ref, className: cn(className, SplitButton_default.container), ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
         Button,
         {
           ...buttonStyleProps,
@@ -11336,8 +11406,8 @@ var SplitButton = (0, import_react118.forwardRef)(
           className: SplitButton_default.main
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
           Button,
           {
             ...buttonStyleProps,
@@ -11350,7 +11420,7 @@ var SplitButton = (0, import_react118.forwardRef)(
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(OverflowMenuList, { children: secondaryActions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(OverflowMenuButton, { ...item, children: item.children })) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(OverflowMenuList, { children: secondaryActions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(OverflowMenuButton, { ...item, children: item.children })) }) })
       ] })
     ] });
   }
@@ -11358,41 +11428,41 @@ var SplitButton = (0, import_react118.forwardRef)(
 SplitButton.displayName = "SplitButton";
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_react128 = require("react");
+var import_react129 = require("react");
 
 // src/components/Table/collapsible/Table.context.tsx
-var import_react119 = require("react");
-var CollapsibleTableContext = (0, import_react119.createContext)({
+var import_react120 = require("react");
+var CollapsibleTableContext = (0, import_react120.createContext)({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => (0, import_react119.useContext)(CollapsibleTableContext);
+var useCollapsibleTableContext = () => (0, import_react120.useContext)(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
-var import_react120 = require("react");
-var import_jsx_runtime275 = require("react/jsx-runtime");
-var Body = (0, import_react120.forwardRef)(
+var import_react121 = require("react");
+var import_jsx_runtime276 = require("react/jsx-runtime");
+var Body = (0, import_react121.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("tbody", { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("tbody", { ref, ...props });
   }
 );
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Cell.tsx
-var import_react122 = require("react");
+var import_react123 = require("react");
 
 // src/components/Table/normal/Head.tsx
-var import_react121 = require("react");
-var import_jsx_runtime276 = require("react/jsx-runtime");
-var Head = (0, import_react121.forwardRef)(
+var import_react122 = require("react");
+var import_jsx_runtime277 = require("react/jsx-runtime");
+var Head = (0, import_react122.forwardRef)(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("thead", { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(HeadContext.Provider, { value: true, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)("thead", { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(HeadContext.Provider, { value: true, children }) });
   }
 );
 Head.displayName = "Table.Head";
-var HeadContext = (0, import_react121.createContext)(false);
+var HeadContext = (0, import_react122.createContext)(false);
 function useIsInTableHead() {
-  const isInTableHead = (0, import_react121.useContext)(HeadContext);
+  const isInTableHead = (0, import_react122.useContext)(HeadContext);
   return isInTableHead;
 }
 
@@ -11422,8 +11492,8 @@ var Table_default = {
 };
 
 // src/components/Table/normal/Cell.tsx
-var import_jsx_runtime277 = require("react/jsx-runtime");
-var Cell = (0, import_react122.forwardRef)(
+var import_jsx_runtime278 = require("react/jsx-runtime");
+var Cell = (0, import_react123.forwardRef)(
   ({
     children,
     type: _type,
@@ -11436,7 +11506,7 @@ var Cell = (0, import_react122.forwardRef)(
     const type = _type != null ? _type : isInHead ? "head" : "data";
     const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
     const isComplexLayout = layout === "text and icon";
-    return isCollapsibleChild ? /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
+    return isCollapsibleChild ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
       "th",
       {
         ref,
@@ -11446,15 +11516,15 @@ var Cell = (0, import_react122.forwardRef)(
           !isComplexLayout && Table_default[`cell--${layout}`],
           Table_default["cell--head"]
         ),
-        children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime277.jsx)("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("div", { className: Table_default.cell__inner, children }) : children
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
       "td",
       {
         ref,
         ...rest,
         className: cn(className, !isComplexLayout && Table_default[`cell--${layout}`]),
-        children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime277.jsx)("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("div", { className: Table_default.cell__inner, children }) : children
       }
     );
   }
@@ -11462,23 +11532,23 @@ var Cell = (0, import_react122.forwardRef)(
 Cell.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
-var import_react123 = require("react");
-var import_jsx_runtime278 = require("react/jsx-runtime");
-var Foot = (0, import_react123.forwardRef)(
+var import_react124 = require("react");
+var import_jsx_runtime279 = require("react/jsx-runtime");
+var Foot = (0, import_react124.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("tfoot", { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)("tfoot", { ref, ...props });
   }
 );
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
-var import_react124 = require("react");
-var import_jsx_runtime279 = require("react/jsx-runtime");
-var Row = (0, import_react124.forwardRef)(
+var import_react125 = require("react");
+var import_jsx_runtime280 = require("react/jsx-runtime");
+var Row = (0, import_react125.forwardRef)(
   ({ type: _type, mode = "normal", hoverable, selected, className, ...rest }, ref) => {
     const isInHeader = useIsInTableHead();
     const type = _type != null ? _type : isInHeader ? "head" : "body";
-    return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
       "tr",
       {
         ref,
@@ -11501,23 +11571,23 @@ var Row = (0, import_react124.forwardRef)(
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-var import_react125 = require("react");
-var import_jsx_runtime280 = require("react/jsx-runtime");
+var import_react126 = require("react");
+var import_jsx_runtime281 = require("react/jsx-runtime");
 var makeSortIcon = (isSorted, sortOrder) => {
   if (!isSorted || !sortOrder) {
-    return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
+    return /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
   }
-  return sortOrder === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
+  return sortOrder === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
 };
-var SortCell = (0, import_react125.forwardRef)(
-  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
+var SortCell = (0, import_react126.forwardRef)(
+  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(
     Cell,
     {
       ref,
       type: "head",
       "aria-sort": isSorted && sortOrder ? sortOrder : void 0,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime281.jsxs)(
         "button",
         {
           onClick,
@@ -11541,8 +11611,8 @@ var SortCell = (0, import_react125.forwardRef)(
 SortCell.displayName = "Table.SortCell";
 
 // src/components/Table/normal/Table.tsx
-var import_react126 = require("react");
-var import_jsx_runtime281 = require("react/jsx-runtime");
+var import_react127 = require("react");
+var import_jsx_runtime282 = require("react/jsx-runtime");
 function getDensityCn(value) {
   switch (value) {
     case "normal":
@@ -11552,7 +11622,7 @@ function getDensityCn(value) {
       return "extra-compact";
   }
 }
-var Table = (0, import_react126.forwardRef)(
+var Table = (0, import_react127.forwardRef)(
   ({
     density = "normal",
     stickyHeader,
@@ -11561,7 +11631,7 @@ var Table = (0, import_react126.forwardRef)(
     children,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(
       "table",
       {
         ref,
@@ -11582,30 +11652,30 @@ var Table = (0, import_react126.forwardRef)(
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-var import_react127 = require("react");
-var import_jsx_runtime282 = require("react/jsx-runtime");
+var import_react128 = require("react");
+var import_jsx_runtime283 = require("react/jsx-runtime");
 var TableWrapper = ({ className, ...rest }) => {
-  const [overflowX, setOverflowX] = (0, import_react127.useState)(false);
-  const [windowWidth, setWindowWidth] = (0, import_react127.useState)(window.innerWidth);
+  const [overflowX, setOverflowX] = (0, import_react128.useState)(false);
+  const [windowWidth, setWindowWidth] = (0, import_react128.useState)(window.innerWidth);
   function isOverflowingX(event) {
     return event.offsetWidth < event.scrollWidth;
   }
-  const wrapperRef = (0, import_react127.useRef)(null);
-  (0, import_react127.useEffect)(() => {
+  const wrapperRef = (0, import_react128.useRef)(null);
+  (0, import_react128.useEffect)(() => {
     if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
       setOverflowX(true);
       return;
     }
     setOverflowX(false);
   }, [windowWidth]);
-  (0, import_react127.useEffect)(() => {
+  (0, import_react128.useEffect)(() => {
     function handleResize() {
       setWindowWidth(window.innerWidth);
     }
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
     "div",
     {
       ref: wrapperRef,
@@ -11632,8 +11702,8 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_jsx_runtime283 = require("react/jsx-runtime");
-var CollapsibleRow = (0, import_react128.forwardRef)(
+var import_jsx_runtime284 = require("react/jsx-runtime");
+var CollapsibleRow = (0, import_react129.forwardRef)(
   ({
     type: _type,
     className,
@@ -11646,8 +11716,8 @@ var CollapsibleRow = (0, import_react128.forwardRef)(
     const isInHead = useIsInTableHead();
     const type = _type != null ? _type : isInHead ? "head" : "body";
     const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
-    const [childrenCollapsed, setChildrenCollapsed] = (0, import_react128.useState)(true);
-    (0, import_react128.useEffect)(() => {
+    const [childrenCollapsed, setChildrenCollapsed] = (0, import_react129.useState)(true);
+    (0, import_react129.useEffect)(() => {
       !isCollapsed && setChildrenCollapsed(true);
     }, [isCollapsed]);
     const rowProps = (isOpenCollapsibleHeader) => {
@@ -11665,7 +11735,7 @@ var CollapsibleRow = (0, import_react128.forwardRef)(
     const collapsedHeaderValues = headerValues.filter(
       (column2, index) => definingColumnIndex.indexOf(index) === -1
     );
-    const childrenArray = import_react128.Children.toArray(children);
+    const childrenArray = import_react129.Children.toArray(children);
     const collapsedChildren = childrenArray.filter(
       (column2, index) => definingColumnIndex.indexOf(index) === -1
     );
@@ -11674,33 +11744,33 @@ var CollapsibleRow = (0, import_react128.forwardRef)(
     const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
       const id = derivativeIdGenerator(prefix3, index.toString());
       collapsibleIds.push(id);
-      return /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_react128.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-        (0, import_react128.isValidElement)(child) && (0, import_react128.cloneElement)(child, {
+      return /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(import_react129.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+        (0, import_react129.isValidElement)(child) && (0, import_react129.cloneElement)(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Row, { ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Row, { ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
     const definingColumnCells = childrenArray.slice().filter((column2, index) => definingColumnIndex.indexOf(index) > -1).sort((a2, b) => {
       return definingColumnIndex.indexOf(childrenArray.indexOf(a2)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
     });
     const headerRow = () => {
       if (type !== "head" || !isCollapsed) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Row, { ref, ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_jsx_runtime283.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Row, { ref, ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(import_jsx_runtime284.Fragment, { children: [
         definingColumnCells,
-        /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
-          /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(VisuallyHidden, { as: "span", children: "raden" })
+          /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(VisuallyHidden, { as: "span", children: "raden" })
         ] })
       ] }) });
     };
     const idList = spaceSeparatedIdListGenerator(collapsibleIds);
     const rowWithChevron = () => {
       if (type !== "body" || !isCollapsed) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
         definingColumnCells,
-        /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Table2.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Table2.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
           "button",
           {
             onClick: () => setChildrenCollapsed(!childrenCollapsed),
@@ -11712,7 +11782,7 @@ var CollapsibleRow = (0, import_react128.forwardRef)(
               utilStyles_default["remove-button-styling"],
               focusable
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
               AnimatedChevronUpDown,
               {
                 isUp: childrenCollapsed ? false : true,
@@ -11724,28 +11794,28 @@ var CollapsibleRow = (0, import_react128.forwardRef)(
         ) })
       ] });
     };
-    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_jsx_runtime283.Fragment, { children: [
+    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(import_jsx_runtime284.Fragment, { children: [
       headerRow(),
-      type === "body" && /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_jsx_runtime283.Fragment, { children: [
+      type === "body" && /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(import_jsx_runtime284.Fragment, { children: [
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Row, { ref, ...rowProps(), children });
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Row, { ref, ...rowProps(), children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
-var import_react129 = require("react");
-var import_jsx_runtime284 = require("react/jsx-runtime");
-var CollapsibleTable = (0, import_react129.forwardRef)((props, ref) => {
+var import_react130 = require("react");
+var import_jsx_runtime285 = require("react/jsx-runtime");
+var CollapsibleTable = (0, import_react130.forwardRef)((props, ref) => {
   const {
     isCollapsed,
     headerValues,
     definingColumnIndex = [0],
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
     CollapsibleTableContext.Provider,
     {
       value: {
@@ -11753,7 +11823,7 @@ var CollapsibleTable = (0, import_react129.forwardRef)((props, ref) => {
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Table2, { ref, ...rest })
+      children: /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Table2, { ref, ...rest })
     }
   );
 });
@@ -11764,11 +11834,11 @@ var CollapsibleTable2 = CollapsibleTable;
 CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/Tabs.tsx
-var import_react131 = require("react");
+var import_react132 = require("react");
 
 // src/components/Tabs/Tabs.context.tsx
-var import_react130 = require("react");
-var TabsContext = (0, import_react130.createContext)({
+var import_react131 = require("react");
+var TabsContext = (0, import_react131.createContext)({
   activeTab: 0,
   tabsId: "",
   handleTabChange: () => null,
@@ -11778,7 +11848,7 @@ var TabsContext = (0, import_react130.createContext)({
   setHasTabFocus: () => null,
   tabContentDirection: "row"
 });
-var useTabsContext = () => (0, import_react130.useContext)(TabsContext);
+var useTabsContext = () => (0, import_react131.useContext)(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -11795,8 +11865,8 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime285 = require("react/jsx-runtime");
-var Tabs = (0, import_react131.forwardRef)((props, ref) => {
+var import_jsx_runtime286 = require("react/jsx-runtime");
+var Tabs = (0, import_react132.forwardRef)((props, ref) => {
   const {
     id,
     activeTab,
@@ -11808,17 +11878,17 @@ var Tabs = (0, import_react131.forwardRef)((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react131.useId)();
+  const generatedId = (0, import_react132.useId)();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
-  const [thisActiveTab, setActiveTab] = (0, import_react131.useState)(activeTab != null ? activeTab : 0);
-  const [hasTabFocus, setHasTabFocus] = (0, import_react131.useState)(false);
-  const tabListRef = (0, import_react131.useRef)(null);
-  const tabPanelsRef = (0, import_react131.useRef)(null);
+  const [thisActiveTab, setActiveTab] = (0, import_react132.useState)(activeTab != null ? activeTab : 0);
+  const [hasTabFocus, setHasTabFocus] = (0, import_react132.useState)(false);
+  const tabListRef = (0, import_react132.useRef)(null);
+  const tabPanelsRef = (0, import_react132.useRef)(null);
   const handleTabChange = (index) => {
     setActiveTab(index);
     onChange && onChange(index);
   };
-  (0, import_react131.useEffect)(() => {
+  (0, import_react132.useEffect)(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -11827,7 +11897,7 @@ var Tabs = (0, import_react131.forwardRef)((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tabs-width"]: width
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
     TabsContext.Provider,
     {
       value: {
@@ -11840,7 +11910,7 @@ var Tabs = (0, import_react131.forwardRef)((props, ref) => {
         setHasTabFocus,
         tabContentDirection
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
         "div",
         {
           ref,
@@ -11860,17 +11930,17 @@ var Tabs = (0, import_react131.forwardRef)((props, ref) => {
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react133 = require("react");
+var import_react134 = require("react");
 
 // src/components/Tabs/TabWidthContext.tsx
-var import_react132 = require("react");
-var import_jsx_runtime286 = require("react/jsx-runtime");
-var TabContext = (0, import_react132.createContext)(null);
+var import_react133 = require("react");
+var import_jsx_runtime287 = require("react/jsx-runtime");
+var TabContext = (0, import_react133.createContext)(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(
     TabContext.Provider,
     {
       value: {
@@ -11894,16 +11964,16 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = (0, import_react132.useContext)(TabContext);
-  (0, import_react132.useLayoutEffect)(() => {
+  const context = (0, import_react133.useContext)(TabContext);
+  (0, import_react133.useLayoutEffect)(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
   }, [index, width]);
 }
 
 // src/components/Tabs/Tab.tsx
-var import_jsx_runtime287 = require("react/jsx-runtime");
-var Tab = (0, import_react133.forwardRef)((props, ref) => {
+var import_jsx_runtime288 = require("react/jsx-runtime");
+var Tab = (0, import_react134.forwardRef)((props, ref) => {
   const {
     active = false,
     icon,
@@ -11920,16 +11990,16 @@ var Tab = (0, import_react133.forwardRef)((props, ref) => {
     ...rest
   } = props;
   useSetTabWidth(index, width);
-  const itemRef = (0, import_react133.useRef)(null);
+  const itemRef = (0, import_react134.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { tabContentDirection } = useTabsContext();
-  (0, import_react133.useEffect)(() => {
+  (0, import_react134.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react133.useCallback)(() => {
+  const handleSelect = (0, import_react134.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -11942,7 +12012,7 @@ var Tab = (0, import_react133.forwardRef)((props, ref) => {
     handleSelect();
     onKeyDown && onKeyDown(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime287.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(
     "button",
     {
       ...getBaseHTMLProps(
@@ -11965,8 +12035,8 @@ var Tab = (0, import_react133.forwardRef)((props, ref) => {
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(Icon, { icon, iconSize: "inherit" }),
-        /* @__PURE__ */ (0, import_jsx_runtime287.jsx)("span", { children })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Icon, { icon, iconSize: "inherit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime288.jsx)("span", { children })
       ]
     }
   );
@@ -11974,9 +12044,9 @@ var Tab = (0, import_react133.forwardRef)((props, ref) => {
 Tab.displayName = "Tab";
 
 // src/components/Tabs/TabList.tsx
-var import_react134 = require("react");
-var import_jsx_runtime288 = require("react/jsx-runtime");
-var TabList = (0, import_react134.forwardRef)(
+var import_react135 = require("react");
+var import_jsx_runtime289 = require("react/jsx-runtime");
+var TabList = (0, import_react135.forwardRef)(
   ({ children, id, style, onFocus, ...rest }, ref) => {
     const {
       activeTab,
@@ -11987,11 +12057,11 @@ var TabList = (0, import_react134.forwardRef)(
       setHasTabFocus
     } = useTabsContext();
     const uniqueId = id != null ? id : `${tabsId}-tablist`;
-    const childrenArray = import_react134.Children.toArray(children).length;
+    const childrenArray = import_react135.Children.toArray(children).length;
     const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
     const combinedRef = useCombinedRef(ref, tabListRef);
-    const tabListChildren = import_react134.Children.map(children, (child, index) => {
-      return (0, import_react134.isValidElement)(child) && (0, import_react134.cloneElement)(child, {
+    const tabListChildren = import_react135.Children.map(children, (child, index) => {
+      return (0, import_react135.isValidElement)(child) && (0, import_react135.cloneElement)(child, {
         id: `${tabsId}-tab-${index}`,
         "aria-controls": `${tabsId}-panel-${index}`,
         active: activeTab === index,
@@ -12001,7 +12071,7 @@ var TabList = (0, import_react134.forwardRef)(
         onClick: () => handleTabChange(index)
       });
     });
-    const [widths, setWidths] = (0, import_react134.useState)([]);
+    const [widths, setWidths] = (0, import_react135.useState)([]);
     const handleOnFocus = (event) => {
       setHasTabFocus(true);
       onFocus && onFocus(event);
@@ -12019,7 +12089,7 @@ var TabList = (0, import_react134.forwardRef)(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-tab-widths"]: widths.join(" ")
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
       "div",
       {
         ...rest,
@@ -12045,11 +12115,11 @@ var TabList = (0, import_react134.forwardRef)(
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
-var import_react135 = require("react");
-var import_jsx_runtime289 = require("react/jsx-runtime");
-var TabPanel = (0, import_react135.forwardRef)(
+var import_react136 = require("react");
+var import_jsx_runtime290 = require("react/jsx-runtime");
+var TabPanel = (0, import_react136.forwardRef)(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(
       "div",
       {
         ...getBaseHTMLProps(
@@ -12074,28 +12144,28 @@ var TabPanel = (0, import_react135.forwardRef)(
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabPanels.tsx
-var import_react136 = require("react");
-var import_jsx_runtime290 = require("react/jsx-runtime");
-var TabPanels = (0, import_react136.forwardRef)(
+var import_react137 = require("react");
+var import_jsx_runtime291 = require("react/jsx-runtime");
+var TabPanels = (0, import_react137.forwardRef)(
   ({ children, ...rest }, ref) => {
     const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
     const combinedRef = useCombinedRef(ref, tabPanelsRef);
-    const panelChildren = import_react136.Children.map(children, (child, index) => {
+    const panelChildren = import_react137.Children.map(children, (child, index) => {
       const active = index === activeTab;
-      return (0, import_react136.isValidElement)(child) && (0, import_react136.cloneElement)(child, {
+      return (0, import_react137.isValidElement)(child) && (0, import_react137.cloneElement)(child, {
         id: `${tabsId}-panel-${index}`,
         "aria-labelledby": `${tabsId}-tab-${index}`,
         active,
         "aria-expanded": active
       });
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime290.jsx)("div", { ref: combinedRef, ...rest, children: panelChildren });
+    return /* @__PURE__ */ (0, import_jsx_runtime291.jsx)("div", { ref: combinedRef, ...rest, children: panelChildren });
   }
 );
 TabPanels.displayName = "TabPanels";
 
 // src/components/Tag/Tag.tsx
-var import_react137 = require("react");
+var import_react138 = require("react");
 
 // src/components/Tag/Tag.module.css
 var Tag_default = {
@@ -12114,7 +12184,7 @@ var Tag_default = {
 };
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime291 = require("react/jsx-runtime");
+var import_jsx_runtime292 = require("react/jsx-runtime");
 var icons3 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -12122,7 +12192,7 @@ var icons3 = {
   success: CheckCircledIcon,
   default: void 0
 };
-var Tag = (0, import_react137.forwardRef)((props, ref) => {
+var Tag = (0, import_react138.forwardRef)((props, ref) => {
   const {
     text,
     purpose = "default",
@@ -12135,7 +12205,7 @@ var Tag = (0, import_react137.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const icon = icons3[purpose];
-  return /* @__PURE__ */ (0, import_jsx_runtime291.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime292.jsxs)(
     TextOverflowEllipsisWrapper,
     {
       ...getBaseHTMLProps(
@@ -12152,8 +12222,8 @@ var Tag = (0, import_react137.forwardRef)((props, ref) => {
       ),
       ref,
       children: [
-        withIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(Icon, { icon, iconSize: "small" }),
-        /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(TextOverflowEllipsisInner, { children: children != null ? children : text })
+        withIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(Icon, { icon, iconSize: "small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(TextOverflowEllipsisInner, { children: children != null ? children : text })
       ]
     }
   );
@@ -12162,7 +12232,7 @@ Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
 var import_dds_design_tokens15 = require("@norges-domstoler/dds-design-tokens");
-var import_react138 = require("react");
+var import_react139 = require("react");
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
@@ -12177,7 +12247,6 @@ var TextInput_default = {
   "with-icon--small": "TextInput_with-icon--small",
   "with-icon--tiny": "TextInput_with-icon--tiny",
   "input--extended": "TextInput_input--extended",
-  icon: "TextInput_icon",
   "icon--medium": "TextInput_icon--medium",
   "icon--small": "TextInput_icon--small",
   "icon--tiny": "TextInput_icon--tiny",
@@ -12190,8 +12259,8 @@ var TextInput_default = {
 };
 
 // src/components/TextInput/TextInput.tsx
-var import_jsx_runtime292 = require("react/jsx-runtime");
-var TextInput = (0, import_react138.forwardRef)(
+var import_jsx_runtime293 = require("react/jsx-runtime");
+var TextInput = (0, import_react139.forwardRef)(
   ({
     label,
     disabled,
@@ -12217,14 +12286,14 @@ var TextInput = (0, import_react138.forwardRef)(
     suffix,
     ...rest
   }, ref) => {
-    const [text, setText] = (0, import_react138.useState)(
+    const [text, setText] = (0, import_react139.useState)(
       getDefaultText(value, defaultValue)
     );
-    const prefixRef = (0, import_react138.useRef)(null);
-    const suffixRef = (0, import_react138.useRef)(null);
-    const [prefixLength, setPrefixLength] = (0, import_react138.useState)(0);
-    const [suffixLength, setSuffixLength] = (0, import_react138.useState)(0);
-    (0, import_react138.useLayoutEffect)(() => {
+    const prefixRef = (0, import_react139.useRef)(null);
+    const suffixRef = (0, import_react139.useRef)(null);
+    const [prefixLength, setPrefixLength] = (0, import_react139.useState)(0);
+    const [suffixLength, setSuffixLength] = (0, import_react139.useState)(0);
+    (0, import_react139.useLayoutEffect)(() => {
       if (prefixRef.current) {
         setPrefixLength(prefixRef.current.offsetWidth);
       }
@@ -12238,7 +12307,7 @@ var TextInput = (0, import_react138.forwardRef)(
         onChange(event);
       }
     };
-    const generatedId = (0, import_react138.useId)();
+    const generatedId = (0, import_react139.useId)();
     const uniqueId = id != null ? id : `${generatedId}-textInput`;
     const hasErrorMessage = !!errorMessage;
     const hasTip = !!tip;
@@ -12280,21 +12349,21 @@ var TextInput = (0, import_react138.forwardRef)(
     const suffixPaddingInlineEnd = readOnly && suffixLength ? suffixLength + "px" : suffixLength ? import_dds_design_tokens15.ddsTokens.ddsSpacingX1NumberPx + suffixLength + "px" : void 0;
     let extendedInput = null;
     if (hasIcon) {
-      extendedInput = /* @__PURE__ */ (0, import_jsx_runtime292.jsxs)(
+      extendedInput = /* @__PURE__ */ (0, import_jsx_runtime293.jsxs)(
         "div",
         {
           className: cn(TextInput_default["input-width"], Input_default["input-group"]),
           style: styleVariables,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
               Icon,
               {
                 icon,
                 iconSize: getFormInputIconSize(componentSize),
-                className: cn(TextInput_default.icon, TextInput_default[`icon--${componentSize}`])
+                className: cn(Input_default.icon, TextInput_default[`icon--${componentSize}`])
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
               StatefulInput,
               {
                 ref,
@@ -12313,13 +12382,13 @@ var TextInput = (0, import_react138.forwardRef)(
         }
       );
     } else if (hasAffix) {
-      extendedInput = /* @__PURE__ */ (0, import_jsx_runtime292.jsxs)(
+      extendedInput = /* @__PURE__ */ (0, import_jsx_runtime293.jsxs)(
         "div",
         {
           className: cn(TextInput_default["affix-container"], TextInput_default["input-width"]),
           style: styleVariables,
           children: [
-            prefix3 && /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
+            prefix3 && /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
               "span",
               {
                 ref: prefixRef,
@@ -12332,7 +12401,7 @@ var TextInput = (0, import_react138.forwardRef)(
                 children: prefix3
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
               StatefulInput,
               {
                 ref,
@@ -12347,7 +12416,7 @@ var TextInput = (0, import_react138.forwardRef)(
                 className: TextInput_default["input--extended"]
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
               "span",
               {
                 ref: suffixRef,
@@ -12364,7 +12433,7 @@ var TextInput = (0, import_react138.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime292.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime293.jsxs)(
       "div",
       {
         className: cn(
@@ -12376,7 +12445,7 @@ var TextInput = (0, import_react138.forwardRef)(
         ),
         style,
         children: [
-          hasLabel && /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
+          hasLabel && /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
             Label,
             {
               htmlFor: uniqueId,
@@ -12386,7 +12455,7 @@ var TextInput = (0, import_react138.forwardRef)(
               children: label
             }
           ),
-          extendedInput ? extendedInput : /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
+          extendedInput ? extendedInput : /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
             StatefulInput,
             {
               ref,
@@ -12398,7 +12467,7 @@ var TextInput = (0, import_react138.forwardRef)(
               className: TextInput_default["input-width"]
             }
           ),
-          hasMessage && /* @__PURE__ */ (0, import_jsx_runtime292.jsxs)("div", { className: TextInput_default["message-container"], children: [
+          hasMessage && /* @__PURE__ */ (0, import_jsx_runtime293.jsxs)("div", { className: TextInput_default["message-container"], children: [
             renderInputMessage(tip, tipId, errorMessage, errorMessageId),
             renderCharCounter(
               characterCounterId,
@@ -12415,14 +12484,14 @@ var TextInput = (0, import_react138.forwardRef)(
 TextInput.displayName = "TextInput";
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_react140 = require("react");
+var import_react141 = require("react");
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-var import_react139 = require("react");
-var ToggleBarContext = (0, import_react139.createContext)({
+var import_react140 = require("react");
+var ToggleBarContext = (0, import_react140.createContext)({
   size: "medium"
 });
-var useToggleBarContext = () => (0, import_react139.useContext)(ToggleBarContext);
+var useToggleBarContext = () => (0, import_react140.useContext)(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -12441,7 +12510,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_jsx_runtime293 = require("react/jsx-runtime");
+var import_jsx_runtime294 = require("react/jsx-runtime");
 var ToggleBar = (props) => {
   const {
     children,
@@ -12456,15 +12525,15 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = (0, import_react140.useId)();
+  const generatedId = (0, import_react141.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
-  const [groupValue, setGroupValue] = (0, import_react140.useState)(value);
+  const [groupValue, setGroupValue] = (0, import_react141.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_runtime293.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(
     ToggleBarContext.Provider,
     {
       value: {
@@ -12473,7 +12542,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime293.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime294.jsxs)(
         "div",
         {
           ...getBaseHTMLProps(
@@ -12486,8 +12555,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(Label, { id: labelId, children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime293.jsx)("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(Label, { id: labelId, children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime294.jsx)("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -12497,8 +12566,8 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-var import_react141 = require("react");
-var import_jsx_runtime294 = require("react/jsx-runtime");
+var import_react142 = require("react");
+var import_jsx_runtime295 = require("react/jsx-runtime");
 var typographyTypes4 = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -12515,7 +12584,7 @@ var calculateChecked = (value, group, checked) => {
   }
   return !!value;
 };
-var ToggleRadio = (0, import_react141.forwardRef)(
+var ToggleRadio = (0, import_react142.forwardRef)(
   (props, ref) => {
     const {
       value,
@@ -12531,7 +12600,7 @@ var ToggleRadio = (0, import_react141.forwardRef)(
       id,
       ...rest
     } = props;
-    const generatedId = (0, import_react141.useId)();
+    const generatedId = (0, import_react142.useId)();
     const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
     const group = useToggleBarContext();
     const handleChange = (event) => {
@@ -12539,8 +12608,8 @@ var ToggleRadio = (0, import_react141.forwardRef)(
       (group == null ? void 0 : group.onChange) && group.onChange(event);
     };
     const contentTypeCn = label ? "with-text" : "just-icon";
-    return /* @__PURE__ */ (0, import_jsx_runtime294.jsxs)("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12563,7 +12632,7 @@ var ToggleRadio = (0, import_react141.forwardRef)(
           "aria-labelledby": ariaLabelledBy
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime294.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
         Typography,
         {
           as: "span",
@@ -12574,8 +12643,8 @@ var ToggleRadio = (0, import_react141.forwardRef)(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(Icon, { icon, iconSize: "inherit" }),
-            label && /* @__PURE__ */ (0, import_jsx_runtime294.jsx)("span", { children: label })
+            icon && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(Icon, { icon, iconSize: "inherit" }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { children: label })
           ]
         }
       )
@@ -12585,7 +12654,7 @@ var ToggleRadio = (0, import_react141.forwardRef)(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_react142 = require("react");
+var import_react143 = require("react");
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -12598,13 +12667,13 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_jsx_runtime295 = require("react/jsx-runtime");
-var ToggleButton = (0, import_react142.forwardRef)(
+var import_jsx_runtime296 = require("react/jsx-runtime");
+var ToggleButton = (0, import_react143.forwardRef)(
   ({ id, label, icon, className, htmlProps, ...rest }, ref) => {
-    const generatedId = (0, import_react142.useId)();
+    const generatedId = (0, import_react143.useId)();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
-    return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12621,7 +12690,7 @@ var ToggleButton = (0, import_react142.forwardRef)(
           type: "checkbox"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
         "span",
         {
           className: cn(
@@ -12630,7 +12699,7 @@ var ToggleButton = (0, import_react142.forwardRef)(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(Icon, { icon, iconSize: "inherit" }),
+            icon && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Icon, { icon, iconSize: "inherit" }),
             " ",
             label
           ]
@@ -12642,8 +12711,8 @@ var ToggleButton = (0, import_react142.forwardRef)(
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-var import_react143 = require("react");
-var import_jsx_runtime296 = require("react/jsx-runtime");
+var import_react144 = require("react");
+var import_jsx_runtime297 = require("react/jsx-runtime");
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -12655,9 +12724,9 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react143.useId)();
+  const generatedId = (0, import_react144.useId)();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
     "div",
     {
       ...getBaseHTMLProps(
@@ -12669,7 +12738,7 @@ var ToggleButtonGroup = (props) => {
       role: "group",
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
-        !!label && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
+        !!label && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
           Typography,
           {
             as: "span",
@@ -12678,7 +12747,7 @@ var ToggleButtonGroup = (props) => {
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
+        /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
       ]
     }
   );
@@ -12906,6 +12975,7 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   SearchSuggestions,
   Select,
   SettingsIcon,
+  Skeleton,
   SkipToContent,
   SmsIcon,
   Spinner,