@arc-ui/components 12.0.0-beta.18 → 12.0.0-beta.19

package/lib/index.mjs

@@ -652,7 +652,7 @@ var Badge = function (_a) {
 
 /**
  * Do not edit directly
- * Generated on Mon, 19 May 2025 14:54:16 GMT
+ * Generated on Tue, 10 Jun 2025 09:53:42 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -5146,7 +5146,7 @@ var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
  */
 
 const BtIconChevronDownMid =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z' clip-rule='evenodd'/%3e%3c/svg%3e";
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z'/%3e%3c/svg%3e";
 
 var CalendarDateSelect = function (_a) {
     var ariaLabel = _a.ariaLabel, onChange = _a.onChange, name = _a.name, value = _a.value, displayValue = _a.displayValue, options = _a.options;
@@ -7847,14 +7847,15 @@ var Provider$4 = Context$2.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? "top" : _d, _e = _a.requirementStatus, requirementStatus = _e === void 0 ? "optional" : _e, _f = _a.helperUnderLabel, helperUnderLabel = _f === void 0 ? false : _f, isDisabled = _a.isDisabled, _g = _a.hideLabel, hideLabel = _g === void 0 ? false : _g, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var _b;
+    var children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? "top" : _e, _f = _a.requirementStatus, requirementStatus = _f === void 0 ? "optional" : _f, _g = _a.helperUnderLabel, helperUnderLabel = _g === void 0 ? false : _g, isDisabled = _a.isDisabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = useContext(Context$3).surface;
-    var _h = useAriaDescribedby({
+    var _j = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id, // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _h.ariaDescribedby, idError = _h.idError, idHelper = _h.idHelper, idDisclosure = _h.idDisclosure;
+    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError, idHelper = _j.idHelper, idDisclosure = _j.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -7874,22 +7875,27 @@ var FormControl = function (_a) {
         ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
         : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React__default.createElement(Provider$4, { value: { requirementStatus: requirementStatus } },
-        React__default.createElement(ElementType, __assign({ className: classNames({
-                "arc-FormControl": true,
-                "arc-FormControl--isDisabled": isDisabled,
-                "arc-FormControl--smallLabel": labelSize === "s",
-                "arc-FormControl--onDarkSurface": surface === "dark",
-                "arc-FormControl--sideLabel": labelPosition === "left",
-            }), id: id }, elementProps, filterAttrs(props)),
+        React__default.createElement(ElementType, __assign({ className: classNames((_b = {
+                    "arc-FormControl": true,
+                    "arc-FormControl--isDisabled": isDisabled,
+                    "arc-FormControl--onDarkSurface": surface === "dark",
+                    "arc-FormControl--sideLabel": labelPosition === "left"
+                },
+                _b["arc-FormControl--".concat(labelSize)] = labelSize !== "l",
+                _b)), id: id }, elementProps, filterAttrs(props)),
             hideLabel === true ? (React__default.createElement(VisuallyHidden$2, null,
                 React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
                         "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                     }) }, labelProps),
-                    label,
+                    label && (React__default.createElement("span", { className: classNames("arc-FormControl-labelText", {
+                            "arc-FormControl-labelText--withOptional": requirementStatus === "optional",
+                        }) }, label)),
                     requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
                     "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                 }) }, labelProps),
-                label,
+                label && (React__default.createElement("span", { className: classNames("arc-FormControl-labelText", {
+                        "arc-FormControl-labelText--withOptional": requirementStatus === "optional",
+                    }) }, label)),
                 requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
             helperUnderLabel && helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
             children,
@@ -7902,7 +7908,7 @@ var FormControl = function (_a) {
                     React__default.createElement("span", { className: "arc-FormControl-error--icon" },
                         React__default.createElement(ThemeIcon, { icon: "formControlAlert" })),
                     errorMessage)) : (!helperUnderLabel &&
-                    (disclosureTitle ? (React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
+                    (disclosureTitle ? (React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize === "m" ? "l" : labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
                 supplementaryInfo && (React__default.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 
@@ -15117,9 +15123,9 @@ var DATE_FORMAT = "dd/MM/yyyy";
 
 var TextInputComponent = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
+    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
     var surface = useContext(Context$3).surface;
-    var _m = useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
+    var _l = useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -15153,9 +15159,9 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                 "arc-TextInput--withPrefix": prefix,
                 "arc-TextInput--withSuffix": suffix
             },
-            _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
+            _b["arc-TextInput--size".concat(size && size.toUpperCase())] = size && size !== "m",
             _b)) }, filterAttrs(props)),
-        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
             React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
                 React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled || isLoading, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
@@ -15164,7 +15170,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                             e.preventDefault();
                             iconButton.onClick();
                         } },
-                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[size] })))),
                 suffix && !showPassword ? (React__default.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
                 showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
@@ -15174,7 +15180,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden"))))),
                 isLoading && (React__default.createElement("span", { className: "arc-TextInput-spinner" },
-                    React__default.createElement(Spinner, { size: spinnerSize[inputSize] })))))));
+                    React__default.createElement(Spinner, { size: spinnerSize[size] })))))));
 });
 /**
  * Use `TextInput` to allow users to enter short form text.
@@ -15272,7 +15278,7 @@ var convertRangeStringToDates = function (value) {
  * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
  */
 var DatePicker = forwardRef(function (_a, ref) {
-    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, labelSize = _a.labelSize, inputSize = _a.inputSize, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "labelSize", "inputSize", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, size = _a.size, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
     var _e = useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
     var _f = useState("Choose date"), ariaLabel = _f[0], setAriaLabel = _f[1];
     var _g = useState(false), showCalendar = _g[0], setShowCalendar = _g[1];
@@ -15428,7 +15434,7 @@ var DatePicker = forwardRef(function (_a, ref) {
                 icon: "datePickerCalendar",
                 label: ariaLabel,
                 ref: buttonRef,
-            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, labelSize: labelSize, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, inputSize: inputSize }, props, filterAttrs(props))),
+            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, size: size }, props, filterAttrs(props))),
         React__default.createElement(Root2$3, __assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterAttrs(props)),
             React__default.createElement(Anchor2$1, null),
             React__default.createElement(Portal$5, { container: themeElement },
@@ -17896,7 +17902,6 @@ var Trigger$1 = DropdownMenuTrigger;
 var Portal2 = DropdownMenuPortal;
 var Content2$1 = DropdownMenuContent;
 var Group2 = DropdownMenuGroup;
-var Label2 = DropdownMenuLabel;
 var Item2 = DropdownMenuItem;
 var CheckboxItem2 = DropdownMenuCheckboxItem;
 var RadioGroup2 = DropdownMenuRadioGroup;
@@ -17976,14 +17981,6 @@ var MenuFooter = function (_a) {
     return (React__default.createElement("div", { className: "arc-MenuFooter", style: {
             position: "relative",
         } },
-        React__default.createElement("div", { style: {
-                height: "12px",
-                background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                position: "absolute",
-                width: "100%",
-                zIndex: 3,
-                top: -12,
-            } }),
         React__default.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
             React__default.createElement(Rule, null)),
         React__default.createElement(Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
@@ -18009,14 +18006,7 @@ var MenuHeader = function (_a) {
         React__default.createElement("div", { className: "arc-MenuSeparator", style: {
                 paddingBottom: 0,
             } },
-            React__default.createElement(Rule, null),
-            React__default.createElement("div", { style: {
-                    height: "12px",
-                    background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                    position: "absolute",
-                    width: "100%",
-                    zIndex: 3,
-                } }))));
+            React__default.createElement(Rule, null))));
 };
 
 /**
@@ -18039,7 +18029,8 @@ var MenuItem = function (_a) {
  */
 var MenuLabel = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement(Label2, __assign({ className: "arc-MenuLabel" }, filterAttrs(props)), children));
