@norges-domstoler/dds-components 17.0.0 → 17.1.0

package/dist/index.mjs

@@ -475,7 +475,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
@@ -2924,7 +2925,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_shallowequal = __toESM(require_shallowequal());
 import r, { useRef as o, useState as s, useMemo as i, useEffect as a, useContext as c, useDebugValue as l, createElement as u } from "react";
 
@@ -3520,11 +3521,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);
@@ -8990,7 +8991,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",
@@ -9057,22 +9060,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",
@@ -9084,7 +9102,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
     },
@@ -9270,6 +9290,16 @@ var {
   MultiValueRemove,
   Control
 } = components;
+var getIndicatorIconSize = (componentSize) => {
+  switch (componentSize) {
+    case "medium":
+      return "medium";
+    case "small":
+      return "small";
+    case "tiny":
+      return "small";
+  }
+};
 var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs57(Option, { ...props, children: [
   props.isSelected && /* @__PURE__ */ jsx254(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
@@ -9277,7 +9307,7 @@ var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs57(Option, { ...pr
 var CustomOption = (props, Element) => /* @__PURE__ */ jsx254(Option, { ...props, children: /* @__PURE__ */ jsx254(Element, { ...props }) });
 var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ jsx254(SingleValue, { ...props, children: /* @__PURE__ */ jsx254("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx254(Element, { ...props }) : props.children }) });
 var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx254(NoOptionsMessage, { ...props, children: "Ingen treff" });
-var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx254(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx254(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
+var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx254(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx254(Icon, { icon: CloseSmallIcon, iconSize: getIndicatorIconSize(size2) }) });
 var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx254(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx254(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
 var DDSDropdownIndicator = (props, size2) => {
   const { className, ...rest } = props;
@@ -9286,7 +9316,7 @@ var DDSDropdownIndicator = (props, size2) => {
     {
       ...rest,
       className: cn(className, Select_default["dropdown-indicator"]),
-      children: /* @__PURE__ */ jsx254(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) })
+      children: /* @__PURE__ */ jsx254(Icon, { icon: ChevronDownIcon, iconSize: getIndicatorIconSize(size2) })
     }
   );
 };
@@ -9320,7 +9350,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
@@ -9366,6 +9396,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");
@@ -9381,7 +9412,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 === "";
@@ -10427,7 +10463,7 @@ var Search = forwardRef74(
                   {
                     icon: SearchIcon,
                     iconSize: getIconSize(componentSize),
-                    className: cn(Search_default["search-icon"])
+                    className: cn(Input_default.icon, Search_default["search-icon"])
                   }
                 ),
                 /* @__PURE__ */ jsx264(
@@ -10451,7 +10487,6 @@ var Search = forwardRef74(
                     "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])]
@@ -11055,9 +11090,43 @@ var RadioButtonGroupInner = (props, ref) => {
 var RadioButtonGroup = forwardRef78(RadioButtonGroupInner);
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
-// src/components/SkipToContent/SkipToContent.tsx
+// src/components/Skeleton/Skeleton.tsx
 import { forwardRef as forwardRef79 } from "react";
 
+// src/components/Skeleton/Skeleton.module.css
+var Skeleton_default = {
+  ddsSkeletonAnimation: "Skeleton_ddsSkeletonAnimation",
+  container: "Skeleton_container"
+};
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx271 } from "react/jsx-runtime";
+var Skeleton = forwardRef79(
+  (props, ref) => {
+    const {
+      width,
+      height,
+      borderRadius = "var(--dds-border-radius-surface)",
+      className,
+      style,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsx271(
+      "div",
+      {
+        ref,
+        className: cn(className, Skeleton_default.container),
+        style: { ...style, width, height, borderRadius },
+        ...rest
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/components/SkipToContent/SkipToContent.tsx
+import { forwardRef as forwardRef80 } from "react";
+
 // src/components/SkipToContent/SkipToContent.module.css
 var SkipToContent_default = {
   wrapper: "SkipToContent_wrapper",
@@ -11065,8 +11134,8 @@ var SkipToContent_default = {
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
-import { jsx as jsx271 } from "react/jsx-runtime";
-var SkipToContent = forwardRef79(
+import { jsx as jsx272 } from "react/jsx-runtime";
+var SkipToContent = forwardRef80(
   (props, ref) => {
     const {
       text = "Til hovedinnhold",
@@ -11081,12 +11150,12 @@ var SkipToContent = forwardRef79(
       style,
       ...restHtmlProps
     } = htmlProps;
-    return /* @__PURE__ */ jsx271(
+    return /* @__PURE__ */ jsx272(
       "div",
       {
         className: cn(className, htmlPropsClassName, SkipToContent_default.wrapper),
         style: { ...style, top },
-        children: /* @__PURE__ */ jsx271(
+        children: /* @__PURE__ */ jsx272(
           Link,
           {
             ...getBaseHTMLProps(id, restHtmlProps, rest),
@@ -11103,7 +11172,7 @@ var SkipToContent = forwardRef79(
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-import { forwardRef as forwardRef80, useState as useState25 } from "react";
+import { forwardRef as forwardRef81, useState as useState25 } from "react";
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -11114,8 +11183,8 @@ var SplitButton_default = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-import { jsx as jsx272, jsxs as jsxs70 } from "react/jsx-runtime";
-var SplitButton = forwardRef80(
+import { jsx as jsx273, jsxs as jsxs70 } from "react/jsx-runtime";
+var SplitButton = forwardRef81(
   (props, ref) => {
     const {
       size: size2,
@@ -11131,7 +11200,7 @@ var SplitButton = forwardRef80(
       size: size2
     };
     return /* @__PURE__ */ jsxs70("div", { ref, className: cn(className, SplitButton_default.container), ...rest, children: [
-      /* @__PURE__ */ jsx272(
+      /* @__PURE__ */ jsx273(
         Button,
         {
           ...buttonStyleProps,
@@ -11141,7 +11210,7 @@ var SplitButton = forwardRef80(
         }
       ),
       /* @__PURE__ */ jsxs70(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
-        /* @__PURE__ */ jsx272(
+        /* @__PURE__ */ jsx273(
           Button,
           {
             ...buttonStyleProps,
@@ -11154,7 +11223,7 @@ var SplitButton = forwardRef80(
             )
           }
         ),
-        /* @__PURE__ */ jsx272(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ jsx272(OverflowMenuList, { children: secondaryActions.map((item) => /* @__PURE__ */ jsx272(OverflowMenuButton, { ...item, children: item.children })) }) })
+        /* @__PURE__ */ jsx273(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ jsx273(OverflowMenuList, { children: secondaryActions.map((item) => /* @__PURE__ */ jsx273(OverflowMenuButton, { ...item, children: item.children })) }) })
       ] })
     ] });
   }
@@ -11166,7 +11235,7 @@ import {
   Children as Children5,
   Fragment as Fragment13,
   cloneElement as cloneElement8,
-  forwardRef as forwardRef88,
+  forwardRef as forwardRef89,
   isValidElement as isValidElement9,
   useEffect as useEffect27,
   useState as useState27
@@ -11181,30 +11250,30 @@ var CollapsibleTableContext = createContext8({
 var useCollapsibleTableContext = () => useContext11(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
-import { forwardRef as forwardRef81 } from "react";
-import { jsx as jsx273 } from "react/jsx-runtime";
-var Body = forwardRef81(
+import { forwardRef as forwardRef82 } from "react";
+import { jsx as jsx274 } from "react/jsx-runtime";
+var Body = forwardRef82(
   (props, ref) => {
-    return /* @__PURE__ */ jsx273("tbody", { ref, ...props });
+    return /* @__PURE__ */ jsx274("tbody", { ref, ...props });
   }
 );
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Cell.tsx
 import {
-  forwardRef as forwardRef83
+  forwardRef as forwardRef84
 } from "react";
 
 // src/components/Table/normal/Head.tsx
 import {
   createContext as createContext9,
-  forwardRef as forwardRef82,
+  forwardRef as forwardRef83,
   useContext as useContext12
 } from "react";
-import { jsx as jsx274 } from "react/jsx-runtime";
-var Head = forwardRef82(
+import { jsx as jsx275 } from "react/jsx-runtime";
+var Head = forwardRef83(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx274("thead", { ref, ...rest, children: /* @__PURE__ */ jsx274(HeadContext.Provider, { value: true, children }) });
+    return /* @__PURE__ */ jsx275("thead", { ref, ...rest, children: /* @__PURE__ */ jsx275(HeadContext.Provider, { value: true, children }) });
   }
 );
 Head.displayName = "Table.Head";
@@ -11240,8 +11309,8 @@ var Table_default = {
 };
 
 // src/components/Table/normal/Cell.tsx
-import { jsx as jsx275 } from "react/jsx-runtime";
-var Cell = forwardRef83(
+import { jsx as jsx276 } from "react/jsx-runtime";
+var Cell = forwardRef84(
   ({
     children,
     type: _type,
@@ -11254,7 +11323,7 @@ var Cell = forwardRef83(
     const type = _type != null ? _type : isInHead ? "head" : "data";
     const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
     const isComplexLayout = layout === "text and icon";
-    return isCollapsibleChild ? /* @__PURE__ */ jsx275(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx275(
+    return isCollapsibleChild ? /* @__PURE__ */ jsx276(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx276(
       "th",
       {
         ref,
@@ -11264,15 +11333,15 @@ var Cell = forwardRef83(
           !isComplexLayout && Table_default[`cell--${layout}`],
           Table_default["cell--head"]
         ),
-        children: isComplexLayout ? /* @__PURE__ */ jsx275("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ jsx276("div", { className: Table_default.cell__inner, children }) : children
       }
-    ) : /* @__PURE__ */ jsx275(
+    ) : /* @__PURE__ */ jsx276(
       "td",
       {
         ref,
         ...rest,
         className: cn(className, !isComplexLayout && Table_default[`cell--${layout}`]),
-        children: isComplexLayout ? /* @__PURE__ */ jsx275("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ jsx276("div", { className: Table_default.cell__inner, children }) : children
       }
     );
   }
@@ -11280,23 +11349,23 @@ var Cell = forwardRef83(
 Cell.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
-import { forwardRef as forwardRef84 } from "react";
-import { jsx as jsx276 } from "react/jsx-runtime";
-var Foot = forwardRef84(
+import { forwardRef as forwardRef85 } from "react";
+import { jsx as jsx277 } from "react/jsx-runtime";
+var Foot = forwardRef85(
   (props, ref) => {
-    return /* @__PURE__ */ jsx276("tfoot", { ref, ...props });
+    return /* @__PURE__ */ jsx277("tfoot", { ref, ...props });
   }
 );
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
-import { forwardRef as forwardRef85 } from "react";
-import { jsx as jsx277 } from "react/jsx-runtime";
-var Row = forwardRef85(
+import { forwardRef as forwardRef86 } from "react";
+import { jsx as jsx278 } from "react/jsx-runtime";
+var Row = forwardRef86(
   ({ type: _type, mode = "normal", hoverable, selected, className, ...rest }, ref) => {
     const isInHeader = useIsInTableHead();
     const type = _type != null ? _type : isInHeader ? "head" : "body";
-    return /* @__PURE__ */ jsx277(
+    return /* @__PURE__ */ jsx278(
       "tr",
       {
         ref,
@@ -11319,16 +11388,16 @@ var Row = forwardRef85(
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-import { forwardRef as forwardRef86 } from "react";
-import { jsx as jsx278, jsxs as jsxs71 } from "react/jsx-runtime";
+import { forwardRef as forwardRef87 } from "react";
+import { jsx as jsx279, jsxs as jsxs71 } from "react/jsx-runtime";
 var makeSortIcon = (isSorted, sortOrder) => {
   if (!isSorted || !sortOrder) {
-    return /* @__PURE__ */ jsx278(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
+    return /* @__PURE__ */ jsx279(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
   }
-  return sortOrder === "ascending" ? /* @__PURE__ */ jsx278(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx278(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
+  return sortOrder === "ascending" ? /* @__PURE__ */ jsx279(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx279(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
 };
-var SortCell = forwardRef86(
-  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx278(
+var SortCell = forwardRef87(
+  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx279(
     Cell,
     {
       ref,
@@ -11359,8 +11428,8 @@ var SortCell = forwardRef86(
 SortCell.displayName = "Table.SortCell";
 
 // src/components/Table/normal/Table.tsx
-import { forwardRef as forwardRef87 } from "react";
-import { jsx as jsx279 } from "react/jsx-runtime";
+import { forwardRef as forwardRef88 } from "react";
+import { jsx as jsx280 } from "react/jsx-runtime";
 function getDensityCn(value) {
   switch (value) {
     case "normal":
@@ -11370,7 +11439,7 @@ function getDensityCn(value) {
       return "extra-compact";
   }
 }
-var Table = forwardRef87(
+var Table = forwardRef88(
   ({
     density = "normal",
     stickyHeader,
@@ -11379,7 +11448,7 @@ var Table = forwardRef87(
     children,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx279(
+    return /* @__PURE__ */ jsx280(
       "table",
       {
         ref,
@@ -11401,7 +11470,7 @@ Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
 import { useEffect as useEffect26, useRef as useRef30, useState as useState26 } from "react";
-import { jsx as jsx280 } from "react/jsx-runtime";
+import { jsx as jsx281 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
   const [overflowX, setOverflowX] = useState26(false);
   const [windowWidth, setWindowWidth] = useState26(window.innerWidth);
@@ -11423,7 +11492,7 @@ var TableWrapper = ({ className, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ jsx280(
+  return /* @__PURE__ */ jsx281(
     "div",
     {
       ref: wrapperRef,
@@ -11450,8 +11519,8 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment14, jsx as jsx281, jsxs as jsxs72 } from "react/jsx-runtime";
-var CollapsibleRow = forwardRef88(
+import { Fragment as Fragment14, jsx as jsx282, jsxs as jsxs72 } from "react/jsx-runtime";
+var CollapsibleRow = forwardRef89(
   ({
     type: _type,
     className,
@@ -11493,23 +11562,23 @@ var CollapsibleRow = forwardRef88(
       const id = derivativeIdGenerator(prefix3, index.toString());
       collapsibleIds.push(id);
       return /* @__PURE__ */ jsxs72(Fragment13, { children: [
-        /* @__PURE__ */ jsx281(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+        /* @__PURE__ */ jsx282(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
         isValidElement9(child) && cloneElement8(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx281(Row, { ...rowProps(), children: /* @__PURE__ */ jsx281(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx281(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx282(Row, { ...rowProps(), children: /* @__PURE__ */ jsx282(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx282(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__ */ jsx281(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs72(Fragment14, { children: [
+      return /* @__PURE__ */ jsx282(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs72(Fragment14, { children: [
         definingColumnCells,
         /* @__PURE__ */ jsxs72(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
-          /* @__PURE__ */ jsx281(VisuallyHidden, { as: "span", children: "raden" })
+          /* @__PURE__ */ jsx282(VisuallyHidden, { as: "span", children: "raden" })
         ] })
       ] }) });
     };
@@ -11518,7 +11587,7 @@ var CollapsibleRow = forwardRef88(
       if (type !== "body" || !isCollapsed) return null;
       return /* @__PURE__ */ jsxs72(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
         definingColumnCells,
-        /* @__PURE__ */ jsx281(Table2.Cell, { children: /* @__PURE__ */ jsx281(
+        /* @__PURE__ */ jsx282(Table2.Cell, { children: /* @__PURE__ */ jsx282(
           "button",
           {
             onClick: () => setChildrenCollapsed(!childrenCollapsed),
@@ -11530,7 +11599,7 @@ var CollapsibleRow = forwardRef88(
               utilStyles_default["remove-button-styling"],
               focusable
             ),
-            children: /* @__PURE__ */ jsx281(
+            children: /* @__PURE__ */ jsx282(
               AnimatedChevronUpDown,
               {
                 isUp: childrenCollapsed ? false : true,
@@ -11548,22 +11617,22 @@ var CollapsibleRow = forwardRef88(
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ jsx281(Row, { ref, ...rowProps(), children });
+    ] }) : /* @__PURE__ */ jsx282(Row, { ref, ...rowProps(), children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
-import { forwardRef as forwardRef89 } from "react";
-import { jsx as jsx282 } from "react/jsx-runtime";
-var CollapsibleTable = forwardRef89((props, ref) => {
+import { forwardRef as forwardRef90 } from "react";
+import { jsx as jsx283 } from "react/jsx-runtime";
+var CollapsibleTable = forwardRef90((props, ref) => {
   const {
     isCollapsed,
     headerValues,
     definingColumnIndex = [0],
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx282(
+  return /* @__PURE__ */ jsx283(
     CollapsibleTableContext.Provider,
     {
       value: {
@@ -11571,7 +11640,7 @@ var CollapsibleTable = forwardRef89((props, ref) => {
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ jsx282(Table2, { ref, ...rest })
+      children: /* @__PURE__ */ jsx283(Table2, { ref, ...rest })
     }
   );
 });
@@ -11583,7 +11652,7 @@ CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/Tabs.tsx
 import {
-  forwardRef as forwardRef90,
+  forwardRef as forwardRef91,
   useEffect as useEffect28,
   useId as useId23,
   useRef as useRef31,
@@ -11619,8 +11688,8 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx283 } from "react/jsx-runtime";
-var Tabs = forwardRef90((props, ref) => {
+import { jsx as jsx284 } from "react/jsx-runtime";
+var Tabs = forwardRef91((props, ref) => {
   const {
     id,
     activeTab,
@@ -11651,7 +11720,7 @@ var Tabs = forwardRef90((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tabs-width"]: width
   };
-  return /* @__PURE__ */ jsx283(
+  return /* @__PURE__ */ jsx284(
     TabsContext.Provider,
     {
       value: {
@@ -11664,7 +11733,7 @@ var Tabs = forwardRef90((props, ref) => {
         setHasTabFocus,
         tabContentDirection
       },
-      children: /* @__PURE__ */ jsx283(
+      children: /* @__PURE__ */ jsx284(
         "div",
         {
           ref,
@@ -11685,7 +11754,7 @@ Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
 import {
-  forwardRef as forwardRef91,
+  forwardRef as forwardRef92,
   useCallback as useCallback7,
   useEffect as useEffect29,
   useRef as useRef32
@@ -11697,13 +11766,13 @@ import {
   useContext as useContext14,
   useLayoutEffect as useLayoutEffect2
 } from "react";
-import { jsx as jsx284 } from "react/jsx-runtime";
+import { jsx as jsx285 } from "react/jsx-runtime";
 var TabContext = createContext11(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
 }) {
-  return /* @__PURE__ */ jsx284(
+  return /* @__PURE__ */ jsx285(
     TabContext.Provider,
     {
       value: {
@@ -11735,8 +11804,8 @@ function useSetTabWidth(index, width) {
 }
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx285, jsxs as jsxs73 } from "react/jsx-runtime";
-var Tab = forwardRef91((props, ref) => {
+import { jsx as jsx286, jsxs as jsxs73 } from "react/jsx-runtime";
+var Tab = forwardRef92((props, ref) => {
   const {
     active = false,
     icon,
@@ -11798,8 +11867,8 @@ var Tab = forwardRef91((props, ref) => {
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon && /* @__PURE__ */ jsx285(Icon, { icon, iconSize: "inherit" }),
-        /* @__PURE__ */ jsx285("span", { children })
+        icon && /* @__PURE__ */ jsx286(Icon, { icon, iconSize: "inherit" }),
+        /* @__PURE__ */ jsx286("span", { children })
       ]
     }
   );
@@ -11810,12 +11879,12 @@ Tab.displayName = "Tab";
 import {
   Children as Children6,
   cloneElement as cloneElement9,
-  forwardRef as forwardRef92,
+  forwardRef as forwardRef93,
   isValidElement as isValidElement10,
   useState as useState29
 } from "react";
-import { jsx as jsx286 } from "react/jsx-runtime";
-var TabList = forwardRef92(
+import { jsx as jsx287 } from "react/jsx-runtime";
+var TabList = forwardRef93(
   ({ children, id, style, onFocus, ...rest }, ref) => {
     const {
       activeTab,
@@ -11858,7 +11927,7 @@ var TabList = forwardRef92(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-tab-widths"]: widths.join(" ")
     };
-    return /* @__PURE__ */ jsx286(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx286(
+    return /* @__PURE__ */ jsx287(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx287(
       "div",
       {
         ...rest,
@@ -11884,11 +11953,11 @@ var TabList = forwardRef92(
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
-import { forwardRef as forwardRef93 } from "react";
-import { jsx as jsx287 } from "react/jsx-runtime";
-var TabPanel = forwardRef93(
+import { forwardRef as forwardRef94 } from "react";
+import { jsx as jsx288 } from "react/jsx-runtime";
+var TabPanel = forwardRef94(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx287(
+    return /* @__PURE__ */ jsx288(
       "div",
       {
         ...getBaseHTMLProps(
@@ -11916,11 +11985,11 @@ TabPanel.displayName = "TabPanel";
 import {
   Children as Children7,
   cloneElement as cloneElement10,
-  forwardRef as forwardRef94,
+  forwardRef as forwardRef95,
   isValidElement as isValidElement11
 } from "react";
-import { jsx as jsx288 } from "react/jsx-runtime";
-var TabPanels = forwardRef94(
+import { jsx as jsx289 } from "react/jsx-runtime";
+var TabPanels = forwardRef95(
   ({ children, ...rest }, ref) => {
     const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
     const combinedRef = useCombinedRef(ref, tabPanelsRef);
@@ -11933,13 +12002,13 @@ var TabPanels = forwardRef94(
         "aria-expanded": active
       });
     });
-    return /* @__PURE__ */ jsx288("div", { ref: combinedRef, ...rest, children: panelChildren });
+    return /* @__PURE__ */ jsx289("div", { ref: combinedRef, ...rest, children: panelChildren });
   }
 );
 TabPanels.displayName = "TabPanels";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef95 } from "react";
+import { forwardRef as forwardRef96 } from "react";
 
 // src/components/Tag/Tag.module.css
 var Tag_default = {
@@ -11958,7 +12027,7 @@ var Tag_default = {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx289, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx290, jsxs as jsxs74 } from "react/jsx-runtime";
 var icons3 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -11966,7 +12035,7 @@ var icons3 = {
   success: CheckCircledIcon,
   default: void 0
 };
-var Tag = forwardRef95((props, ref) => {
+var Tag = forwardRef96((props, ref) => {
   const {
     text,
     purpose = "default",
@@ -11996,8 +12065,8 @@ var Tag = forwardRef95((props, ref) => {
       ),
       ref,
       children: [
-        withIcon && icon && /* @__PURE__ */ jsx289(Icon, { icon, iconSize: "small" }),
-        /* @__PURE__ */ jsx289(TextOverflowEllipsisInner, { children: children != null ? children : text })
+        withIcon && icon && /* @__PURE__ */ jsx290(Icon, { icon, iconSize: "small" }),
+        /* @__PURE__ */ jsx290(TextOverflowEllipsisInner, { children: children != null ? children : text })
       ]
     }
   );
@@ -12007,7 +12076,7 @@ Tag.displayName = "Tag";
 // src/components/TextInput/TextInput.tsx
 import { ddsTokens as ddsTokens15 } from "@norges-domstoler/dds-design-tokens";
 import {
-  forwardRef as forwardRef96,
+  forwardRef as forwardRef97,
   useId as useId24,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef33,
@@ -12027,7 +12096,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",
@@ -12040,8 +12108,8 @@ var TextInput_default = {
 };
 
 // src/components/TextInput/TextInput.tsx
-import { jsx as jsx290, jsxs as jsxs75 } from "react/jsx-runtime";
-var TextInput = forwardRef96(
+import { jsx as jsx291, jsxs as jsxs75 } from "react/jsx-runtime";
+var TextInput = forwardRef97(
   ({
     label,
     disabled,
@@ -12136,15 +12204,15 @@ var TextInput = forwardRef96(
           className: cn(TextInput_default["input-width"], Input_default["input-group"]),
           style: styleVariables,
           children: [
-            /* @__PURE__ */ jsx290(
+            /* @__PURE__ */ jsx291(
               Icon,
               {
                 icon,
                 iconSize: getFormInputIconSize(componentSize),
-                className: cn(TextInput_default.icon, TextInput_default[`icon--${componentSize}`])
+                className: cn(Input_default.icon, TextInput_default[`icon--${componentSize}`])
               }
             ),
-            /* @__PURE__ */ jsx290(
+            /* @__PURE__ */ jsx291(
               StatefulInput,
               {
                 ref,
@@ -12169,7 +12237,7 @@ var TextInput = forwardRef96(
           className: cn(TextInput_default["affix-container"], TextInput_default["input-width"]),
           style: styleVariables,
           children: [
-            prefix3 && /* @__PURE__ */ jsx290(
+            prefix3 && /* @__PURE__ */ jsx291(
               "span",
               {
                 ref: prefixRef,
@@ -12182,7 +12250,7 @@ var TextInput = forwardRef96(
                 children: prefix3
               }
             ),
-            /* @__PURE__ */ jsx290(
+            /* @__PURE__ */ jsx291(
               StatefulInput,
               {
                 ref,
@@ -12197,7 +12265,7 @@ var TextInput = forwardRef96(
                 className: TextInput_default["input--extended"]
               }
             ),
-            suffix && /* @__PURE__ */ jsx290(
+            suffix && /* @__PURE__ */ jsx291(
               "span",
               {
                 ref: suffixRef,
@@ -12226,7 +12294,7 @@ var TextInput = forwardRef96(
         ),
         style,
         children: [
-          hasLabel && /* @__PURE__ */ jsx290(
+          hasLabel && /* @__PURE__ */ jsx291(
             Label,
             {
               htmlFor: uniqueId,
@@ -12236,7 +12304,7 @@ var TextInput = forwardRef96(
               children: label
             }
           ),
-          extendedInput ? extendedInput : /* @__PURE__ */ jsx290(
+          extendedInput ? extendedInput : /* @__PURE__ */ jsx291(
             StatefulInput,
             {
               ref,
@@ -12291,7 +12359,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx291, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx292, jsxs as jsxs76 } from "react/jsx-runtime";
 var ToggleBar = (props) => {
   const {
     children,
@@ -12314,7 +12382,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ jsx291(
+  return /* @__PURE__ */ jsx292(
     ToggleBarContext.Provider,
     {
       value: {
@@ -12336,8 +12404,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ jsx291(Label, { id: labelId, children: label }),
-            /* @__PURE__ */ jsx291("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ jsx292(Label, { id: labelId, children: label }),
+            /* @__PURE__ */ jsx292("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -12348,10 +12416,10 @@ ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
 import {
-  forwardRef as forwardRef97,
+  forwardRef as forwardRef98,
   useId as useId26
 } from "react";
-import { jsx as jsx292, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx293, jsxs as jsxs77 } from "react/jsx-runtime";
 var typographyTypes4 = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -12368,7 +12436,7 @@ var calculateChecked = (value, group, checked) => {
   }
   return !!value;
 };
-var ToggleRadio = forwardRef97(
+var ToggleRadio = forwardRef98(
   (props, ref) => {
     const {
       value,
@@ -12393,7 +12461,7 @@ var ToggleRadio = forwardRef97(
     };
     const contentTypeCn = label ? "with-text" : "just-icon";
     return /* @__PURE__ */ jsxs77("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
-      /* @__PURE__ */ jsx292(
+      /* @__PURE__ */ jsx293(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12427,8 +12495,8 @@ var ToggleRadio = forwardRef97(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon && /* @__PURE__ */ jsx292(Icon, { icon, iconSize: "inherit" }),
-            label && /* @__PURE__ */ jsx292("span", { children: label })
+            icon && /* @__PURE__ */ jsx293(Icon, { icon, iconSize: "inherit" }),
+            label && /* @__PURE__ */ jsx293("span", { children: label })
           ]
         }
       )
@@ -12438,7 +12506,7 @@ var ToggleRadio = forwardRef97(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { forwardRef as forwardRef98, useId as useId27 } from "react";
+import { forwardRef as forwardRef99, useId as useId27 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -12451,13 +12519,13 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { jsx as jsx293, jsxs as jsxs78 } from "react/jsx-runtime";
-var ToggleButton = forwardRef98(
+import { jsx as jsx294, jsxs as jsxs78 } from "react/jsx-runtime";
+var ToggleButton = forwardRef99(
   ({ id, label, icon, className, htmlProps, ...rest }, ref) => {
     const generatedId = useId27();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     return /* @__PURE__ */ jsxs78("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
-      /* @__PURE__ */ jsx293(
+      /* @__PURE__ */ jsx294(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12483,7 +12551,7 @@ var ToggleButton = forwardRef98(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon && /* @__PURE__ */ jsx293(Icon, { icon, iconSize: "inherit" }),
+            icon && /* @__PURE__ */ jsx294(Icon, { icon, iconSize: "inherit" }),
             " ",
             label
           ]
@@ -12496,7 +12564,7 @@ ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
 import { useId as useId28 } from "react";
-import { jsx as jsx294, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx295, jsxs as jsxs79 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -12522,7 +12590,7 @@ var ToggleButtonGroup = (props) => {
       role: "group",
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
-        !!label && /* @__PURE__ */ jsx294(
+        !!label && /* @__PURE__ */ jsx295(
           Typography,
           {
             as: "span",
@@ -12531,7 +12599,7 @@ var ToggleButtonGroup = (props) => {
             children: label
           }
         ),
-        /* @__PURE__ */ jsx294("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
+        /* @__PURE__ */ jsx295("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
       ]
     }
   );
@@ -12758,6 +12826,7 @@ export {
   SearchSuggestions,
   Select,
   SettingsIcon,
+  Skeleton,
   SkipToContent,
   SmsIcon,
   Spinner,