@norges-domstoler/dds-components 21.6.0 → 21.7.0

package/dist/index.mjs

@@ -212,8 +212,8 @@ var getTextColor = (color) => {
 // src/utils/combineHandlers.tsx
 var combineHandlers = (handler1, handler2) => {
   const callback = (event) => {
-    handler1 && handler1(event);
-    handler2 && handler2(event);
+    handler1 == null ? void 0 : handler1(event);
+    handler2 == null ? void 0 : handler2(event);
   };
   return callback;
 };
@@ -261,7 +261,7 @@ var readOnlyMouseDownHandler = (readOnly, onMouseDown) => {
     if (readOnly) {
       evt.preventDefault();
       evt.target.focus();
-    } else onMouseDown && onMouseDown(evt);
+    } else onMouseDown == null ? void 0 : onMouseDown(evt);
   };
 };
 var readOnlyKeyDownHandler = (type, readOnly, onKeyDown) => {
@@ -274,7 +274,7 @@ var readOnlyKeyDownHandler = (type, readOnly, onKeyDown) => {
       } else if (type === "selectionControl" && evt.key === " ") {
         evt.preventDefault();
       }
-    } else onKeyDown && onKeyDown(evt);
+    } else onKeyDown == null ? void 0 : onKeyDown(evt);
   };
 };
 var readOnlyChangeHandler = (readOnly, onChange) => {
@@ -282,7 +282,7 @@ var readOnlyChangeHandler = (readOnly, onChange) => {
     if (readOnly) {
       return;
     }
-    onChange && onChange(evt);
+    onChange == null ? void 0 : onChange(evt);
   };
 };
 var readOnlyClickHandler = (readOnly, onClick) => {
@@ -291,7 +291,7 @@ var readOnlyClickHandler = (readOnly, onClick) => {
       evt.preventDefault();
       return;
     }
-    onClick && onClick(evt);
+    onClick == null ? void 0 : onClick(evt);
   };
 };
 
@@ -436,8 +436,8 @@ function useTranslation() {
   const t = (text) => text[lang];
   return { t, lang };
 }
