@arc-ui/components 4.0.1 → 6.1.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",
@@ -369,6 +369,10 @@ var BrandLogo = function (_a) {
         } }, filterDataAttrs(props)), label ? React.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
 const ArcBreakpointM = 768;
 const ArcBreakpointL = 1024;
 const iconsSelected = [
@@ -635,7 +639,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 +657,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 +668,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 +717,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 +861,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 +920,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 +932,87 @@ 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 +1115,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 +1138,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 +1179,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,
@@ -1234,9 +1251,6 @@ var RadioContext = createContext({});
 var Provider$2 = RadioContext.Provider;
 var useRadioContext = function () {
     var context = useContext(RadioContext);
-    if (!context) {
-        console.warn("Ensure to use <RadioGroup.RadioButton /> within the <RadioGroup /> or its branded version.");
-    }
     return context;
 };
 
@@ -1244,60 +1258,57 @@ 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, checkedValue = _b.checkedValue, 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;
+    var checked = checkedValue === value ? true : 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, checkedValue = _a.checkedValue, _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", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== RadioButton) {
+                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
+            }
+        });
+    }, [children]);
     return (React.createElement(Provider$2, { value: {
-            isChecked: defaultValue,
-            isRequired: isRequired,
-            isDisabled: isDisabled,
-            isInvalid: errorMessage ? true : false,
-            errorId: id,
-            errorMessage: errorMessage,
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            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"
@@ -1501,7 +1512,9 @@ var Panel = function (_a) {
                 // and the click is not on a SubNavItem-link.
                 // This ensures that one SubNavItem Panel per NavItem always remains open.
                 (subNavItemRef &&
-                    !e.target.classList.contains(subNavLink)) ||
+                    !e.target.classList.contains(subNavLink) &&
+                    !e.target.classList.contains("".concat(subNavLink, "Title")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "SubTitle"))) ||
                 // Panel is inside a SubNavItem
                 // and the click is not inside the Panel's NavItem parent.
                 // This prevents SubNavItem Panels in sibling NavItems from being closed.
@@ -1629,12 +1642,31 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
     });
 }); });
 
+/**
+ * Use `Text` to display text.
+ */
+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$3).surface;
+    return (React.createElement("span", __assign({ className: classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
+
 var SubNavItem = function (_a) {
     var _b, _c;
-    var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, promo = _a.promo, title = _a.title, props = __rest(_a, ["children", "isDefaultItem", "href", "promo", "title"]);
-    var _e = useContext(Context$1), navItem = _e.navItem, subTitle = _e.subTitle;
+    var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, offsetXL = _a.offsetXL, promo = _a.promo, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "isDefaultItem", "href", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
+    var navItem = useContext(Context$1).navItem;
     var subNavItem = useRef();
-    var _f = useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(children, function (item) {
@@ -1654,52 +1686,75 @@ var SubNavItem = function (_a) {
             setPanelOpen(false);
         }
     }, [isDefaultItem, isMinWidthArcBreakpointL]);
+    var linkTitle = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
+        subTitle ? (React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
     return (React.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderSubNavItem"] = true,
             _b["arc-SiteHeaderSubNavItem--linkSelected"] = children && panelOpen,
-            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", href: href }, title)) : null) : (React.createElement(React.Fragment, null,
+            _b[suffixModifier("arc-SiteHeaderSubNavItem--offsetXL", offsetXL || "")] = offsetXL,
+            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", href: href }, linkTitle)) : null) : (React.createElement(React.Fragment, null,
         React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                 _c["arc-SiteHeaderSubNavItem-link"] = true,
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, title),
-        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement(React.Fragment, null,
-                subTitle && "".concat(subTitle, " "),
-                React.createElement("b", null, title)) }, children)))));
+            } }, linkTitle),
+        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement("span", null,
+                title,
+                subTitle && (React.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, promo, link, href, title, props;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var children, promo, link, linkTitle, viewAll, href, title, offsetXL, props;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeaderPanel-items");
                 promo = el.querySelector(".arc-SiteHeaderPanel-promo");
                 if (!children) return [3 /*break*/, 2];
                 return [4 /*yield*/, hydrate(children)];
             case 1:
-                children = _a.sent();
-                _a.label = 2;
+                children = _b.sent();
+                _b.label = 2;
             case 2:
                 if (!promo) return [3 /*break*/, 4];
                 return [4 /*yield*/, hydrate(promo)];
             case 3:
-                promo = _a.sent();
-                _a.label = 4;
+                promo = _b.sent();
+                _b.label = 4;
             case 4:
                 link = el.querySelector(".arc-SiteHeaderSubNavItem-link");
+                linkTitle = el.querySelector(".arc-SiteHeaderSubNavItem-linkTitle");
+                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
                 href = "";
                 title = "";
                 if (link) {
                     href = link.getAttribute("href") || /* istanbul ignore next */ "";
-                    title = link.textContent || /* istanbul ignore next */ "";
+                }
+                if (linkTitle) {
+                    title = linkTitle.textContent || /* istanbul ignore next */ "";
+                }
+                if (viewAll) {
+                    href = viewAll.getAttribute("href") || /* istanbul ignore next */ "";
+                }
+                offsetXL = undefined;
+                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL24")) {
+                    offsetXL = "24";
+                }
+                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL48")) {
+                    offsetXL = "48";
                 }
                 props = {
                     href: href,
                     isDefaultItem: Boolean(el.dataset.defaultItem),
+                    offsetXL: offsetXL,
                     promo: promo || undefined,
-                    title: title
+                    subTitle: ((_a = el.querySelector(".arc-SiteHeaderSubNavItem-linkSubTitle")) === null || _a === void 0 ? void 0 : _a.textContent) ||
+                        undefined,
+                    title: title,
+                    viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
                 return [2 /*return*/, React.createElement(SubNavItem, __assign({}, props), children)];
         }
@@ -1766,7 +1821,7 @@ function wrap(el, wrapper) {
     wrapper.appendChild(el);
 }
 var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAll, title, props;
+    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAllNodes, viewAll, title, props;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -1796,7 +1851,8 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
             case 4:
                 link = el.querySelector(".arc-SiteHeaderNavItem-link");
                 subTitle = el.querySelector(".arc-SiteHeaderPanel-title");
-                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
+                viewAllNodes = el.querySelectorAll(".arc-SiteHeaderPanel-viewAll");
+                viewAll = viewAllNodes[viewAllNodes.length - 1];
                 title = "";
                 if (link) {
                     title = link.textContent || /* istanbul ignore next */ "";
@@ -1963,31 +2019,12 @@ SiteHeaderRehydrator.NavItemRehydrator = NavItemRehydrator;
 SiteHeaderRehydrator.NavItemWithSubNavRehydrator = NavItemWithSubNavRehydrator;
 SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 
-/**
- * Use `Text` to display text.
- */
-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;
-    return (React.createElement("span", __assign({ className: classNames((_b = {
-                "arc-Text": true
-            },
-            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
-            _b["arc-Text--inline"] = isInline,
-            _b["arc-Text--measured"] = isMeasured,
-            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
-            _b["arc-Text--".concat(tone)] = tone !== "default",
-            _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, filterDataAttrs(props)), children));
-};
-
 /**
  * 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 +2037,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 +2055,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