@norges-domstoler/dds-components 21.1.0 → 21.2.1

package/dist/index.js

@@ -281,6 +281,7 @@ __export(index_exports, {
   StarIcon: () => StarIcon,
   StatefulInput: () => StatefulInput,
   StylelessList: () => StylelessList,
+  StylelessOList: () => StylelessOList,
   SvgWrapper: () => SvgWrapper,
   SyncIcon: () => SyncIcon,
   Tab: () => Tab,
@@ -3042,6 +3043,7 @@ var getLiteralScreenSize = (screenSize) => {
 // src/components/helpers/StylelessList/StylelessList.tsx
 var import_jsx_runtime176 = require("react/jsx-runtime");
 var StylelessList = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("ul", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
+var StylelessOList = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("ol", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
 
 // src/components/helpers/styling/utils.ts
 var outlineOffset = "var(--dds-spacing-x0-125)";
@@ -4968,8 +4970,14 @@ var Label2 = ({
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
-    "label",
+    Box,
     {
+      as: "label",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      width: "fit-content",
+      paddingInline: "calc(18px + var(--dds-spacing-x0-5)) 0",
       className: cn(
         className,
         SelectionControl_default.label,
@@ -4985,6 +4993,35 @@ var Label2 = ({
     }
   );
 };
+var GroupLabel = ({
+  id,
+  showRequiredMarker,
+  readOnly,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
+    Typography,
+    {
+      as: "span",
+      typographyType: "labelMedium",
+      id,
+      className: readOnly ? Label_default["read-only"] : void 0,
+      children: [
+        readOnly && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+          Icon,
+          {
+            icon: LockIcon,
+            className: Label_default["read-only__icon"],
+            iconSize: "small"
+          }
+        ),
+        children,
+        " ",
+        showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(RequiredMarker, {})
+      ]
+    }
+  );
+};
 
 // src/components/SelectionControl/SelectionControl.utils.tsx
 var selectionControlSizeNumberPx = 18;
@@ -5021,14 +5058,8 @@ var Checkbox = ({
   const hasError = error || (checkboxGroup == null ? void 0 : checkboxGroup.error);
   const isDisabled = disabled || (checkboxGroup == null ? void 0 : checkboxGroup.disabled);
   return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
-    Box,
+    Label2,
     {
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      width: "fit-content",
-      paddingInline: "calc(18px + var(--dds-spacing-x0-5)) 0",
-      as: Label2,
       hasError,
       disabled: isDisabled,
       readOnly: isReadOnly,
@@ -5084,6 +5115,17 @@ Checkbox.displayName = "Checkbox";
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
 var import_react27 = require("react");
 
+// src/types/Booleanish.ts
+function convertBooleanishToBoolean(value) {
+  if (value === "true") {
+    return true;
+  } else if (value === "false") {
+    return false;
+  } else {
+    return value;
+  }
+}
+
 // src/components/InputMessage/InputMessage.module.css
 var InputMessage_default = {
   container: "InputMessage_container",
@@ -5161,7 +5203,7 @@ var CheckboxGroup = (props) => {
   const generatedId = (0, import_react27.useId)();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
-  const showRequiredMarker = required || ariaRequired;
+  const showRequiredMarker = required || convertBooleanishToBoolean(ariaRequired);
   const errorMessageId = derivativeIdGenerator(uniqueGroupId, "errorMessage");
   const tipId = derivativeIdGenerator(uniqueGroupId, "tip");
   const contextProps = {
@@ -5182,19 +5224,13 @@ var CheckboxGroup = (props) => {
         rest
       ),
       children: [
-        label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
-          Typography,
+        label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+          GroupLabel,
           {
-            as: "span",
-            typographyType: "labelMedium",
             id: uniqueGroupId,
-            className: readOnly ? Label_default["read-only"] : void 0,
-            children: [
-              readOnly && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(Icon, { icon: LockIcon, className: Label_default["read-only__icon"] }),
-              label,
-              " ",
-              showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(RequiredMarker, {})
-            ]
+            readOnly,
+            showRequiredMarker,
+            children: label
           }
         ) : null,
         renderInputMessage(tip, tipId),
@@ -8481,8 +8517,7 @@ var LocalMessage = ({
       ),
       width,
       display: "grid",
-      alignItems: "center",
-      padding: "x0.75",
+      padding: "x0.75 x0.75 x0.75 x0.5",
       gap: "x0.5",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
@@ -8502,7 +8537,7 @@ var LocalMessage = ({
               setClosed(true);
               onClose && onClose();
             },
-            size: "small",
+            size: "xsmall",
             "aria-label": "Lukk melding",
             className: LocalMessage_default.container__button
           }
@@ -10491,7 +10526,8 @@ var import_react70 = require("react");
 var import_react68 = require("react");
 var ProgressTrackerContext = (0, import_react68.createContext)(
   {
-    activeStep: 0
+    activeStep: 0,
+    direction: "column"
   }
 );
 var useProgressTrackerContext = () => (0, import_react68.useContext)(ProgressTrackerContext);
@@ -10499,8 +10535,9 @@ var useProgressTrackerContext = () => (0, import_react68.useContext)(ProgressTra
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
   list: "ProgressTracker_list",
-  connector: "ProgressTracker_connector",
-  item: "ProgressTracker_item",
+  "list-item": "ProgressTracker_list-item",
+  "list-item--column": "ProgressTracker_list-item--column",
+  "list-item--row": "ProgressTracker_list-item--row",
   "item-button": "ProgressTracker_item-button",
   "item-number--active-incomplete": "ProgressTracker_item-number--active-incomplete",
   "item-number--inactive-incomplete": "ProgressTracker_item-number--inactive-incomplete",
@@ -10537,7 +10574,8 @@ var itemStateCn = {
   inactiveCompleted: "inactive-completed",
   inactiveIncomplete: "inactive-incomplete"
 };
-var getVisuallyHiddenText = (active, completed, index) => `${index + 1}, ${active ? "" : "Trinn, "}${completed ? "Ferdig, " : "Ikke ferdig, "}`;
+var getVisuallyHiddenTextBefore = (index) => `${index + 1}. trinn, `;
+var getVisuallyHiddenTextAfter = (completed) => `, ${completed ? "ferdig" : "ikke ferdig"}`;
 var ProgressTrackerItem = (props) => {
   const {
     id,
@@ -10551,7 +10589,7 @@ var ProgressTrackerItem = (props) => {
     children,
     ...rest
   } = props;
-  const { activeStep, handleStepChange } = useProgressTrackerContext();
+  const { activeStep, handleStepChange, direction } = useProgressTrackerContext();
   const active = activeStep === index;
   const itemState = toItemState(active, completed, disabled);
   const handleClick = () => {
@@ -10571,8 +10609,11 @@ var ProgressTrackerItem = (props) => {
   }, [completed, icon, index]);
   const stepContent = /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_jsx_runtime283.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
-      "div",
+      Box,
       {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         "aria-hidden": true,
         className: cn(
           ProgressTracker_default["item-number"],
@@ -10591,37 +10632,47 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-medium"]
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
-          children
+          /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextBefore(index) }),
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextAfter(completed) })
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)("li", { "aria-current": active ? "step" : void 0, className: ProgressTracker_default.item, children: handleStepChange ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
-    "button",
-    {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, ProgressTracker_default["item-button"], focusable),
-        htmlProps,
-        rest
-      ),
-      onClick: () => handleClick(),
-      disabled,
-      children: stepContent
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+    Box,
     {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"])),
-        htmlProps,
-        rest
-      ),
-      children: stepContent
+      as: "li",
+      display: direction === "row" ? "flex" : void 0,
+      "aria-current": active ? "step" : void 0,
+      className: cn(ProgressTracker_default["list-item"], ProgressTracker_default[`list-item--${direction}`]),
+      children: handleStepChange ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+        "button",
+        {
+          ...getBaseHTMLProps(
+            id,
+            cn(className, ProgressTracker_default["item-button"], focusable),
+            htmlProps,
+            rest
+          ),
+          onClick: () => handleClick(),
+          disabled,
+          children: stepContent
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+        "div",
+        {
+          ...getBaseHTMLProps(
+            id,
+            cn(className, cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"])),
+            htmlProps,
+            rest
+          ),
+          children: stepContent
+        }
+      )
     }
-  ) });
+  );
 };
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
 
@@ -10632,9 +10683,10 @@ var ProgressTracker = (() => {
     id,
     activeStep = 0,
     onStepChange,
+    direction = "column",
     children,
     className,
-    htmlProps,
+    htmlProps = {},
     ...rest
   }) => {
     const [thisActiveStep, setActiveStep] = (0, import_react70.useState)(activeStep);
@@ -10650,23 +10702,38 @@ var ProgressTracker = (() => {
     const steps = (0, import_react70.useMemo)(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
-      const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
-      return itemsWithConnectorsBetween;
+      return itemsWithIndex;
     }, [children]);
+    const isRow = direction === "row";
+    const { "aria-label": ariaLabel } = htmlProps;
     return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
       ProgressTrackerContext,
       {
         value: {
           activeStep: thisActiveStep,
-          handleStepChange: handleChange
+          handleStepChange: handleChange,
+          direction
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
-          "div",
+          "nav",
           {
-            role: "group",
-            "aria-label": "progress",
+            "aria-label": ariaLabel != null ? ariaLabel : "stegprogresjon",
             ...getBaseHTMLProps(id, className, htmlProps, rest),
-            children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)("ol", { className: ProgressTracker_default.list, children: steps })
+            children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
+              Box,
+              {
+                as: StylelessOList,
+                display: "flex",
+                flexDirection: direction,
+                alignItems: "start",
+                gap: isRow ? "x0.5" : "x0.125",
+                overflowX: isRow ? "auto" : void 0,
+                margin: "0",
+                padding: isRow ? "x0.25" : "0",
+                className: cn(ProgressTracker_default.list, scrollbar),
+                children: steps
+              }
+            )
           }
         )
       }
@@ -10688,15 +10755,6 @@ function passIndexPropToProgressTrackerItem(children) {
     })
   );
 }
-var intersperseItemsWithConnector = (children) => import_react70.Children.map(children, (child, index) => {
-  if (index === 0) {
-    return child;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(import_react70.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime284.jsx)("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
-    child
-  ] }, index);
-});
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_react71 = require("react");
@@ -10794,17 +10852,11 @@ var useAutocompleteSearch = () => {
 
 // src/components/Search/Search.module.css
 var Search_default = {
-  container: "Search_container",
-  "input-group": "Search_input-group",
   "with-button-container": "Search_with-button-container",
   input: "Search_input",
-  "input--small": "Search_input--small",
-  "input--medium": "Search_input--medium",
-  "input--large": "Search_input--large",
   "search-icon": "Search_search-icon",
   "clear-button": "Search_clear-button",
-  suggestions: "Search_suggestions",
-  suggestions__header: "Search_suggestions__header"
+  suggestions: "Search_suggestions"
 };
 
 // src/components/Search/Search.utils.ts
@@ -10910,15 +10962,20 @@ var SearchSuggestions = ({
       ),
       "aria-hidden": !showSuggestions,
       border: "border-default",
+      position: "absolute",
+      top: "100%",
+      width: "100%",
+      maxHeight: "300px",
+      overflowY: "scroll",
+      marginBlock: "x0.25 0",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(
-          "span",
+          Box,
           {
+            as: "h2",
+            paddingInline: "0 x1",
             id: suggestionsHeaderId,
-            className: cn(
-              Search_default.suggestions__header,
-              typographyStyles_default["body-xsmall"]
-            ),
+            className: typographyStyles_default["body-xsmall"],
             children: "S\xF8keforslag"
           }
         ),
@@ -10955,9 +11012,28 @@ var getIconSize2 = (size2) => {
       return "small";
   }
 };
+var getPadding = (size2, showIcon) => {
+  const paddingRight = (textSize) => `calc(
+ var(--dds-spacing-x1) + ${textSize} * 1.5 + var(--dds-spacing-x0-5)
+ )`;
+  const paddingLeft = (iconSize) => `calc(
+ var(--dds-spacing-x0-75) + ${iconSize} + var(--dds-spacing-x0-5)
+ )`;
+  const pRSmallButton = paddingRight("0.875rem");
+  const pRMediumButton = paddingRight("1rem");
+  const pLSmallIcon = paddingLeft("var(--dds-icon-size-small)");
+  const pLMediumIcon = paddingLeft("var(--dds-icon-size-medium)");
+  const paddingMap = {
+    large: `x1 ${pRMediumButton} x1 ${showIcon ? pLMediumIcon : "x0.75"}`,
+    medium: `x0.75 ${pRSmallButton} x0.75 ${showIcon ? pLMediumIcon : "x0.75"}`,
+    small: `x0.5 ${pRSmallButton} x0.5 ${showIcon ? pLSmallIcon : "x0.75"}`
+  };
+  return paddingMap[size2];
+};
 var Search = ({
   componentSize = "medium",
   buttonProps,
+  showIcon = true,
   name,
   label,
   tip,
@@ -11000,87 +11076,98 @@ var Search = ({
   } = buttonProps != null ? buttonProps : {};
   const hasSuggestions = !!context.suggestions;
   const showSearchButton = !!buttonProps && !!onClick;
-  return /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)("div", { className: Search_default.container, children: [
+  const inputGroup = /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(
+    HStack,
+    {
+      position: "relative",
+      width: !showSearchButton ? width : void 0,
+      className: !showSearchButton ? className : void 0,
+      children: [
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+          Icon,
+          {
+            icon: SearchIcon,
+            iconSize: getIconSize2(componentSize),
+            className: cn(
+              Input_default["input-group__absolute-element"],
+              Search_default["search-icon"]
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+          Box,
+          {
+            as: Input,
+            ...rest,
+            ref: combinedRef,
+            name,
+            type: "search",
+            id: uniqueId,
+            "aria-describedby": spaceSeparatedIdListGenerator([
+              tip ? tipId : void 0,
+              context.suggestions ? suggestionsDescriptionId : void 0,
+              ariaDescribedby
+            ]),
+            value: (_a = context.inputValue) != null ? _a : value,
+            onChange: handleChange,
+            autoComplete: "off",
+            "aria-autocomplete": hasSuggestions ? "list" : void 0,
+            "aria-controls": hasSuggestions ? suggestionsId : void 0,
+            "aria-expanded": context.showSuggestions,
+            role: hasSuggestions ? "combobox" : void 0,
+            width: "100%",
+            padding: getPadding(componentSize, showIcon),
+            className: cn(
+              Search_default.input,
+              typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
+            )
+          }
+        ),
+        hasSuggestions && /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(import_jsx_runtime288.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+            SearchSuggestions,
+            {
+              id: suggestionsId,
+              ref: context.suggestionsRef,
+              searchId: uniqueId,
+              onSuggestionClick: context.onSugggestionClick,
+              suggestions: context.suggestions,
+              showSuggestions: context.showSuggestions,
+              componentSize
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
+        ] }),
+        hasValue && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+          Button,
+          {
+            icon: CloseSmallIcon,
+            size: componentSize === "large" ? "medium" : "small",
+            purpose: "tertiary",
+            "aria-label": "T\xF8m",
+            onClick: clearInput,
+            className: Search_default["clear-button"]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(VStack, { gap: "x0.125", children: [
     hasLabel && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Label, { htmlFor: uniqueId, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(
-        Box,
+      showSearchButton ? /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(
+        Grid,
         {
-          className: cn(
-            className,
-            showSearchButton && Search_default["with-button-container"]
-          ),
+          className,
           width,
-          gap: "x0.5",
+          columnGap: "x0.5",
+          rowGap: "0",
+          marginInline: "0",
+          gridTemplateColumns: "1fr auto",
           style,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)("div", { className: Search_default["input-group"], children: [
-              /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-                Icon,
-                {
-                  icon: SearchIcon,
-                  iconSize: getIconSize2(componentSize),
-                  className: cn(
-                    Input_default["input-group__absolute-element"],
-                    Search_default["search-icon"]
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-                Input,
-                {
-                  ...rest,
-                  ref: combinedRef,
-                  name,
-                  type: "search",
-                  id: uniqueId,
-                  "aria-describedby": spaceSeparatedIdListGenerator([
-                    tip ? tipId : void 0,
-                    context.suggestions ? suggestionsDescriptionId : void 0,
-                    ariaDescribedby
-                  ]),
-                  value: (_a = context.inputValue) != null ? _a : value,
-                  onChange: handleChange,
-                  autoComplete: "off",
-                  "aria-autocomplete": hasSuggestions ? "list" : void 0,
-                  "aria-controls": hasSuggestions ? suggestionsId : void 0,
-                  "aria-expanded": context.showSuggestions,
-                  role: hasSuggestions ? "combobox" : void 0,
-                  className: cn(
-                    Search_default.input,
-                    Search_default[`input--${componentSize}`],
-                    typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
-                  )
-                }
-              ),
-              hasSuggestions && /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(import_jsx_runtime288.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-                  SearchSuggestions,
-                  {
-                    id: suggestionsId,
-                    ref: context.suggestionsRef,
-                    searchId: uniqueId,
-                    onSuggestionClick: context.onSugggestionClick,
-                    suggestions: context.suggestions,
-                    showSuggestions: context.showSuggestions,
-                    componentSize
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
-              ] }),
-              hasValue && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-                Button,
-                {
-                  icon: CloseSmallIcon,
-                  size: componentSize === "large" ? "medium" : "small",
-                  purpose: "tertiary",
-                  "aria-label": "T\xF8m",
-                  onClick: clearInput,
-                  className: Search_default["clear-button"]
-                }
-              )
-            ] }),
-            showSearchButton && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+            inputGroup,
+            /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
               Button,
               {
                 size: componentSize,
@@ -11091,7 +11178,7 @@ var Search = ({
             )
           ]
         }
-      ),
+      ) : inputGroup,
       renderInputMessage(tip, tipId)
     ] })
   ] });
@@ -11337,7 +11424,7 @@ var RadioButtonGroup = ({
     }
   };
   const hasErrorMessage = !!errorMessage;
-  const showRequiredMarker = required || ariaRequired;
+  const showRequiredMarker = required || convertBooleanishToBoolean(ariaRequired);
   const tipId = tip && `${uniqueGroupId}-tip`;
   const errorMessageId = errorMessage && `${uniqueGroupId}-errorMessage`;
   const contextProps = {
@@ -11361,21 +11448,15 @@ var RadioButtonGroup = ({
         rest
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime291.jsxs)(
-          Typography,
+        label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
+          GroupLabel,
           {
-            as: "span",
-            typographyType: "labelMedium",
             id: uniqueGroupId,
-            className: readOnly ? Label_default["read-only"] : void 0,
-            children: [
-              readOnly && /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(Icon, { icon: LockIcon, className: Label_default["read-only__icon"] }),
-              label,
-              " ",
-              showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(RequiredMarker, {})
-            ]
+            readOnly,
+            showRequiredMarker,
+            children: label
           }
-        ),
+        ) : null,
         renderInputMessage(tip, tipId),
         /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(RadioButtonGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
           "div",
@@ -13182,6 +13263,7 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   StarIcon,
   StatefulInput,
   StylelessList,
+  StylelessOList,
   SvgWrapper,
   SyncIcon,
   Tab,