@norges-domstoler/dds-components 23.1.3 → 23.2.0

package/dist/index.js

@@ -368,7 +368,6 @@ __export(index_exports, {
   ZoomOutIcon: () => ZoomOutIcon,
   calendarDateToNativeDate: () => calendarDateToNativeDate,
   cn: () => cn,
-  countryOptions: () => countryOptions,
   createPurposes: () => createPurposes,
   createSelectOptions: () => createSelectOptions,
   createSizes: () => createSizes,
@@ -379,7 +378,6 @@ __export(index_exports, {
   getBaseHTMLProps: () => getBaseHTMLProps,
   getColorCn: () => getColorCn,
   getElementType: () => getElementType,
-  getLiteralScreenSize: () => getLiteralScreenSize,
   getTypographyCn: () => getTypographyCn,
   handleElementWithBackdropMount: () => handleElementWithBackdropMount,
   handleElementWithBackdropUnmount: () => handleElementWithBackdropUnmount,
@@ -1034,7 +1032,7 @@ function useReturnFocusOnBlur(active, onBlur, triggerElement) {
       const focusableElements = getFocusableElements(elementRef);
       const lastElement = focusableElements[focusableElements.length - 1];
       const firstElement = focusableElements[0];
-      if (!e.shiftKey && document.activeElement === lastElement || e.shiftKey && document.activeElement === firstElement || e.shiftKey && document.activeElement === element) {
+      if (!e.shiftKey && document.activeElement === lastElement || e.shiftKey && document.activeElement === firstElement || e.shiftKey && document.activeElement === elementRef.current) {
         triggerElement.focus();
         e.preventDefault();
         onBlur();
@@ -1048,7 +1046,7 @@ function useReturnFocusOnBlur(active, onBlur, triggerElement) {
     return () => {
       element == null ? void 0 : element.removeEventListener("keydown", handleFocus);
     };
-  }, [active]);
+  }, [active, triggerElement, onBlur]);
   return elementRef;
 }
 
@@ -1435,9 +1433,7 @@ function Icon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     C,
     {
-      ...getBaseHTMLProps(id, className, style, htmlProps, {
-        ...rest
-      }),
+      ...getBaseHTMLProps(id, className, style, htmlProps, rest),
       height: size2,
       width: size2,
       fill: color,
@@ -1541,19 +1537,30 @@ var getValue = (v, bp, invert) => {
 };
 var convertMultiValue = (value, bp, invert) => value.split(" ").map((v) => getValue(v, bp, invert)).join(" ");
 var invertValue = (v) => v === "0" ? "0" : `calc(-1 * ${v})`;
+var buildCSSKey = (prefix2, suffix, bp) => {
+  let key = `--${TOKEN_PREFIX}`;
+  if (prefix2) key += `-${prefix2}`;
+  if (bp) key += `-${bp}`;
+  if (suffix) key += `-${suffix}`;
+  return key;
+};
+function getCSSProperties(property, prefix2, suffix, invert) {
+  if (property === void 0 || property === null) return;
+  const properties = {};
+  properties[buildCSSKey(prefix2, suffix)] = convertMultiValue(property.toString(), void 0, invert);
+  return properties;
+}
 function getResponsiveCSSProperties(property, prefix2, suffix, invert) {
   if (!property) return;
   const properties = {};
-  const pPrefix = `--${TOKEN_PREFIX}-${prefix2}`;
-  const pSuffix = suffix ? `-${suffix}` : "";
   if (isBreakpointObject(property)) {
     BREAKPOINTS.forEach((bp) => {
       if (property[bp]) {
-        properties[`${pPrefix}-${bp}${pSuffix}`] = convertMultiValue(property[bp].toString(), bp, invert);
+        properties[buildCSSKey(prefix2, suffix, bp)] = convertMultiValue(property[bp].toString(), bp, invert);
       }
     });
   } else {
-    properties[`${pPrefix}${pSuffix}`] = convertMultiValue(property.toString(), void 0, invert);
+    properties[buildCSSKey(prefix2, suffix)] = convertMultiValue(property.toString(), void 0, invert);
   }
   return properties;
 }
@@ -1829,9 +1836,17 @@ Contrast.displayName = "Contrast";
 
 // src/components/layout/Grid/Grid.module.css
 var Grid_default = {
+  "dds-grid": "Grid_dds-grid",
   "dds-grid-template-columns": "Grid_dds-grid-template-columns",
+  "dds-grid-auto-flow": "Grid_dds-grid-auto-flow",
+  "dds-grid-auto-columns": "Grid_dds-grid-auto-columns",
+  "dds-grid-auto-rows": "Grid_dds-grid-auto-rows",
+  "dds-grid-template": "Grid_dds-grid-template",
+  "dds-grid-template-rows": "Grid_dds-grid-template-rows",
+  "dds-grid-template-areas": "Grid_dds-grid-template-areas",
   "dds-grid-column": "Grid_dds-grid-column",
   "dds-grid-row": "Grid_dds-grid-row",
+  "dds-grid-area": "Grid_dds-grid-area",
   "dds-j-self": "Grid_dds-j-self",
   "child--first-half": "Grid_child--first-half",
   "child--second-half": "Grid_child--second-half",
@@ -1840,56 +1855,90 @@ var Grid_default = {
 
 // src/components/layout/Grid/Grid.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Grid = ({
-  id,
-  className,
-  htmlProps,
-  gridTemplateColumns = {
+var DEFAULT_PAGE_LAYOUT = {
+  gridTemplateColumns: {
     xs: "repeat(var(--dds-grid-xs-count), minmax(0, 1fr))",
     sm: "repeat(var(--dds-grid-sm-count), minmax(0, 1fr))",
     md: "repeat(var(--dds-grid-md-count), minmax(0, 1fr))",
     lg: "repeat(var(--dds-grid-lg-count), minmax(0, 1fr))",
     xl: "repeat(var(--dds-grid-xl-count), minmax(0, 1fr))"
   },
-  columnGap = {
+  gutterSize: {
     xs: "var(--dds-grid-xs-gutter-size)",
     sm: "var(--dds-grid-sm-gutter-size)",
     md: "var(--dds-grid-md-gutter-size)",
     lg: "var(--dds-grid-lg-gutter-size)",
     xl: "var(--dds-grid-xl-gutter-size)"
   },
-  rowGap = {
-    xs: "var(--dds-grid-xs-gutter-size)",
-    sm: "var(--dds-grid-sm-gutter-size)",
-    md: "var(--dds-grid-md-gutter-size)",
-    lg: "var(--dds-grid-lg-gutter-size)",
-    xl: "var(--dds-grid-xl-gutter-size)"
-  },
-  marginInline = { xs: "x2", sm: "x2", md: "x4", lg: "x6", xl: "x10" },
+  marginInline: { xs: "x2", sm: "x2", md: "x4", lg: "x6", xl: "x10" }
+};
+var Grid = ({
+  id,
+  className,
+  htmlProps,
+  defaultPageLayout = true,
+  display = "grid",
+  grid,
+  gridAutoColumns,
+  gridAutoFlow,
+  gridAutoRows,
+  gridTemplate,
+  gridTemplateAreas,
+  gridTemplateRows,
+  gridTemplateColumns,
+  columnGap,
+  rowGap,
+  marginInline,
   style,
   ...rest
 }) => {
+  const pageDefaults = defaultPageLayout ? DEFAULT_PAGE_LAYOUT : null;
+  const resolvedGridTemplateColumns = gridTemplateColumns != null ? gridTemplateColumns : pageDefaults == null ? void 0 : pageDefaults.gridTemplateColumns;
+  const resolvedColumnGap = columnGap != null ? columnGap : pageDefaults == null ? void 0 : pageDefaults.gutterSize;
+  const resolvedRowGap = rowGap != null ? rowGap : pageDefaults == null ? void 0 : pageDefaults.gutterSize;
+  const resolvedMarginInline = marginInline != null ? marginInline : pageDefaults == null ? void 0 : pageDefaults.marginInline;
   const styleVariables = {
     ...getResponsiveCSSProperties(
-      gridTemplateColumns,
+      resolvedGridTemplateColumns,
       "r",
       "grid-template-columns"
+    ),
+    ...getResponsiveCSSProperties(grid, "r", "grid"),
+    ...getResponsiveCSSProperties(gridAutoColumns, "r", "grid-auto-columns"),
+    ...getResponsiveCSSProperties(gridAutoFlow, "r", "grid-auto-flow"),
+    ...getResponsiveCSSProperties(gridAutoRows, "r", "grid-auto-rows"),
+    ...getResponsiveCSSProperties(gridTemplate, "r", "grid-template"),
+    ...getResponsiveCSSProperties(gridTemplateRows, "r", "grid-template-rows"),
+    ...getResponsiveCSSProperties(
+      gridTemplateAreas,
+      "r",
+      "grid-template-areas"
     )
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Box,
     {
-      display: "grid",
       ...getBaseHTMLProps(
         id,
-        cn(className, Grid_default["dds-grid-template-columns"]),
+        cn(
+          className,
+          resolvedGridTemplateColumns && Grid_default["dds-grid-template-columns"],
+          grid && Grid_default["dds-grid"],
+          gridAutoColumns && Grid_default["dds-grid-auto-columns"],
+          gridAutoFlow && Grid_default["dds-grid-auto-flow"],
+          gridAutoRows && Grid_default["dds-grid-auto-rows"],
+          gridTemplate && Grid_default["dds-grid-template"],
+          gridTemplateRows && Grid_default["dds-grid-template-rows"],
+          gridTemplateAreas && Grid_default["dds-grid-template-areas"]
+        ),
         { ...style, ...styleVariables },
         htmlProps,
         rest
       ),
-      marginInline,
-      columnGap,
-      rowGap
+      display,
+      marginInline: resolvedMarginInline,
+      columnGap: resolvedColumnGap,
+      rowGap: resolvedRowGap
     }
   );
 };
@@ -1903,12 +1952,14 @@ var GridChild = ({
   htmlProps,
   style,
   gridRow,
+  gridArea,
   justifySelf,
   columnsOccupied,
   ...rest
 }) => {
   const styleVariables = {
     ...getResponsiveCSSProperties(gridRow, "r", "grid-row"),
+    ...getResponsiveCSSProperties(gridArea, "r", "grid-area"),
     ...getResponsiveCSSProperties(justifySelf, "r", "j-self"),
     ...getResponsiveCSSProperties(columnsOccupied, "r", "grid-column")
   };
@@ -1921,6 +1972,7 @@ var GridChild = ({
           className,
           Grid_default["child-col-count"],
           gridRow && Grid_default["dds-grid-row"],
+          gridArea && Grid_default["dds-grid-area"],
           justifySelf && Grid_default["dds-j-self"],
           columnsOccupied && Grid_default["dds-grid-column"],
           columnsOccupied === "firstHalf" && Grid_default["child--first-half"],
@@ -1965,8 +2017,8 @@ var Paper = ({
   ...rest
 }) => {
   const styleVariables = {
-    ...getResponsiveCSSProperties(background, "paper-background"),
-    ...getResponsiveCSSProperties(border, "paper-border")
+    ...getCSSProperties(background, "paper", "background"),
+    ...getCSSProperties(border, "paper", "border")
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Box,
@@ -2154,12 +2206,6 @@ function Spinner(props) {
     ...rest
   } = props;
   const { t } = useTranslation();
-  const mountTime = (0, import_react17.useRef)(Date.now());
-  const animationDelay = -(mountTime.current % 1500);
-  const styleVariables = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ["--dds-spinner-animation-delay"]: animationDelay
-  };
   const generatedId = (0, import_react17.useId)();
   const uniqueId = `${generatedId}-spinnerTitle`;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -2188,8 +2234,7 @@ function Spinner(props) {
             cy: "12.25",
             r: "6",
             fill: getTextColor(color),
-            className: Spinner_default.jordskifterett,
-            style: styleVariables
+            className: Spinner_default.jordskifterett
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2200,8 +2245,7 @@ function Spinner(props) {
             width: "16",
             height: "4",
             fill: getTextColor(color),
-            className: Spinner_default.lagmannsrett,
-            style: styleVariables
+            className: Spinner_default.lagmannsrett
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2209,8 +2253,7 @@ function Spinner(props) {
           {
             d: "M12 16.6154C16.4183 16.6154 20 12.7581 20 8H4C4 12.7581 7.58172 16.6154 12 16.6154Z",
             fill: getTextColor(color),
-            className: Spinner_default.tingrett,
-            style: styleVariables
+            className: Spinner_default.tingrett
           }
         )
       ]
@@ -2309,22 +2352,6 @@ var HiddenInput = ({
   ...rest
 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { className: cn(className, utilStyles_default["hide-input"]), ...rest });
 
-// src/components/helpers/ScreenSize/ScreenSize.utils.tsx
-var getLiteralScreenSize = (screenSize) => {
-  switch (screenSize) {
-    case 4 /* XLarge */:
-      return "xl";
-    case 3 /* Large */:
-      return "lg";
-    case 2 /* Medium */:
-      return "md";
-    case 1 /* Small */:
-      return "sm";
-    case 0 /* XSmall */:
-      return "xs";
-  }
-};
-
 // src/components/helpers/StylelessButton/StylelessButton.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var StylelessButton = ({
@@ -2591,6 +2618,7 @@ function SvgWrapper({
   // destructure for å unngå at `iconState` blir sendt videre til svg-elementet som ugyldig custom attribute.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   iconState: _iconState,
+  style,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -2602,6 +2630,7 @@ function SvgWrapper({
       viewBox: `0 0 ${size} ${size}`,
       className: cn(className, Icon_default.svg),
       style: {
+        ...style,
         height: height ? height : sizeCSS,
         width: width ? width : sizeCSS
       },
@@ -4157,8 +4186,7 @@ function DdsProvider({ language, theme, children }) {
 var Accordion_default = {
   container: "Accordion_container",
   "header-button": "Accordion_header-button",
-  chevron: "Accordion_chevron",
-  body: "Accordion_body"
+  chevron: "Accordion_chevron"
 };
 
 // src/components/Accordion/Accordion.tsx
@@ -6962,7 +6990,7 @@ var CalendarPopoverContent = ({
   });
   const themeContext = (0, import_react41.useContext)(ThemeContext);
   if (!themeContext) {
-    throw new Error("DatePicker must be used within a ThemeProvider");
+    throw new Error("DatePicker must be used within a DdsProvider");
   }
   const portalTarget = themeContext.el;
   const { t } = useTranslation();
@@ -8331,7 +8359,7 @@ var Drawer = ({
 }) => {
   const themeContext = (0, import_react53.useContext)(ThemeContext);
   if (!themeContext) {
-    throw new Error("Drawer must be used within a ThemeProvider");
+    throw new Error("Drawer must be used within a DdsProvider");
   }
   const { t } = useTranslation();
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
@@ -9545,6 +9573,45 @@ var texts16 = createTexts({
 var import_file_selector = require("file-selector");
 var import_react61 = require("react");
 
+// src/components/FileUploader/attr-accept.ts
+function isAccepted(file, acceptedFiles) {
+  if (file && acceptedFiles) {
+    const acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(",");
+    const fileName = file.name || "";
+    const mimeType = (file.type || "").toLowerCase();
+    const baseMimeType = mimeType.split("/")[0] || "";
+    return acceptedFilesArray.some((type) => {
+      const validType = type.trim().toLowerCase();
+      if (validType.charAt(0) === ".") {
+        return fileName.toLowerCase().endsWith(validType);
+      } else if (validType.endsWith("/*")) {
+        return baseMimeType === validType.slice(0, -2);
+      }
+      return mimeType === validType;
+    });
+  }
+  return true;
+}
+
+// src/components/FileUploader/FileUploader.utils.ts
+var preventDefaults = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+var isDragEvent = (event) => {
+  const asDragEvent = event;
+  return asDragEvent.dataTransfer !== void 0;
+};
+var isEventWithFiles = (event) => {
+  if (!isDragEvent(event)) {
+    return event.target.files !== null && event.target.files !== void 0;
+  }
+  return event.dataTransfer.types.includes("Files") || event.dataTransfer.types.includes("application/x-moz-file");
+};
+var isFileAccepted = (file, accept) => {
+  return accept !== void 0 ? isAccepted(file, accept) : true;
+};
+
 // src/components/FileUploader/fileUploaderReducer.ts
 var fileUploaderReducer = (state, action) => {
   switch (action.type) {
@@ -9588,45 +9655,6 @@ var fileUploaderReducer = (state, action) => {
   }
 };
 
-// src/components/FileUploader/attr-accept.ts
-function isAccepted(file, acceptedFiles) {
-  if (file && acceptedFiles) {
-    const acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(",");
-    const fileName = file.name || "";
-    const mimeType = (file.type || "").toLowerCase();
-    const baseMimeType = mimeType.split("/")[0] || "";
-    return acceptedFilesArray.some((type) => {
-      const validType = type.trim().toLowerCase();
-      if (validType.charAt(0) === ".") {
-        return fileName.toLowerCase().endsWith(validType);
-      } else if (validType.endsWith("/*")) {
-        return baseMimeType === validType.slice(0, -2);
-      }
-      return mimeType === validType;
-    });
-  }
-  return true;
-}
-
-// src/components/FileUploader/utils.ts
-var preventDefaults = (event) => {
-  event.preventDefault();
-  event.stopPropagation();
-};
-var isDragEvent = (event) => {
-  const asDragEvent = event;
-  return asDragEvent.dataTransfer !== void 0;
-};
-var isEventWithFiles = (event) => {
-  if (!isDragEvent(event)) {
-    return event.target.files !== null && event.target.files !== void 0;
-  }
-  return event.dataTransfer.types.includes("Files") || event.dataTransfer.types.includes("application/x-moz-file");
-};
-var isFileAccepted = (file, accept) => {
-  return accept !== void 0 ? isAccepted(file, accept) : true;
-};
-
 // src/components/FileUploader/useFileUploader.ts
 var calcRootErrors = (maxFilesErrorMessage, files, maxFiles, errorMessage) => {
   const errors = [];
@@ -10963,18 +10991,10 @@ var import_react71 = require("react");
 var LocalMessage_default = {
   container: "LocalMessage_container",
   "container--info": "LocalMessage_container--info",
-  icon: "LocalMessage_icon",
   "container--warning": "LocalMessage_container--warning",
   "container--danger": "LocalMessage_container--danger",
   "container--success": "LocalMessage_container--success",
-  "container--tips": "LocalMessage_container--tips",
-  "container--horisontal": "LocalMessage_container--horisontal",
-  "container--horisontal--closable": "LocalMessage_container--horisontal--closable",
-  "container--vertical": "LocalMessage_container--vertical",
-  "container--vertical--closable": "LocalMessage_container--vertical--closable",
-  container__text: "LocalMessage_container__text",
-  container__icon: "LocalMessage_container__icon",
-  container__button: "LocalMessage_container__button"
+  "container--tips": "LocalMessage_container--tips"
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
@@ -11007,12 +11027,28 @@ var LocalMessage = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isClosed, setClosed] = (0, import_react71.useState)(false);
-  if (isClosed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(import_jsx_runtime303.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
-    Box,
+  const [isOpen, setOpen] = (0, import_react71.useState)(true);
+  const gridLayout = closable ? `${layout}-closable` : layout;
+  const containerGridTemplateStyles = {
+    horisontal: {
+      gridTemplateAreas: `"icon text"`,
+      gridTemplateColumns: "min-content 1fr"
+    },
+    "horisontal-closable": {
+      gridTemplateAreas: `"icon text close-btn"`,
+      gridTemplateColumns: "min-content 1fr min-content"
+    },
+    vertical: {
+      gridTemplateAreas: `"icon" "text"`,
+      gridTemplateColumns: "1fr"
+    },
+    "vertical-closable": {
+      gridTemplateAreas: `"icon close-btn" "text text"`,
+      gridTemplateColumns: "1fr min-content"
+    }
+  };
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
+    Grid,
     {
       ...getBaseHTMLProps(
         id,
@@ -11020,8 +11056,6 @@ var LocalMessage = ({
           className,
           typographyStyles_default["body-short-medium"],
           LocalMessage_default.container,
-          LocalMessage_default[`container--${layout}`],
-          closable && LocalMessage_default[`container--${layout}--closable`],
           LocalMessage_default[`container--${purpose}`]
         ),
         style,
@@ -11029,36 +11063,41 @@ var LocalMessage = ({
         rest
       ),
       width,
-      display: "grid",
       padding: "x0.75 x0.75 x0.75 x0.5",
-      gap: "x0.5",
+      rowGap: "x0.5",
+      columnGap: "x0.5",
+      marginInline: "x0",
+      ...containerGridTemplateStyles[gridLayout],
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
-          Icon,
+          GridChild,
           {
+            as: Icon,
+            gridArea: "icon",
             iconSize: "component",
             icon: icons2[purpose],
-            className: cn(LocalMessage_default.icon, LocalMessage_default.container__icon)
+            color: `var(--dds-color-icon-on-${purpose === "tips" ? "info" : purpose}-default)`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: LocalMessage_default.container__text, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(GridChild, { gridArea: "text", children }),
         closable && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
-          Button,
+          GridChild,
           {
+            as: Button,
+            gridArea: "close-btn",
             icon: CloseIcon,
             purpose: "tertiary",
             onClick: () => {
-              setClosed(true);
+              setOpen(false);
               onClose == null ? void 0 : onClose();
             },
             size: "xsmall",
-            "aria-label": t(commonTexts.closeMessage),
-            className: LocalMessage_default.container__button
+            "aria-label": t(commonTexts.closeMessage)
           }
         )
       ]
     }
-  );
+  ) : null;
 };
 LocalMessage.displayName = "LocalMessage";
 
@@ -11108,7 +11147,7 @@ var Modal = ({
   };
   const themeContext = (0, import_react72.useContext)(ThemeContext);
   if (!themeContext) {
-    throw new Error("Modal must be used within a ThemeProvider");
+    throw new Error("Modal must be used within a DdsProvider");
   }
   const { t } = useTranslation();
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
@@ -11427,9 +11466,6 @@ var import_react76 = require("react");
 
 // src/components/Pagination/Pagination.module.css
 var Pagination_default = {
-  list: "Pagination_list",
-  list__item: "Pagination_list__item",
-  indicators: "Pagination_indicators",
   "truncation-icon": "Pagination_truncation-icon"
 };
 
@@ -12195,6 +12231,7 @@ var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }))
 
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_react77 = require("react");
 var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
@@ -12247,9 +12284,22 @@ var Pagination = ({
       onSelectOptionChange(option);
     }
   };
+  const listItemProps = {
+    as: "li",
+    display: "inline-grid",
+    alignContent: "center"
+  };
+  const listProps = {
+    as: "ol",
+    defaultPageLayout: false,
+    gridAutoFlow: "column",
+    margin: "x0",
+    padding: "x0",
+    gap: "x0.75"
+  };
   const listItems = items.length > 0 ? items.map((item, i) => {
     const isActive = item === activePage;
-    return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("li", { className: Pagination_default.list__item, children: item !== "truncator" && typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+    return /* @__PURE__ */ (0, import_react77.createElement)(Box, { ...listItemProps, key: `pagination-item-${i}` }, item !== "truncator" && typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
       Button,
       {
         purpose: isActive ? "primary" : "secondary",
@@ -12266,7 +12316,7 @@ var Pagination = ({
         icon: MoreHorizontalIcon,
         className: Pagination_default["truncation-icon"]
       }
-    ) }, `pagination-item-${i}`);
+    ));
   }) : void 0;
   const previousPageButton = /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
     Button,
@@ -12307,125 +12357,97 @@ var Pagination = ({
         ...baseHTMLProps
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
-          ShowHide,
-          {
-            as: "ol",
-            hideBelow: smallScreenBreakpoint,
-            className: Pagination_default.list,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                "li",
-                {
-                  className: cn(
-                    Pagination_default.list__item,
-                    isOnFirstPage && utilStyles_default.invisible
-                  ),
-                  "aria-hidden": isOnFirstPage,
-                  children: previousPageButton
-                }
-              ),
-              listItems,
-              /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                "li",
+        /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(Grid, { ...listProps, hideBelow: smallScreenBreakpoint, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            Box,
+            {
+              ...listItemProps,
+              className: isOnFirstPage ? utilStyles_default.invisible : void 0,
+              "aria-hidden": isOnFirstPage,
+              children: previousPageButton
+            }
+          ),
+          listItems,
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            Box,
+            {
+              ...listItemProps,
+              className: isOnLastPage ? utilStyles_default.invisible : void 0,
+              "aria-hidden": isOnLastPage,
+              children: nextPageButton
+            }
+          )
+        ] }),
+        !!smallScreenBreakpoint && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(Grid, { ...listProps, showBelow: smallScreenBreakpoint, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            Box,
+            {
+              ...listItemProps,
+              className: isOnFirstPage ? utilStyles_default.invisible : void 0,
+              "aria-hidden": isOnFirstPage,
+              children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+                Button,
                 {
-                  className: cn(
-                    Pagination_default.list__item,
-                    isOnLastPage && utilStyles_default.invisible
-                  ),
-                  "aria-hidden": isOnLastPage,
-                  children: nextPageButton
+                  purpose: "secondary",
+                  size: "small",
+                  icon: ChevronFirstIcon,
+                  onClick: (event) => {
+                    onPageChange(event, 1);
+                  },
+                  "aria-label": t(texts22.firstPage)
                 }
               )
-            ]
-          }
-        ),
-        !!smallScreenBreakpoint && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
-          ShowHide,
-          {
-            as: "ol",
-            showBelow: smallScreenBreakpoint,
-            className: Pagination_default.list,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                "li",
-                {
-                  className: cn(
-                    Pagination_default.list__item,
-                    isOnFirstPage && utilStyles_default.invisible
-                  ),
-                  "aria-hidden": isOnFirstPage,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                    Button,
-                    {
-                      purpose: "secondary",
-                      size: "small",
-                      icon: ChevronFirstIcon,
-                      onClick: (event) => {
-                        onPageChange(event, 1);
-                      },
-                      "aria-label": t(texts22.firstPage)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                "li",
-                {
-                  className: cn(
-                    Pagination_default.list__item,
-                    isOnFirstPage && utilStyles_default.invisible
-                  ),
-                  "aria-hidden": isOnFirstPage,
-                  children: previousPageButton
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            Box,
+            {
+              ...listItemProps,
+              className: isOnFirstPage ? utilStyles_default.invisible : void 0,
+              "aria-hidden": isOnFirstPage,
+              children: previousPageButton
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(Box, { ...listItemProps, children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            Button,
+            {
+              size: "small",
+              onClick: (event) => {
+                onPageChange(event, activePage);
+              },
+              children: activePage
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            Box,
+            {
+              ...listItemProps,
+              className: isOnLastPage ? utilStyles_default.invisible : void 0,
+              "aria-hidden": isOnLastPage,
+              children: nextPageButton
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            Box,
+            {
+              ...listItemProps,
+              className: isOnLastPage ? utilStyles_default.invisible : void 0,
+              "aria-hidden": isOnLastPage,
+              children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
                 Button,
                 {
+                  purpose: "secondary",
                   size: "small",
+                  icon: ChevronLastIcon,
                   onClick: (event) => {
-                    onPageChange(event, activePage);
+                    onPageChange(event, pagesLength);
                   },
-                  children: activePage
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                "li",
-                {
-                  className: cn(
-                    Pagination_default.list__item,
-                    isOnLastPage && utilStyles_default.invisible
-                  ),
-                  "aria-hidden": isOnLastPage,
-                  children: nextPageButton
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                "li",
-                {
-                  className: cn(
-                    Pagination_default.list__item,
-                    isOnLastPage && utilStyles_default.invisible
-                  ),
-                  "aria-hidden": isOnLastPage,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-                    Button,
-                    {
-                      purpose: "secondary",
-                      size: "small",
-                      icon: ChevronLastIcon,
-                      onClick: (event) => {
-                        onPageChange(event, pagesLength);
-                      },
-                      "aria-label": t(texts22.lastPage)
-                    }
-                  )
+                  "aria-label": t(texts22.lastPage)
                 }
               )
-            ]
-          }
-        )
+            }
+          )
+        ] })
       ]
     }
   ) : null;
@@ -12443,12 +12465,12 @@ var Pagination = ({
       ...baseHTMLProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
-          Box,
+          Grid,
           {
-            display: "grid",
+            defaultPageLayout: false,
             gap: "x0.5",
             alignItems: "center",
-            className: Pagination_default.indicators,
+            gridAutoFlow: "column",
             children: [
               withSelect && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
                 Select,
@@ -12528,7 +12550,7 @@ var texts22 = createTexts({
 });
 
 // src/components/PhoneInput/PhoneInput.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 
 // src/components/PhoneInput/constants.ts
 var COUNTRIES = {
@@ -12942,9 +12964,7 @@ var prioritizedCountryOptions = prioritizedCountries.map((country) => {
     countryCode: country.id
   };
 });
-var sortedCountryOptions = Object.values(
-  COUNTRIES
-).sort((a, b) => {
+var compareCountriesByName = (a, b) => {
   if (a.name < b.name) {
     return -1;
   }
@@ -12952,18 +12972,21 @@ var sortedCountryOptions = Object.values(
     return 1;
   }
   return 0;
-}).map((country) => ({
-  countryCode: country.id,
-  label: `${country.name} ${country.dialCode}`
-})).filter(
-  (country) => !prioritizedCountryOptions.some(
-    (pCountry) => pCountry.countryCode === country.countryCode
-  )
-);
-var countryOptions = [
-  ...prioritizedCountryOptions,
-  ...sortedCountryOptions
-];
+};
+var createCountryOptions = (countries) => {
+  const sortedCountryOptions = Object.values(
+    countries
+  ).sort(compareCountriesByName).map((country) => ({
+    countryCode: country.id,
+    label: `${country.name} ${country.dialCode}`
+  })).filter(
+    (country) => !prioritizedCountryOptions.some(
+      (pCountry) => pCountry.countryCode === country.countryCode
+    )
+  );
+  return [...prioritizedCountryOptions, ...sortedCountryOptions];
+};
+var countryOptions = createCountryOptions(COUNTRIES);
 var PhoneInput = ({
   label,
   readOnly,
@@ -12991,7 +13014,7 @@ var PhoneInput = ({
   const { t } = useTranslation();
   const tGroupLabel = groupLabel != null ? groupLabel : t(texts23.countryCodeAndPhoneNumber);
   const tSelectLabel = selectLabel != null ? selectLabel : t(texts23.countryCode);
-  const generatedId = (0, import_react77.useId)();
+  const generatedId = (0, import_react78.useId)();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
   const phoneNumberId = `${uniqueId}-phone-number`;
@@ -13001,27 +13024,27 @@ var PhoneInput = ({
   const hasMessage = hasErrorMessage || hasTip;
   const tipId = derivativeIdGenerator(phoneInputId, "tip");
   const errorMessageId = derivativeIdGenerator(phoneInputId, "errorMessage");
-  const [callingCode, setCallingCode] = (0, import_react77.useState)("");
-  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react77.useState)("");
-  const [internalValue, setInternalValue] = (0, import_react77.useState)(
+  const [callingCode, setCallingCode] = (0, import_react78.useState)("");
+  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react78.useState)("");
+  const [internalValue, setInternalValue] = (0, import_react78.useState)(
     defaultValue != null ? defaultValue : {
       countryCode: "",
       phoneNumber: ""
     }
   );
   const isControlled = value !== void 0;
-  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react77.useState)(0);
-  const callingCodeRef = (0, import_react77.useRef)(null);
-  (0, import_react77.useLayoutEffect)(() => {
+  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react78.useState)(0);
+  const callingCodeRef = (0, import_react78.useRef)(null);
+  (0, import_react78.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_react77.useRef)(null);
+  const internalSelectRef = (0, import_react78.useRef)(null);
   const combinedSelectRef = useCombinedRef(selectRef, internalSelectRef);
   const displayedValue = isControlled ? value : internalValue;
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     const selectEl = internalSelectRef.current;
     if (selectEl && selectEl.value) {
       const { options, selectedIndex } = selectEl;
@@ -13183,7 +13206,7 @@ var texts23 = createTexts({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_react_dom6 = require("react-dom");
 
 // src/components/Popover/Popover.module.css
@@ -13195,9 +13218,9 @@ var Popover_default = {
 };
 
 // src/components/Popover/Popover.context.tsx
-var import_react78 = require("react");
-var PopoverContext = (0, import_react78.createContext)({});
-var usePopoverContext = () => (0, import_react78.useContext)(PopoverContext);
+var import_react79 = require("react");
+var PopoverContext = (0, import_react79.createContext)({});
+var usePopoverContext = () => (0, import_react79.useContext)(PopoverContext);
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime313 = require("react/jsx-runtime");
@@ -13232,7 +13255,7 @@ var Popover = ({
   });
   const { maxHeight, maxWidth, minHeight, minWidth, height, width } = sizeProps;
   const context = usePopoverContext();
-  const themeContext = (0, import_react79.useContext)(ThemeContext);
+  const themeContext = (0, import_react80.useContext)(ThemeContext);
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   const {
     floatStyling: contextFloatStyling,
@@ -13246,7 +13269,7 @@ var Popover = ({
   } = context;
   const { t } = useTranslation();
   const hasContext = !isEmpty(context);
-  const generatedId = (0, import_react79.useId)();
+  const generatedId = (0, import_react80.useId)();
   const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
   const [
     popoverId,
@@ -13286,7 +13309,7 @@ var Popover = ({
     anchorEl && anchorEl
   );
   const multiRef = useCombinedRef(ref, popoverRef, floatingRef);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
   useOnClickOutside([popoverRef, anchorRef], () => {
@@ -13355,7 +13378,7 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/Popover/PopoverGroup.tsx
-var import_react80 = require("react");
+var import_react81 = require("react");
 var import_jsx_runtime314 = require("react/jsx-runtime");
 var PopoverGroup = ({
   isOpen: propIsOpen,
@@ -13367,12 +13390,12 @@ var PopoverGroup = ({
   popoverId
 }) => {
   var _a;
-  const [internalIsOpen, internalSetIsOpen] = (0, import_react80.useState)(isInitiallyOpen);
+  const [internalIsOpen, internalSetIsOpen] = (0, import_react81.useState)(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = (0, import_react80.useId)();
+  const generatedId = (0, import_react81.useId)();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
-  const [floatOptions, setFloatOptions] = (0, import_react80.useState)();
+  const [floatOptions, setFloatOptions] = (0, import_react81.useState)();
   const {
     refs,
     styles: positionStyles,
@@ -13393,10 +13416,10 @@ var PopoverGroup = ({
       handleOpen();
     }
   };
-  const buttonRef = (0, import_react80.useRef)(null);
+  const buttonRef = (0, import_react81.useRef)(null);
   const anchorRef = refs.setReference;
   const combinedAnchorRef = useCombinedRef(buttonRef, anchorRef);
-  const popoverRef = (0, import_react80.useRef)(null);
+  const popoverRef = (0, import_react81.useRef)(null);
   const floatingRef = refs.setFloating;
   const combinedPopoverRef = useCombinedRef(popoverRef, floatingRef);
   useOnKeyDown(["Esc", "Escape"], () => {
@@ -13412,8 +13435,8 @@ var PopoverGroup = ({
     if (open) handleClose();
   });
   const isAnchorChild = (i) => i === 0;
-  const Children7 = import_react80.Children.map(children, (child, childIndex) => {
-    return (0, import_react80.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react80.cloneElement)(child, {
+  const Children7 = import_react81.Children.map(children, (child, childIndex) => {
+    return (0, import_react81.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react81.cloneElement)(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniquePopoverId,
       "aria-expanded": open,
@@ -13441,17 +13464,17 @@ var PopoverGroup = ({
 PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-var import_react81 = require("react");
-var ProgressTrackerContext = (0, import_react81.createContext)(
+var import_react82 = require("react");
+var ProgressTrackerContext = (0, import_react82.createContext)(
   {
     activeStep: 0,
     direction: "column"
   }
 );
-var useProgressTrackerContext = () => (0, import_react81.useContext)(ProgressTrackerContext);
+var useProgressTrackerContext = () => (0, import_react82.useContext)(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -13472,7 +13495,7 @@ var ProgressTracker_default = {
 };
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_jsx_runtime315 = require("react/jsx-runtime");
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
@@ -13516,7 +13539,7 @@ var ProgressTrackerItem = (props) => {
       handleStepChange == null ? void 0 : handleStepChange(index);
     }
   };
-  const stepNumberContent = (0, import_react82.useMemo)(() => {
+  const stepNumberContent = (0, import_react83.useMemo)(() => {
     if (completed) {
       return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Icon, { icon: CheckIcon, iconSize: "small" });
     }
@@ -13644,17 +13667,17 @@ var ProgressTracker = (() => {
     ...rest
   }) => {
     const { t } = useTranslation();
-    const [thisActiveStep, setActiveStep] = (0, import_react83.useState)(activeStep);
+    const [thisActiveStep, setActiveStep] = (0, import_react84.useState)(activeStep);
     const handleChange = (step) => {
       setActiveStep(step);
       onStepChange == null ? void 0 : onStepChange(step);
     };
-    (0, import_react83.useEffect)(() => {
+    (0, import_react84.useEffect)(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
     }, [activeStep, thisActiveStep]);
-    const steps = (0, import_react83.useMemo)(() => {
+    const steps = (0, import_react84.useMemo)(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
       return itemsWithIndex;
@@ -13699,12 +13722,12 @@ var ProgressTracker = (() => {
   return Res;
 })();
 function removeInvalidChildren(children) {
-  return import_react83.Children.toArray(children).filter(import_react83.isValidElement);
+  return import_react84.Children.toArray(children).filter(import_react84.isValidElement);
 }
 function passIndexPropToProgressTrackerItem(children) {
-  return import_react83.Children.map(
+  return import_react84.Children.map(
     children,
-    (item, index) => (0, import_react83.cloneElement)(item, {
+    (item, index) => (0, import_react84.cloneElement)(item, {
       ...item.props,
       index
     })
@@ -13721,7 +13744,7 @@ var texts25 = createTexts({
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -13750,7 +13773,7 @@ var ProgressBar = ({
   style,
   ...rest
 }) => {
-  const generatedId = (0, import_react84.useId)();
+  const generatedId = (0, import_react85.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -13805,34 +13828,33 @@ var ProgressBar = ({
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 
 // src/components/Search/AutocompleteSearch.context.tsx
-var import_react85 = require("react");
-var AutocompleteSearchContext = (0, import_react85.createContext)({});
+var import_react86 = require("react");
+var AutocompleteSearchContext = (0, import_react86.createContext)({});
 var useAutocompleteSearch = () => {
-  return (0, import_react85.useContext)(AutocompleteSearchContext);
+  return (0, import_react86.useContext)(AutocompleteSearchContext);
 };
 
 // src/components/Search/Search.module.css
 var Search_default = {
-  "with-button-container": "Search_with-button-container",
   input: "Search_input",
   "clear-button": "Search_clear-button",
   suggestions: "Search_suggestions"
 };
 
 // src/components/Search/SearchSuggestionItem.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_jsx_runtime318 = require("react/jsx-runtime");
 var SearchSuggestionItem = ({
   focus,
   ref,
   ...rest
 }) => {
-  const itemRef = (0, import_react86.useRef)(null);
+  const itemRef = (0, import_react87.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
@@ -13953,7 +13975,7 @@ var Search = ({
   ...rest
 }) => {
   var _a;
-  const generatedId = (0, import_react87.useId)();
+  const generatedId = (0, import_react88.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const tipId = derivativeIdGenerator(uniqueId, "tip");
   const suggestionsId = derivativeIdGenerator(uniqueId, "suggestions");
@@ -13962,7 +13984,7 @@ var Search = ({
     "suggestions-description"
   );
   const { t } = useTranslation();
-  const [hasValue, setHasValue] = (0, import_react87.useState)(!!value);
+  const [hasValue, setHasValue] = (0, import_react88.useState)(!!value);
   const context = useAutocompleteSearch();
   const combinedRef = context.inputRef ? useCombinedRef(context.inputRef, ref) : ref;
   const handleChange = (e) => {
@@ -14065,11 +14087,10 @@ var Search = ({
       showSearchButton ? /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
         Grid,
         {
+          defaultPageLayout: false,
           className,
           width,
           columnGap: "x0.5",
-          rowGap: "0",
-          marginInline: "0",
           gridTemplateColumns: "1fr auto",
           style,
           children: [
@@ -14116,7 +14137,7 @@ var texts27 = createTexts({
 });
 
 // src/components/Search/SearchAutocompleteWrapper.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var SearchAutocompleteWrapper = (props) => {
   const {
@@ -14128,12 +14149,12 @@ var SearchAutocompleteWrapper = (props) => {
     onSuggestionSelection,
     children
   } = props;
-  const [inputValue, setInputValue] = (0, import_react88.useState)(value != null ? value : "");
-  const [suggestions, setSuggestions] = (0, import_react88.useState)([]);
-  const [showSuggestions, setShowSuggestions] = (0, import_react88.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react89.useState)(value != null ? value : "");
+  const [suggestions, setSuggestions] = (0, import_react89.useState)([]);
+  const [showSuggestions, setShowSuggestions] = (0, import_react89.useState)(false);
   const closeSuggestions = () => showSuggestions === true && setShowSuggestions(false);
   const openSuggestions = () => showSuggestions === false && setShowSuggestions(true);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     if (suggestions.length > 0) {
       openSuggestions();
     } else {
@@ -14178,8 +14199,8 @@ var SearchAutocompleteWrapper = (props) => {
   const handleSetInputValue = (value2) => {
     setInputValue(value2 != null ? value2 : "");
   };
-  const inputRef = (0, import_react88.useRef)(null);
-  const suggestionsRef = (0, import_react88.useRef)(null);
+  const inputRef = (0, import_react89.useRef)(null);
+  const suggestionsRef = (0, import_react89.useRef)(null);
   useOnClickOutside([inputRef, suggestionsRef], () => {
     closeSuggestions();
   });
@@ -14268,7 +14289,7 @@ var SkipToContent = ({
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -14289,7 +14310,7 @@ var SplitButton = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isOpen, setIsOpen] = (0, import_react89.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react90.useState)(false);
   const buttonStyleProps = {
     purpose,
     size: size2
@@ -14335,15 +14356,15 @@ var texts28 = createTexts({
 });
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_react93 = require("react");
+var import_react94 = require("react");
 
 // src/components/Table/collapsible/Table.context.tsx
-var import_react90 = require("react");
-var CollapsibleTableContext = (0, import_react90.createContext)({
+var import_react91 = require("react");
+var CollapsibleTableContext = (0, import_react91.createContext)({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => (0, import_react90.useContext)(CollapsibleTableContext);
+var useCollapsibleTableContext = () => (0, import_react91.useContext)(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 var import_jsx_runtime325 = require("react/jsx-runtime");
@@ -14351,12 +14372,12 @@ var Body = (props) => /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("tbody", {
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 var import_jsx_runtime326 = require("react/jsx-runtime");
 var Head = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("thead", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(HeadContext, { value: true, children }) });
-var HeadContext = (0, import_react91.createContext)(false);
+var HeadContext = (0, import_react92.createContext)(false);
 function useIsInTableHead() {
-  const isInTableHead = (0, import_react91.useContext)(HeadContext);
+  const isInTableHead = (0, import_react92.useContext)(HeadContext);
   return isInTableHead;
 }
 
@@ -14521,26 +14542,26 @@ var Table = ({
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-var import_react92 = require("react");
+var import_react93 = require("react");
 var import_jsx_runtime332 = require("react/jsx-runtime");
 var TableWrapper = ({ className, ...rest }) => {
-  const themeContext = (0, import_react92.useContext)(ThemeContext);
+  const themeContext = (0, import_react93.useContext)(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
   const containerWidth = container2 ? container2.clientWidth : 0;
-  const [overflowX, setOverflowX] = (0, import_react92.useState)(false);
-  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react92.useState)(containerWidth);
+  const [overflowX, setOverflowX] = (0, import_react93.useState)(false);
+  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react93.useState)(containerWidth);
   function isOverflowingX(event) {
     return event.offsetWidth < event.scrollWidth;
   }
-  const wrapperRef = (0, import_react92.useRef)(null);
-  (0, import_react92.useEffect)(() => {
+  const wrapperRef = (0, import_react93.useRef)(null);
+  (0, import_react93.useEffect)(() => {
     if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
       setOverflowX(true);
       return;
     }
     setOverflowX(false);
   }, [themeContainerWidth]);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     function handleResize() {
       setThemeContainerWidth(containerWidth);
     }
@@ -14589,8 +14610,8 @@ var CollapsibleRow = ({
   const isInHead = useIsInTableHead();
   const type = _type != null ? _type : isInHead ? "head" : "body";
   const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
-  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react93.useState)(true);
-  (0, import_react93.useEffect)(() => {
+  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react94.useState)(true);
+  (0, import_react94.useEffect)(() => {
     if (!isCollapsed) setChildrenCollapsed(true);
   }, [isCollapsed]);
   const rowProps = (isOpenCollapsibleHeader) => {
@@ -14608,7 +14629,7 @@ var CollapsibleRow = ({
   const collapsedHeaderValues = headerValues.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
-  const childrenArray = import_react93.Children.toArray(children);
+  const childrenArray = import_react94.Children.toArray(children);
   const collapsedChildren = childrenArray.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
@@ -14617,9 +14638,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_runtime333.jsxs)(import_react93.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)(import_react94.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-      (0, import_react93.isValidElement)(child) && (0, import_react93.cloneElement)(child, {
+      (0, import_react94.isValidElement)(child) && (0, import_react94.cloneElement)(child, {
         collapsibleProps: { isCollapsibleChild: true }
       })
     ] }, `DL-${index}`);
@@ -14716,11 +14737,11 @@ var CollapsibleTable2 = CollapsibleTable;
 CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/AddTabButton.tsx
-var import_react96 = require("react");
+var import_react97 = require("react");
 
 // src/components/Tabs/Tabs.context.tsx
-var import_react94 = require("react");
-var TabsContext = (0, import_react94.createContext)({
+var import_react95 = require("react");
+var TabsContext = (0, import_react95.createContext)({
   activeTab: 0,
   tabsId: "",
   size: "small",
@@ -14732,13 +14753,11 @@ var TabsContext = (0, import_react94.createContext)({
   tabContentDirection: "row",
   addTabButtonProps: void 0
 });
-var useTabsContext = () => (0, import_react94.useContext)(TabsContext);
+var useTabsContext = () => (0, import_react95.useContext)(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
   "tab-row": "Tabs_tab-row",
-  "tab-row--standard-widths": "Tabs_tab-row--standard-widths",
-  "tab-row--custom-widths": "Tabs_tab-row--custom-widths",
   tab: "Tabs_tab",
   "tab--active": "Tabs_tab--active",
   "tab--medium--row": "Tabs_tab--medium--row",
@@ -14750,9 +14769,9 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/TabWidthContext.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_jsx_runtime335 = require("react/jsx-runtime");
-var TabContext = (0, import_react95.createContext)(null);
+var TabContext = (0, import_react96.createContext)(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
@@ -14781,8 +14800,8 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = (0, import_react95.useContext)(TabContext);
-  (0, import_react95.useLayoutEffect)(() => {
+  const context = (0, import_react96.useContext)(TabContext);
+  (0, import_react96.useLayoutEffect)(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
   }, [index, width]);
@@ -14799,7 +14818,7 @@ var AddTabButton = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const buttonRef = (0, import_react96.useRef)(null);
+  const buttonRef = (0, import_react97.useRef)(null);
   const combinedRef = useCombinedRef(ref, buttonRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)(
@@ -14824,7 +14843,7 @@ var AddTabButton = ({
 AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
-var import_react97 = require("react");
+var import_react98 = require("react");
 var import_jsx_runtime337 = require("react/jsx-runtime");
 var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
@@ -14841,17 +14860,17 @@ var Tabs = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react97.useId)();
+  const generatedId = (0, import_react98.useId)();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
-  const [thisActiveTab, setActiveTab] = (0, import_react97.useState)(activeTab != null ? activeTab : 0);
-  const [hasTabFocus, setHasTabFocus] = (0, import_react97.useState)(false);
-  const tabListRef = (0, import_react97.useRef)(null);
-  const tabPanelsRef = (0, import_react97.useRef)(null);
+  const [thisActiveTab, setActiveTab] = (0, import_react98.useState)(activeTab != null ? activeTab : 0);
+  const [hasTabFocus, setHasTabFocus] = (0, import_react98.useState)(false);
+  const tabListRef = (0, import_react98.useRef)(null);
+  const tabPanelsRef = (0, import_react98.useRef)(null);
   const handleTabChange = (index) => {
     setActiveTab(index);
     onChange == null ? void 0 : onChange(index);
   };
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -14885,7 +14904,7 @@ var Tabs = ({
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react98 = require("react");
+var import_react99 = require("react");
 var import_jsx_runtime338 = require("react/jsx-runtime");
 var Tab = ({
   active = false,
@@ -14905,18 +14924,18 @@ var Tab = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const itemRef = (0, import_react98.useRef)(null);
+  const itemRef = (0, import_react99.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   const { type = "button", ...restHtmlProps } = htmlProps;
   const fixedHtmlProps = { type, ...restHtmlProps };
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react98.useCallback)(() => {
+  const handleSelect = (0, import_react99.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -14963,7 +14982,7 @@ var Tab = ({
 Tab.displayName = "Tab";
 
 // src/components/Tabs/TabList.tsx
-var import_react99 = require("react");
+var import_react100 = require("react");
 var import_jsx_runtime339 = require("react/jsx-runtime");
 var TabList = ({
   children,
@@ -14983,15 +15002,15 @@ var TabList = ({
     addTabButtonProps
   } = useTabsContext();
   const uniqueId = id != null ? id : `${tabsId}-tablist`;
-  const childrenArray = import_react99.Children.toArray(children).length;
+  const childrenArray = import_react100.Children.toArray(children).length;
   const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
   const combinedRef = useCombinedRef(ref, tabListRef);
   const hasButton = addTabButtonProps ? true : false;
-  const tabListChildren = import_react99.Children ? import_react99.Children.map(children, (child, index) => {
+  const tabListChildren = import_react100.Children ? import_react100.Children.map(children, (child, index) => {
     const handleThisTabChange = () => {
       handleTabChange(index);
     };
-    return (0, import_react99.isValidElement)(child) && (0, import_react99.cloneElement)(child, {
+    return (0, import_react100.isValidElement)(child) && (0, import_react100.cloneElement)(child, {
       id: `${tabsId}-tab-${index}`,
       htmlProps: {
         ...child.props.htmlProps,
@@ -15004,7 +15023,7 @@ var TabList = ({
       onClick: combineHandlers(handleThisTabChange, child.props.onClick)
     });
   }) : [];
-  const [widths, setWidths] = (0, import_react99.useState)([]);
+  const [widths, setWidths] = (0, import_react100.useState)([]);
   const handleOnFocus = (event) => {
     setHasTabFocus(true);
     onFocus == null ? void 0 : onFocus(event);
@@ -15022,9 +15041,16 @@ var TabList = ({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tab-widths"]: widths.join(" ")
   };
+  const gridLayout = widths ? {
+    gridTemplateColumns: "var(--dds-tab-widths)"
+  } : {
+    gridAutoColumns: "1fr",
+    gridAutoFlow: "column"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(
-    "div",
+    Grid,
     {
+      defaultPageLayout: false,
       ...rest,
       ref: combinedRef,
       role: "tablist",
@@ -15032,13 +15058,9 @@ var TabList = ({
       tabIndex: 0,
       onFocus: handleOnFocus,
       onBlur: handleOnBlur,
-      className: cn(
-        Tabs_default["tab-row"],
-        !widths && Tabs_default["tab-row--standard-widths"],
-        Tabs_default["tab-row--custom-widths"],
-        focusable,
-        scrollbar
-      ),
+      overflowX: "auto",
+      ...gridLayout,
+      className: cn(Tabs_default["tab-row"], focusable, scrollbar),
       style: { ...style, ...customWidths },
       children: [
         tabListChildren,
@@ -15080,14 +15102,14 @@ var TabPanel = ({
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabPanels.tsx
-var import_react100 = require("react");
+var import_react101 = require("react");
 var import_jsx_runtime341 = require("react/jsx-runtime");
 var TabPanels = ({ children, ref, ...rest }) => {
   const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
   const combinedRef = useCombinedRef(ref, tabPanelsRef);
-  const panelChildren = import_react100.Children.map(children, (child, index) => {
+  const panelChildren = import_react101.Children.map(children, (child, index) => {
     const active = index === activeTab;
-    return (0, import_react100.isValidElement)(child) && (0, import_react100.cloneElement)(child, {
+    return (0, import_react101.isValidElement)(child) && (0, import_react101.cloneElement)(child, {
       id: `${tabsId}-panel-${index}`,
       active,
       htmlProps: {
@@ -15170,7 +15192,7 @@ var Tag = ({
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-var import_react101 = require("react");
+var import_react102 = require("react");
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
@@ -15213,12 +15235,12 @@ var TextInput = ({
   ref,
   ...rest
 }) => {
-  const [text, setText] = (0, import_react101.useState)(getDefaultText(value, defaultValue));
-  const prefixRef = (0, import_react101.useRef)(null);
-  const suffixRef = (0, import_react101.useRef)(null);
-  const [prefixLength, setPrefixLength] = (0, import_react101.useState)(0);
-  const [suffixLength, setSuffixLength] = (0, import_react101.useState)(0);
-  (0, import_react101.useLayoutEffect)(() => {
+  const [text, setText] = (0, import_react102.useState)(getDefaultText(value, defaultValue));
+  const prefixRef = (0, import_react102.useRef)(null);
+  const suffixRef = (0, import_react102.useRef)(null);
+  const [prefixLength, setPrefixLength] = (0, import_react102.useState)(0);
+  const [suffixLength, setSuffixLength] = (0, import_react102.useState)(0);
+  (0, import_react102.useLayoutEffect)(() => {
     requestAnimationFrame(() => {
       if (prefixRef.current) {
         setPrefixLength(prefixRef.current.offsetWidth);
@@ -15234,7 +15256,7 @@ var TextInput = ({
       onChange(event);
     }
   };
-  const generatedId = (0, import_react101.useId)();
+  const generatedId = (0, import_react102.useId)();
   const uniqueId = id != null ? id : `${generatedId}-textInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -15414,24 +15436,15 @@ var TextInput = ({
 TextInput.displayName = "TextInput";
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_react103 = require("react");
+var import_react104 = require("react");
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-var import_react102 = require("react");
-var ToggleBarContext = (0, import_react102.createContext)({
+var import_react103 = require("react");
+var ToggleBarContext = (0, import_react103.createContext)({
   size: "medium",
   purpose: "primary"
 });
-var useToggleBarContext = () => (0, import_react102.useContext)(ToggleBarContext);
-
-// src/components/ToggleBar/ToggleBar.module.css
-var ToggleBar_default = {
-  bar: "ToggleBar_bar",
-  content: "ToggleBar_content",
-  label: "ToggleBar_label",
-  "label--primary": "ToggleBar_label--primary",
-  "label--secondary": "ToggleBar_label--secondary"
-};
+var useToggleBarContext = () => (0, import_react103.useContext)(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.tsx
 var import_jsx_runtime344 = require("react/jsx-runtime");
@@ -15451,9 +15464,9 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = (0, import_react103.useId)();
+  const generatedId = (0, import_react104.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
-  const [groupValue, setGroupValue] = (0, import_react103.useState)(value);
+  const [groupValue, setGroupValue] = (0, import_react104.useState)(value);
   const handleChange = combineHandlers(
     (e) => setGroupValue(e.target.value),
     (e) => onChange && onChange(e, e.target.value)
@@ -15479,7 +15492,15 @@ var ToggleBar = (props) => {
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
             label && /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: ToggleBar_default.bar, children })
+            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+              Grid,
+              {
+                defaultPageLayout: false,
+                gridAutoFlow: "column",
+                gridAutoColumns: "1fr",
+                children
+              }
+            )
           ]
         }
       )
@@ -15489,7 +15510,17 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-var import_react104 = require("react");
+var import_react105 = require("react");
+
+// src/components/ToggleBar/ToggleBar.module.css
+var ToggleBar_default = {
+  content: "ToggleBar_content",
+  label: "ToggleBar_label",
+  "label--primary": "ToggleBar_label--primary",
+  "label--secondary": "ToggleBar_label--secondary"
+};
+
+// src/components/ToggleBar/ToggleRadio.tsx
 var import_jsx_runtime345 = require("react/jsx-runtime");
 var calculateChecked = (value, group, checked) => {
   if (typeof checked !== "undefined") return checked;
@@ -15516,7 +15547,7 @@ var ToggleRadio = ({
   id,
   ...rest
 }) => {
-  const generatedId = (0, import_react104.useId)();
+  const generatedId = (0, import_react105.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
   const group = useToggleBarContext();
   const handleChange = (event) => {
@@ -15579,7 +15610,7 @@ var ToggleRadio = ({
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_react105 = require("react");
+var import_react106 = require("react");
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -15598,7 +15629,7 @@ var ToggleButton = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react105.useId)();
+  const generatedId = (0, import_react106.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
   return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
@@ -15647,7 +15678,7 @@ var ToggleButton = ({
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-var import_react106 = require("react");
+var import_react107 = require("react");
 var import_jsx_runtime347 = require("react/jsx-runtime");
 var ToggleButtonGroup = (props) => {
   const {
@@ -15661,7 +15692,7 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react106.useId)();
+  const generatedId = (0, import_react107.useId)();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
   return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
     "div",
@@ -16016,7 +16047,6 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   ZoomOutIcon,
   calendarDateToNativeDate,
   cn,
-  countryOptions,
   createPurposes,
   createSelectOptions,
   createSizes,
@@ -16027,7 +16057,6 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   getBaseHTMLProps,
   getColorCn,
   getElementType,
-  getLiteralScreenSize,
   getTypographyCn,
   handleElementWithBackdropMount,
   handleElementWithBackdropUnmount,