@norges-domstoler/dds-components 21.6.0 → 21.7.0

package/dist/index.js

@@ -185,6 +185,7 @@ __export(index_exports, {
   InfoIcon: () => InfoIcon,
   InlineButton: () => InlineButton,
   InlineEditInput: () => InlineEditInput,
+  InlineEditSelect: () => InlineEditSelect,
   InlineEditTextArea: () => InlineEditTextArea,
   Input: () => Input,
   InputMessage: () => InputMessage,
@@ -607,8 +608,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;
 };
@@ -656,7 +657,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) => {
@@ -669,7 +670,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) => {
@@ -677,7 +678,7 @@ var readOnlyChangeHandler = (readOnly, onChange) => {
     if (readOnly) {
       return;
     }
-    onChange && onChange(evt);
+    onChange == null ? void 0 : onChange(evt);
   };
 };
 var readOnlyClickHandler = (readOnly, onClick) => {
@@ -686,7 +687,7 @@ var readOnlyClickHandler = (readOnly, onClick) => {
       evt.preventDefault();
       return;
     }
-    onClick && onClick(evt);
+    onClick == null ? void 0 : onClick(evt);
   };
 };
 
@@ -831,8 +832,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
@@ -1081,6 +1082,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",
@@ -4689,13 +4691,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], () => {
@@ -4704,7 +4706,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();
     }
