@arc-ui/components 4.0.1 → 5.0.0

package/dist/index.es.js

@@ -308,9 +308,9 @@ var Base = function (_a) {
     return (React.createElement("div", __assign({ className: "arc".concat(brand ? " arc-".concat(brand) : "") }, filterDataAttrs(props)), children));
 };
 
-var defaultContext$2 = { surface: "light" };
-var Context$2 = createContext(defaultContext$2);
-var Provider$3 = Context$2.Provider;
+var defaultContext$3 = { surface: "light" };
+var Context$3 = createContext(defaultContext$3);
+var Provider$4 = Context$3.Provider;
 /**
  * Use `Surface` to compose content using the Arc system.
  */
@@ -325,7 +325,7 @@ var Surface = function (_a) {
         background === "darker") {
         surface = "dark";
     }
-    return (React.createElement(Provider$3, { value: { surface: surface } },
+    return (React.createElement(Provider$4, { value: { surface: surface } },
         React.createElement("div", __assign({ className: classNames((_b = {
                     "arc-Surface": true
                 },
@@ -357,7 +357,7 @@ __spreadArray([], backgroundsShared, true);
 var BrandLogo = function (_a) {
     var _b;
     var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = __rest(_a, ["color", "label", "size", "subBrand"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-BrandLogo": true,
                 "arc-BrandLogo--colorBrand": color === "brand",
@@ -635,7 +635,7 @@ const iconsSelected = [
 var Icon = function (_a) {
     var _b;
     var _c = _a.color, color = _c === void 0 ? "auto" : _c, icon = _a.icon, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isSelected, isSelected = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["color", "icon", "isInline", "isSelected", "label", "size"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     return (React.createElement("span", __assign({ "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
             _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
@@ -653,8 +653,8 @@ var Icon = function (_a) {
  */
 var Button = forwardRef(function (_a, ref) {
     var _b;
-    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, target = _a.target, type = _a.type, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "target", "type"]);
-    var surface = useContext(Context$2).surface;
+    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
+    var surface = useContext(Context$3).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
@@ -664,19 +664,23 @@ var Button = forwardRef(function (_a, ref) {
         _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
             iconPosition &&
             iconPosition !== "afterText",
+        _b["arc-Button--hasSupportingText"] = supportingText,
         _b["arc-Button--onDarkSurface"] = surface === "dark",
         _b));
     var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
+    var buttonText = supportingText ? (React.createElement("span", null,
+        React.createElement("span", { className: "arc-Button-text" }, label),
+        React.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React.createElement("span", { className: "arc-Button-text" }, label));
     var buttonIcon = icon || fill === "flat" ? (React.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
     if (href && !isDisabled) {
         return (React.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
             React.createElement("span", { className: "arc-Button-inner" },
-                React.createElement("span", { className: "arc-Button-text" }, label),
+                buttonText,
                 buttonIcon)));
     }
     return (React.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
         React.createElement("span", { className: "arc-Button-inner" },
-            React.createElement("span", { className: "arc-Button-text" }, label),
+            buttonText,
             buttonIcon)));
 });
 var ButtonIcon = function (_a) {
@@ -709,7 +713,7 @@ var Image = function (_a) {
 var Heading = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, _f = _a.typeface, typeface = _f === void 0 ? "default" : _f, props = __rest(_a, ["align", "casing", "children", "color", "level", "size", "typeface"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     var Element = "span";
     if (level) {
         Element = "h".concat(level);
@@ -853,7 +857,7 @@ var useNumericInput = function (props) {
 var Card = function (_a) {
     var _b;
     var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, imageHeight = _a.imageHeight, minHeight = _a.minHeight, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageSrc", "imageSrcSet", "imageHeight", "minHeight", "target", "title", "titleSize"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
@@ -912,7 +916,7 @@ Card.Image = CardImage;
  */
 var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, stretch = _a.stretch, target = _a.target;
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     return (React.createElement("a", { "aria-describedby": actionId, className: classNames({
             "arc-CardLink": true,
             "arc-CardLink--button": isButton,
@@ -924,38 +928,89 @@ var CardLink = function (_a) {
             React.createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
 };
 
+var defaultContext$2 = {
+    requirementStatus: null
+};
+var Context$2 = createContext(defaultContext$2);
+var Provider$3 = 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, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
+    var surface = useContext(Context$3).surface;
+    var _e = useAriaDescribedby({
+        errorMessage: errorMessage,
+        helper: helper,
+        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
+    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
+    var LabelType = ElementType === "div" ? "label" : "legend";
+    var elementProps = {};
+    var labelProps = {};
+    if (LabelType === "label") {
+        labelProps["htmlFor"] = htmlFor;
+        if (htmlFor) {
+            labelProps["id"] = "".concat(htmlFor, "-label");
+        }
+        else if (id) {
+            labelProps["id"] = "".concat(id, "-label");
+        }
+    }
+    else {
+        elementProps["aria-describedby"] = ariaDescribedby;
+    }
+    return (React.createElement(Provider$3, { value: { requirementStatus: requirementStatus } },
+        React.createElement(ElementType, __assign({ className: classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark"
+            }), id: id }, elementProps, filterDataAttrs(props)),
+            React.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+                label,
+                " ",
+                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+            children,
+            errorMessage && (React.createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+};
+
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
 var Checkbox = forwardRef(function (_a, ref) {
-    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, props = __rest(_a, ["errorMessage", "helper", "id", "isChecked", "isDisabled", "isRequired", "label", "name", "onChange", "value"]);
-    var surface = useContext(Context$2).surface;
-    var _e = useAriaDescribedby({
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value"]);
+    var requirementStatus = useContext(Context$2).requirementStatus;
+    var surface = useContext(Context$3).surface;
+    var _f = useAriaDescribedby({
         id: id,
-        errorMessage: errorMessage,
-        helper: helper
-    }), ariaDescribedby = _e.ariaDescribedby, idHelper = _e.idHelper, idError = _e.idError;
+        errorMessage: errorMessage
+    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError;
     var idLabel = "".concat(id, "-label");
     var checkedProps = {};
     if (typeof onChange === "function") {
-        checkedProps.checked = isChecked;
+        checkedProps.checked = checked;
     }
-    else if (isChecked && !onChange) {
+    else if (checked && !onChange) {
         checkedProps.defaultChecked = true;
     }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
     return (React.createElement("div", { className: classNames({
             "arc-Checkbox": true,
             "arc-Checkbox--disabled": isDisabled,
             "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
             "arc-Checkbox--onDarkSurface": surface === "dark"
         }) },
         React.createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
-            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-disabled": isDisabled, "aria-invalid": errorMessage ? "true" : "false", "aria-required": isRequired ? "true" : undefined, className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
+            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React.createElement("span", { className: "arc-Checkbox-box" }),
             React.createElement("span", null,
                 label,
-                !isRequired && " (Optional)")),
-        helper && (React.createElement("div", { id: idHelper, className: "arc-Checkbox-helper" }, helper)),
+                " ",
+                !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && React.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
         errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error" }, errorMessage))));
 });
 
@@ -1058,7 +1113,7 @@ var Curve = function (_a) {
  */
 var Disclosure = function (_a) {
     var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     return (React.createElement("details", __assign({ className: classNames({
             "arc-Disclosure": true,
             "arc-Disclosure--indentDetails": indentDetails,
@@ -1081,53 +1136,13 @@ var Elevation = function (_a) {
             _b)) }, filterDataAttrs(props)), children));
 };
 
-/**
- * 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, id = _a.id, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "isRequired", "label", "labelSize"]);
-    var surface = useContext(Context$2).surface;
-    var _e = useAriaDescribedby({
-        errorMessage: errorMessage,
-        helper: helper,
-        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
-    var LabelType = ElementType === "div" ? "label" : "legend";
-    var elementProps = {};
-    var labelProps = {};
-    if (LabelType === "label") {
-        labelProps["htmlFor"] = htmlFor;
-        if (htmlFor) {
-            labelProps["id"] = "".concat(htmlFor, "-label");
-        }
-        else if (id) {
-            labelProps["id"] = "".concat(id, "-label");
-        }
-    }
-    else {
-        elementProps["aria-describedby"] = ariaDescribedby;
-    }
-    return (React.createElement(ElementType, __assign({ className: classNames({
-            "arc-FormControl": true,
-            "arc-FormControl--smallLabel": labelSize === "s",
-            "arc-FormControl--onDarkSurface": surface === "dark"
-        }), id: id }, elementProps, filterDataAttrs(props)),
-        React.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
-            label,
-            " ",
-            !isRequired && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(Optional)"))),
-        helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
-        children,
-        errorMessage && (React.createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage))));
-};
-
 /**
  * Use `Group` to arrange flexible items in a row.
  */
 var Group = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = __rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     useEffect(function () {
         React.Children.map(children, function (item) {
             if (item && item.type !== GroupItem) {
@@ -1162,7 +1177,7 @@ Group.Item = GroupItem;
  */
 var Markup = function (_a) {
     var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     return (React.createElement("div", __assign({ className: classNames({
             "arc-Markup": true,
             "arc-Markup--measured": isMeasured,
@@ -1244,60 +1259,50 @@ var useRadioContext = function () {
  * Radio Button component.
  */
 var RadioButton = forwardRef(function (_a, ref) {
-    var helper = _a.helper, id = _a.id, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "label", "value"]);
-    var _b = useRadioContext(), isDisabled = _b.isDisabled, isInvalid = _b.isInvalid, isRequired = _b.isRequired, isChecked = _b.isChecked, name = _b.name, changeEvent = _b.changeEvent, errorMessage = _b.errorMessage, errorId = _b.errorId;
-    var surface = useContext(Context$2).surface;
-    var _c = useAriaDescribedby({
-        id: id,
-        idError: "".concat(errorId, "-error"),
-        helper: helper,
-        errorMessage: errorMessage
-    }), ariaDescribedby = _c.ariaDescribedby, idHelper = _c.idHelper;
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
+    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, isChecked = _b.isChecked, labelSize = _b.labelSize, name = _b.name, size = _b.size;
+    var surface = useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     var checked = isChecked === value ? true : false;
-    var disabled = isDisabled ? isDisabled : false;
     return (React.createElement("div", __assign({ className: classNames({
             "arc-RadioButton": true,
-            "arc-RadioButton--checked": isChecked,
-            "arc-RadioButton--disabled": disabled,
-            "arc-RadioButton--invalid": isInvalid,
-            "arc-RadioButton--required": isRequired,
+            "arc-RadioButton--disabled": isDisabled || groupDisabled,
+            "arc-RadioButton--small": size === "s",
+            "arc-RadioButton--smallLabel": labelSize === "s",
             "arc-RadioButton--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React.createElement("input", { "aria-describedby": ariaDescribedby, "aria-disabled": disabled, className: "arc-RadioButton-input", defaultChecked: checked, disabled: isDisabled, id: id, name: name, onChange: changeEvent, ref: ref, required: isRequired, type: "radio", value: value }),
-        React.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel }, label),
-        helper && (React.createElement("p", { className: "arc-RadioButton-helper", id: idHelper }, helper))));
+        React.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
+            React.createElement("span", null,
+                label,
+                helper && React.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
 });
 
 /**
  * Use `RadioGroup` to wrap and control radio buttons and apply default values
  */
 var RadioGroup = function (_a) {
-    var children = _a.children, defaultValue = _a.defaultValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, id = _a.id, helper = _a.helper, label = _a.label, name = _a.name, onChange = _a.onChange, props = __rest(_a, ["children", "defaultValue", "isDisabled", "isRequired", "errorMessage", "id", "helper", "label", "name", "onChange"]);
+    var children = _a.children, defaultValue = _a.defaultValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "defaultValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
     return (React.createElement(Provider$2, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
             isChecked: defaultValue,
-            isRequired: isRequired,
-            isDisabled: isDisabled,
-            isInvalid: errorMessage ? true : false,
-            errorId: id,
-            errorMessage: errorMessage,
+            labelSize: labelSize,
             name: name,
-            changeEvent: onChange
+            size: size
         } },
-        React.createElement(FormControl, { elementType: "fieldset", label: label, errorMessage: errorMessage, helper: helper, isRequired: isRequired, id: id },
-            React.createElement("div", __assign({ className: classNames({
-                    "arc-RadioGroup": true,
-                    "arc-RadioGroup--invalid": errorMessage,
-                    "arc-RadioGroup--disabled": isDisabled
-                }) }, filterDataAttrs(props)), children))));
+        React.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
+            React.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
 };
+RadioButton.displayName = "RadioGroup.RadioButton";
 RadioGroup.RadioButton = RadioButton;
 
 /**
  * Use `Rule` to display a horizontal rule.
  */
 var Rule = function (props) {
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     return (React.createElement("hr", __assign({ className: classNames({
             "arc-Rule": true,
             "arc-Rule--onDarkSurface": surface === "dark"
@@ -1969,7 +1974,7 @@ SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 var Text = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
-    var surface = useContext(Context$2).surface;
+    var surface = useContext(Context$3).surface;
     return (React.createElement("span", __assign({ className: classNames((_b = {
                 "arc-Text": true
             },
@@ -1986,8 +1991,8 @@ var Text = function (_a) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onChange", "pattern", "type", "value"]);
-    var surface = useContext(Context$2).surface;
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var surface = useContext(Context$3).surface;
     var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = useAriaDescribedby({
@@ -2000,8 +2005,8 @@ var TextInput = forwardRef(function (_a, ref) {
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isRequired: isRequired, label: label, labelSize: labelSize },
-            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-required": isRequired ? "true" : undefined, className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+        React.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
+            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
 });
 
 /**
@@ -2018,5 +2023,5 @@ var VerticalSpace = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
-export { Align, Base, BrandLogo, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, FormControl, Group, Heading, Icon, Image, Markup, Poster, RadioGroup, Rule, Section, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$2 as SurfaceContext, Text, TextInput, UniversalHeader, VerticalSpace };
+export { Align, Base, BrandLogo, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, FormControl, Group, Heading, Icon, Image, Markup, Poster, RadioGroup, Rule, Section, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Text, TextInput, UniversalHeader, VerticalSpace };
 //# sourceMappingURL=index.es.js.map