-function createTexts(texts25) {
-  return texts25;
+function createTexts(texts26) {
+  return texts26;
 }
 
 // src/types/BaseComponentProps.ts
@@ -686,6 +686,7 @@ var focusable = "focus_focusable";
 var focus_default = {
   focused: "focus_focused",
   focusable,
+  "focusable-focus": "focus_focusable-focus",
   "focusable-within": "focus_focusable-within",
   "has-focusable-input": "focus_has-focusable-input",
   "focusable-sibling": "focus_focusable-sibling",
@@ -4333,13 +4334,13 @@ var OverflowMenuGroup = ({
   const combinedMenuRef = useCombinedRef(menuRef, floatingRef);
   const handleClose = () => {
     if (isOpen) {
-      onClose && onClose();
+      onClose == null ? void 0 : onClose();
       close();
     }
   };
   const handleToggle = () => {
-    !isOpen && (onOpen == null ? void 0 : onOpen());
-    isOpen && (onClose == null ? void 0 : onClose());
+    if (!isOpen) onOpen == null ? void 0 : onOpen();
+    if (isOpen) onClose == null ? void 0 : onClose();
     toggle();
   };
   useOnClickOutside([menuRef.current, buttonRef.current], () => {
@@ -4348,7 +4349,7 @@ var OverflowMenuGroup = ({
   useOnKeyDown(["Esc", "Escape"], () => {
     var _a;
     if (isOpen) {
-      onClose && onClose();
+      onClose == null ? void 0 : onClose();
       close();
       (_a = buttonRef.current) == null ? void 0 : _a.focus();
     }
@@ -5129,7 +5130,7 @@ var RadioButton = ({
   const radioButtonGroup = useRadioButtonGroup();
   const handleChange = (event) => {
     var _a;
-    onChange && onChange(event);
+    onChange == null ? void 0 : onChange(event);
     (_a = radioButtonGroup == null ? void 0 : radioButtonGroup.onChange) == null ? void 0 : _a.call(radioButtonGroup, event, event.target.value);
   };
   const describedByIds = [];
@@ -5507,7 +5508,7 @@ var Chip = ({
   const [isOpen, setIsOpen] = useState11(true);
   const onClick = () => {
     setIsOpen(false);
-    onClose && onClose();
+    onClose == null ? void 0 : onClose();
   };
   return isOpen ? /* @__PURE__ */ jsxs40(
     "div",
@@ -7265,7 +7266,9 @@ var TextArea = ({
   const [text, setText] = useState14(getDefaultText(value, defaultValue));
   useEffect20(() => {
     if (textAreaRef == null ? void 0 : textAreaRef.current) {
-      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight + 2}px`;
+      const el = textAreaRef.current;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight + 2}px`;
     }
   }, [text]);
   const onChangeHandler = (event) => {
@@ -7351,26 +7354,10 @@ var TextArea = ({
 TextArea.displayName = "TextArea";
 
 // src/components/Feedback/utils.tsx
-import { jsx as jsx249 } from "react/jsx-runtime";
 var getIconSize = (layout) => layout === "vertical" ? "large" : "medium";
-var ThumbIcon = ({ rating, layout, type }) => type === "comment" ? /* @__PURE__ */ jsx249(
-  Icon,
-  {
-    icon: rating === "positive" ? ThumbUpFilledIcon : ThumbDownFilledIcon,
-    color: "iconActionResting",
-    iconSize: getIconSize(layout)
-  }
-) : /* @__PURE__ */ jsx249(
-  Icon,
-  {
-    icon: rating === "positive" ? ThumbUpIcon : ThumbDownIcon,
-    color: "iconMedium",
-    iconSize: getIconSize(layout)
-  }
-);
 
 // src/components/Feedback/CommentComponent.tsx
-import { jsx as jsx250, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs55 } from "react/jsx-runtime";
 var CommentComponent = ({
   layout,
   rating,
@@ -7386,13 +7373,20 @@ var CommentComponent = ({
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs55(VStack, { gap: "x1", children: [
     /* @__PURE__ */ jsxs55("span", { className: Feedback_default["rating-submitted-title"], children: [
-      ThumbIcon({ rating, layout, type: "comment" }),
+      /* @__PURE__ */ jsx249(
+        Icon,
+        {
+          icon: rating === "positive" ? ThumbUpFilledIcon : ThumbDownFilledIcon,
+          color: "iconActionResting",
+          iconSize: getIconSize(layout)
+        }
+      ),
       /* @__PURE__ */ jsxs55(Paragraph, { children: [
         ratingSubmittedTitle,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ jsx250(
+    /* @__PURE__ */ jsx249(
       TextArea,
       {
         value: feedbackText,
@@ -7401,7 +7395,7 @@ var CommentComponent = ({
         tip: textAreaTip
       }
     ),
-    /* @__PURE__ */ jsx250(
+    /* @__PURE__ */ jsx249(
       Button,
       {
         purpose: "secondary",
@@ -7422,6 +7416,29 @@ var texts9 = createTexts({
   }
 });
 
+// src/components/helpers/InlineIconButton/InlineIconButton.module.css
+var InlineIconButton_default = {
+  button: "InlineIconButton_button"
+};
+
+// src/components/helpers/InlineIconButton/InlineIconButton.tsx
+import { jsx as jsx250 } from "react/jsx-runtime";
+var InlineIconButton = ({
+  className,
+  size: size2,
+  icon,
+  color,
+  ...rest
+}) => /* @__PURE__ */ jsx250(
+  StylelessButton,
+  {
+    className: cn(className, InlineIconButton_default.button, focusable),
+    ...rest,
+    children: /* @__PURE__ */ jsx250(Icon, { icon, iconSize: size2, color })
+  }
+);
+InlineIconButton.displayName = "InlineIconButton";
+
 // src/components/Tooltip/Tooltip.tsx
 import {
   Children as ReactChildren3,
@@ -7469,7 +7486,9 @@ var Tooltip = ({
   const combinedRef = useCombinedRef(ref, refs.setFloating, tooltipRef);
   const closeWhenNotInView = (entries) => {
     const [entry] = entries;
-    entry.isIntersecting ? setInView(true) : setInView(false);
+    if (entry.isIntersecting) {
+      setInView(true);
+    } else setInView(false);
   };
   useEffect21(() => {
     const options = {
@@ -7594,12 +7613,13 @@ var RatingComponent = ({
 }) => {
   const { t } = useTranslation();
   const button = (rating, layout2, tooltip) => /* @__PURE__ */ jsx252(
-    StylelessButton,
+    InlineIconButton,
     {
       "aria-label": tooltip,
       onClick: () => handleRatingChange(rating),
-      className: cn(Feedback_default.button, Feedback_default[`button--${layout2}`], focusable),
-      children: ThumbIcon({ rating, layout: layout2, type: "rating" })
+      size: getIconSize(layout2),
+      icon: rating === "positive" ? ThumbUpIcon : ThumbDownIcon,
+      color: "icon-medium"
     }
   );
   return /* @__PURE__ */ jsxs57(
@@ -7662,26 +7682,26 @@ var Feedback = ({
   const tThumbUpTooltip = thumbUpTooltip != null ? thumbUpTooltip : t(texts11.good);
   const tThumbDownTooltip = thumbDownTooltip != null ? thumbDownTooltip : t(texts11.bad);
   useEffect22(() => {
-    ratingProp !== void 0 && setRating(ratingProp);
+    if (ratingProp !== void 0) setRating(ratingProp);
   }, [ratingProp]);
   useEffect22(() => {
-    feedbackTextProp !== void 0 && setFeedbackText(feedbackTextProp);
+    if (feedbackTextProp !== void 0) setFeedbackText(feedbackTextProp);
   }, [feedbackTextProp]);
   useEffect22(() => {
-    isSubmittedProp !== void 0 && setIsFeedbackSubmitted(isSubmittedProp);
+    if (isSubmittedProp !== void 0) setIsFeedbackSubmitted(isSubmittedProp);
   }, [isSubmittedProp]);
   const handleRatingChange = (newRating) => {
-    onRating && onRating(newRating);
-    onSubmit && feedbackTextAreaExcluded && onSubmit(newRating, "");
-    ratingProp === void 0 && setRating(newRating);
+    onRating == null ? void 0 : onRating(newRating);
+    if (onSubmit && feedbackTextAreaExcluded) onSubmit(newRating, "");
+    if (ratingProp === void 0) setRating(newRating);
   };
   const handleFeedbackTextChange = (newFeedbackText) => {
-    onFeedbackTextChange && onFeedbackTextChange(newFeedbackText);
-    feedbackTextProp === void 0 && setFeedbackText(newFeedbackText);
+    onFeedbackTextChange == null ? void 0 : onFeedbackTextChange(newFeedbackText);
+    if (feedbackTextProp === void 0) setFeedbackText(newFeedbackText);
   };
   const handleSubmit = () => {
-    onSubmit && onSubmit(rating, feedbackText != null ? feedbackText : "");
-    isSubmittedProp === void 0 && setIsFeedbackSubmitted(true);
+    onSubmit == null ? void 0 : onSubmit(rating, feedbackText != null ? feedbackText : "");
+    if (isSubmittedProp === void 0) setIsFeedbackSubmitted(true);
   };
   if (rating === null && !isFeedbackSubmitted) {
     return /* @__PURE__ */ jsx253(
@@ -8143,11 +8163,9 @@ var useFileUploader = (props) => {
     () => ({
       onBlur: onRootBlur,
       onFocus: onRootFocus,
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onDragEnter: onRootDragEnter,
       onDragOver: onRootDragOver,
       onDragLeave: onRootDragLeave,
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onDrop: setFiles,
       ref: rootRef
     }),
@@ -8174,7 +8192,6 @@ var useFileUploader = (props) => {
       style: { display: "none" },
       tabIndex: -1,
       ref: inputRef,
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onChange: setFiles,
       multiple: !maxFiles || maxFiles > 1,
       ...accept ? { accept: accept.join(",") } : {}
@@ -8483,7 +8500,7 @@ var GlobalMessage = ({
             purpose: "tertiary",
             onClick: () => {
               setClosed(true);
-              onClose && onClose();
+              onClose == null ? void 0 : onClose();
             },
             size: "small",
             "aria-label": t(commonTexts.closeMessage)
@@ -8515,7 +8532,7 @@ var InlineButton = ({ className, ...rest }) => /* @__PURE__ */ jsx268(
   }
 );
 
-// src/components/InlineEdit/InlineEditTextArea.tsx
+// src/components/InlineEdit/InlineEditTextArea/InlineEditTextArea.tsx
 import { useRef as useRef25 } from "react";
 
 // src/components/InlineEdit/InlineEdit.context.tsx
@@ -8585,15 +8602,20 @@ var InlineEditContextProvider = (props) => {
 };
 InlineEditContextProvider.displayName = "InlineEditContextProvider";
 
-// src/components/InlineEdit/InlineTextArea.tsx
+// src/components/InlineEdit/InlineField.tsx
 import { useId as useId15, useRef as useRef24 } from "react";
 
 // src/components/InlineEdit/InlineEdit.module.css
 var InlineEdit_default = {
   "inline-input": "InlineEdit_inline-input",
+  "inline-select": "InlineEdit_inline-select",
+  "inline-select--with-clear-button": "InlineEdit_inline-select--with-clear-button",
+  "inline-input--danger": "InlineEdit_inline-input--danger",
   "inline-input--with-icon": "InlineEdit_inline-input--with-icon",
   "inline-textarea": "InlineEdit_inline-textarea",
-  "icon-wrapper": "InlineEdit_icon-wrapper"
+  "icon-wrapper": "InlineEdit_icon-wrapper",
+  chevron: "InlineEdit_chevron",
+  "clear-button": "InlineEdit_clear-button"
 };
 
 // src/components/InlineEdit/InlineEdit.utils.tsx
@@ -8619,29 +8641,153 @@ var texts14 = createTexts({
     en: " Input field cannot be cleared."
   }
 });
+var inlineEditCns = (hasErrorState, showEditingIcon) => [
+  InlineEdit_default["inline-input"],
+  typographyStyles_default["body-medium"],
+  hasErrorState && InlineEdit_default["inline-input--danger"],
+  showEditingIcon && InlineEdit_default["inline-input--with-icon"]
+];
+var inlineInputCns = (hasErrorState, showEditingIcon) => [...inlineEditCns(hasErrorState, showEditingIcon), focusable];
+var inlineTextareaCns = (hasErrorState, showEditingIcon) => [...inlineInputCns(hasErrorState, showEditingIcon), utilStyles_default.scrollbar];
+var inlineSelectCns = (hasErrorState, showEditingIcon, hasValue) => [
+  ...inlineEditCns(hasErrorState, showEditingIcon),
+  InlineEdit_default["inline-select"],
+  hasValue && InlineEdit_default["inline-select--with-clear-button"],
+  focus_default["focusable-focus"]
+];
 
-// src/components/InlineEdit/InlineTextArea.tsx
-import { jsx as jsx270, jsxs as jsxs62 } from "react/jsx-runtime";
-var InlineTextArea = ({
-  id,
-  error,
-  errorMessage,
-  width = "140px",
-  "aria-describedby": ariaDescribedby,
-  hideIcon,
-  ref,
-  ...rest
-}) => {
+// src/utils/createClearChangeEvent.tsx
+function createClearChangeEvent(elementId) {
+  const element = document.getElementById(elementId);
+  if (!element) {
+    throw new Error(`Element by id '${elementId}' not found.`);
+  }
+  if (element instanceof HTMLInputElement) {
+    element.value = "";
+  } else if (element instanceof HTMLSelectElement) {
+    element.selectedIndex = 0;
+  }
+  const clearChangeEvent = {
+    target: element,
+    currentTarget: element,
+    bubbles: true,
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    preventDefault: () => null,
+    stopPropagation: () => null,
+    nativeEvent: new Event("input"),
+    persist: () => null,
+    type: "change",
+    timeStamp: Date.now(),
+    isDefaultPrevented: () => false,
+    isPropagationStopped: () => false
+  };
+  return clearChangeEvent;
+}
+
+// src/components/InlineEdit/InlineField.tsx
+import { Fragment as Fragment6, jsx as jsx270, jsxs as jsxs62 } from "react/jsx-runtime";
+function InlineField(props) {
+  const {
+    elementType,
+    id,
+    error,
+    errorMessage,
+    width = "140px",
+    hideIcon,
+    ref,
+    className,
+    "aria-describedby": ariaDescribedby,
+    ...rest
+  } = props;
   const { onBlur, onChange, onFocus, isEditing, value, emptiable } = useInlineEditContext();
-  const genereatedId = useId15();
-  const uniqueId = id != null ? id : `${genereatedId}-InlineTextArea`;
+  const { t } = useTranslation();
+  const generatedId = useId15();
+  const uniqueId = id != null ? id : `${generatedId}-InlineEdit`;
   const hasErrorMessage = !!errorMessage;
+  const hasErrorState = !!error || hasErrorMessage;
   const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
-  const hasError = !!error;
-  const hasErrorState = hasError || hasErrorMessage;
   const descId = derivativeIdGenerator(uniqueId, "desc");
+  const hasValue = !!value;
   const inputRef = useRef24(null);
   const combinedRef = useCombinedRef(ref, inputRef);
+  const clearInput = () => {
+    const clearChangeEvent = createClearChangeEvent(uniqueId);
+    onChange == null ? void 0 : onChange(clearChangeEvent);
+  };
+  const describedBy = spaceSeparatedIdListGenerator([
+    hasErrorMessage ? errorMessageId : void 0,
+    descId,
+    ariaDescribedby
+  ]);
+  const commonProps = {
+    id: uniqueId,
+    "aria-describedby": describedBy,
+    "aria-invalid": hasErrorState,
+    value,
+    onBlur,
+    onChange,
+    onFocus
+  };
+  const cnArgs = [hasErrorState, !isEditing && !hideIcon];
+  const renderElement = () => {
+    switch (elementType) {
+      case "input":
+        return /* @__PURE__ */ jsx270(
+          "input",
+          {
+            ...rest,
+            ref: combinedRef,
+            ...commonProps,
+            className: cn(className, ...inlineInputCns(...cnArgs))
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ jsx270(
+          "textarea",
+          {
+            ...rest,
+            ref: combinedRef,
+            ...commonProps,
+            className: cn(className, ...inlineTextareaCns(...cnArgs))
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ jsxs62(Fragment6, { children: [
+          /* @__PURE__ */ jsx270(
+            "select",
+            {
+              ...rest,
+              ref: combinedRef,
+              ...commonProps,
+              className: cn(className, ...inlineSelectCns(...cnArgs, hasValue))
+            }
+          ),
+          hasValue && emptiable && /* @__PURE__ */ jsx270(
+            InlineIconButton,
+            {
+              "aria-label": t(texts15.clearSelect),
+              onClick: clearInput,
+              icon: CloseSmallIcon,
+              size: "small",
+              className: InlineEdit_default["clear-button"]
+            }
+          ),
+          /* @__PURE__ */ jsx270(
+            Icon,
+            {
+              icon: ChevronDownIcon,
+              iconSize: "small",
+              className: InlineEdit_default.chevron
+            }
+          )
+        ] });
+      default:
+        return null;
+    }
+  };
   return /* @__PURE__ */ jsxs62(Box, { position: "relative", width, children: [
     /* @__PURE__ */ jsxs62("div", { className: Input_default["input-group"], children: [
       !isEditing && !hideIcon && /* @__PURE__ */ jsx270(
@@ -8649,47 +8795,28 @@ var InlineTextArea = ({
         {
           onClick: () => {
             var _a;
-            (_a = inputRef.current) == null ? void 0 : _a.focus();
+            return (_a = inputRef.current) == null ? void 0 : _a.focus();
           },
           className: InlineEdit_default["icon-wrapper"],
           children: /* @__PURE__ */ jsx270(Icon, { icon: EditIcon, iconSize: "small" })
         }
       ),
-      /* @__PURE__ */ jsx270(
-        "textarea",
-        {
-          ...rest,
-          value,
-          onChange,
-          onBlur,
-          onFocus,
-          id: uniqueId,
-          ref: combinedRef,
-          "aria-describedby": spaceSeparatedIdListGenerator([
-            hasErrorMessage ? errorMessageId : void 0,
-            descId,
-            ariaDescribedby
-          ]),
-          className: cn(
-            InlineEdit_default["inline-input"],
-            !hideIcon && !isEditing && InlineEdit_default["inline-input--with-icon"],
-            InlineEdit_default["inline-textarea"],
-            Input_default["input--stateful"],
-            hasErrorState && Input_default["input--stateful-danger"],
-            typographyStyles_default["body-medium"],
-            utilStyles_default.scrollbar,
-            focusable
-          )
-        }
-      )
+      renderElement()
     ] }),
     inlineEditVisuallyHidden(descId, emptiable),
     renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
   ] });
-};
-InlineTextArea.displayName = "InlineTextArea";
+}
+var texts15 = createTexts({
+  clearSelect: {
+    no: "T\xF8m nedtrekksliste",
+    nb: "T\xF8m nedtrekksliste",
+    nn: "T\xF8m nedtrekksliste",
+    en: "Clear selection"
+  }
+});
 
-// src/components/InlineEdit/InlineEditTextArea.tsx
+// src/components/InlineEdit/InlineEditTextArea/InlineEditTextArea.tsx
 import { jsx as jsx271 } from "react/jsx-runtime";
 var InlineEditTextArea = ({
   onSetValue,
@@ -8713,85 +8840,45 @@ var InlineEditTextArea = ({
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ jsx271(InlineTextArea, { ref: combinedRef, ...rest })
+      children: /* @__PURE__ */ jsx271(InlineField, { elementType: "textarea", ...rest, ref: combinedRef })
     }
   );
 };
 
-// src/components/InlineEdit/InlineEditInput.tsx
-import { useRef as useRef27 } from "react";
-
-// src/components/InlineEdit/InlineInput.tsx
-import { useId as useId16, useRef as useRef26 } from "react";
-import { jsx as jsx272, jsxs as jsxs63 } from "react/jsx-runtime";
-var InlineInput = ({
-  id,
-  error,
-  errorMessage,
-  width = "140px",
-  "aria-describedby": ariaDescribedby,
-  hideIcon,
+// src/components/InlineEdit/InlineEditInput/InlineEditInput.tsx
+import { useRef as useRef26 } from "react";
+import { jsx as jsx272 } from "react/jsx-runtime";
+var InlineEditInput = ({
+  onSetValue,
+  emptiable,
+  value,
+  onFocus,
+  onChange,
+  onBlur,
   ref,
   ...rest
 }) => {
-  const { onBlur, onChange, onFocus, isEditing, value, emptiable } = useInlineEditContext();
-  const genereatedId = useId16();
-  const uniqueId = id != null ? id : `${genereatedId}-InlineInput`;
-  const hasErrorMessage = !!errorMessage;
-  const hasError = !!error;
-  const hasErrorState = hasError || hasErrorMessage;
-  const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
-  const descId = derivativeIdGenerator(uniqueId, "desc");
   const inputRef = useRef26(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ jsxs63(Box, { position: "relative", width, children: [
-    /* @__PURE__ */ jsxs63("div", { className: Input_default["input-group"], children: [
-      !isEditing && !hideIcon && /* @__PURE__ */ jsx272(
-        "span",
-        {
-          onClick: () => {
-            var _a;
-            (_a = inputRef.current) == null ? void 0 : _a.focus();
-          },
-          className: InlineEdit_default["icon-wrapper"],
-          children: /* @__PURE__ */ jsx272(Icon, { icon: EditIcon, iconSize: "small" })
-        }
-      ),
-      /* @__PURE__ */ jsx272(
-        "input",
-        {
-          ...rest,
-          value,
-          onChange,
-          onBlur,
-          onFocus,
-          id: uniqueId,
-          ref: combinedRef,
-          "aria-describedby": spaceSeparatedIdListGenerator([
-            hasErrorMessage ? errorMessageId : void 0,
-            descId,
-            ariaDescribedby
-          ]),
-          "aria-invalid": hasErrorState,
-          className: cn(
-            InlineEdit_default["inline-input"],
-            !hideIcon && !isEditing && InlineEdit_default["inline-input--with-icon"],
-            typographyStyles_default["body-medium"],
-            hasErrorState && Input_default["input--stateful-danger"],
-            focusable
-          )
-        }
-      )
-    ] }),
-    inlineEditVisuallyHidden(descId, emptiable),
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
-  ] });
+  return /* @__PURE__ */ jsx272(
+    InlineEditContextProvider,
+    {
+      onSetValue,
+      emptiable,
+      inputRef,
+      value,
+      onFocus,
+      onChange,
+      onBlur,
+      children: /* @__PURE__ */ jsx272(InlineField, { elementType: "input", ...rest, ref: combinedRef })
+    }
+  );
 };
-InlineInput.displayName = "InlineInput";
 
-// src/components/InlineEdit/InlineEditInput.tsx
+// src/components/InlineEdit/InlineEditSelect/InlineEditSelect.tsx
+import { useRef as useRef27 } from "react";
 import { jsx as jsx273 } from "react/jsx-runtime";
-var InlineEditInput = ({
+var InlineEditSelect = ({
   onSetValue,
   emptiable,
   value,
@@ -8813,7 +8900,7 @@ var InlineEditInput = ({
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ jsx273(InlineInput, { ...rest, ref: combinedRef })
+      children: /* @__PURE__ */ jsx273(InlineField, { elementType: "select", ...rest, ref: combinedRef })
     }
   );
 };
@@ -8851,7 +8938,7 @@ var NavigationItem = ({ isCurrent, ...rest }) => /* @__PURE__ */ jsx274(
 );
 
 // src/components/InternalHeader/InternalHeader.tsx
-import { jsx as jsx275, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx275, jsxs as jsxs63 } from "react/jsx-runtime";
 var InternalHeader = (props) => {
   const {
     applicationDesc,
@@ -8880,7 +8967,7 @@ var InternalHeader = (props) => {
   const hasContextMenuElements = !!contextMenuItems && contextMenuItems.length > 0;
   const hasSmallScreenBreakpoint = !!smallScreenBreakpoint;
   const hasNavInContextMenu = hasSmallScreenBreakpoint && hasNavigationElements;
-  const navigation = hasNavigationElements ? /* @__PURE__ */ jsx275("nav", { "aria-label": t(texts15.siteNavigation), children: /* @__PURE__ */ jsx275(
+  const navigation = hasNavigationElements ? /* @__PURE__ */ jsx275("nav", { "aria-label": t(texts16.siteNavigation), children: /* @__PURE__ */ jsx275(
     ShowHide,
     {
       as: StylelessList,
@@ -8903,7 +8990,7 @@ var InternalHeader = (props) => {
   ) }) : null;
   const hasContextMenu = hasContextMenuElements || !!user || hasNavInContextMenu;
   const hasContextMenuLargeScreen = hasContextMenuElements || !!user;
-  return /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsxs63(
     Box,
     {
       display: "flex",
@@ -8938,22 +9025,22 @@ var InternalHeader = (props) => {
           {
             showBelow: !hasContextMenuLargeScreen && hasSmallScreenBreakpoint ? smallScreenBreakpoint : void 0,
             className: cn(InternalHeader_default["context-menu-group"]),
-            children: /* @__PURE__ */ jsxs64(OverflowMenuGroup, { children: [
+            children: /* @__PURE__ */ jsxs63(OverflowMenuGroup, { children: [
               /* @__PURE__ */ jsx275(
                 Button,
                 {
                   icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
                   purpose: "tertiary",
-                  "aria-label": t(texts15.openMenu)
+                  "aria-label": t(texts16.openMenu)
                 }
               ),
-              /* @__PURE__ */ jsxs64(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
+              /* @__PURE__ */ jsxs63(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
                 user && /* @__PURE__ */ jsx275(OverflowMenuList, { children: user.href ? /* @__PURE__ */ jsx275(OverflowMenuLink, { icon: PersonIcon, ...user }) : /* @__PURE__ */ jsx275(OverflowMenuSpan, { icon: PersonIcon, ...user }) }),
                 hasNavInContextMenu && /* @__PURE__ */ jsx275(
                   ShowHide,
                   {
                     as: "nav",
-                    "aria-label": t(texts15.siteNavigation),
+                    "aria-label": t(texts16.siteNavigation),
                     showBelow: smallScreenBreakpoint,
                     children: /* @__PURE__ */ jsx275(OverflowMenuList, { children: navItems.map((item) => /* @__PURE__ */ jsx275(OverflowMenuLink, { ...item })) })
                   }
@@ -8982,7 +9069,7 @@ var InternalHeader = (props) => {
   );
 };
 InternalHeader.displayName = "InternalHeader";
-var texts15 = createTexts({
+var texts16 = createTexts({
   openMenu: {
     nb: "\xC5pne meny",
     no: "\xC5pne meny",
@@ -9060,7 +9147,7 @@ var LocalMessage_default = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment6, jsx as jsx278, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx278, jsxs as jsxs64 } from "react/jsx-runtime";
 var icons2 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -9084,9 +9171,9 @@ var LocalMessage = ({
   const { t } = useTranslation();
   const [isClosed, setClosed] = useState20(false);
   if (isClosed) {
-    return /* @__PURE__ */ jsx278(Fragment6, {});
+    return /* @__PURE__ */ jsx278(Fragment7, {});
   }
-  return /* @__PURE__ */ jsxs65(
+  return /* @__PURE__ */ jsxs64(
     Box,
     {
       ...getBaseHTMLProps(
@@ -9122,7 +9209,7 @@ var LocalMessage = ({
             purpose: "tertiary",
             onClick: () => {
               setClosed(true);
-              onClose && onClose();
+              onClose == null ? void 0 : onClose();
             },
             size: "xsmall",
             "aria-label": t(commonTexts.closeMessage),
@@ -9139,7 +9226,7 @@ LocalMessage.displayName = "LocalMessage";
 import {
   useContext as useContext17,
   useEffect as useEffect24,
-  useId as useId17,
+  useId as useId16,
   useRef as useRef28
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
@@ -9155,7 +9242,7 @@ var Modal_default = {
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx279, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx279, jsxs as jsxs65 } from "react/jsx-runtime";
 var Modal = ({
   isOpen = false,
   parentElement,
@@ -9171,7 +9258,7 @@ var Modal = ({
   ref,
   ...rest
 }) => {
-  const generatedId = useId17();
+  const generatedId = useId16();
   const modalId = id != null ? id : `${generatedId}-modal`;
   const headerId = `${modalId}-header`;
   const modalRef = useFocusTrap(isOpen, initialFocusRef);
@@ -9213,7 +9300,7 @@ var Modal = ({
         isMounted: isOpen && hasTransitionedIn,
         ref: backdropRef,
         onClick: onBackdropClick,
-        children: /* @__PURE__ */ jsxs66(
+        children: /* @__PURE__ */ jsxs65(
           Paper,
           {
             display: "flex",
@@ -9240,7 +9327,7 @@ var Modal = ({
             id: modalId,
             elevation: 4,
             children: [
-              /* @__PURE__ */ jsxs66(
+              /* @__PURE__ */ jsxs65(
                 HStack,
                 {
                   paddingBlock: "0 x0.75",
@@ -9361,7 +9448,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 // src/components/Select/Select.tsx
 import {
   useContext as useContext18,
-  useId as useId18
+  useId as useId17
 } from "react";
 import {
   default as ReactSelect
@@ -9644,10 +9731,11 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
 });
 
 // src/components/Select/SelectComponents.tsx
+import { useMemo as useMemo2 } from "react";
 import {
   components
 } from "react-select";
-import { jsx as jsx282, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx282, jsxs as jsxs66 } from "react/jsx-runtime";
 var {
   Option,
   NoOptionsMessage,
@@ -9668,7 +9756,7 @@ var getIndicatorIconSize = (componentSize) => {
       return "small";
   }
 };
-var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs67(Option, { ...props, children: [
+var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs66(Option, { ...props, children: [
   props.isSelected && /* @__PURE__ */ jsx282(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
@@ -9696,38 +9784,48 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx282(
     "aria-describedby": ariaDescribedby
   }
 );
-var DDSControl = (props, componentSize, readOnly, icon, dataTestId) => {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx282("div", { "data-testid": dataTestId ? dataTestId + "-control" : void 0, children: /* @__PURE__ */ jsxs67(
-    Control,
-    {
-      ...rest,
-      className: cn(
-        className,
-        Select_default.control,
-        rest.isDisabled && Select_default["control--disabled"],
-        readOnly && Select_default["control--readonly"]
-      ),
-      children: [
-        icon && /* @__PURE__ */ jsx282(
-          Icon,
-          {
-            icon,
-            iconSize: getFormInputIconSize(componentSize),
-            className: cn(
-              Input_default["input-group__absolute-element"],
-              Select_default[`icon--${componentSize}`]
-            )
-          }
+function createDDSControl(componentSize, readOnly, icon, dataTestId) {
+  return function DDSControlWrapper(props) {
+    const { className, children, innerProps, ...rest } = props;
+    return /* @__PURE__ */ jsxs66(
+      Control,
+      {
+        ...rest,
+        innerProps: {
+          ...innerProps,
+          "data-testid": dataTestId ? dataTestId + "-control" : void 0
+        },
+        className: cn(
+          className,
+          Select_default.control,
+          rest.isDisabled && Select_default["control--disabled"],
+          readOnly && Select_default["control--readonly"]
         ),
-        props.children
-      ]
-    }
-  ) });
-};
+        children: [
+          icon && /* @__PURE__ */ jsx282(
+            Icon,
+            {
+              icon,
+              iconSize: getFormInputIconSize(componentSize),
+              className: cn(
+                Input_default["input-group__absolute-element"],
+                Select_default[`icon--${componentSize}`]
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  };
+}
+var DDSControl = (componentSize, readOnly, icon, dataTestId) => useMemo2(
+  () => createDDSControl(componentSize, readOnly, icon, dataTestId),
+  [componentSize, readOnly, icon, dataTestId]
+);
 
 // src/components/Select/Select.tsx
-import { jsx as jsx283, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx283, jsxs as jsxs67 } from "react/jsx-runtime";
 function Select({
   id,
   label,
@@ -9763,7 +9861,7 @@ function Select({
     throw new Error("Select must be used within a ThemeProvider");
   }
   const portalTarget = menuPortalTarget != null ? menuPortalTarget : themeContext == null ? void 0 : themeContext.el;
-  const generatedId = useId18();
+  const generatedId = useId17();
   const uniqueId = id != null ? id : `${generatedId}-select`;
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasLabel = !!label;
@@ -9819,7 +9917,7 @@ function Select({
       ClearIndicator: (props) => DDSClearIndicator(props, componentSize),
       DropdownIndicator: (props) => DDSDropdownIndicator(props, componentSize),
       MultiValueRemove: DDSMultiValueRemove,
-      Control: (props) => DDSControl(props, componentSize, readOnly, icon, dataTestId)
+      Control: DDSControl(componentSize, readOnly, icon, dataTestId)
     },
     "aria-invalid": hasErrorMessage ? true : void 0,
     required,
@@ -9827,7 +9925,7 @@ function Select({
     openMenuOnClick: readOnly ? false : openMenuOnClick ? openMenuOnClick : void 0,
     ...rest
   };
-  return /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs67(
     Box,
     {
       width: inputWidth,
@@ -9859,7 +9957,7 @@ function Select({
 Select.displayName = "Select";
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-import { useId as useId19 } from "react";
+import { useId as useId18 } from "react";
 
 // src/components/Select/NativeSelect/NativeSelect.module.css
 var NativeSelect_default = {
@@ -9873,7 +9971,7 @@ var NativeSelect_default = {
 };
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-import { jsx as jsx284, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx284, jsxs as jsxs68 } from "react/jsx-runtime";
 var NativeSelect = ({
   id,
   children,
@@ -9893,7 +9991,7 @@ var NativeSelect = ({
   onMouseDown,
   ...rest
 }) => {
-  const generatedId = useId19();
+  const generatedId = useId18();
   const uniqueId = id != null ? id : `${generatedId}-native-select`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -9905,7 +10003,7 @@ var NativeSelect = ({
     width,
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
-  return /* @__PURE__ */ jsxs69("div", { className, style, children: [
+  return /* @__PURE__ */ jsxs68("div", { className, style, children: [
     hasLabel && /* @__PURE__ */ jsx284(
       Label,
       {
@@ -9916,7 +10014,7 @@ var NativeSelect = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs69(Box, { position: "relative", width: inputWidth, children: [
+    /* @__PURE__ */ jsxs68(Box, { position: "relative", width: inputWidth, children: [
       /* @__PURE__ */ jsx284(
         "select",
         {
@@ -9971,7 +10069,7 @@ NativeSelectPlaceholder.displayName = "NativeSelectPlaceholder";
 var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }));
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx285, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx285, jsxs as jsxs69 } from "react/jsx-runtime";
 var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
@@ -10000,7 +10098,7 @@ var Pagination = ({
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
   const onPageChange = (event, page) => {
-    page && setActivePage(page);
+    if (page) setActivePage(page);
     if (event && onChange) {
       onChange(event, page);
     }
@@ -10023,7 +10121,7 @@ var Pagination = ({
         onClick: (event) => {
           onPageChange(event, item);
         },
-        "aria-label": isActive ? t(texts16.currentPage(item)) : t(texts16.page(item)),
+        "aria-label": isActive ? t(texts17.currentPage(item)) : t(texts17.page(item)),
         children: item
       }
     ) : /* @__PURE__ */ jsx285(
@@ -10043,7 +10141,7 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage - 1);
       },
-      "aria-label": t(texts16.previousPage)
+      "aria-label": t(texts17.previousPage)
     }
   );
   const nextPageButton = /* @__PURE__ */ jsx285(
@@ -10055,24 +10153,24 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage + 1);
       },
-      "aria-label": t(texts16.nextPage)
+      "aria-label": t(texts17.nextPage)
     }
   );
   const isOnFirstPage = activePage === 1;
   const isOnLastPage = activePage === pagesLength;
-  const navigation = withPagination ? /* @__PURE__ */ jsxs70(
+  const navigation = withPagination ? /* @__PURE__ */ jsxs69(
     Box,
     {
       as: "nav",
       ref,
-      "aria-label": t(texts16.pagination),
+      "aria-label": t(texts17.pagination),
       display: "flex",
       alignItems: "center",
       ...!withSelect && !withCounter && {
         ...getBaseHTMLProps(id, className, htmlProps, rest)
       },
       children: [
-        /* @__PURE__ */ jsxs70(
+        /* @__PURE__ */ jsxs69(
           ShowHide,
           {
             as: "ol",
@@ -10105,7 +10203,7 @@ var Pagination = ({
             ]
           }
         ),
-        !!smallScreenBreakpoint && /* @__PURE__ */ jsxs70(
+        !!smallScreenBreakpoint && /* @__PURE__ */ jsxs69(
           ShowHide,
           {
             as: "ol",
@@ -10129,7 +10227,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, 1);
                       },
-                      "aria-label": t(texts16.firstPage)
+                      "aria-label": t(texts17.firstPage)
                     }
                   )
                 }
@@ -10183,7 +10281,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, pagesLength);
                       },
-                      "aria-label": t(texts16.lastPage)
+                      "aria-label": t(texts17.lastPage)
                     }
                   )
                 }
@@ -10196,7 +10294,7 @@ var Pagination = ({
   ) : null;
   const activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
   const activePageLastItem = activePage === pagesLength ? itemsAmount : activePage * itemsPerPage;
-  return !withCounter && !withSelect ? navigation : /* @__PURE__ */ jsxs70(
+  return !withCounter && !withSelect ? navigation : /* @__PURE__ */ jsxs69(
     Box,
     {
       display: "flex",
@@ -10207,7 +10305,7 @@ var Pagination = ({
       alignItems: applyResponsiveStyle("center", smallScreenBreakpoint),
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       children: [
-        /* @__PURE__ */ jsxs70("div", { className: Pagination_default.indicators, children: [
+        /* @__PURE__ */ jsxs69("div", { className: Pagination_default.indicators, children: [
           withSelect && /* @__PURE__ */ jsx285(
             Select,
             {
@@ -10221,11 +10319,11 @@ var Pagination = ({
               isClearable: false,
               onChange: handleSelectChange,
               componentSize: "small",
-              "aria-label": t(texts16.itemsPerPage)
+              "aria-label": t(texts17.itemsPerPage)
             }
           ),
           withCounter && /* @__PURE__ */ jsx285(Paragraph, { children: t(
-            texts16.showsAmountOfTotalItems(
+            texts17.showsAmountOfTotalItems(
               activePageFirstItem,
               activePageLastItem,
               itemsAmount
@@ -10238,7 +10336,7 @@ var Pagination = ({
   );
 };
 Pagination.displayName = "Pagination";
-var texts16 = createTexts({
+var texts17 = createTexts({
   pagination: {
     nb: "Paginering",
     no: "Paginering",
@@ -10298,7 +10396,7 @@ var texts16 = createTexts({
 // src/components/PhoneInput/PhoneInput.tsx
 import {
   useEffect as useEffect25,
-  useId as useId20,
+  useId as useId19,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef29,
   useState as useState22
@@ -10702,7 +10800,7 @@ var PhoneInput_default = {
 };
 
 // src/components/PhoneInput/PhoneInput.tsx
-import { jsx as jsx286, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx286, jsxs as jsxs70 } from "react/jsx-runtime";
 var prioritizedCountries = [
   COUNTRIES.NO,
   COUNTRIES.SE,
@@ -10761,9 +10859,9 @@ var PhoneInput = ({
 }) => {
   var _a;
   const { t } = useTranslation();
-  const tGroupLabel = groupLabel != null ? groupLabel : t(texts17.countryCodeAndPhoneNumber);
-  const tSelectLabel = selectLabel != null ? selectLabel : t(texts17.countryCode);
-  const generatedId = useId20();
+  const tGroupLabel = groupLabel != null ? groupLabel : t(texts18.countryCodeAndPhoneNumber);
+  const tSelectLabel = selectLabel != null ? selectLabel : t(texts18.countryCode);
+  const generatedId = useId19();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
   const phoneNumberId = `${uniqueId}-phone-number`;
@@ -10840,7 +10938,7 @@ var PhoneInput = ({
   const showRequiredStyling = !!(required || ariaRequired);
   const bp = props.smallScreenBreakpoint;
   const widthDefault = componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)";
-  return /* @__PURE__ */ jsxs71("div", { className: cn(className, Input_default.container), style, children: [
+  return /* @__PURE__ */ jsxs70("div", { className: cn(className, Input_default.container), style, children: [
     hasLabel && /* @__PURE__ */ jsx286(
       Label,
       {
@@ -10851,7 +10949,7 @@ var PhoneInput = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs71(
+    /* @__PURE__ */ jsxs70(
       Box,
       {
         display: "flex",
@@ -10889,7 +10987,7 @@ var PhoneInput = ({
               children: countryOptions.map((item, index) => /* @__PURE__ */ jsx286("option", { value: item.countryCode, children: item.label }, index))
             }
           ),
-          /* @__PURE__ */ jsxs71(Box, { width: "100%", className: Input_default["input-group"], children: [
+          /* @__PURE__ */ jsxs70(Box, { width: "100%", className: Input_default["input-group"], children: [
             /* @__PURE__ */ jsx286(
               "span",
               {
@@ -10940,7 +11038,7 @@ var getCallingCode = (s) => {
   var _a;
   return (_a = s.substring(s.indexOf("+"), s.length)) != null ? _a : "";
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   countryCode: {
     nb: "Landskode",
     no: "Landskode",
@@ -10959,7 +11057,7 @@ var texts17 = createTexts({
 import {
   useContext as useContext20,
   useEffect as useEffect26,
-  useId as useId21
+  useId as useId20
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
@@ -10980,7 +11078,7 @@ var PopoverContext = createContext13({});
 var usePopoverContext = () => useContext19(PopoverContext);
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx287, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx287, jsxs as jsxs71 } from "react/jsx-runtime";
 var Popover = ({
   id,
   header,
@@ -11020,7 +11118,7 @@ var Popover = ({
   } = context;
   const { t } = useTranslation();
   const hasContext = !isEmpty(context);
-  const generatedId = useId21();
+  const generatedId = useId20();
   const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
   const [
     popoverId,
@@ -11058,7 +11156,7 @@ var Popover = ({
   );
   const multiRef = useCombinedRef(ref, popoverRef, floatingRef);
   useEffect26(() => {
-    setFloatOptions && setFloatOptions({ placement, offset });
+    setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
   useOnClickOutside([popoverRef.current, anchorEl], () => {
     if (isOpen && !hasContext) onClose == null ? void 0 : onClose();
@@ -11068,7 +11166,7 @@ var Popover = ({
   });
   const hasTitle = !!header;
   const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
-  const popover = /* @__PURE__ */ jsxs72(
+  const popover = /* @__PURE__ */ jsxs71(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -11130,7 +11228,7 @@ import {
   Children as ReactChildren4,
   cloneElement as cloneElement4,
   isValidElement as isValidElement4,
-  useId as useId22,
+  useId as useId21,
   useRef as useRef30,
   useState as useState23
 } from "react";
@@ -11148,17 +11246,17 @@ var PopoverGroup = ({
   const [internalIsOpen, internalSetIsOpen] = useState23(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = useId22();
+  const generatedId = useId21();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
   const [floatOptions, setFloatOptions] = useState23();
   const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
   const handleClose = () => {
     setOpen(false);
-    onClose && onClose();
+    onClose == null ? void 0 : onClose();
   };
   const handleOpen = () => {
     setOpen(true);
-    onOpen && onOpen();
+    onOpen == null ? void 0 : onOpen();
   };
   const handleToggle = () => {
     if (open) {
@@ -11219,7 +11317,7 @@ import {
   cloneElement as cloneElement5,
   isValidElement as isValidElement5,
   useEffect as useEffect27,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useState as useState24
 } from "react";
 
@@ -11256,8 +11354,8 @@ var ProgressTracker_default = {
 };
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
-import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment7, jsx as jsx289, jsxs as jsxs73 } from "react/jsx-runtime";
+import { useMemo as useMemo3 } from "react";
+import { Fragment as Fragment8, jsx as jsx289, jsxs as jsxs72 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -11294,11 +11392,11 @@ var ProgressTrackerItem = (props) => {
   const itemState = toItemState(active, completed, disabled);
   const handleClick = () => {
     if (!disabled) {
-      onClick && onClick(index);
-      handleStepChange && handleStepChange(index);
+      onClick == null ? void 0 : onClick(index);
+      handleStepChange == null ? void 0 : handleStepChange(index);
     }
   };
-  const stepNumberContent = useMemo2(() => {
+  const stepNumberContent = useMemo3(() => {
     if (completed) {
       return /* @__PURE__ */ jsx289(Icon, { icon: CheckIcon, iconSize: "small" });
     }
@@ -11307,7 +11405,7 @@ var ProgressTrackerItem = (props) => {
     }
     return index + 1;
   }, [completed, icon, index]);
-  const stepContent = /* @__PURE__ */ jsxs73(Fragment7, { children: [
+  const stepContent = /* @__PURE__ */ jsxs72(Fragment8, { children: [
     /* @__PURE__ */ jsx289(
       Box,
       {
@@ -11323,7 +11421,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ jsxs73(
+    /* @__PURE__ */ jsxs72(
       "div",
       {
         className: cn(
@@ -11332,9 +11430,9 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-medium"]
         ),
         children: [
-          /* @__PURE__ */ jsx289(VisuallyHidden, { children: t(texts18.stepTextBefore(index + 1)) }),
+          /* @__PURE__ */ jsx289(VisuallyHidden, { children: t(texts19.stepTextBefore(index + 1)) }),
           children,
-          /* @__PURE__ */ jsx289(VisuallyHidden, { children: completed ? t(texts18.completed) : t(texts18.uncompleted) })
+          /* @__PURE__ */ jsx289(VisuallyHidden, { children: completed ? t(texts19.completed) : t(texts19.uncompleted) })
         ]
       }
     )
@@ -11375,7 +11473,7 @@ var ProgressTrackerItem = (props) => {
   );
 };
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
-var texts18 = createTexts({
+var texts19 = createTexts({
   stepTextBefore: (index) => ({
     nb: `${index}. trinn, `,
     no: `${index}. trinn, `,
@@ -11413,14 +11511,14 @@ var ProgressTracker = (() => {
     const [thisActiveStep, setActiveStep] = useState24(activeStep);
     const handleChange = (step) => {
       setActiveStep(step);
-      onStepChange && onStepChange(step);
+      onStepChange == null ? void 0 : onStepChange(step);
     };
     useEffect27(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
     }, [activeStep, thisActiveStep]);
-    const steps = useMemo3(() => {
+    const steps = useMemo4(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
       return itemsWithIndex;
@@ -11438,7 +11536,7 @@ var ProgressTracker = (() => {
         children: /* @__PURE__ */ jsx290(
           "nav",
           {
-            "aria-label": ariaLabel != null ? ariaLabel : t(texts19.stepProgression),
+            "aria-label": ariaLabel != null ? ariaLabel : t(texts20.stepProgression),
             ...getBaseHTMLProps(id, className, htmlProps, rest),
             children: /* @__PURE__ */ jsx290(
               Box,
@@ -11476,7 +11574,7 @@ function passIndexPropToProgressTrackerItem(children) {
     })
   );
 }
-var texts19 = createTexts({
+var texts20 = createTexts({
   stepProgression: {
     nb: "Stegprogresjon",
     no: "Stegprogresjon",
@@ -11486,7 +11584,7 @@ var texts19 = createTexts({
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { useId as useId23 } from "react";
+import { useId as useId22 } from "react";
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -11499,7 +11597,7 @@ var ProgressBar_default = {
 };
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx291, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx291, jsxs as jsxs73 } from "react/jsx-runtime";
 var ProgressBar = ({
   label,
   tip,
@@ -11514,7 +11612,7 @@ var ProgressBar = ({
   style,
   ...rest
 }) => {
-  const generatedId = useId23();
+  const generatedId = useId22();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -11525,7 +11623,7 @@ var ProgressBar = ({
   const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
   const fillPrecentage = hasValidValue && value / (max != null ? max : 1) * 100 + "%";
   const isIndeterminate = !hasValidValue && !hasErrorMessage;
-  return /* @__PURE__ */ jsxs74(Box, { width: "100%", className, style, children: [
+  return /* @__PURE__ */ jsxs73(Box, { width: "100%", className, style, children: [
     hasLabel ? /* @__PURE__ */ jsx291(Label, { htmlFor: uniqueId, children: label }) : void 0,
     /* @__PURE__ */ jsx291(
       "progress",
@@ -11571,7 +11669,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
 import {
-  useId as useId24,
+  useId as useId23,
   useState as useState25
 } from "react";
 
@@ -11600,30 +11698,6 @@ var typographyTypes2 = {
   medium: "bodyMedium",
   large: "bodyLarge"
 };
-function createEmptyChangeEvent(inputElementId) {
-  const inputElement = document.getElementById(
-    inputElementId
-  );
-  inputElement.value = "";
-  const emptyChangeEvent = {
-    target: inputElement,
-    currentTarget: inputElement,
-    bubbles: true,
-    cancelable: false,
-    defaultPrevented: false,
-    eventPhase: 0,
-    isTrusted: false,
-    preventDefault: () => null,
-    stopPropagation: () => null,
-    nativeEvent: new Event("input"),
-    persist: () => null,
-    type: "change",
-    timeStamp: Date.now(),
-    isDefaultPrevented: () => false,
-    isPropagationStopped: () => false
-  };
-  return emptyChangeEvent;
-}
 
 // src/components/Search/SearchSuggestionItem.tsx
 import { useEffect as useEffect28, useRef as useRef31 } from "react";
@@ -11660,7 +11734,7 @@ var SearchSuggestionItem = ({
 SearchSuggestionItem.displayName = "SearchSuggestionItem";
 
 // src/components/Search/SearchSuggestions.tsx
-import { jsx as jsx293, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx293, jsxs as jsxs74 } from "react/jsx-runtime";
 var SearchSuggestions = ({
   id,
   searchId,
@@ -11680,7 +11754,7 @@ var SearchSuggestions = ({
   const { t } = useTranslation();
   const [focus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, showSuggestions);
   const suggestionsToRender = maxSuggestions ? suggestions == null ? void 0 : suggestions.slice(maxSuggestions) : suggestions;
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs74(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -11720,7 +11794,7 @@ var SearchSuggestions = ({
             {
               index,
               focus: focus === index && showSuggestions,
-              "aria-label": t(texts20.search(suggestion)),
+              "aria-label": t(texts21.search(suggestion)),
               onClick: onSuggestionClick,
               "aria-setsize": suggestionsToRender.length,
               "aria-posinset": index,
@@ -11734,7 +11808,7 @@ var SearchSuggestions = ({
   );
 };
 SearchSuggestions.displayName = "SearchSuggestions";
-var texts20 = createTexts({
+var texts21 = createTexts({
   search: (suggestion) => ({
     no: `${suggestion} s\xF8k`,
     nb: `${suggestion} s\xF8k`,
@@ -11744,7 +11818,7 @@ var texts20 = createTexts({
 });
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment8, jsx as jsx294, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx294, jsxs as jsxs75 } from "react/jsx-runtime";
 var getIconSize2 = (size2) => {
   switch (size2) {
     case "large":
@@ -11791,7 +11865,7 @@ var Search = ({
   ...rest
 }) => {
   var _a;
-  const generatedId = useId24();
+  const generatedId = useId23();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasLabel = !!label;
   const tipId = derivativeIdGenerator(uniqueId, "tip");
@@ -11805,13 +11879,14 @@ var Search = ({
   const context = useAutocompleteSearch();
   const combinedRef = context.inputRef ? useCombinedRef(context.inputRef, ref) : ref;
   const handleChange = (e) => {
+    var _a2;
     setHasValue(e.target.value !== "");
-    context.onValueChange && context.onValueChange(e);
-    onChange && onChange(e);
+    (_a2 = context == null ? void 0 : context.onValueChange) == null ? void 0 : _a2.call(context, e);
+    onChange == null ? void 0 : onChange(e);
   };
   const clearInput = () => {
-    const emptyChangeEvent = createEmptyChangeEvent(uniqueId);
-    handleChange(emptyChangeEvent);
+    const clearChangeEvent = createClearChangeEvent(uniqueId);
+    handleChange(clearChangeEvent);
   };
   const {
     label: buttonLabel,
@@ -11820,7 +11895,7 @@ var Search = ({
   } = buttonProps != null ? buttonProps : {};
   const hasSuggestions = !!context.suggestions;
   const showSearchButton = !!buttonProps && !!onClick;
-  const inputGroup = /* @__PURE__ */ jsxs76(
+  const inputGroup = /* @__PURE__ */ jsxs75(
     HStack,
     {
       position: "relative",
@@ -11867,7 +11942,7 @@ var Search = ({
             )
           }
         ),
-        hasSuggestions && /* @__PURE__ */ jsxs76(Fragment8, { children: [
+        hasSuggestions && /* @__PURE__ */ jsxs75(Fragment9, { children: [
           /* @__PURE__ */ jsx294(
             SearchSuggestions,
             {
@@ -11880,15 +11955,14 @@ var Search = ({
               componentSize
             }
           ),
-          /* @__PURE__ */ jsx294(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts21.useArrowKeys) })
+          /* @__PURE__ */ jsx294(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts22.useArrowKeys) })
         ] }),
         hasValue && /* @__PURE__ */ jsx294(
-          Button,
+          InlineIconButton,
           {
             icon: CloseSmallIcon,
-            size: componentSize === "large" ? "medium" : "small",
-            purpose: "tertiary",
-            "aria-label": t(texts21.clearSearch),
+            size: componentSize === "small" ? "small" : "medium",
+            "aria-label": t(texts22.clearSearch),
             onClick: clearInput,
             className: Search_default["clear-button"]
           }
@@ -11896,10 +11970,10 @@ var Search = ({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs76(VStack, { gap: "x0.125", children: [
+  return /* @__PURE__ */ jsxs75(VStack, { gap: "x0.125", children: [
     hasLabel && /* @__PURE__ */ jsx294(Label, { htmlFor: uniqueId, children: label }),
-    /* @__PURE__ */ jsxs76("div", { children: [
-      showSearchButton ? /* @__PURE__ */ jsxs76(
+    /* @__PURE__ */ jsxs75("div", { children: [
+      showSearchButton ? /* @__PURE__ */ jsxs75(
         Grid,
         {
           className,
@@ -11928,7 +12002,7 @@ var Search = ({
   ] });
 };
 Search.displayName = "Search";
-var texts21 = createTexts({
+var texts22 = createTexts({
   clearSearch: {
     nb: "T\xF8m s\xF8k",
     no: "T\xF8m s\xF8k",
@@ -11999,12 +12073,12 @@ var SearchAutocompleteWrapper = (props) => {
     } else {
       setSuggestions([]);
     }
-    onChange && onChange(e);
+    onChange == null ? void 0 : onChange(e);
   };
   const handleSuggestionClick = (e) => {
     setSuggestions([]);
     handleSetInputValue(e.target.innerText);
-    onSuggestionSelection && onSuggestionSelection();
+    onSuggestionSelection == null ? void 0 : onSuggestionSelection();
     closeSuggestions();
   };
   const handleSetInputValue = (value2) => {
@@ -12104,7 +12178,7 @@ var SplitButton_default = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-import { jsx as jsx298, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx298, jsxs as jsxs76 } from "react/jsx-runtime";
 var SplitButton = ({
   size: size2,
   primaryAction,
@@ -12119,7 +12193,7 @@ var SplitButton = ({
     purpose,
     size: size2
   };
-  return /* @__PURE__ */ jsxs77("div", { className: cn(className, SplitButton_default.container), ...rest, children: [
+  return /* @__PURE__ */ jsxs76("div", { className: cn(className, SplitButton_default.container), ...rest, children: [
     /* @__PURE__ */ jsx298(
       Button,
       {
@@ -12129,13 +12203,13 @@ var SplitButton = ({
         className: SplitButton_default.main
       }
     ),
-    /* @__PURE__ */ jsxs77(OverflowMenuGroup, { isOpen, setIsOpen, children: [
+    /* @__PURE__ */ jsxs76(OverflowMenuGroup, { isOpen, setIsOpen, children: [
       /* @__PURE__ */ jsx298(
         Button,
         {
           ...buttonStyleProps,
           icon: isOpen ? ChevronUpIcon : ChevronDownIcon,
-          "aria-label": t(texts22.moreActions),
+          "aria-label": t(texts23.moreActions),
           purpose,
           className: cn(
             SplitButton_default.option,
@@ -12149,7 +12223,7 @@ var SplitButton = ({
   ] });
 };
 SplitButton.displayName = "SplitButton";
-var texts22 = createTexts({
+var texts23 = createTexts({
   moreActions: {
     nb: "Flere handlinger",
     no: "Flere handlinger",
@@ -12161,7 +12235,7 @@ var texts22 = createTexts({
 // src/components/Table/collapsible/CollapsibleRow.tsx
 import {
   Children as Children4,
-  Fragment as Fragment9,
+  Fragment as Fragment10,
   cloneElement as cloneElement6,
   isValidElement as isValidElement6,
   useEffect as useEffect31,
@@ -12289,7 +12363,7 @@ var Row = ({
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-import { jsx as jsx304, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx304, jsxs as jsxs77 } from "react/jsx-runtime";
 var makeSortIcon = (isSorted, sortOrder) => {
   if (!isSorted || !sortOrder) {
     return /* @__PURE__ */ jsx304(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
@@ -12310,11 +12384,11 @@ var SortCell = ({
       type: "head",
       "aria-sort": isSorted && sortOrder ? sortOrder : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsxs78(
+      children: /* @__PURE__ */ jsxs77(
         StylelessButton,
         {
           onClick,
-          "aria-description": t(texts23.changeSort),
+          "aria-description": t(texts24.changeSort),
           className: cn(Table_default["sort-button"], focusable),
           children: [
             children,
@@ -12327,7 +12401,7 @@ var SortCell = ({
   );
 };
 SortCell.displayName = "Table.SortCell";
-var texts23 = createTexts({
+var texts24 = createTexts({
   changeSort: {
     nb: "Aktiver for \xE5 endre sorteringsrekkef\xF8lge",
     no: "Aktiver for \xE5 endre sorteringsrekkef\xF8lge",
@@ -12421,7 +12495,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment10, jsx as jsx307, jsxs as jsxs79 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx307, jsxs as jsxs78 } from "react/jsx-runtime";
 var CollapsibleRow = ({
   type: _type,
   className,
@@ -12438,7 +12512,7 @@ var CollapsibleRow = ({
   const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
   const [childrenCollapsed, setChildrenCollapsed] = useState29(true);
   useEffect31(() => {
-    !isCollapsed && setChildrenCollapsed(true);
+    if (!isCollapsed) setChildrenCollapsed(true);
   }, [isCollapsed]);
   const rowProps = (isOpenCollapsibleHeader) => {
     return {
@@ -12464,7 +12538,7 @@ var CollapsibleRow = ({
   const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
     const id = derivativeIdGenerator(prefix2, index.toString());
     collapsibleIds.push(id);
-    return /* @__PURE__ */ jsxs79(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs78(Fragment10, { children: [
       /* @__PURE__ */ jsx307(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
       isValidElement6(child) && cloneElement6(child, {
         collapsibleProps: { isCollapsibleChild: true }
@@ -12477,18 +12551,18 @@ var CollapsibleRow = ({
   });
   const headerRow = () => {
     if (type !== "head" || !isCollapsed) return null;
-    return /* @__PURE__ */ jsx307(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs79(Fragment10, { children: [
+    return /* @__PURE__ */ jsx307(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs78(Fragment11, { children: [
       definingColumnCells,
-      /* @__PURE__ */ jsxs79(Table2.Cell, { type: "head", layout: "center", children: [
-        t(texts24.expand),
-        /* @__PURE__ */ jsx307(VisuallyHidden, { children: t(texts24.row) })
+      /* @__PURE__ */ jsxs78(Table2.Cell, { type: "head", layout: "center", children: [
+        t(texts25.expand),
+        /* @__PURE__ */ jsx307(VisuallyHidden, { children: t(texts25.row) })
       ] })
     ] }) });
   };
   const idList = spaceSeparatedIdListGenerator(collapsibleIds);
   const rowWithChevron = () => {
     if (type !== "body" || !isCollapsed) return null;
-    return /* @__PURE__ */ jsxs79(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
+    return /* @__PURE__ */ jsxs78(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
       definingColumnCells,
       /* @__PURE__ */ jsx307(Table2.Cell, { children: /* @__PURE__ */ jsx307(
         StylelessButton,
@@ -12509,16 +12583,16 @@ var CollapsibleRow = ({
       ) })
     ] });
   };
-  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs79(Fragment10, { children: [
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs78(Fragment11, { children: [
     headerRow(),
-    type === "body" && /* @__PURE__ */ jsxs79(Fragment10, { children: [
+    type === "body" && /* @__PURE__ */ jsxs78(Fragment11, { children: [
       rowWithChevron(),
       childrenCollapsed ? null : collapsedRows
     ] })
   ] }) : /* @__PURE__ */ jsx307(Row, { ref, ...rowProps(), children });
 };
 CollapsibleRow.displayName = "CollapsibleTable.Row";
-var texts24 = createTexts({
+var texts25 = createTexts({
   expand: {
     nb: "Utvid",
     no: "Utvid",
@@ -12638,7 +12712,7 @@ function useSetTabWidth(index, width) {
 }
 
 // src/components/Tabs/AddTabButton.tsx
-import { jsx as jsx310, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs79 } from "react/jsx-runtime";
 var AddTabButton = ({
   ref,
   children,
@@ -12651,7 +12725,7 @@ var AddTabButton = ({
   const buttonRef = useRef34(null);
   const combinedRef = useCombinedRef(ref, buttonRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
-  return /* @__PURE__ */ jsxs80(
+  return /* @__PURE__ */ jsxs79(
     "button",
     {
       ...rest,
@@ -12673,7 +12747,7 @@ var AddTabButton = ({
 AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
-import { useEffect as useEffect32, useId as useId25, useRef as useRef35, useState as useState30 } from "react";
+import { useEffect as useEffect32, useId as useId24, useRef as useRef35, useState as useState30 } from "react";
 import { jsx as jsx311 } from "react/jsx-runtime";
 var Tabs = ({
   id,
@@ -12688,7 +12762,7 @@ var Tabs = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId25();
+  const generatedId = useId24();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
   const [thisActiveTab, setActiveTab] = useState30(activeTab != null ? activeTab : 0);
   const [hasTabFocus, setHasTabFocus] = useState30(false);
@@ -12696,7 +12770,7 @@ var Tabs = ({
   const tabPanelsRef = useRef35(null);
   const handleTabChange = (index) => {
     setActiveTab(index);
-    onChange && onChange(index);
+    onChange == null ? void 0 : onChange(index);
   };
   useEffect32(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
@@ -12742,7 +12816,7 @@ import {
   useEffect as useEffect33,
   useRef as useRef36
 } from "react";
-import { jsx as jsx312, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx312, jsxs as jsxs80 } from "react/jsx-runtime";
 var Tab = ({
   active = false,
   icon,
@@ -12784,7 +12858,7 @@ var Tab = ({
     handleSelect();
     onKeyDown == null ? void 0 : onKeyDown(e);
   };
-  return /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs80(
     "button",
     {
       ...getBaseHTMLProps(
@@ -12823,7 +12897,7 @@ import {
   isValidElement as isValidElement7,
   useState as useState31
 } from "react";
-import { jsx as jsx313, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx313, jsxs as jsxs81 } from "react/jsx-runtime";
 var TabList = ({
   children,
   id,
@@ -12866,7 +12940,7 @@ var TabList = ({
   const [widths, setWidths] = useState31([]);
   const handleOnFocus = (event) => {
     setHasTabFocus(true);
-    onFocus && onFocus(event);
+    onFocus == null ? void 0 : onFocus(event);
   };
   const handleOnBlur = (event) => {
     var _a;
@@ -12881,7 +12955,7 @@ var TabList = ({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tab-widths"]: widths.join(" ")
   };
-  return /* @__PURE__ */ jsx313(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsx313(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsxs81(
     "div",
     {
       ...rest,
@@ -12978,7 +13052,7 @@ var Tag_default = {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx316, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx316, jsxs as jsxs82 } from "react/jsx-runtime";
 var icons3 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -12998,7 +13072,7 @@ var Tag = ({
   ...rest
 }) => {
   const icon = icons3[purpose];
-  return /* @__PURE__ */ jsxs83(
+  return /* @__PURE__ */ jsxs82(
     TextOverflowEllipsisWrapper,
     {
       ...getBaseHTMLProps(
@@ -13023,7 +13097,7 @@ var Tag = ({
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-import { useId as useId26, useLayoutEffect as useLayoutEffect4, useRef as useRef37, useState as useState32 } from "react";
+import { useId as useId25, useLayoutEffect as useLayoutEffect4, useRef as useRef37, useState as useState32 } from "react";
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
@@ -13045,7 +13119,7 @@ var TextInput_default = {
 };
 
 // src/components/TextInput/TextInput.tsx
-import { jsx as jsx317, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx317, jsxs as jsxs83 } from "react/jsx-runtime";
 var TextInput = ({
   label,
   disabled,
@@ -13091,7 +13165,7 @@ var TextInput = ({
       onChange(event);
     }
   };
-  const generatedId = useId26();
+  const generatedId = useId25();
   const uniqueId = id != null ? id : `${generatedId}-textInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -13138,7 +13212,7 @@ var TextInput = ({
   const suffixPaddingInlineEnd = suffixLength ? `calc(var(--dds-spacing-x1) + ${suffixLength}px)` : void 0;
   let extendedInput = null;
   if (hasIcon) {
-    extendedInput = /* @__PURE__ */ jsxs84(Box, { className: Input_default["input-group"], width: inputWidth, children: [
+    extendedInput = /* @__PURE__ */ jsxs83(Box, { className: Input_default["input-group"], width: inputWidth, children: [
       /* @__PURE__ */ jsx317(
         Icon,
         {
@@ -13163,7 +13237,7 @@ var TextInput = ({
       )
     ] });
   } else if (hasAffix) {
-    extendedInput = /* @__PURE__ */ jsxs84(
+    extendedInput = /* @__PURE__ */ jsxs83(
       Box,
       {
         position: "relative",
@@ -13212,7 +13286,7 @@ var TextInput = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs84(
+  return /* @__PURE__ */ jsxs83(
     "div",
     {
       className: cn(
@@ -13236,7 +13310,7 @@ var TextInput = ({
           }
         ),
         extendedInput ? extendedInput : /* @__PURE__ */ jsx317(Box, { as: StatefulInput, width: inputWidth, ...generalInputProps }),
-        hasBottomContainer && /* @__PURE__ */ jsxs84(
+        hasBottomContainer && /* @__PURE__ */ jsxs83(
           Box,
           {
             display: "flex",
@@ -13261,7 +13335,7 @@ var TextInput = ({
 TextInput.displayName = "TextInput";
 
 // src/components/Toggle/Toggle.tsx
-import { useId as useId27 } from "react";
+import { useId as useId26 } from "react";
 
 // src/components/Toggle/Toggle.module.css
 var Toggle_default = {
@@ -13279,7 +13353,7 @@ var Toggle_default = {
 };
 
 // src/components/Toggle/Toggle.tsx
-import { jsx as jsx318, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx318, jsxs as jsxs84 } from "react/jsx-runtime";
 var Toggle = ({
   id,
   children,
@@ -13295,7 +13369,7 @@ var Toggle = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const generatedId = useId27();
+  const generatedId = useId26();
   const uniqueId = id != null ? id : `${generatedId}-toggle`;
   const iconSize = size2 === "large" ? "medium" : "small";
   const [checked, setChecked] = useControllableState({
@@ -13303,7 +13377,7 @@ var Toggle = ({
     defaultValue: defaultChecked != null ? defaultChecked : false,
     onChange
   });
-  return /* @__PURE__ */ jsxs85(
+  return /* @__PURE__ */ jsxs84(
     "label",
     {
       htmlFor: uniqueId,
@@ -13350,7 +13424,7 @@ var Toggle = ({
             iconSize
           }
         ) }) }),
-        /* @__PURE__ */ jsxs85("span", { className: cn(readOnly && Toggle_default["labeltext--readonly"]), children: [
+        /* @__PURE__ */ jsxs84("span", { className: cn(readOnly && Toggle_default["labeltext--readonly"]), children: [
           readOnly && /* @__PURE__ */ jsx318(
             Icon,
             {
@@ -13370,7 +13444,7 @@ var Toggle = ({
 Toggle.displayName = "Toggle";
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { useId as useId28, useState as useState33 } from "react";
+import { useId as useId27, useState as useState33 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
 import { createContext as createContext20, useContext as useContext28 } from "react";
@@ -13395,7 +13469,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx319, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx319, jsxs as jsxs85 } from "react/jsx-runtime";
 var ToggleBar = (props) => {
   const {
     children,
@@ -13410,7 +13484,7 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = useId28();
+  const generatedId = useId27();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
   const [groupValue, setGroupValue] = useState33(value);
   const handleChange = combineHandlers(
@@ -13427,7 +13501,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ jsxs86(
+      children: /* @__PURE__ */ jsxs85(
         VStack,
         {
           ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -13447,8 +13521,8 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-import { useId as useId29 } from "react";
-import { jsx as jsx320, jsxs as jsxs87 } from "react/jsx-runtime";
+import { useId as useId28 } from "react";
+import { jsx as jsx320, jsxs as jsxs86 } from "react/jsx-runtime";
 var typographyTypes3 = {
   large: "bodyLarge",
   medium: "bodyMedium",
@@ -13479,15 +13553,16 @@ var ToggleRadio = ({
   id,
   ...rest
 }) => {
-  const generatedId = useId29();
+  const generatedId = useId28();
   const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
   const group = useToggleBarContext();
   const handleChange = (event) => {
-    onChange && onChange(event);
-    (group == null ? void 0 : group.onChange) && group.onChange(event);
+    var _a;
+    onChange == null ? void 0 : onChange(event);
+    (_a = group == null ? void 0 : group.onChange) == null ? void 0 : _a.call(group, event);
   };
   const contentTypeCn = label ? "with-text" : "just-icon";
-  return /* @__PURE__ */ jsxs87("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
+  return /* @__PURE__ */ jsxs86("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
     /* @__PURE__ */ jsx320(
       "input",
       {
@@ -13510,7 +13585,7 @@ var ToggleRadio = ({
         "aria-labelledby": ariaLabelledBy
       }
     ),
-    /* @__PURE__ */ jsxs87(
+    /* @__PURE__ */ jsxs86(
       Typography,
       {
         as: "span",
@@ -13531,7 +13606,7 @@ var ToggleRadio = ({
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { useId as useId30 } from "react";
+import { useId as useId29 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -13542,7 +13617,7 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { jsx as jsx321, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx321, jsxs as jsxs87 } from "react/jsx-runtime";
 var ToggleButton = ({
   id,
   label,
@@ -13552,10 +13627,10 @@ var ToggleButton = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId30();
+  const generatedId = useId29();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
-  return /* @__PURE__ */ jsxs88(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
+  return /* @__PURE__ */ jsxs87(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
     /* @__PURE__ */ jsx321(
       "input",
       {
@@ -13572,7 +13647,7 @@ var ToggleButton = ({
         type: "checkbox"
       }
     ),
-    /* @__PURE__ */ jsxs88(
+    /* @__PURE__ */ jsxs87(
       "span",
       {
         className: cn(
@@ -13594,8 +13669,8 @@ var ToggleButton = ({
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-import { useId as useId31 } from "react";
-import { jsx as jsx322, jsxs as jsxs89 } from "react/jsx-runtime";
+import { useId as useId30 } from "react";
+import { jsx as jsx322, jsxs as jsxs88 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -13607,9 +13682,9 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId31();
+  const generatedId = useId30();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ jsxs89(
+  return /* @__PURE__ */ jsxs88(
     VStack,
     {
       gap: "x0.5",
@@ -13779,6 +13854,7 @@ export {
   InfoIcon,
   InlineButton,
   InlineEditInput,
+  InlineEditSelect,
   InlineEditTextArea,
   Input,
   InputMessage,