@@ -5485,7 +5487,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 = [];
@@ -5861,7 +5863,7 @@ var Chip = ({
   const [isOpen, setIsOpen] = (0, import_react35.useState)(true);
   const onClick = () => {
     setIsOpen(false);
-    onClose && onClose();
+    onClose == null ? void 0 : onClose();
   };
   return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
     "div",
@@ -7578,7 +7580,9 @@ var TextArea = ({
   const [text, setText] = (0, import_react55.useState)(getDefaultText(value, defaultValue));
   (0, import_react55.useEffect)(() => {
     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) => {
@@ -7664,26 +7668,10 @@ var TextArea = ({
 TextArea.displayName = "TextArea";
 
 // src/components/Feedback/utils.tsx
-var import_jsx_runtime249 = require("react/jsx-runtime");
 var getIconSize = (layout) => layout === "vertical" ? "large" : "medium";
-var ThumbIcon = ({ rating, layout, type }) => type === "comment" ? /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
-  Icon,
-  {
-    icon: rating === "positive" ? ThumbUpFilledIcon : ThumbDownFilledIcon,
-    color: "iconActionResting",
-    iconSize: getIconSize(layout)
-  }
-) : /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
-  Icon,
-  {
-    icon: rating === "positive" ? ThumbUpIcon : ThumbDownIcon,
-    color: "iconMedium",
-    iconSize: getIconSize(layout)
-  }
-);
 
 // src/components/Feedback/CommentComponent.tsx
-var import_jsx_runtime250 = require("react/jsx-runtime");
+var import_jsx_runtime249 = require("react/jsx-runtime");
 var CommentComponent = ({
   layout,
   rating,
@@ -7697,15 +7685,22 @@ var CommentComponent = ({
   handleFeedbackTextChange
 }) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(VStack, { gap: "x1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)("span", { className: Feedback_default["rating-submitted-title"], children: [
-      ThumbIcon({ rating, layout, type: "comment" }),
-      /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Paragraph, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(VStack, { gap: "x1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)("span", { className: Feedback_default["rating-submitted-title"], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+        Icon,
+        {
+          icon: rating === "positive" ? ThumbUpFilledIcon : ThumbDownFilledIcon,
+          color: "iconActionResting",
+          iconSize: getIconSize(layout)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(Paragraph, { children: [
         ratingSubmittedTitle,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
       TextArea,
       {
         value: feedbackText,
@@ -7714,7 +7709,7 @@ var CommentComponent = ({
         tip: textAreaTip
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
       Button,
       {
         purpose: "secondary",
@@ -7735,6 +7730,29 @@ var texts9 = createTexts({
   }
 });
 
+// src/components/helpers/InlineIconButton/InlineIconButton.module.css
+var InlineIconButton_default = {
+  button: "InlineIconButton_button"
+};
+
+// src/components/helpers/InlineIconButton/InlineIconButton.tsx
+var import_jsx_runtime250 = require("react/jsx-runtime");
+var InlineIconButton = ({
+  className,
+  size: size2,
+  icon,
+  color,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+  StylelessButton,
+  {
+    className: cn(className, InlineIconButton_default.button, focusable),
+    ...rest,
+    children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Icon, { icon, iconSize: size2, color })
+  }
+);
+InlineIconButton.displayName = "InlineIconButton";
+
 // src/components/Tooltip/Tooltip.tsx
 var import_react56 = require("react");
 
@@ -7775,7 +7793,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);
   };
   (0, import_react56.useEffect)(() => {
     const options = {
@@ -7900,12 +7920,13 @@ var RatingComponent = ({
 }) => {
   const { t } = useTranslation();
   const button = (rating, layout2, tooltip) => /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
-    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__ */ (0, import_jsx_runtime252.jsxs)(
@@ -7968,26 +7989,26 @@ var Feedback = ({
   const tThumbUpTooltip = thumbUpTooltip != null ? thumbUpTooltip : t(texts11.good);
   const tThumbDownTooltip = thumbDownTooltip != null ? thumbDownTooltip : t(texts11.bad);
   (0, import_react57.useEffect)(() => {
-    ratingProp !== void 0 && setRating(ratingProp);
+    if (ratingProp !== void 0) setRating(ratingProp);
   }, [ratingProp]);
   (0, import_react57.useEffect)(() => {
-    feedbackTextProp !== void 0 && setFeedbackText(feedbackTextProp);
+    if (feedbackTextProp !== void 0) setFeedbackText(feedbackTextProp);
   }, [feedbackTextProp]);
   (0, import_react57.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime253.jsx)(
@@ -8447,11 +8468,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
     }),
@@ -8478,7 +8497,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(",") } : {}
@@ -8787,7 +8805,7 @@ var GlobalMessage = ({
             purpose: "tertiary",
             onClick: () => {
               setClosed(true);
-              onClose && onClose();
+              onClose == null ? void 0 : onClose();
             },
             size: "small",
             "aria-label": t(commonTexts.closeMessage)
@@ -8819,7 +8837,7 @@ var InlineButton = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_ru
   }
 );
 
-// src/components/InlineEdit/InlineEditTextArea.tsx
+// src/components/InlineEdit/InlineEditTextArea/InlineEditTextArea.tsx
 var import_react63 = require("react");
 
 // src/components/InlineEdit/InlineEdit.context.tsx
@@ -8885,15 +8903,20 @@ var InlineEditContextProvider = (props) => {
 };
 InlineEditContextProvider.displayName = "InlineEditContextProvider";
 
-// src/components/InlineEdit/InlineTextArea.tsx
+// src/components/InlineEdit/InlineField.tsx
 var import_react62 = require("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
@@ -8919,29 +8942,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
+// 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
 var import_jsx_runtime271 = require("react/jsx-runtime");
-var InlineTextArea = ({
-  id,
-  error,
-  errorMessage,
-  width = "140px",
-  "aria-describedby": ariaDescribedby,
-  hideIcon,
-  ref,
-  ...rest
-}) => {
+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 = (0, import_react62.useId)();
-  const uniqueId = id != null ? id : `${genereatedId}-InlineTextArea`;
+  const { t } = useTranslation();
+  const generatedId = (0, import_react62.useId)();
+  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 = (0, import_react62.useRef)(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__ */ (0, import_jsx_runtime271.jsx)(
+          "input",
+          {
+            ...rest,
+            ref: combinedRef,
+            ...commonProps,
+            className: cn(className, ...inlineInputCns(...cnArgs))
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
+          "textarea",
+          {
+            ...rest,
+            ref: combinedRef,
+            ...commonProps,
+            className: cn(className, ...inlineTextareaCns(...cnArgs))
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(import_jsx_runtime271.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
+            "select",
+            {
+              ...rest,
+              ref: combinedRef,
+              ...commonProps,
+              className: cn(className, ...inlineSelectCns(...cnArgs, hasValue))
+            }
+          ),
+          hasValue && emptiable && /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
+            InlineIconButton,
+            {
+              "aria-label": t(texts15.clearSelect),
+              onClick: clearInput,
+              icon: CloseSmallIcon,
+              size: "small",
+              className: InlineEdit_default["clear-button"]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
+            Icon,
+            {
+              icon: ChevronDownIcon,
+              iconSize: "small",
+              className: InlineEdit_default.chevron
+            }
+          )
+        ] });
+      default:
+        return null;
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(Box, { position: "relative", width, children: [
     /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)("div", { className: Input_default["input-group"], children: [
       !isEditing && !hideIcon && /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
@@ -8949,47 +9096,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__ */ (0, import_jsx_runtime271.jsx)(Icon, { icon: EditIcon, iconSize: "small" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
-        "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
 var import_jsx_runtime272 = require("react/jsx-runtime");
 var InlineEditTextArea = ({
   onSetValue,
@@ -9013,85 +9141,45 @@ var InlineEditTextArea = ({
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(InlineTextArea, { ref: combinedRef, ...rest })
+      children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(InlineField, { elementType: "textarea", ...rest, ref: combinedRef })
     }
   );
 };
 
-// src/components/InlineEdit/InlineEditInput.tsx
-var import_react65 = require("react");
-
-// src/components/InlineEdit/InlineInput.tsx
+// src/components/InlineEdit/InlineEditInput/InlineEditInput.tsx
 var import_react64 = require("react");
 var import_jsx_runtime273 = require("react/jsx-runtime");
-var InlineInput = ({
-  id,
-  error,
-  errorMessage,
-  width = "140px",
-  "aria-describedby": ariaDescribedby,
-  hideIcon,
+var InlineEditInput = ({
+  onSetValue,
+  emptiable,
+  value,
+  onFocus,
+  onChange,
+  onBlur,
   ref,
   ...rest
 }) => {
-  const { onBlur, onChange, onFocus, isEditing, value, emptiable } = useInlineEditContext();
-  const genereatedId = (0, import_react64.useId)();
-  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 = (0, import_react64.useRef)(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(Box, { position: "relative", width, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)("div", { className: Input_default["input-group"], children: [
-      !isEditing && !hideIcon && /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
-        "span",
-        {
-          onClick: () => {
-            var _a;
-            (_a = inputRef.current) == null ? void 0 : _a.focus();
-          },
-          className: InlineEdit_default["icon-wrapper"],
-          children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Icon, { icon: EditIcon, iconSize: "small" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
-        "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__ */ (0, import_jsx_runtime273.jsx)(
+    InlineEditContextProvider,
+    {
+      onSetValue,
+      emptiable,
+      inputRef,
+      value,
+      onFocus,
+      onChange,
+      onBlur,
+      children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(InlineField, { elementType: "input", ...rest, ref: combinedRef })
+    }
+  );
 };
-InlineInput.displayName = "InlineInput";
 
-// src/components/InlineEdit/InlineEditInput.tsx
+// src/components/InlineEdit/InlineEditSelect/InlineEditSelect.tsx
+var import_react65 = require("react");
 var import_jsx_runtime274 = require("react/jsx-runtime");
-var InlineEditInput = ({
+var InlineEditSelect = ({
   onSetValue,
   emptiable,
   value,
@@ -9113,7 +9201,7 @@ var InlineEditInput = ({
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(InlineInput, { ...rest, ref: combinedRef })
+      children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(InlineField, { elementType: "select", ...rest, ref: combinedRef })
     }
   );
 };
@@ -9180,7 +9268,7 @@ var InternalHeader = (props) => {
   const hasContextMenuElements = !!contextMenuItems && contextMenuItems.length > 0;
   const hasSmallScreenBreakpoint = !!smallScreenBreakpoint;
   const hasNavInContextMenu = hasSmallScreenBreakpoint && hasNavigationElements;
-  const navigation = hasNavigationElements ? /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("nav", { "aria-label": t(texts15.siteNavigation), children: /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(
+  const navigation = hasNavigationElements ? /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("nav", { "aria-label": t(texts16.siteNavigation), children: /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(
     ShowHide,
     {
       as: StylelessList,
@@ -9244,7 +9332,7 @@ var InternalHeader = (props) => {
                 {
                   icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
                   purpose: "tertiary",
-                  "aria-label": t(texts15.openMenu)
+                  "aria-label": t(texts16.openMenu)
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime276.jsxs)(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
@@ -9253,7 +9341,7 @@ var InternalHeader = (props) => {
                   ShowHide,
                   {
                     as: "nav",
-                    "aria-label": t(texts15.siteNavigation),
+                    "aria-label": t(texts16.siteNavigation),
                     showBelow: smallScreenBreakpoint,
                     children: /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(OverflowMenuList, { children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(OverflowMenuLink, { ...item })) })
                   }
@@ -9282,7 +9370,7 @@ var InternalHeader = (props) => {
   );
 };
 InternalHeader.displayName = "InternalHeader";
-var texts15 = createTexts({
+var texts16 = createTexts({
   openMenu: {
     nb: "\xC5pne meny",
     no: "\xC5pne meny",
@@ -9422,7 +9510,7 @@ var LocalMessage = ({
             purpose: "tertiary",
             onClick: () => {
               setClosed(true);
-              onClose && onClose();
+              onClose == null ? void 0 : onClose();
             },
             size: "xsmall",
             "aria-label": t(commonTexts.closeMessage),
@@ -9609,7 +9697,7 @@ var ModalActions = (props) => /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(Box
 ModalActions.displayName = "ModalActions";
 
 // src/components/Pagination/Pagination.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 
 // src/components/Pagination/Pagination.module.css
 var Pagination_default = {
@@ -9654,7 +9742,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 // src/components/Select/Select.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_react_select2 = __toESM(require("react-select"));
 
 // src/components/Select/Select.module.css
@@ -9934,6 +10022,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
 });
 
 // src/components/Select/SelectComponents.tsx
+var import_react69 = require("react");
 var import_react_select = require("react-select");
 var import_jsx_runtime283 = require("react/jsx-runtime");
 var {
@@ -9984,35 +10073,45 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ (0, impo
     "aria-describedby": ariaDescribedby
   }
 );
-var DDSControl = (props, componentSize, readOnly, icon, dataTestId) => {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)("div", { "data-testid": dataTestId ? dataTestId + "-control" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(
-    Control,
-    {
-      ...rest,
-      className: cn(
-        className,
-        Select_default.control,
-        rest.isDisabled && Select_default["control--disabled"],
-        readOnly && Select_default["control--readonly"]
-      ),
-      children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
-          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__ */ (0, import_jsx_runtime283.jsxs)(
+      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__ */ (0, import_jsx_runtime283.jsx)(
+            Icon,
+            {
+              icon,
+              iconSize: getFormInputIconSize(componentSize),
+              className: cn(
+                Input_default["input-group__absolute-element"],
+                Select_default[`icon--${componentSize}`]
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  };
+}
+var DDSControl = (componentSize, readOnly, icon, dataTestId) => (0, import_react69.useMemo)(
+  () => createDDSControl(componentSize, readOnly, icon, dataTestId),
+  [componentSize, readOnly, icon, dataTestId]
+);
 
 // src/components/Select/Select.tsx
 var import_jsx_runtime284 = require("react/jsx-runtime");
@@ -10046,12 +10145,12 @@ function Select({
   ref,
   ...rest
 }) {
-  const themeContext = (0, import_react69.useContext)(ThemeContext);
+  const themeContext = (0, import_react70.useContext)(ThemeContext);
   if (!themeContext) {
     throw new Error("Select must be used within a ThemeProvider");
   }
   const portalTarget = menuPortalTarget != null ? menuPortalTarget : themeContext == null ? void 0 : themeContext.el;
-  const generatedId = (0, import_react69.useId)();
+  const generatedId = (0, import_react70.useId)();
   const uniqueId = id != null ? id : `${generatedId}-select`;
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasLabel = !!label;
@@ -10107,7 +10206,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,
@@ -10147,7 +10246,7 @@ function Select({
 Select.displayName = "Select";
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 
 // src/components/Select/NativeSelect/NativeSelect.module.css
 var NativeSelect_default = {
@@ -10181,7 +10280,7 @@ var NativeSelect = ({
   onMouseDown,
   ...rest
 }) => {
-  const generatedId = (0, import_react70.useId)();
+  const generatedId = (0, import_react71.useId)();
   const uniqueId = id != null ? id : `${generatedId}-native-select`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -10283,12 +10382,12 @@ var Pagination = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [activePage, setActivePage] = (0, import_react71.useState)(defaultActivePage);
-  const [itemsPerPage, setItemsPerPage] = (0, import_react71.useState)(defaultItemsPerPage);
+  const [activePage, setActivePage] = (0, import_react72.useState)(defaultActivePage);
+  const [itemsPerPage, setItemsPerPage] = (0, import_react72.useState)(defaultItemsPerPage);
   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);
     }
@@ -10311,7 +10410,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__ */ (0, import_jsx_runtime286.jsx)(
@@ -10331,7 +10430,7 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage - 1);
       },
-      "aria-label": t(texts16.previousPage)
+      "aria-label": t(texts17.previousPage)
     }
   );
   const nextPageButton = /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
@@ -10343,7 +10442,7 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage + 1);
       },
-      "aria-label": t(texts16.nextPage)
+      "aria-label": t(texts17.nextPage)
     }
   );
   const isOnFirstPage = activePage === 1;
@@ -10353,7 +10452,7 @@ var Pagination = ({
     {
       as: "nav",
       ref,
-      "aria-label": t(texts16.pagination),
+      "aria-label": t(texts17.pagination),
       display: "flex",
       alignItems: "center",
       ...!withSelect && !withCounter && {
@@ -10417,7 +10516,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, 1);
                       },
-                      "aria-label": t(texts16.firstPage)
+                      "aria-label": t(texts17.firstPage)
                     }
                   )
                 }
@@ -10471,7 +10570,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, pagesLength);
                       },
-                      "aria-label": t(texts16.lastPage)
+                      "aria-label": t(texts17.lastPage)
                     }
                   )
                 }
@@ -10509,11 +10608,11 @@ var Pagination = ({
               isClearable: false,
               onChange: handleSelectChange,
               componentSize: "small",
-              "aria-label": t(texts16.itemsPerPage)
+              "aria-label": t(texts17.itemsPerPage)
             }
           ),
           withCounter && /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(Paragraph, { children: t(
-            texts16.showsAmountOfTotalItems(
+            texts17.showsAmountOfTotalItems(
               activePageFirstItem,
               activePageLastItem,
               itemsAmount
@@ -10526,7 +10625,7 @@ var Pagination = ({
   );
 };
 Pagination.displayName = "Pagination";
-var texts16 = createTexts({
+var texts17 = createTexts({
   pagination: {
     nb: "Paginering",
     no: "Paginering",
@@ -10584,7 +10683,7 @@ var texts16 = createTexts({
 });
 
 // src/components/PhoneInput/PhoneInput.tsx
-var import_react72 = require("react");
+var import_react73 = require("react");
 
 // src/components/PhoneInput/constants.ts
 var COUNTRIES = {
@@ -11043,9 +11142,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 = (0, import_react72.useId)();
+  const tGroupLabel = groupLabel != null ? groupLabel : t(texts18.countryCodeAndPhoneNumber);
+  const tSelectLabel = selectLabel != null ? selectLabel : t(texts18.countryCode);
+  const generatedId = (0, import_react73.useId)();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
   const phoneNumberId = `${uniqueId}-phone-number`;
@@ -11056,27 +11155,27 @@ var PhoneInput = ({
   const hasMessage = hasErrorMessage || hasTip;
   const tipId = derivativeIdGenerator(phoneInputId, "tip");
   const errorMessageId = derivativeIdGenerator(phoneInputId, "errorMessage");
-  const [callingCode, setCallingCode] = (0, import_react72.useState)("");
-  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react72.useState)("");
-  const [internalValue, setInternalValue] = (0, import_react72.useState)(
+  const [callingCode, setCallingCode] = (0, import_react73.useState)("");
+  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react73.useState)("");
+  const [internalValue, setInternalValue] = (0, import_react73.useState)(
     defaultValue != null ? defaultValue : {
       countryCode: "",
       phoneNumber: ""
     }
   );
   const isControlled = value !== void 0;
-  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react72.useState)(0);
-  const callingCodeRef = (0, import_react72.useRef)(null);
-  (0, import_react72.useLayoutEffect)(() => {
+  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react73.useState)(0);
+  const callingCodeRef = (0, import_react73.useRef)(null);
+  (0, import_react73.useLayoutEffect)(() => {
     if (callingCodeRef.current) {
       setCallingCodeWidth(callingCodeRef.current.offsetWidth);
     }
   }, [callingCode]);
   const callingCodeInlineStart = callingCodeWidth ? `calc(var(--dds-spacing-x1) + ${callingCodeWidth}px)` : void 0;
-  const internalSelectRef = (0, import_react72.useRef)(null);
+  const internalSelectRef = (0, import_react73.useRef)(null);
   const combinedSelectRef = useCombinedRef(selectRef, internalSelectRef);
   const displayedValue = isControlled ? value : internalValue;
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     const selectEl = internalSelectRef.current;
     if (selectEl && selectEl.value) {
       const { options, selectedIndex } = selectEl;
@@ -11222,7 +11321,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",
@@ -11238,7 +11337,7 @@ var texts17 = createTexts({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_react_dom5 = require("react-dom");
 
 // src/components/Popover/Popover.module.css
@@ -11250,9 +11349,9 @@ var Popover_default = {
 };
 
 // src/components/Popover/Popover.context.tsx
-var import_react73 = require("react");
-var PopoverContext = (0, import_react73.createContext)({});
-var usePopoverContext = () => (0, import_react73.useContext)(PopoverContext);
+var import_react74 = require("react");
+var PopoverContext = (0, import_react74.createContext)({});
+var usePopoverContext = () => (0, import_react74.useContext)(PopoverContext);
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime288 = require("react/jsx-runtime");
@@ -11282,7 +11381,7 @@ var Popover = ({
   });
   const { maxHeight, maxWidth, minHeight, minWidth, height, width } = sizeProps;
   const context = usePopoverContext();
-  const themeContext = (0, import_react74.useContext)(ThemeContext);
+  const themeContext = (0, import_react75.useContext)(ThemeContext);
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   const {
     floatStyling: contextFloatStyling,
@@ -11295,7 +11394,7 @@ var Popover = ({
   } = context;
   const { t } = useTranslation();
   const hasContext = !isEmpty(context);
-  const generatedId = (0, import_react74.useId)();
+  const generatedId = (0, import_react75.useId)();
   const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
   const [
     popoverId,
@@ -11332,8 +11431,8 @@ var Popover = ({
     anchorEl && anchorEl
   );
   const multiRef = useCombinedRef(ref, popoverRef, floatingRef);
-  (0, import_react74.useEffect)(() => {
-    setFloatOptions && setFloatOptions({ placement, offset });
+  (0, import_react75.useEffect)(() => {
+    setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
   useOnClickOutside([popoverRef.current, anchorEl], () => {
     if (isOpen && !hasContext) onClose == null ? void 0 : onClose();
@@ -11401,7 +11500,7 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/Popover/PopoverGroup.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_jsx_runtime289 = require("react/jsx-runtime");
 var PopoverGroup = ({
   isOpen: propIsOpen,
@@ -11413,20 +11512,20 @@ var PopoverGroup = ({
   popoverId
 }) => {
   var _a;
-  const [internalIsOpen, internalSetIsOpen] = (0, import_react75.useState)(isInitiallyOpen);
+  const [internalIsOpen, internalSetIsOpen] = (0, import_react76.useState)(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = (0, import_react75.useId)();
+  const generatedId = (0, import_react76.useId)();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
-  const [floatOptions, setFloatOptions] = (0, import_react75.useState)();
+  const [floatOptions, setFloatOptions] = (0, import_react76.useState)();
   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) {
@@ -11435,10 +11534,10 @@ var PopoverGroup = ({
       handleOpen();
     }
   };
-  const buttonRef = (0, import_react75.useRef)(null);
+  const buttonRef = (0, import_react76.useRef)(null);
   const anchorRef = refs.setReference;
   const combinedAnchorRef = useCombinedRef(buttonRef, anchorRef);
-  const popoverRef = (0, import_react75.useRef)(null);
+  const popoverRef = (0, import_react76.useRef)(null);
   const floatingRef = refs.setFloating;
   const combinedPopoverRef = useCombinedRef(popoverRef, floatingRef);
   useOnKeyDown(["Esc", "Escape"], () => {
@@ -11454,8 +11553,8 @@ var PopoverGroup = ({
     if (open) handleClose();
   });
   const isAnchorChild = (i) => i === 0;
-  const Children7 = import_react75.Children.map(children, (child, childIndex) => {
-    return (0, import_react75.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react75.cloneElement)(child, {
+  const Children7 = import_react76.Children.map(children, (child, childIndex) => {
+    return (0, import_react76.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react76.cloneElement)(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniquePopoverId,
       "aria-expanded": open,
@@ -11482,17 +11581,17 @@ var PopoverGroup = ({
 PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-var import_react76 = require("react");
-var ProgressTrackerContext = (0, import_react76.createContext)(
+var import_react77 = require("react");
+var ProgressTrackerContext = (0, import_react77.createContext)(
   {
     activeStep: 0,
     direction: "column"
   }
 );
-var useProgressTrackerContext = () => (0, import_react76.useContext)(ProgressTrackerContext);
+var useProgressTrackerContext = () => (0, import_react77.useContext)(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -11517,7 +11616,7 @@ var ProgressTracker_default = {
 };
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_jsx_runtime290 = require("react/jsx-runtime");
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
@@ -11555,11 +11654,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 = (0, import_react77.useMemo)(() => {
+  const stepNumberContent = (0, import_react78.useMemo)(() => {
     if (completed) {
       return /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(Icon, { icon: CheckIcon, iconSize: "small" });
     }
@@ -11593,9 +11692,9 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-medium"]
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(VisuallyHidden, { children: t(texts18.stepTextBefore(index + 1)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(VisuallyHidden, { children: t(texts19.stepTextBefore(index + 1)) }),
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(VisuallyHidden, { children: completed ? t(texts18.completed) : t(texts18.uncompleted) })
+          /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(VisuallyHidden, { children: completed ? t(texts19.completed) : t(texts19.uncompleted) })
         ]
       }
     )
@@ -11636,7 +11735,7 @@ var ProgressTrackerItem = (props) => {
   );
 };
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
-var texts18 = createTexts({
+var texts19 = createTexts({
   stepTextBefore: (index) => ({
     nb: `${index}. trinn, `,
     no: `${index}. trinn, `,
@@ -11671,17 +11770,17 @@ var ProgressTracker = (() => {
     ...rest
   }) => {
     const { t } = useTranslation();
-    const [thisActiveStep, setActiveStep] = (0, import_react78.useState)(activeStep);
+    const [thisActiveStep, setActiveStep] = (0, import_react79.useState)(activeStep);
     const handleChange = (step) => {
       setActiveStep(step);
-      onStepChange && onStepChange(step);
+      onStepChange == null ? void 0 : onStepChange(step);
     };
-    (0, import_react78.useEffect)(() => {
+    (0, import_react79.useEffect)(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
     }, [activeStep, thisActiveStep]);
-    const steps = (0, import_react78.useMemo)(() => {
+    const steps = (0, import_react79.useMemo)(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
       return itemsWithIndex;
@@ -11699,7 +11798,7 @@ var ProgressTracker = (() => {
         children: /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
           "nav",
           {
-            "aria-label": ariaLabel != null ? ariaLabel : t(texts19.stepProgression),
+            "aria-label": ariaLabel != null ? ariaLabel : t(texts20.stepProgression),
             ...getBaseHTMLProps(id, className, htmlProps, rest),
             children: /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
               Box,
@@ -11726,18 +11825,18 @@ var ProgressTracker = (() => {
   return Res;
 })();
 function removeInvalidChildren(children) {
-  return import_react78.Children.toArray(children).filter(import_react78.isValidElement);
+  return import_react79.Children.toArray(children).filter(import_react79.isValidElement);
 }
 function passIndexPropToProgressTrackerItem(children) {
-  return import_react78.Children.map(
+  return import_react79.Children.map(
     children,
-    (item, index) => (0, import_react78.cloneElement)(item, {
+    (item, index) => (0, import_react79.cloneElement)(item, {
       ...item.props,
       index
     })
   );
 }
-var texts19 = createTexts({
+var texts20 = createTexts({
   stepProgression: {
     nb: "Stegprogresjon",
     no: "Stegprogresjon",
@@ -11747,7 +11846,7 @@ var texts19 = createTexts({
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -11775,7 +11874,7 @@ var ProgressBar = ({
   style,
   ...rest
 }) => {
-  const generatedId = (0, import_react79.useId)();
+  const generatedId = (0, import_react80.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -11831,13 +11930,13 @@ var ProgressBar = ({
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 
 // src/components/Search/AutocompleteSearch.context.tsx
-var import_react80 = require("react");
-var AutocompleteSearchContext = (0, import_react80.createContext)({});
+var import_react81 = require("react");
+var AutocompleteSearchContext = (0, import_react81.createContext)({});
 var useAutocompleteSearch = () => {
-  return (0, import_react80.useContext)(AutocompleteSearchContext);
+  return (0, import_react81.useContext)(AutocompleteSearchContext);
 };
 
 // src/components/Search/Search.module.css
@@ -11855,33 +11954,9 @@ 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
-var import_react81 = require("react");
+var import_react82 = require("react");
 var import_jsx_runtime293 = require("react/jsx-runtime");
 var SearchSuggestionItem = ({
   focus,
@@ -11889,9 +11964,9 @@ var SearchSuggestionItem = ({
   ref,
   ...rest
 }) => {
-  const itemRef = (0, import_react81.useRef)(null);
+  const itemRef = (0, import_react82.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  (0, import_react81.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
@@ -11975,7 +12050,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,
@@ -11989,7 +12064,7 @@ var SearchSuggestions = ({
   );
 };
 SearchSuggestions.displayName = "SearchSuggestions";
-var texts20 = createTexts({
+var texts21 = createTexts({
   search: (suggestion) => ({
     no: `${suggestion} s\xF8k`,
     nb: `${suggestion} s\xF8k`,
@@ -12046,7 +12121,7 @@ var Search = ({
   ...rest
 }) => {
   var _a;
-  const generatedId = (0, import_react82.useId)();
+  const generatedId = (0, import_react83.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasLabel = !!label;
   const tipId = derivativeIdGenerator(uniqueId, "tip");
@@ -12056,17 +12131,18 @@ var Search = ({
     "suggestions-description"
   );
   const { t } = useTranslation();
-  const [hasValue, setHasValue] = (0, import_react82.useState)(!!value);
+  const [hasValue, setHasValue] = (0, import_react83.useState)(!!value);
   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,
@@ -12135,15 +12211,14 @@ var Search = ({
               componentSize
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts21.useArrowKeys) })
+          /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts22.useArrowKeys) })
         ] }),
         hasValue && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
-          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"]
           }
@@ -12183,7 +12258,7 @@ var Search = ({
   ] });
 };
 Search.displayName = "Search";
-var texts21 = createTexts({
+var texts22 = createTexts({
   clearSearch: {
     nb: "T\xF8m s\xF8k",
     no: "T\xF8m s\xF8k",
@@ -12199,7 +12274,7 @@ var texts21 = createTexts({
 });
 
 // src/components/Search/SearchAutocompleteWrapper.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 var import_jsx_runtime296 = require("react/jsx-runtime");
 var SearchAutocompleteWrapper = (props) => {
   const {
@@ -12211,12 +12286,12 @@ var SearchAutocompleteWrapper = (props) => {
     onSuggestionSelection,
     children
   } = props;
-  const [inputValue, setInputValue] = (0, import_react83.useState)(value != null ? value : "");
-  const [suggestions, setSuggestions] = (0, import_react83.useState)([]);
-  const [showSuggestions, setShowSuggestions] = (0, import_react83.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react84.useState)(value != null ? value : "");
+  const [suggestions, setSuggestions] = (0, import_react84.useState)([]);
+  const [showSuggestions, setShowSuggestions] = (0, import_react84.useState)(false);
   const closeSuggestions = () => showSuggestions === true && setShowSuggestions(false);
   const openSuggestions = () => showSuggestions === false && setShowSuggestions(true);
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (suggestions.length > 0) {
       openSuggestions();
     } else {
@@ -12250,19 +12325,19 @@ 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) => {
     setInputValue(value2 != null ? value2 : "");
   };
-  const inputRef = (0, import_react83.useRef)(null);
-  const suggestionsRef = (0, import_react83.useRef)(null);
+  const inputRef = (0, import_react84.useRef)(null);
+  const suggestionsRef = (0, import_react84.useRef)(null);
   useOnClickOutside([inputRef.current, suggestionsRef.current], () => {
     closeSuggestions();
   });
@@ -12344,7 +12419,7 @@ var SkipToContent = ({
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -12365,7 +12440,7 @@ var SplitButton = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isOpen, setIsOpen] = (0, import_react84.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react85.useState)(false);
   const buttonStyleProps = {
     purpose,
     size: size2
@@ -12386,7 +12461,7 @@ var SplitButton = ({
         {
           ...buttonStyleProps,
           icon: isOpen ? ChevronUpIcon : ChevronDownIcon,
-          "aria-label": t(texts22.moreActions),
+          "aria-label": t(texts23.moreActions),
           purpose,
           className: cn(
             SplitButton_default.option,
@@ -12400,7 +12475,7 @@ var SplitButton = ({
   ] });
 };
 SplitButton.displayName = "SplitButton";
-var texts22 = createTexts({
+var texts23 = createTexts({
   moreActions: {
     nb: "Flere handlinger",
     no: "Flere handlinger",
@@ -12410,15 +12485,15 @@ var texts22 = createTexts({
 });
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 
 // src/components/Table/collapsible/Table.context.tsx
-var import_react85 = require("react");
-var CollapsibleTableContext = (0, import_react85.createContext)({
+var import_react86 = require("react");
+var CollapsibleTableContext = (0, import_react86.createContext)({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => (0, import_react85.useContext)(CollapsibleTableContext);
+var useCollapsibleTableContext = () => (0, import_react86.useContext)(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 var import_jsx_runtime300 = require("react/jsx-runtime");
@@ -12426,12 +12501,12 @@ var Body = (props) => /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("tbody", {
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_jsx_runtime301 = require("react/jsx-runtime");
 var Head = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("thead", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(HeadContext, { value: true, children }) });
-var HeadContext = (0, import_react86.createContext)(false);
+var HeadContext = (0, import_react87.createContext)(false);
 function useIsInTableHead() {
-  const isInTableHead = (0, import_react86.useContext)(HeadContext);
+  const isInTableHead = (0, import_react87.useContext)(HeadContext);
   return isInTableHead;
 }
 
@@ -12558,7 +12633,7 @@ var SortCell = ({
         StylelessButton,
         {
           onClick,
-          "aria-description": t(texts23.changeSort),
+          "aria-description": t(texts24.changeSort),
           className: cn(Table_default["sort-button"], focusable),
           children: [
             children,
@@ -12571,7 +12646,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",
@@ -12607,26 +12682,26 @@ var Table = ({
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_jsx_runtime307 = require("react/jsx-runtime");
 var TableWrapper = ({ className, ...rest }) => {
-  const themeContext = (0, import_react87.useContext)(ThemeContext);
+  const themeContext = (0, import_react88.useContext)(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
   const containerWidth = container2 ? container2.clientWidth : 0;
-  const [overflowX, setOverflowX] = (0, import_react87.useState)(false);
-  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react87.useState)(containerWidth);
+  const [overflowX, setOverflowX] = (0, import_react88.useState)(false);
+  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react88.useState)(containerWidth);
   function isOverflowingX(event) {
     return event.offsetWidth < event.scrollWidth;
   }
-  const wrapperRef = (0, import_react87.useRef)(null);
-  (0, import_react87.useEffect)(() => {
+  const wrapperRef = (0, import_react88.useRef)(null);
+  (0, import_react88.useEffect)(() => {
     if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
       setOverflowX(true);
       return;
     }
     setOverflowX(false);
   }, [themeContainerWidth]);
-  (0, import_react87.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     function handleResize() {
       setThemeContainerWidth(containerWidth);
     }
@@ -12675,9 +12750,9 @@ var CollapsibleRow = ({
   const isInHead = useIsInTableHead();
   const type = _type != null ? _type : isInHead ? "head" : "body";
   const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
-  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react88.useState)(true);
-  (0, import_react88.useEffect)(() => {
-    !isCollapsed && setChildrenCollapsed(true);
+  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react89.useState)(true);
+  (0, import_react89.useEffect)(() => {
+    if (!isCollapsed) setChildrenCollapsed(true);
   }, [isCollapsed]);
   const rowProps = (isOpenCollapsibleHeader) => {
     return {
@@ -12694,7 +12769,7 @@ var CollapsibleRow = ({
   const collapsedHeaderValues = headerValues.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
-  const childrenArray = import_react88.Children.toArray(children);
+  const childrenArray = import_react89.Children.toArray(children);
   const collapsedChildren = childrenArray.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
@@ -12703,9 +12778,9 @@ var CollapsibleRow = ({
   const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
     const id = derivativeIdGenerator(prefix2, index.toString());
     collapsibleIds.push(id);
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(import_react88.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(import_react89.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-      (0, import_react88.isValidElement)(child) && (0, import_react88.cloneElement)(child, {
+      (0, import_react89.isValidElement)(child) && (0, import_react89.cloneElement)(child, {
         collapsibleProps: { isCollapsibleChild: true }
       })
     ] }, `DL-${index}`);
@@ -12719,8 +12794,8 @@ var CollapsibleRow = ({
     return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Row, { ref, ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(import_jsx_runtime308.Fragment, { children: [
       definingColumnCells,
       /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
-        t(texts24.expand),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(VisuallyHidden, { children: t(texts24.row) })
+        t(texts25.expand),
+        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(VisuallyHidden, { children: t(texts25.row) })
       ] })
     ] }) });
   };
@@ -12757,7 +12832,7 @@ var CollapsibleRow = ({
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Row, { ref, ...rowProps(), children });
 };
 CollapsibleRow.displayName = "CollapsibleTable.Row";
-var texts24 = createTexts({
+var texts25 = createTexts({
   expand: {
     nb: "Utvid",
     no: "Utvid",
@@ -12799,11 +12874,11 @@ var CollapsibleTable2 = CollapsibleTable;
 CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/AddTabButton.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 
 // src/components/Tabs/Tabs.context.tsx
-var import_react89 = require("react");
-var TabsContext = (0, import_react89.createContext)({
+var import_react90 = require("react");
+var TabsContext = (0, import_react90.createContext)({
   activeTab: 0,
   tabsId: "",
   size: "small",
@@ -12815,7 +12890,7 @@ var TabsContext = (0, import_react89.createContext)({
   tabContentDirection: "row",
   addTabButtonProps: void 0
 });
-var useTabsContext = () => (0, import_react89.useContext)(TabsContext);
+var useTabsContext = () => (0, import_react90.useContext)(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -12834,9 +12909,9 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/TabWidthContext.tsx
-var import_react90 = require("react");
+var import_react91 = require("react");
 var import_jsx_runtime310 = require("react/jsx-runtime");
-var TabContext = (0, import_react90.createContext)(null);
+var TabContext = (0, import_react91.createContext)(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
@@ -12865,8 +12940,8 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = (0, import_react90.useContext)(TabContext);
-  (0, import_react90.useLayoutEffect)(() => {
+  const context = (0, import_react91.useContext)(TabContext);
+  (0, import_react91.useLayoutEffect)(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
   }, [index, width]);
@@ -12883,7 +12958,7 @@ var AddTabButton = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const buttonRef = (0, import_react91.useRef)(null);
+  const buttonRef = (0, import_react92.useRef)(null);
   const combinedRef = useCombinedRef(ref, buttonRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
@@ -12908,7 +12983,7 @@ var AddTabButton = ({
 AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
-var import_react92 = require("react");
+var import_react93 = require("react");
 var import_jsx_runtime312 = require("react/jsx-runtime");
 var Tabs = ({
   id,
@@ -12923,17 +12998,17 @@ var Tabs = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react92.useId)();
+  const generatedId = (0, import_react93.useId)();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
-  const [thisActiveTab, setActiveTab] = (0, import_react92.useState)(activeTab != null ? activeTab : 0);
-  const [hasTabFocus, setHasTabFocus] = (0, import_react92.useState)(false);
-  const tabListRef = (0, import_react92.useRef)(null);
-  const tabPanelsRef = (0, import_react92.useRef)(null);
+  const [thisActiveTab, setActiveTab] = (0, import_react93.useState)(activeTab != null ? activeTab : 0);
+  const [hasTabFocus, setHasTabFocus] = (0, import_react93.useState)(false);
+  const tabListRef = (0, import_react93.useRef)(null);
+  const tabPanelsRef = (0, import_react93.useRef)(null);
   const handleTabChange = (index) => {
     setActiveTab(index);
-    onChange && onChange(index);
+    onChange == null ? void 0 : onChange(index);
   };
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -12972,7 +13047,7 @@ var Tabs = ({
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react93 = require("react");
+var import_react94 = require("react");
 var import_jsx_runtime313 = require("react/jsx-runtime");
 var Tab = ({
   active = false,
@@ -12991,18 +13066,18 @@ var Tab = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const itemRef = (0, import_react93.useRef)(null);
+  const itemRef = (0, import_react94.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   const { type = "button", ...restHtmlProps } = htmlProps;
   const fixedHtmlProps = { type, ...restHtmlProps };
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react93.useCallback)(() => {
+  const handleSelect = (0, import_react94.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -13048,7 +13123,7 @@ var Tab = ({
 Tab.displayName = "Tab";
 
 // src/components/Tabs/TabList.tsx
-var import_react94 = require("react");
+var import_react95 = require("react");
 var import_jsx_runtime314 = require("react/jsx-runtime");
 var TabList = ({
   children,
@@ -13068,15 +13143,15 @@ var TabList = ({
     addTabButtonProps
   } = useTabsContext();
   const uniqueId = id != null ? id : `${tabsId}-tablist`;
-  const childrenArray = import_react94.Children.toArray(children).length;
+  const childrenArray = import_react95.Children.toArray(children).length;
   const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
   const combinedRef = useCombinedRef(ref, tabListRef);
   const hasButton = addTabButtonProps ? true : false;
-  const tabListChildren = import_react94.Children ? import_react94.Children.map(children, (child, index) => {
+  const tabListChildren = import_react95.Children ? import_react95.Children.map(children, (child, index) => {
     const handleThisTabChange = () => {
       handleTabChange(index);
     };
-    return (0, import_react94.isValidElement)(child) && (0, import_react94.cloneElement)(child, {
+    return (0, import_react95.isValidElement)(child) && (0, import_react95.cloneElement)(child, {
       id: `${tabsId}-tab-${index}`,
       htmlProps: {
         ...child.props.htmlProps,
@@ -13089,10 +13164,10 @@ var TabList = ({
       onClick: combineHandlers(handleThisTabChange, child.props.onClick)
     });
   }) : [];
-  const [widths, setWidths] = (0, import_react94.useState)([]);
+  const [widths, setWidths] = (0, import_react95.useState)([]);
   const handleOnFocus = (event) => {
     setHasTabFocus(true);
-    onFocus && onFocus(event);
+    onFocus == null ? void 0 : onFocus(event);
   };
   const handleOnBlur = (event) => {
     var _a;
@@ -13163,14 +13238,14 @@ var TabPanel = ({
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabPanels.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_jsx_runtime316 = require("react/jsx-runtime");
 var TabPanels = ({ children, ref, ...rest }) => {
   const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
   const combinedRef = useCombinedRef(ref, tabPanelsRef);
-  const panelChildren = import_react95.Children.map(children, (child, index) => {
+  const panelChildren = import_react96.Children.map(children, (child, index) => {
     const active = index === activeTab;
-    return (0, import_react95.isValidElement)(child) && (0, import_react95.cloneElement)(child, {
+    return (0, import_react96.isValidElement)(child) && (0, import_react96.cloneElement)(child, {
       id: `${tabsId}-panel-${index}`,
       active,
       htmlProps: {
@@ -13245,7 +13320,7 @@ var Tag = ({
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-var import_react96 = require("react");
+var import_react97 = require("react");
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
@@ -13294,12 +13369,12 @@ var TextInput = ({
   ref,
   ...rest
 }) => {
-  const [text, setText] = (0, import_react96.useState)(getDefaultText(value, defaultValue));
-  const prefixRef = (0, import_react96.useRef)(null);
-  const suffixRef = (0, import_react96.useRef)(null);
-  const [prefixLength, setPrefixLength] = (0, import_react96.useState)(0);
-  const [suffixLength, setSuffixLength] = (0, import_react96.useState)(0);
-  (0, import_react96.useLayoutEffect)(() => {
+  const [text, setText] = (0, import_react97.useState)(getDefaultText(value, defaultValue));
+  const prefixRef = (0, import_react97.useRef)(null);
+  const suffixRef = (0, import_react97.useRef)(null);
+  const [prefixLength, setPrefixLength] = (0, import_react97.useState)(0);
+  const [suffixLength, setSuffixLength] = (0, import_react97.useState)(0);
+  (0, import_react97.useLayoutEffect)(() => {
     if (prefixRef.current) {
       setPrefixLength(prefixRef.current.offsetWidth);
     }
@@ -13313,7 +13388,7 @@ var TextInput = ({
       onChange(event);
     }
   };
-  const generatedId = (0, import_react96.useId)();
+  const generatedId = (0, import_react97.useId)();
   const uniqueId = id != null ? id : `${generatedId}-textInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -13483,7 +13558,7 @@ var TextInput = ({
 TextInput.displayName = "TextInput";
 
 // src/components/Toggle/Toggle.tsx
-var import_react97 = require("react");
+var import_react98 = require("react");
 
 // src/components/Toggle/Toggle.module.css
 var Toggle_default = {
@@ -13517,7 +13592,7 @@ var Toggle = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const generatedId = (0, import_react97.useId)();
+  const generatedId = (0, import_react98.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggle`;
   const iconSize = size2 === "large" ? "medium" : "small";
   const [checked, setChecked] = useControllableState({
@@ -13592,14 +13667,14 @@ var Toggle = ({
 Toggle.displayName = "Toggle";
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_react99 = require("react");
+var import_react100 = require("react");
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-var import_react98 = require("react");
-var ToggleBarContext = (0, import_react98.createContext)({
+var import_react99 = require("react");
+var ToggleBarContext = (0, import_react99.createContext)({
   size: "medium"
 });
-var useToggleBarContext = () => (0, import_react98.useContext)(ToggleBarContext);
+var useToggleBarContext = () => (0, import_react99.useContext)(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -13632,9 +13707,9 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = (0, import_react99.useId)();
+  const generatedId = (0, import_react100.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
-  const [groupValue, setGroupValue] = (0, import_react99.useState)(value);
+  const [groupValue, setGroupValue] = (0, import_react100.useState)(value);
   const handleChange = combineHandlers(
     (e) => setGroupValue(e.target.value),
     (e) => onChange && onChange(e, e.target.value)
@@ -13669,7 +13744,7 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-var import_react100 = require("react");
+var import_react101 = require("react");
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var typographyTypes3 = {
   large: "bodyLarge",
@@ -13701,12 +13776,13 @@ var ToggleRadio = ({
   id,
   ...rest
 }) => {
-  const generatedId = (0, import_react100.useId)();
+  const generatedId = (0, import_react101.useId)();
   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__ */ (0, import_jsx_runtime321.jsxs)("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
@@ -13753,7 +13829,7 @@ var ToggleRadio = ({
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_react101 = require("react");
+var import_react102 = require("react");
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -13774,7 +13850,7 @@ var ToggleButton = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react101.useId)();
+  const generatedId = (0, import_react102.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
   return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
@@ -13816,7 +13892,7 @@ var ToggleButton = ({
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-var import_react102 = require("react");
+var import_react103 = require("react");
 var import_jsx_runtime323 = require("react/jsx-runtime");
 var ToggleButtonGroup = (props) => {
   const {
@@ -13829,7 +13905,7 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react102.useId)();
+  const generatedId = (0, import_react103.useId)();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
   return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
     VStack,
@@ -14002,6 +14078,7 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   InfoIcon,
   InlineButton,
   InlineEditInput,
+  InlineEditSelect,
   InlineEditTextArea,
   Input,
   InputMessage,