@norges-domstoler/dds-components 0.0.0-dev-20250902141644 → 0.0.0-dev-20250904073534

package/dist/index.js

@@ -5909,7 +5909,7 @@ function CookieBanner({
                   gap: styleUpToBreakpoint("x1", "sm", "x1.5"),
                   flexWrap: "wrap",
                   paddingBlock: "x0.25 0",
-                  children: buttons.map((props) => /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Button, { ...props, size: "medium", purpose: "secondary" }))
+                  children: buttons.map((props, i) => /* @__PURE__ */ (0, import_react37.createElement)(Button, { ...props, size: "medium", purpose: "secondary", key: i }))
                 }
               )
             ]
@@ -9295,6 +9295,7 @@ var NavigationItem = ({ isCurrent, ...rest }) => /* @__PURE__ */ (0, import_jsx_
 
 // src/components/InternalHeader/InternalHeader.tsx
 var import_jsx_runtime277 = require("react/jsx-runtime");
+var import_react67 = require("react");
 var InternalHeader = (props) => {
   const {
     applicationDesc,
@@ -9329,7 +9330,7 @@ var InternalHeader = (props) => {
       as: StylelessList,
       hideBelow: hasSmallScreenBreakpoint ? smallScreenBreakpoint : void 0,
       className: cn(InternalHeader_default["nav-list"]),
-      children: navItems.map((item, index) => {
+      children: navItems.map((item, i) => {
         const { href, ...rest2 } = item;
         const isCurrent = href === currentPage;
         return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)("li", { className: InternalHeader_default["nav-list__item"], children: /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
@@ -9340,7 +9341,7 @@ var InternalHeader = (props) => {
             isCurrent,
             onClick: () => handleCurrentPageChange(href)
           }
-        ) }, index);
+        ) }, i);
       })
     }
   ) }) : null;
@@ -9398,7 +9399,7 @@ var InternalHeader = (props) => {
                     as: "nav",
                     "aria-label": t(texts16.siteNavigation),
                     showBelow: smallScreenBreakpoint,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(OverflowMenuList, { children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(OverflowMenuLink, { ...item })) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(OverflowMenuList, { children: navItems.map((item, i) => /* @__PURE__ */ (0, import_react67.createElement)(OverflowMenuLink, { ...item, key: `nav-${i}` })) })
                   }
                 ),
                 hasNavInContextMenu && hasContextMenuElements && /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
@@ -9408,11 +9409,18 @@ var InternalHeader = (props) => {
                     showBelow: smallScreenBreakpoint
                   }
                 ),