+    return (React__default.createElement(Item2, __assign({ asChild: true, className: "arc-MenuLabel", tabIndex: 0, role: "presentation" }, filterAttrs(props), { style: { pointerEvents: "none" } }),
+        React__default.createElement("div", null, children)));
 };
 
 /**
@@ -18203,7 +18194,7 @@ var MenuSubTrigger = function (_a) {
  */
 var MenuTrigger = function (_a) {
     var children = _a.children, asChild = _a.asChild, props = __rest(_a, ["children", "asChild"]);
-    return (React__default.createElement(Trigger$1, __assign({ className: ".arc-MenuItem arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
+    return (React__default.createElement(Trigger$1, __assign({ className: "arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
 };
 
 /** Use `Modal` to display information that needs immediate action from a user. */
@@ -18723,18 +18714,17 @@ var useRadioContext = function () {
  * Use `RadioGroup` to wrap and control radio buttons and apply default values
  */
 var RadioGroup = function (_a) {
-    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, errorMessage = _a.errorMessage, _c = _a.isRequired, isRequired = _c === void 0 ? true : _c, helper = _a.helper, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "errorMessage", "isRequired", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, errorMessage = _a.errorMessage, _c = _a.isRequired, isRequired = _c === void 0 ? true : _c, helper = _a.helper, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "errorMessage", "isRequired", "helper", "label", "name", "onBlur", "onChange", "size"]);
     return (React__default.createElement(Provider$2, { value: {
             blurEvent: onBlur,
             changeEvent: onChange,
             groupDisabled: isDisabled,
             checkedValue: checkedValue,
-            labelSize: labelSize,
             name: name,
             size: size,
         } },
         React__default.createElement("div", __assign({ className: "arc-RadioGroup" }, filterAttrs(props)),
-            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: isRequired ? "required" : "optional", helperUnderLabel: true, errorMessage: isRequired && checkedValue === "" ? errorMessage : "" },
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: size, helper: helper, id: id, requirementStatus: isRequired ? "required" : "optional", helperUnderLabel: true, errorMessage: isRequired && checkedValue === "" ? errorMessage : "" },
                 React__default.createElement("span", { className: "arc-RadioGroup-radioButtonContainer" }, children)))));
 };
 
@@ -18767,11 +18757,11 @@ var RadioGroupButton = forwardRef(function (_a, ref) {
  */
 var RadioGroupInput = forwardRef(function (_a, ref) {
     var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value"]);
-    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, labelSize = _c.labelSize, name = _c.name, size = _c.size;
+    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, name = _c.name, size = _c.size;
     var isChecked = checkedValue === value ? true : false;
     var checked = typeof changeEvent !== "function" ? undefined : isChecked;
     var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
-    return (React__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, labelSize: labelSize, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
+    return (React__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
 });
 
 /**
@@ -18824,7 +18814,7 @@ var Section = function (_a) {
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var _b;
-    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, value = _a.value, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, hideLabel = _a.hideLabel, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, open = _a.open, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "value", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "hideLabel", "name", "width", "isFluid", "onBlur", "onFocus", "onChange", "open", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
+    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, value = _a.value, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, _d = _a.size, size = _d === void 0 ? "m" : _d, helper = _a.helper, hideLabel = _a.hideLabel, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, open = _a.open, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "value", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "size", "helper", "hideLabel", "name", "width", "isFluid", "onBlur", "onFocus", "onChange", "open", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var id = useId$1();
     var _e = useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
     var surface = useContext(Context$3).surface;
@@ -18839,8 +18829,8 @@ var Select = function (_a) {
         var _a;
         return (_a = options.find(function (option) { return option.value === value; })) === null || _a === void 0 ? void 0 : _a.name;
     };
-    var getIconSize = function (selectSize) {
-        switch (selectSize) {
+    var getIconSize = function (size) {
+        switch (size) {
             case "s":
                 return 16;
             case "l":
@@ -18849,7 +18839,7 @@ var Select = function (_a) {
                 return 20;
         }
     };
-    return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
         React__default.createElement(Root2$2, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectValue, open: open, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
             React__default.createElement("div", { ref: setThemeElement, className: "arc-Select-wrapper" },
                 React__default.createElement(Trigger$2, __assign({ id: id, name: name, onBlur: onBlur, onFocus: onFocus, "aria-label": ariaLabel, style: { width: width, marginTop: hideLabel ? 0 : undefined }, className: classNames("arc-Select-trigger", (_b = {
@@ -18857,28 +18847,24 @@ var Select = function (_a) {
                             "arc-Select-trigger--onDarkSurface": surface === "dark",
                             "arc-Select-trigger--invalid": errorMessage
                         },
-                        _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
+                        _b["arc-Select-trigger--size".concat(size && size.toUpperCase())] = size && size !== "m",
                         _b)), "aria-describedby": id + (disclosureText ? "-disclosure" : "-helper") }, filterAttrs(props)),
                     React__default.createElement(Value, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default.createElement(Icon, { className: "arc-Select-triggerIcon" },
-                        React__default.createElement(ThemeIcon, { size: getIconSize(selectSize), icon: "selectTrigger" }))),
+                        React__default.createElement(ThemeIcon, { size: getIconSize(size), icon: "selectTrigger" }))),
                 React__default.createElement(Portal$4, { container: themeElement },
                     React__default.createElement(Content2$3, { sideOffset: 5, position: "popper", className: classNames("arc-Select-content", {
                             "arc-Select-content--onDarkSurface": surface === "dark",
                         }) },
-                        React__default.createElement(ScrollUpButton, { className: "arc-Select-scrollButton" },
-                            React__default.createElement(ThemeIcon, { size: 16, icon: "selectScrollUp" })),
-                        React__default.createElement(Viewport, null, options.map(function (_a, i) {
+                        React__default.createElement(Viewport, { className: "arc-Select-content--scrollable" }, options.map(function (_a, i) {
                             var name = _a.name, value = _a.value;
                             return (React__default.createElement(Item$1, { className: "arc-Select-item", key: "select-item-".concat(i), value: value },
                                 React__default.createElement("div", { className: "arc-Select-itemTextWrapper" },
                                     React__default.createElement(ItemText, { asChild: true },
                                         React__default.createElement("span", { className: "arc-Select-itemText" }, name))),
-                                React__default.createElement(ItemIndicator$1, null,
-                                    React__default.createElement(ThemeIcon, { size: 20, icon: "selectIndicator" }))));
-                        })),
-                        React__default.createElement(ScrollDownButton, { className: "arc-Select-scrollButton" },
-                            React__default.createElement(ThemeIcon, { size: 16, icon: "selectScrollDown" }))))))));
+                                React__default.createElement(ItemIndicator$1, { className: "arc-Select-itemSelectIcon" },
+                                    React__default.createElement(ThemeIcon, { size: 24, icon: "selectIndicator" }))));
+                        }))))))));
 };
 
 /**
@@ -18940,7 +18926,7 @@ var SiteFooterV2 = function (_a) {
 
 /**
  * Do not edit directly
- * Generated on Mon, 19 May 2025 14:54:16 GMT
+ * Generated on Tue, 10 Jun 2025 09:53:42 GMT
  */
 var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
 
@@ -19777,8 +19763,9 @@ const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07b
 
 /** Use `Switch` to allow users to immediately toggle between two states. */
 var Switch = function (_a) {
-    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, _b = _a.labelPosition, labelPosition = _b === void 0 ? "top" : _b, name = _a.name, onBlur = _a.onBlur, value = _a.value, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, id = _a.id, _d = _a.labelSize, labelSize = _d === void 0 ? "s" : _d, onStatusText = _a.onStatusText, offStatusText = _a.offStatusText, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, ariaLabel = _a.ariaLabel, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "labelPosition", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "onStatusText", "offStatusText", "hideLabel", "ariaLabel"]);
-    var _f = useState(defaultChecked), switchState = _f[0], setSwitchState = _f[1];
+    var _b;
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, _c = _a.labelPosition, labelPosition = _c === void 0 ? "top" : _c, name = _a.name, onBlur = _a.onBlur, value = _a.value, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, errorMessage = _a.errorMessage, id = _a.id, _e = _a.size, size = _e === void 0 ? "m" : _e, onStatusText = _a.onStatusText, offStatusText = _a.offStatusText, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, ariaLabel = _a.ariaLabel, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "labelPosition", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "size", "onStatusText", "offStatusText", "hideLabel", "ariaLabel"]);
+    var _g = useState(defaultChecked), switchState = _g[0], setSwitchState = _g[1];
     var surface = useContext(Context$3).surface;
     if (!onStatusText) {
         onStatusText = offStatusText;
@@ -19790,11 +19777,11 @@ var Switch = function (_a) {
         setSwitchState(function (previous) { return !previous; });
         onCheckedChange && onCheckedChange(checked);
     };
-    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, labelPosition: labelPosition, requirementStatus: "not-applicable" },
-        !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, labelPosition: labelPosition, requirementStatus: "not-applicable" },
+        !hideLabel && React__default.createElement(VerticalSpace, { size: "12" }),
         React__default.createElement("div", { className: "arc-Switch-container" },
             React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, __assign({ id: id, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedHandler, checked: switchState, disabled: isDisabled, className: classNames("arc-Switch", {
-                    "arc-Switch--large": labelSize === "l",
+                    "arc-Switch--medium": size === "m",
                     "arc-Switch--isDisabled": isDisabled,
                     "arc-Switch--onDarkSurface": surface === "dark",
                 }), "aria-label": ariaLabel }, filterAttrs(props)),
@@ -19802,12 +19789,14 @@ var Switch = function (_a) {
                     React__default.createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
                         React__default.createElement("div", { className: "arc-Switch-thumbIcon" },
                             React__default.createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
-                                React__default.createElement(ThemeIcon, { icon: "switchToggle", color: "brand", size: labelSize === "l" ? 24 : 16 }))))),
-                React__default.createElement("div", { className: classNames("arc-Switch-statusText", {
-                        "arc-Switch-statusText--isDisabled": isDisabled,
-                        "arc-Switch-statusText--onDarkSurface": surface === "dark",
-                    }) },
-                    React__default.createElement(Text, { size: labelSize, "aria-hidden": true }, switchState ? onStatusText : offStatusText))))));
+                                React__default.createElement(ThemeIcon, { icon: "switchToggle", color: "brand", size: size === "m" ? 32 : 24 }))))),
+                React__default.createElement("div", { className: classNames("arc-Switch-statusText", (_b = {
+                            "arc-Switch-statusText--isDisabled": isDisabled,
+                            "arc-Switch-statusText--onDarkSurface": surface === "dark"
+                        },
+                        _b["arc-Switch-statusText--".concat(size)] = size === "m",
+                        _b)) },
+                    React__default.createElement("p", { "aria-hidden": true }, switchState ? onStatusText : offStatusText))))));
 };
 
 var TabbedBanner = function (_a) {
@@ -20004,7 +19993,7 @@ var TextArea = forwardRef(function (_a, ref) {
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "12.0.0-beta.18",
+  version: "12.0.0-beta.19",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",