-                hasContextMenuElements && /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(OverflowMenuList, { children: contextMenuItems.map((item) => {
-                  return item.href ? /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(OverflowMenuLink, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
+                hasContextMenuElements && /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(OverflowMenuList, { children: contextMenuItems.map((item, i) => {
+                  return item.href ? /* @__PURE__ */ (0, import_react67.createElement)(
+                    OverflowMenuLink,
+                    {
+                      ...item,
+                      key: `context-${i}`
+                    }
+                  ) : /* @__PURE__ */ (0, import_react67.createElement)(
                     OverflowMenuButton,
                     {
-                      ...item
+                      ...item,
+                      key: `context-${i}`
                     }
                   );
                 }) })
@@ -9482,7 +9490,7 @@ var ListItem = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtim
 ListItem.displayName = "ListItem";
 
 // src/components/LocalMessage/LocalMessage.tsx
-var import_react67 = require("react");
+var import_react68 = require("react");
 
 // src/components/LocalMessage/LocalMessage.module.css
 var LocalMessage_default = {
@@ -9525,7 +9533,7 @@ var LocalMessage = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isClosed, setClosed] = (0, import_react67.useState)(false);
+  const [isClosed, setClosed] = (0, import_react68.useState)(false);
   if (isClosed) {
     return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(import_jsx_runtime280.Fragment, {});
   }
@@ -9579,7 +9587,7 @@ var LocalMessage = ({
 LocalMessage.displayName = "LocalMessage";
 
 // src/components/Modal/Modal.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/components/Modal/Modal.module.css
@@ -9609,7 +9617,7 @@ var Modal = ({
   ref,
   ...rest
 }) => {
-  const generatedId = (0, import_react68.useId)();
+  const generatedId = (0, import_react69.useId)();
   const modalId = id != null ? id : `${generatedId}-modal`;
   const headerId = `${modalId}-header`;
   const modalRef = useFocusTrap(isOpen, initialFocusRef);
@@ -9621,13 +9629,13 @@ var Modal = ({
       onClose();
     }
   };
-  const themeContext = (0, import_react68.useContext)(ThemeContext);
+  const themeContext = (0, import_react69.useContext)(ThemeContext);
   if (!themeContext) {
     throw new Error("Modal must be used within a ThemeProvider");
   }
   const { t } = useTranslation();
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (isOpen) {
       handleElementWithBackdropMount(document.body);
     } else {
@@ -9635,7 +9643,7 @@ var Modal = ({
     }
     return () => handleElementWithBackdropUnmount(document.body);
   }, [isOpen]);
-  const backdropRef = (0, import_react68.useRef)(null);
+  const backdropRef = (0, import_react69.useRef)(null);
   const onBackdropClick = (event) => {
     if (event.target === backdropRef.current && isOpen) {
       handleClose();
@@ -9752,7 +9760,7 @@ var ModalActions = (props) => /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Box
 ModalActions.displayName = "ModalActions";
 
 // src/components/Pagination/Pagination.tsx
-var import_react72 = require("react");
+var import_react73 = require("react");
 
 // src/components/Pagination/Pagination.module.css
 var Pagination_default = {
@@ -9797,7 +9805,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 // src/components/Select/Select.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_react_select2 = __toESM(require("react-select"));
 
 // src/components/Select/Select.module.css
@@ -10077,7 +10085,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
 });
 
 // src/components/Select/SelectComponents.tsx
-var import_react69 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 var import_react_select = require("react-select");
 var import_jsx_runtime284 = require("react/jsx-runtime");
 var {
@@ -10107,7 +10115,7 @@ var DDSOption = ({
   props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
-var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Option, { ...props, children: import_react69.default.createElement(props.customElement, props) });
+var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Option, { ...props, children: import_react70.default.createElement(props.customElement, props) });
 var CustomSingleValue = ({
   id,
   Element,
@@ -10224,12 +10232,12 @@ function Select({
   instanceId,
   ...rest
 }) {
-  const themeContext = (0, import_react70.useContext)(ThemeContext);
+  const themeContext = (0, import_react71.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_react70.useId)();
+  const generatedId = (0, import_react71.useId)();
   const uniqueId = id != null ? id : `${generatedId}-select`;
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasLabel = !!label;
@@ -10242,7 +10250,7 @@ function Select({
     width,
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
-  const customInput = (0, import_react70.useCallback)(
+  const customInput = (0, import_react71.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
       DDSInput,
       {
@@ -10260,7 +10268,7 @@ function Select({
     ),
     []
   );
-  const customSingleValue = (0, import_react70.useCallback)(
+  const customSingleValue = (0, import_react71.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
       CustomSingleValue,
       {
@@ -10271,15 +10279,15 @@ function Select({
     ),
     []
   );
-  const customClearIndicator = (0, import_react70.useCallback)(
+  const customClearIndicator = (0, import_react71.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(DDSClearIndicator, { ...props, size: componentSize }),
     [componentSize]
   );
-  const customDropdownIndicator = (0, import_react70.useCallback)(
+  const customDropdownIndicator = (0, import_react71.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(DDSDropdownIndicator, { ...props, componentSize }),
     [componentSize]
   );
-  const customControl = (0, import_react70.useCallback)(
+  const customControl = (0, import_react71.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
       DDSControl,
       {
@@ -10292,7 +10300,7 @@ function Select({
     ),
     [componentSize, readOnly, icon, dataTestId]
   );
-  const customOptionComponent = (0, import_react70.useCallback)(
+  const customOptionComponent = (0, import_react71.useCallback)(
     (props) => {
       if (customOptionElement) {
         return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(CustomOption, { ...props, customElement: customOptionElement });
@@ -10311,7 +10319,7 @@ function Select({
     placeholder: placeholder ? placeholder : "",
     closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
     isMulti,
-    instanceId: instanceId != null ? instanceId : (0, import_react70.useId)(),
+    instanceId: instanceId != null ? instanceId : (0, import_react71.useId)(),
     inputId: uniqueId,
     name: uniqueId,
     menuPortalTarget: portalTarget,
@@ -10374,7 +10382,7 @@ function Select({
 Select.displayName = "Select";
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 
 // src/components/Select/NativeSelect/NativeSelect.module.css
 var NativeSelect_default = {
@@ -10416,14 +10424,14 @@ var NativeSelect = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const selectRef = (0, import_react71.useRef)(null);
-  const [hasValue, setHasValue] = (0, import_react71.useState)(false);
-  (0, import_react71.useEffect)(() => {
+  const selectRef = (0, import_react72.useRef)(null);
+  const [hasValue, setHasValue] = (0, import_react72.useState)(false);
+  (0, import_react72.useEffect)(() => {
     var _a, _b;
     const selectedIndex = (_b = (_a = selectRef.current) == null ? void 0 : _a.selectedIndex) != null ? _b : -1;
     setHasValue(selectedIndex !== 0);
   }, []);
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     var _a;
     if (clearable) {
       const firstOption = (_a = selectRef.current) == null ? void 0 : _a.options[0];
@@ -10436,7 +10444,7 @@ var NativeSelect = ({
       }
     }
   }, [clearable]);
-  const generatedId = (0, import_react71.useId)();
+  const generatedId = (0, import_react72.useId)();
   const uniqueId = id != null ? id : `${generatedId}-native-select`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -10561,8 +10569,8 @@ var Pagination = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [activePage, setActivePage] = (0, import_react72.useState)(defaultActivePage);
-  const [itemsPerPage, setItemsPerPage] = (0, import_react72.useState)(defaultItemsPerPage);
+  const [activePage, setActivePage] = (0, import_react73.useState)(defaultActivePage);
+  const [itemsPerPage, setItemsPerPage] = (0, import_react73.useState)(defaultItemsPerPage);
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
   const onPageChange = (event, page) => {
@@ -10862,7 +10870,7 @@ var texts17 = createTexts({
 });
 
 // src/components/PhoneInput/PhoneInput.tsx
-var import_react73 = require("react");
+var import_react74 = require("react");
 
 // src/components/PhoneInput/constants.ts
 var COUNTRIES = {
@@ -11323,7 +11331,7 @@ var PhoneInput = ({
   const { t } = useTranslation();
   const tGroupLabel = groupLabel != null ? groupLabel : t(texts18.countryCodeAndPhoneNumber);
   const tSelectLabel = selectLabel != null ? selectLabel : t(texts18.countryCode);
-  const generatedId = (0, import_react73.useId)();
+  const generatedId = (0, import_react74.useId)();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
   const phoneNumberId = `${uniqueId}-phone-number`;
@@ -11334,27 +11342,27 @@ var PhoneInput = ({
   const hasMessage = hasErrorMessage || hasTip;
   const tipId = derivativeIdGenerator(phoneInputId, "tip");
   const errorMessageId = derivativeIdGenerator(phoneInputId, "errorMessage");
-  const [callingCode, setCallingCode] = (0, import_react73.useState)("");
-  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react73.useState)("");
-  const [internalValue, setInternalValue] = (0, import_react73.useState)(
+  const [callingCode, setCallingCode] = (0, import_react74.useState)("");
+  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react74.useState)("");
+  const [internalValue, setInternalValue] = (0, import_react74.useState)(
     defaultValue != null ? defaultValue : {
       countryCode: "",
       phoneNumber: ""
     }
   );
   const isControlled = value !== void 0;
-  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react73.useState)(0);
-  const callingCodeRef = (0, import_react73.useRef)(null);
-  (0, import_react73.useLayoutEffect)(() => {
+  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react74.useState)(0);
+  const callingCodeRef = (0, import_react74.useRef)(null);
+  (0, import_react74.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_react73.useRef)(null);
+  const internalSelectRef = (0, import_react74.useRef)(null);
   const combinedSelectRef = useCombinedRef(selectRef, internalSelectRef);
   const displayedValue = isControlled ? value : internalValue;
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     const selectEl = internalSelectRef.current;
     if (selectEl && selectEl.value) {
       const { options, selectedIndex } = selectEl;
@@ -11516,7 +11524,7 @@ var texts18 = createTexts({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_react_dom5 = require("react-dom");
 
 // src/components/Popover/Popover.module.css
@@ -11528,9 +11536,9 @@ var Popover_default = {
 };
 
 // src/components/Popover/Popover.context.tsx
-var import_react74 = require("react");
-var PopoverContext = (0, import_react74.createContext)({});
-var usePopoverContext = () => (0, import_react74.useContext)(PopoverContext);
+var import_react75 = require("react");
+var PopoverContext = (0, import_react75.createContext)({});
+var usePopoverContext = () => (0, import_react75.useContext)(PopoverContext);
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime289 = require("react/jsx-runtime");
@@ -11560,7 +11568,7 @@ var Popover = ({
   });
   const { maxHeight, maxWidth, minHeight, minWidth, height, width } = sizeProps;
   const context = usePopoverContext();
-  const themeContext = (0, import_react75.useContext)(ThemeContext);
+  const themeContext = (0, import_react76.useContext)(ThemeContext);
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   const {
     floatStyling: contextFloatStyling,
@@ -11573,7 +11581,7 @@ var Popover = ({
   } = context;
   const { t } = useTranslation();
   const hasContext = !isEmpty(context);
-  const generatedId = (0, import_react75.useId)();
+  const generatedId = (0, import_react76.useId)();
   const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
   const [
     popoverId,
@@ -11610,7 +11618,7 @@ var Popover = ({
     anchorEl && anchorEl
   );
   const multiRef = useCombinedRef(ref, popoverRef, floatingRef);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
   useOnClickOutside([popoverRef.current, anchorEl], () => {
@@ -11679,7 +11687,7 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/Popover/PopoverGroup.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_jsx_runtime290 = require("react/jsx-runtime");
 var PopoverGroup = ({
   isOpen: propIsOpen,
@@ -11691,12 +11699,12 @@ var PopoverGroup = ({
   popoverId
 }) => {
   var _a;
-  const [internalIsOpen, internalSetIsOpen] = (0, import_react76.useState)(isInitiallyOpen);
+  const [internalIsOpen, internalSetIsOpen] = (0, import_react77.useState)(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = (0, import_react76.useId)();
+  const generatedId = (0, import_react77.useId)();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
-  const [floatOptions, setFloatOptions] = (0, import_react76.useState)();
+  const [floatOptions, setFloatOptions] = (0, import_react77.useState)();
   const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
   const handleClose = () => {
     setOpen(false);
@@ -11713,10 +11721,10 @@ var PopoverGroup = ({
       handleOpen();
     }
   };
-  const buttonRef = (0, import_react76.useRef)(null);
+  const buttonRef = (0, import_react77.useRef)(null);
   const anchorRef = refs.setReference;
   const combinedAnchorRef = useCombinedRef(buttonRef, anchorRef);
-  const popoverRef = (0, import_react76.useRef)(null);
+  const popoverRef = (0, import_react77.useRef)(null);
   const floatingRef = refs.setFloating;
   const combinedPopoverRef = useCombinedRef(popoverRef, floatingRef);
   useOnKeyDown(["Esc", "Escape"], () => {
@@ -11732,8 +11740,8 @@ var PopoverGroup = ({
     if (open) handleClose();
   });
   const isAnchorChild = (i) => i === 0;
-  const Children7 = import_react76.Children.map(children, (child, childIndex) => {
-    return (0, import_react76.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react76.cloneElement)(child, {
+  const Children7 = import_react77.Children.map(children, (child, childIndex) => {
+    return (0, import_react77.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react77.cloneElement)(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniquePopoverId,
       "aria-expanded": open,
@@ -11760,17 +11768,17 @@ var PopoverGroup = ({
 PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-var import_react77 = require("react");
-var ProgressTrackerContext = (0, import_react77.createContext)(
+var import_react78 = require("react");
+var ProgressTrackerContext = (0, import_react78.createContext)(
   {
     activeStep: 0,
     direction: "column"
   }
 );
-var useProgressTrackerContext = () => (0, import_react77.useContext)(ProgressTrackerContext);
+var useProgressTrackerContext = () => (0, import_react78.useContext)(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -11795,7 +11803,7 @@ var ProgressTracker_default = {
 };
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_jsx_runtime291 = require("react/jsx-runtime");
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
@@ -11837,7 +11845,7 @@ var ProgressTrackerItem = (props) => {
       handleStepChange == null ? void 0 : handleStepChange(index);
     }
   };
-  const stepNumberContent = (0, import_react78.useMemo)(() => {
+  const stepNumberContent = (0, import_react79.useMemo)(() => {
     if (completed) {
       return /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(Icon, { icon: CheckIcon, iconSize: "small" });
     }
@@ -11949,17 +11957,17 @@ var ProgressTracker = (() => {
     ...rest
   }) => {
     const { t } = useTranslation();
-    const [thisActiveStep, setActiveStep] = (0, import_react79.useState)(activeStep);
+    const [thisActiveStep, setActiveStep] = (0, import_react80.useState)(activeStep);
     const handleChange = (step) => {
       setActiveStep(step);
       onStepChange == null ? void 0 : onStepChange(step);
     };
-    (0, import_react79.useEffect)(() => {
+    (0, import_react80.useEffect)(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
     }, [activeStep, thisActiveStep]);
-    const steps = (0, import_react79.useMemo)(() => {
+    const steps = (0, import_react80.useMemo)(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
       return itemsWithIndex;
@@ -12004,12 +12012,12 @@ var ProgressTracker = (() => {
   return Res;
 })();
 function removeInvalidChildren(children) {
-  return import_react79.Children.toArray(children).filter(import_react79.isValidElement);
+  return import_react80.Children.toArray(children).filter(import_react80.isValidElement);
 }
 function passIndexPropToProgressTrackerItem(children) {
-  return import_react79.Children.map(
+  return import_react80.Children.map(
     children,
-    (item, index) => (0, import_react79.cloneElement)(item, {
+    (item, index) => (0, import_react80.cloneElement)(item, {
       ...item.props,
       index
     })
@@ -12025,7 +12033,7 @@ var texts20 = createTexts({
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_react80 = require("react");
+var import_react81 = require("react");
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -12054,7 +12062,7 @@ var ProgressBar = ({
   style,
   ...rest
 }) => {
-  const generatedId = (0, import_react80.useId)();
+  const generatedId = (0, import_react81.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -12110,13 +12118,13 @@ var ProgressBar = ({
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 
 // src/components/Search/AutocompleteSearch.context.tsx
-var import_react81 = require("react");
-var AutocompleteSearchContext = (0, import_react81.createContext)({});
+var import_react82 = require("react");
+var AutocompleteSearchContext = (0, import_react82.createContext)({});
 var useAutocompleteSearch = () => {
-  return (0, import_react81.useContext)(AutocompleteSearchContext);
+  return (0, import_react82.useContext)(AutocompleteSearchContext);
 };
 
 // src/components/Search/Search.module.css
@@ -12137,7 +12145,7 @@ var typographyTypes2 = {
 };
 
 // src/components/Search/SearchSuggestionItem.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_jsx_runtime294 = require("react/jsx-runtime");
 var SearchSuggestionItem = ({
   focus,
@@ -12145,9 +12153,9 @@ var SearchSuggestionItem = ({
   ref,
   ...rest
 }) => {
-  const itemRef = (0, import_react82.useRef)(null);
+  const itemRef = (0, import_react83.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
@@ -12302,7 +12310,7 @@ var Search = ({
   ...rest
 }) => {
   var _a;
-  const generatedId = (0, import_react83.useId)();
+  const generatedId = (0, import_react84.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasLabel = !!label;
   const tipId = derivativeIdGenerator(uniqueId, "tip");
@@ -12312,7 +12320,7 @@ var Search = ({
     "suggestions-description"
   );
   const { t } = useTranslation();
-  const [hasValue, setHasValue] = (0, import_react83.useState)(!!value);
+  const [hasValue, setHasValue] = (0, import_react84.useState)(!!value);
   const context = useAutocompleteSearch();
   const combinedRef = context.inputRef ? useCombinedRef(context.inputRef, ref) : ref;
   const handleChange = (e) => {
@@ -12460,7 +12468,7 @@ var texts22 = createTexts({
 });
 
 // src/components/Search/SearchAutocompleteWrapper.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 var import_jsx_runtime297 = require("react/jsx-runtime");
 var SearchAutocompleteWrapper = (props) => {
   const {
@@ -12472,12 +12480,12 @@ var SearchAutocompleteWrapper = (props) => {
     onSuggestionSelection,
     children
   } = props;
-  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 [inputValue, setInputValue] = (0, import_react85.useState)(value != null ? value : "");
+  const [suggestions, setSuggestions] = (0, import_react85.useState)([]);
+  const [showSuggestions, setShowSuggestions] = (0, import_react85.useState)(false);
   const closeSuggestions = () => showSuggestions === true && setShowSuggestions(false);
   const openSuggestions = () => showSuggestions === false && setShowSuggestions(true);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     if (suggestions.length > 0) {
       openSuggestions();
     } else {
@@ -12522,8 +12530,8 @@ var SearchAutocompleteWrapper = (props) => {
   const handleSetInputValue = (value2) => {
     setInputValue(value2 != null ? value2 : "");
   };
-  const inputRef = (0, import_react84.useRef)(null);
-  const suggestionsRef = (0, import_react84.useRef)(null);
+  const inputRef = (0, import_react85.useRef)(null);
+  const suggestionsRef = (0, import_react85.useRef)(null);
   useOnClickOutside([inputRef.current, suggestionsRef.current], () => {
     closeSuggestions();
   });
@@ -12605,7 +12613,7 @@ var SkipToContent = ({
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -12626,7 +12634,7 @@ var SplitButton = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isOpen, setIsOpen] = (0, import_react85.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react86.useState)(false);
   const buttonStyleProps = {
     purpose,
     size: size2
@@ -12671,15 +12679,15 @@ var texts23 = createTexts({
 });
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 
 // src/components/Table/collapsible/Table.context.tsx
-var import_react86 = require("react");
-var CollapsibleTableContext = (0, import_react86.createContext)({
+var import_react87 = require("react");
+var CollapsibleTableContext = (0, import_react87.createContext)({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => (0, import_react86.useContext)(CollapsibleTableContext);
+var useCollapsibleTableContext = () => (0, import_react87.useContext)(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 var import_jsx_runtime301 = require("react/jsx-runtime");
@@ -12687,12 +12695,12 @@ var Body = (props) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("tbody", {
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_jsx_runtime302 = require("react/jsx-runtime");
 var Head = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("thead", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(HeadContext, { value: true, children }) });
-var HeadContext = (0, import_react87.createContext)(false);
+var HeadContext = (0, import_react88.createContext)(false);
 function useIsInTableHead() {
-  const isInTableHead = (0, import_react87.useContext)(HeadContext);
+  const isInTableHead = (0, import_react88.useContext)(HeadContext);
   return isInTableHead;
 }
 
@@ -12868,26 +12876,26 @@ var Table = ({
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 var import_jsx_runtime308 = require("react/jsx-runtime");
 var TableWrapper = ({ className, ...rest }) => {
-  const themeContext = (0, import_react88.useContext)(ThemeContext);
+  const themeContext = (0, import_react89.useContext)(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
   const containerWidth = container2 ? container2.clientWidth : 0;
-  const [overflowX, setOverflowX] = (0, import_react88.useState)(false);
-  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react88.useState)(containerWidth);
+  const [overflowX, setOverflowX] = (0, import_react89.useState)(false);
+  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react89.useState)(containerWidth);
   function isOverflowingX(event) {
     return event.offsetWidth < event.scrollWidth;
   }
-  const wrapperRef = (0, import_react88.useRef)(null);
-  (0, import_react88.useEffect)(() => {
+  const wrapperRef = (0, import_react89.useRef)(null);
+  (0, import_react89.useEffect)(() => {
     if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
       setOverflowX(true);
       return;
     }
     setOverflowX(false);
   }, [themeContainerWidth]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     function handleResize() {
       setThemeContainerWidth(containerWidth);
     }
@@ -12936,8 +12944,8 @@ var CollapsibleRow = ({
   const isInHead = useIsInTableHead();
   const type = _type != null ? _type : isInHead ? "head" : "body";
   const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
-  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react89.useState)(true);
-  (0, import_react89.useEffect)(() => {
+  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react90.useState)(true);
+  (0, import_react90.useEffect)(() => {
     if (!isCollapsed) setChildrenCollapsed(true);
   }, [isCollapsed]);
   const rowProps = (isOpenCollapsibleHeader) => {
@@ -12955,7 +12963,7 @@ var CollapsibleRow = ({
   const collapsedHeaderValues = headerValues.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
-  const childrenArray = import_react89.Children.toArray(children);
+  const childrenArray = import_react90.Children.toArray(children);
   const collapsedChildren = childrenArray.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
@@ -12964,9 +12972,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_runtime309.jsxs)(import_react89.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(import_react90.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-      (0, import_react89.isValidElement)(child) && (0, import_react89.cloneElement)(child, {
+      (0, import_react90.isValidElement)(child) && (0, import_react90.cloneElement)(child, {
         collapsibleProps: { isCollapsibleChild: true }
       })
     ] }, `DL-${index}`);
@@ -13060,11 +13068,11 @@ var CollapsibleTable2 = CollapsibleTable;
 CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/AddTabButton.tsx
-var import_react92 = require("react");
+var import_react93 = require("react");
 
 // src/components/Tabs/Tabs.context.tsx
-var import_react90 = require("react");
-var TabsContext = (0, import_react90.createContext)({
+var import_react91 = require("react");
+var TabsContext = (0, import_react91.createContext)({
   activeTab: 0,
   tabsId: "",
   size: "small",
@@ -13076,7 +13084,7 @@ var TabsContext = (0, import_react90.createContext)({
   tabContentDirection: "row",
   addTabButtonProps: void 0
 });
-var useTabsContext = () => (0, import_react90.useContext)(TabsContext);
+var useTabsContext = () => (0, import_react91.useContext)(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -13094,9 +13102,9 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/TabWidthContext.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 var import_jsx_runtime311 = require("react/jsx-runtime");
-var TabContext = (0, import_react91.createContext)(null);
+var TabContext = (0, import_react92.createContext)(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
@@ -13125,8 +13133,8 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = (0, import_react91.useContext)(TabContext);
-  (0, import_react91.useLayoutEffect)(() => {
+  const context = (0, import_react92.useContext)(TabContext);
+  (0, import_react92.useLayoutEffect)(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
   }, [index, width]);
@@ -13143,7 +13151,7 @@ var AddTabButton = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const buttonRef = (0, import_react92.useRef)(null);
+  const buttonRef = (0, import_react93.useRef)(null);
   const combinedRef = useCombinedRef(ref, buttonRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
@@ -13168,7 +13176,7 @@ var AddTabButton = ({
 AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
-var import_react93 = require("react");
+var import_react94 = require("react");
 var import_jsx_runtime313 = require("react/jsx-runtime");
 var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
@@ -13184,17 +13192,17 @@ var Tabs = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react93.useId)();
+  const generatedId = (0, import_react94.useId)();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
-  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 [thisActiveTab, setActiveTab] = (0, import_react94.useState)(activeTab != null ? activeTab : 0);
+  const [hasTabFocus, setHasTabFocus] = (0, import_react94.useState)(false);
+  const tabListRef = (0, import_react94.useRef)(null);
+  const tabPanelsRef = (0, import_react94.useRef)(null);
   const handleTabChange = (index) => {
     setActiveTab(index);
     onChange == null ? void 0 : onChange(index);
   };
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -13228,7 +13236,7 @@ var Tabs = ({
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react94 = require("react");
+var import_react95 = require("react");
 var import_jsx_runtime314 = require("react/jsx-runtime");
 var Tab = ({
   active = false,
@@ -13247,18 +13255,18 @@ var Tab = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const itemRef = (0, import_react94.useRef)(null);
+  const itemRef = (0, import_react95.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   const { type = "button", ...restHtmlProps } = htmlProps;
   const fixedHtmlProps = { type, ...restHtmlProps };
-  (0, import_react94.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react94.useCallback)(() => {
+  const handleSelect = (0, import_react95.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -13304,7 +13312,7 @@ var Tab = ({
 Tab.displayName = "Tab";
 
 // src/components/Tabs/TabList.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_jsx_runtime315 = require("react/jsx-runtime");
 var TabList = ({
   children,
@@ -13324,15 +13332,15 @@ var TabList = ({
     addTabButtonProps
   } = useTabsContext();
   const uniqueId = id != null ? id : `${tabsId}-tablist`;
-  const childrenArray = import_react95.Children.toArray(children).length;
+  const childrenArray = import_react96.Children.toArray(children).length;
   const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
   const combinedRef = useCombinedRef(ref, tabListRef);
   const hasButton = addTabButtonProps ? true : false;
-  const tabListChildren = import_react95.Children ? import_react95.Children.map(children, (child, index) => {
+  const tabListChildren = import_react96.Children ? import_react96.Children.map(children, (child, index) => {
     const handleThisTabChange = () => {
       handleTabChange(index);
     };
-    return (0, import_react95.isValidElement)(child) && (0, import_react95.cloneElement)(child, {
+    return (0, import_react96.isValidElement)(child) && (0, import_react96.cloneElement)(child, {
       id: `${tabsId}-tab-${index}`,
       htmlProps: {
         ...child.props.htmlProps,
@@ -13345,7 +13353,7 @@ var TabList = ({
       onClick: combineHandlers(handleThisTabChange, child.props.onClick)
     });
   }) : [];
-  const [widths, setWidths] = (0, import_react95.useState)([]);
+  const [widths, setWidths] = (0, import_react96.useState)([]);
   const handleOnFocus = (event) => {
     setHasTabFocus(true);
     onFocus == null ? void 0 : onFocus(event);
@@ -13420,14 +13428,14 @@ var TabPanel = ({
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabPanels.tsx
-var import_react96 = require("react");
+var import_react97 = require("react");
 var import_jsx_runtime317 = require("react/jsx-runtime");
 var TabPanels = ({ children, ref, ...rest }) => {
   const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
   const combinedRef = useCombinedRef(ref, tabPanelsRef);
-  const panelChildren = import_react96.Children.map(children, (child, index) => {
+  const panelChildren = import_react97.Children.map(children, (child, index) => {
     const active = index === activeTab;
-    return (0, import_react96.isValidElement)(child) && (0, import_react96.cloneElement)(child, {
+    return (0, import_react97.isValidElement)(child) && (0, import_react97.cloneElement)(child, {
       id: `${tabsId}-panel-${index}`,
       active,
       htmlProps: {
@@ -13502,7 +13510,7 @@ var Tag = ({
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-var import_react97 = require("react");
+var import_react98 = require("react");
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
@@ -13551,12 +13559,12 @@ var TextInput = ({
   ref,
   ...rest
 }) => {
-  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)(() => {
+  const [text, setText] = (0, import_react98.useState)(getDefaultText(value, defaultValue));
+  const prefixRef = (0, import_react98.useRef)(null);
+  const suffixRef = (0, import_react98.useRef)(null);
+  const [prefixLength, setPrefixLength] = (0, import_react98.useState)(0);
+  const [suffixLength, setSuffixLength] = (0, import_react98.useState)(0);
+  (0, import_react98.useLayoutEffect)(() => {
     requestAnimationFrame(() => {
       if (prefixRef.current) {
         setPrefixLength(prefixRef.current.offsetWidth);
@@ -13572,7 +13580,7 @@ var TextInput = ({
       onChange(event);
     }
   };
-  const generatedId = (0, import_react97.useId)();
+  const generatedId = (0, import_react98.useId)();
   const uniqueId = id != null ? id : `${generatedId}-textInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -13742,7 +13750,7 @@ var TextInput = ({
 TextInput.displayName = "TextInput";
 
 // src/components/Toggle/Toggle.tsx
-var import_react98 = require("react");
+var import_react99 = require("react");
 
 // src/components/Toggle/Toggle.module.css
 var Toggle_default = {
@@ -13777,7 +13785,7 @@ var Toggle = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const generatedId = (0, import_react98.useId)();
+  const generatedId = (0, import_react99.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggle`;
   const iconSize = size2 === "large" ? "medium" : "small";
   const [checked, setChecked] = useControllableState({
@@ -13848,14 +13856,14 @@ var Toggle = ({
 Toggle.displayName = "Toggle";
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_react100 = require("react");
+var import_react101 = require("react");
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-var import_react99 = require("react");
-var ToggleBarContext = (0, import_react99.createContext)({
+var import_react100 = require("react");
+var ToggleBarContext = (0, import_react100.createContext)({
   size: "medium"
 });
-var useToggleBarContext = () => (0, import_react99.useContext)(ToggleBarContext);
+var useToggleBarContext = () => (0, import_react100.useContext)(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -13888,9 +13896,9 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = (0, import_react100.useId)();
+  const generatedId = (0, import_react101.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
-  const [groupValue, setGroupValue] = (0, import_react100.useState)(value);
+  const [groupValue, setGroupValue] = (0, import_react101.useState)(value);
   const handleChange = combineHandlers(
     (e) => setGroupValue(e.target.value),
     (e) => onChange && onChange(e, e.target.value)
@@ -13925,7 +13933,7 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-var import_react101 = require("react");
+var import_react102 = require("react");
 var import_jsx_runtime322 = require("react/jsx-runtime");
 var typographyTypes3 = {
   large: "bodyLarge",
@@ -13957,7 +13965,7 @@ var ToggleRadio = ({
   id,
   ...rest
 }) => {
-  const generatedId = (0, import_react101.useId)();
+  const generatedId = (0, import_react102.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
   const group = useToggleBarContext();
   const handleChange = (event) => {
@@ -14006,7 +14014,7 @@ var ToggleRadio = ({
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_react102 = require("react");
+var import_react103 = require("react");
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -14027,7 +14035,7 @@ var ToggleButton = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react102.useId)();
+  const generatedId = (0, import_react103.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
   return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
@@ -14065,7 +14073,7 @@ var ToggleButton = ({
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-var import_react103 = require("react");
+var import_react104 = require("react");
 var import_jsx_runtime324 = require("react/jsx-runtime");
 var ToggleButtonGroup = (props) => {
   const {
@@ -14078,7 +14086,7 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react103.useId)();
+  const generatedId = (0, import_react104.useId)();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
   return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)(
     VStack,