@arc-ui/components 3.0.0 → 5.0.0

package/dist/index.js

@@ -316,9 +316,9 @@ var Base = function (_a) {
     return (React__default["default"].createElement("div", __assign({ className: "arc".concat(brand ? " arc-".concat(brand) : "") }, filterDataAttrs(props)), children));
 };
 
-var defaultContext$2 = { surface: "light" };
-var Context$2 = React.createContext(defaultContext$2);
-var Provider$3 = Context$2.Provider;
+var defaultContext$3 = { surface: "light" };
+var Context$3 = React.createContext(defaultContext$3);
+var Provider$4 = Context$3.Provider;
 /**
  * Use `Surface` to compose content using the Arc system.
  */
@@ -333,7 +333,7 @@ var Surface = function (_a) {
         background === "darker") {
         surface = "dark";
     }
-    return (React__default["default"].createElement(Provider$3, { value: { surface: surface } },
+    return (React__default["default"].createElement(Provider$4, { value: { surface: surface } },
         React__default["default"].createElement("div", __assign({ className: classNames((_b = {
                     "arc-Surface": true
                 },
@@ -363,15 +363,17 @@ __spreadArray([], backgroundsShared, true);
  * Use `BrandLogo` to display the brand logo.
  */
 var BrandLogo = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "auto" : _b, label = _a.label, _c = _a.size, size = _c === void 0 ? 40 : _c, props = __rest(_a, ["color", "label", "size"]);
-    var surface = React.useContext(Context$2).surface;
-    return (React__default["default"].createElement("div", __assign({ className: classNames({
-            "arc-BrandLogo": true,
-            "arc-BrandLogo--colorBrand": color === "brand",
-            "arc-BrandLogo--onDarkBackground": surface === "dark"
-        }), style: {
-            height: size !== 40 ? size : undefined,
-            width: size !== 40 ? size : undefined
+    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 = React.useContext(Context$3).surface;
+    return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
+                "arc-BrandLogo": true,
+                "arc-BrandLogo--colorBrand": color === "brand",
+                "arc-BrandLogo--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
+            _b)), style: {
+            width: size !== 34 ? size : undefined
         } }, filterDataAttrs(props)), label ? React__default["default"].createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
@@ -398,6 +400,8 @@ const iconsSelected = [
   "btArrowLeftRightFill",
   "btArrowRightFill",
   "btArrowUpFill",
+  "btAttachmentAltFill",
+  "btAttachmentFill",
   "btBagFill",
   "btBasketFill",
   "btBinFill",
@@ -418,6 +422,8 @@ const iconsSelected = [
   "btChatFill",
   "btChatMessageFill",
   "btChatTypingFill",
+  "btClipboardFill",
+  "btClipboardTickFill",
   "btClockFill",
   "btCloudAlertFill",
   "btCloudDesktopFill",
@@ -470,6 +476,7 @@ const iconsSelected = [
   "btFaceVeryHappyFill",
   "btFolderFill",
   "btGamingFill",
+  "btGenderFemaleAndMaleFill",
   "btGenderFemaleFill",
   "btGenderMaleFill",
   "btGenderNeutralFill",
@@ -477,6 +484,7 @@ const iconsSelected = [
   "btGlobalConnectivityFill",
   "btGlobeFill",
   "btGlossaryFill",
+  "btGraphBarAndPlotFill",
   "btGraphBarChartFill",
   "btGraphDownFill",
   "btGraphUpAndDownFill",
@@ -501,6 +509,7 @@ const iconsSelected = [
   "btLanFill",
   "btLaptopAndMobileFill",
   "btLaptopConnectAndShareFill",
+  "btLaptopDetectionFill",
   "btLaptopFill",
   "btLaptopSecureFill",
   "btLaptopVideoConferenceFill",
@@ -528,6 +537,7 @@ const iconsSelected = [
   "btMoneyFill",
   "btMonitorFill",
   "btMonitorTickFill",
+  "btMoonFill",
   "btMouseFill",
   "btNamingFill",
   "btNewWindowFill",
@@ -536,12 +546,16 @@ const iconsSelected = [
   "btNoSpeechFill",
   "btNoViewFill",
   "btNotificationFill",
+  "btPasswordFIll",
   "btPaymentMethodFill",
   "btPayphoneFill",
   "btPhoneBarredFill",
   "btPhoneFill",
   "btPictureFill",
+  "btPinAltFill",
+  "btPinFill",
   "btPlaneFill",
+  "btPlanningFill",
   "btPlantFill",
   "btPlayFill",
   "btPodcastFill",
@@ -555,15 +569,18 @@ const iconsSelected = [
   "btRecyclingFill",
   "btRefreshFill",
   "btRefundFill",
+  "btReleaseFill",
   "btResolution4KFill",
   "btResolutionHdFill",
   "btResolutionSdFill",
   "btScaleFill",
   "btSearchFill",
   "btServerFill",
+  "btSettingsAltFill",
   "btSettingsFill",
   "btShieldAddFill",
   "btShieldFill",
+  "btShieldQuestionMarkFIll",
   "btShieldSecurityFill",
   "btShieldTickFill",
   "btShipFill",
@@ -592,6 +609,7 @@ const iconsSelected = [
   "btTvAndHubAndPhoneFill",
   "btTabletFill",
   "btTabletWithKeyboardFill",
+  "btTagFill",
   "btTaxonomyFill",
   "btTechBarFill",
   "btThumbsDownFill",
@@ -625,13 +643,13 @@ 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 = React.useContext(Context$2).surface;
+    var surface = React.useContext(Context$3).surface;
     return (React__default["default"].createElement("span", __assign({ "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
-            _b[suffixModifier("arc-Icon--color", color || "")] = color !== "auto",
+            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
             _b["arc-Icon--".concat(icon).concat(isSelected && iconsSelected.includes("".concat(icon, "Fill")) ? "Fill" : "")] = icon,
             _b["arc-Icon--inline"] = isInline,
-            _b["arc-Icon--onDarkBackground"] = surface === "dark",
+            _b["arc-Icon--onDarkSurface"] = surface === "dark",
             _b)), role: label ? "img" : undefined, style: {
             height: size,
             width: size
@@ -643,31 +661,34 @@ var Icon = function (_a) {
  */
 var Button = React.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 = React.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 = React.useContext(Context$3).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
-            "arc-Button--displayBlock": isDisplayBlock,
-            "arc-Button--fillFlat": fill === "flat",
-            "arc-Button--fillOutlined": fill === "outlined",
-            "arc-Button--fullWidth": isFullWidth
+            "arc-Button--displayBlock": isDisplayBlock
         },
+        _b[suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
+        _b["arc-Button--fullWidth"] = isFullWidth,
         _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__default["default"].createElement("span", null,
+        React__default["default"].createElement("span", { className: "arc-Button-text" }, label),
+        React__default["default"].createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React__default["default"].createElement("span", { className: "arc-Button-text" }, label));
     var buttonIcon = icon || fill === "flat" ? (React__default["default"].createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
     if (href && !isDisabled) {
         return (React__default["default"].createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
             React__default["default"].createElement("span", { className: "arc-Button-inner" },
-                React__default["default"].createElement("span", { className: "arc-Button-text" }, label),
+                buttonText,
                 buttonIcon)));
     }
     return (React__default["default"].createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
         React__default["default"].createElement("span", { className: "arc-Button-inner" },
-            React__default["default"].createElement("span", { className: "arc-Button-text" }, label),
+            buttonText,
             buttonIcon)));
 });
 var ButtonIcon = function (_a) {
@@ -700,7 +721,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 = React.useContext(Context$2).surface;
+    var surface = React.useContext(Context$3).surface;
     var Element = "span";
     if (level) {
         Element = "h".concat(level);
@@ -708,7 +729,7 @@ var Heading = function (_a) {
     return (React__default["default"].createElement(Element, __assign({ className: classNames((_b = {
                 "arc-Heading": true
             },
-            _b[suffixModifier("arc-Heading--align", align || "")] = align && align !== "left",
+            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
             _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
             _b["arc-Heading--casingNone"] = casing === "none",
             _b["arc-Heading--colorBrand"] = color === "brand",
@@ -838,25 +859,24 @@ var useNumericInput = function (props) {
     return { inputMode: inputMode, pattern: pattern, type: type };
 };
 
-var defaultActionLabel = "Read more";
 /**
  * Use `Card` to contain content and actions about a single subject.
  */
 var Card = function (_a) {
     var _b;
-    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? defaultActionLabel : _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 = React.useContext(Context$2).surface;
+    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 = React.useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
-        return fill === "outlined" ? (React__default["default"].createElement("div", null, children)) : (React__default["default"].createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
+        return fill === "outlined" || fill === "neutral" ? (React__default["default"].createElement("div", null, children)) : (React__default["default"].createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
     };
     var coverImage = imageSrc && (React__default["default"].createElement(CardImage, { alt: imageAlt, src: imageSrc, srcSet: imageSrcSet, height: imageHeight }));
     return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
                 "arc-Card": true,
-                "arc-Card--onDarkSurface": surface === "dark",
-                "arc-Card--fillOutlined": fill === "outlined"
+                "arc-Card--onDarkSurface": surface === "dark"
             },
+            _b[suffixModifier("arc-Card--fill", fill)] = fill !== "solid",
             _b["arc-is-".concat(interactionMode, "InteractionMode")] = interactionMode,
             _b)) }, filterDataAttrs(props)),
         React__default["default"].createElement(Wrapper, null,
@@ -864,12 +884,12 @@ var Card = function (_a) {
                 React__default["default"].createElement("div", { className: "arc-Card-header" },
                     React__default["default"].createElement("div", { className: "arc-Card-title" },
                         React__default["default"].createElement(Heading, { size: titleSize },
-                            React__default["default"].createElement(CardLink, { actionId: actionId, href: href, stretch: true, target: target }, title))),
+                            React__default["default"].createElement(CardLink, { actionId: actionId, fill: fill, href: href, stretch: true, target: target }, title))),
                     coverImage),
                 React__default["default"].createElement("div", { className: "arc-Card-children" },
                     React__default["default"].createElement(Card.Block, null, children)),
                 href && (React__default["default"].createElement(CardBlock, null,
-                    React__default["default"].createElement(CardLink, { href: href, actionId: actionId, isButton: true }, actionLabel || defaultActionLabel)))))));
+                    React__default["default"].createElement(CardLink, { href: href, fill: fill, actionId: actionId, isButton: true }, actionLabel)))))));
 };
 /**
  * Internal `Card.Block` component to section blocks of content within a Card.
@@ -903,12 +923,12 @@ Card.Image = CardImage;
  * Internal `CardLink` component.
  */
 var CardLink = function (_a) {
-    var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, href = _a.href, stretch = _a.stretch, target = _a.target;
-    var surface = React.useContext(Context$2).surface;
+    var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, stretch = _a.stretch, target = _a.target;
+    var surface = React.useContext(Context$3).surface;
     return (React__default["default"].createElement("a", { "aria-describedby": actionId, className: classNames({
             "arc-CardLink": true,
             "arc-CardLink--button": isButton,
-            "arc-CardLink--onDarkSurface": surface === "dark",
+            "arc-CardLink--onDarkSurface": surface === "dark" && fill !== "neutral",
             "arc-CardLink--stretch": stretch
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target },
         React__default["default"].createElement("span", { className: "arc-CardLink-text" }, children),
@@ -916,38 +936,89 @@ var CardLink = function (_a) {
             React__default["default"].createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
 };
 
+var defaultContext$2 = {
+    requirementStatus: null
+};
+var Context$2 = React.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 = React.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__default["default"].createElement(Provider$3, { value: { requirementStatus: requirementStatus } },
+        React__default["default"].createElement(ElementType, __assign({ className: classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark"
+            }), id: id }, elementProps, filterDataAttrs(props)),
+            React__default["default"].createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+                label,
+                " ",
+                requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+            children,
+            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+};
+
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
 var Checkbox = React.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 = React.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 = React.useContext(Context$2).requirementStatus;
+    var surface = React.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__default["default"].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__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
-            React__default["default"].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__default["default"].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__default["default"].createElement("span", { className: "arc-Checkbox-box" }),
             React__default["default"].createElement("span", null,
                 label,
-                !isRequired && " (Optional)")),
-        helper && (React__default["default"].createElement("div", { id: idHelper, className: "arc-Checkbox-helper" }, helper)),
+                " ",
+                !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper))),
         errorMessage && (React__default["default"].createElement("div", { id: idError, className: "arc-Checkbox-error" }, errorMessage))));
 });
 
@@ -1004,9 +1075,7 @@ var Col = function (_a) {
     var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
     return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Col"] = true,
-            _b["arc-Col--alignBottom"] = align === "bottom",
-            _b["arc-Col--alignCenter"] = align === "center",
-            _b["arc-Col--alignTop"] = align === "top",
+            _b[suffixModifier("arc-Col--align", align || "")] = align,
             _b["arc-Col--".concat(span)] = typeof span !== "undefined",
             _b["arc-Col--S".concat(spanS)] = typeof spanS !== "undefined",
             _b["arc-Col--M".concat(spanM)] = typeof spanM !== "undefined",
@@ -1038,7 +1107,7 @@ var Curve = function (_a) {
     return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
                 "arc-Curve": true
             },
-            _b[suffixModifier("arc-Curve--from", from || "")] = from && from !== "top",
+            _b[suffixModifier("arc-Curve--from", from)] = from && from !== "top",
             _b["arc-Curve--size".concat(size && size.toUpperCase())] = size && size !== "m",
             _b[suffixModifier("arc-Curve--bottomColor", bottomColor || "")] = bottomColor,
             _b[suffixModifier("arc-Curve--topColor", topColor || "")] = topColor,
@@ -1052,7 +1121,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 = React.useContext(Context$2).surface;
+    var surface = React.useContext(Context$3).surface;
     return (React__default["default"].createElement("details", __assign({ className: classNames({
             "arc-Disclosure": true,
             "arc-Disclosure--indentDetails": indentDetails,
@@ -1075,53 +1144,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 = React.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__default["default"].createElement(ElementType, __assign({ className: classNames({
-            "arc-FormControl": true,
-            "arc-FormControl--smallLabel": labelSize === "s",
-            "arc-FormControl--onDarkSurface": surface === "dark"
-        }), id: id }, elementProps, filterDataAttrs(props)),
-        React__default["default"].createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
-            label,
-            " ",
-            !isRequired && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(Optional)"))),
-        helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
-        children,
-        errorMessage && (React__default["default"].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 = React.useContext(Context$2).surface;
+    var surface = React.useContext(Context$3).surface;
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== GroupItem) {
@@ -1156,7 +1185,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 = React.useContext(Context$2).surface;
+    var surface = React.useContext(Context$3).surface;
     return (React__default["default"].createElement("div", __assign({ className: classNames({
             "arc-Markup": true,
             "arc-Markup--measured": isMeasured,
@@ -1238,60 +1267,50 @@ var useRadioContext = function () {
  * Radio Button component.
  */
 var RadioButton = React.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 = React.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 = React.useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     var checked = isChecked === value ? true : false;
-    var disabled = isDisabled ? isDisabled : false;
     return (React__default["default"].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__default["default"].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__default["default"].createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel }, label),
-        helper && (React__default["default"].createElement("p", { className: "arc-RadioButton-helper", id: idHelper }, helper))));
+        React__default["default"].createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React__default["default"].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__default["default"].createElement("span", null,
+                label,
+                helper && React__default["default"].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__default["default"].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__default["default"].createElement(FormControl, { elementType: "fieldset", label: label, errorMessage: errorMessage, helper: helper, isRequired: isRequired, id: id },
-            React__default["default"].createElement("div", __assign({ className: classNames({
-                    "arc-RadioGroup": true,
-                    "arc-RadioGroup--invalid": errorMessage,
-                    "arc-RadioGroup--disabled": isDisabled
-                }) }, filterDataAttrs(props)), children))));
+        React__default["default"].createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
+            React__default["default"].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 = React.useContext(Context$2).surface;
+    var surface = React.useContext(Context$3).surface;
     return (React__default["default"].createElement("hr", __assign({ className: classNames({
             "arc-Rule": true,
             "arc-Rule--onDarkSurface": surface === "dark"
@@ -1336,10 +1355,8 @@ var SiteFooter = function (_a) {
                         children && (React__default["default"].createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
                         React__default["default"].createElement("div", { className: "arc-SiteFooter-brand" },
                             React__default["default"].createElement("div", { className: "arc-SiteFooter-copyright" },
-                                React__default["default"].createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"),
-                                " ",
-                                currentYear || new Date().getFullYear()),
-                            React__default["default"].createElement(BrandLogo, { label: logoLabel, size: 32 }))))))));
+                                React__default["default"].createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
+                            React__default["default"].createElement(BrandLogo, { label: logoLabel }))))))));
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
@@ -1367,16 +1384,20 @@ SiteFooterItemGroup.displayName = "SiteFooter.ItemGroup";
 SiteFooter.ItemGroup = SiteFooterItemGroup;
 
 var SiteFooter_rehydrator = (function (el, rehydrateChildren) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, props;
-    var _a;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
+    var children, titleElement, title, props;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0: return [4 /*yield*/, rehydrateChildren(el.querySelector(".arc-SiteFooter-mainItems"))];
             case 1:
-                children = _b.sent();
+                children = _a.sent();
+                titleElement = el.querySelector(".arc-SiteFooter-title");
+                title = "";
+                if (titleElement) {
+                    title = titleElement.textContent || /* istanbul ignore next */ "";
+                }
                 props = {
                     children: children,
-                    title: ((_a = el.querySelector(".arc-SiteFooter-title")) === null || _a === void 0 ? void 0 : _a.textContent) || ""
+                    title: title
                 };
                 return [2 /*return*/, React__default["default"].createElement(SiteFooter.ItemGroup, __assign({}, props), children)];
         }
@@ -1394,7 +1415,8 @@ var Item = function (_a) {
 };
 
 var ItemGroup = function (_a) {
-    var children = _a.children, title = _a.title, props = __rest(_a, ["children", "title"]);
+    var children = _a.children, href = _a.href, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "viewAllTitle"]);
+    var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
@@ -1403,24 +1425,43 @@ var ItemGroup = function (_a) {
             }
         });
     }, [children]);
+    React.useEffect(function () {
+        // useEffect does not run in ReactDomServer renders
+        setHasClientSideJavaScript(true);
+    }, [setHasClientSideJavaScript]);
     return (React__default["default"].createElement("li", { className: "arc-SiteHeaderItemGroup" },
         React__default["default"].createElement("details", __assign({ className: "arc-SiteHeaderItemGroup-details", open: isMinWidthArcBreakpointL }, filterDataAttrs(props)),
-            React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 },
-                React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)),
-            React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" }, children))));
+            React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("a", { className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title))),
+            React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
+                children,
+                href ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
+                    React__default["default"].createElement("a", { className: "arc-SiteHeaderItem-link", href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
 };
 
 var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, props;
-    var _a;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
+    var children, titleElement, viewAllElement, title, href, viewAllTitle, props;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0: return [4 /*yield*/, hydrate(el.querySelector(".arc-SiteHeaderItemGroup-items"))];
             case 1:
-                children = _b.sent();
+                children = _a.sent();
+                titleElement = el.querySelector(".arc-SiteHeaderItemGroup-title");
+                viewAllElement = el.querySelector(".arc-SiteHeaderItem--viewAll");
+                title = "";
+                href = "";
+                viewAllTitle = "";
+                if (titleElement) {
+                    title = titleElement.textContent || /* istanbul ignore next */ "";
+                    href = titleElement.getAttribute("href") || /* istanbul ignore next */ "";
+                }
+                if (viewAllElement) {
+                    viewAllTitle = viewAllElement.textContent || /* istanbul ignore next */ "";
+                }
                 props = {
                     children: children,
-                    title: ((_a = el.querySelector(".arc-SiteHeaderItemGroup-title")) === null || _a === void 0 ? void 0 : _a.textContent) || ""
+                    href: href,
+                    title: title,
+                    viewAllTitle: viewAllTitle
                 };
                 return [2 /*return*/, React__default["default"].createElement(ItemGroup, __assign({}, props), children)];
         }
@@ -1450,7 +1491,7 @@ var BackButton = function (_a) {
 
 var Panel = function (_a) {
     var _b;
-    var children = _a.children, navItemRef = _a.navItemRef, _c = _a.open, open = _c === void 0 ? false : _c, promo = _a.promo, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _d = _a.subNavLink, subNavLink = _d === void 0 ? "" : _d, title = _a.title, viewAll = _a.viewAll, withSubNav = _a.withSubNav, props = __rest(_a, ["children", "navItemRef", "open", "promo", "setOpen", "subNavItemRef", "subNavLink", "title", "viewAll", "withSubNav"]);
+    var children = _a.children, navItemRef = _a.navItemRef, open = _a.open, promo = _a.promo, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _c = _a.subNavLink, subNavLink = _c === void 0 ? "" : _c, title = _a.title, viewAll = _a.viewAll, withSubNav = _a.withSubNav, props = __rest(_a, ["children", "navItemRef", "open", "promo", "setOpen", "subNavItemRef", "subNavLink", "title", "viewAll", "withSubNav"]);
     var transparent = React.useContext(Context).transparent;
     React.useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
@@ -1560,7 +1601,7 @@ var NavItem = function (_a) {
 };
 
 var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, promo, link, viewAll, props;
+    var children, promo, link, viewAll, href, title, props;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -1580,11 +1621,20 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
             case 4:
                 link = el.querySelector(".arc-SiteHeaderNavItem-link");
                 viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
+                href = "";
+                title = "";
+                if (link) {
+                    title = link.textContent || /* istanbul ignore next */ "";
+                    href = link.getAttribute("href") || /* istanbul ignore next */ "";
+                }
+                if (viewAll) {
+                    href = viewAll.getAttribute("href") || /* istanbul ignore next */ "";
+                }
                 props = {
-                    href: (link === null || link === void 0 ? void 0 : link.getAttribute("href")) || (viewAll === null || viewAll === void 0 ? void 0 : viewAll.getAttribute("href")) || undefined,
+                    href: href,
                     isCurrent: el.classList.contains("arc-SiteHeaderNavItem--linkSelected") || undefined,
                     promo: promo || undefined,
-                    title: (link === null || link === void 0 ? void 0 : link.textContent) || "",
+                    title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
                 return [2 /*return*/, React__default["default"].createElement(NavItem, __assign({}, props), children)];
@@ -1633,7 +1683,7 @@ var SubNavItem = function (_a) {
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, promo, link, props;
+    var children, promo, link, href, title, props;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -1652,11 +1702,17 @@ var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, vo
                 _a.label = 4;
             case 4:
                 link = el.querySelector(".arc-SiteHeaderSubNavItem-link");
+                href = "";
+                title = "";
+                if (link) {
+                    href = link.getAttribute("href") || /* istanbul ignore next */ "";
+                    title = link.textContent || /* istanbul ignore next */ "";
+                }
                 props = {
-                    href: (link === null || link === void 0 ? void 0 : link.getAttribute("href")) || "",
+                    href: href,
                     isDefaultItem: Boolean(el.dataset.defaultItem),
                     promo: promo || undefined,
-                    title: (link === null || link === void 0 ? void 0 : link.textContent) || ""
+                    title: title
                 };
                 return [2 /*return*/, React__default["default"].createElement(SubNavItem, __assign({}, props), children)];
         }
@@ -1677,7 +1733,7 @@ var NavItemWithSubNav = function (_a) {
             if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot1` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
-            if (item === null || item === void 0 ? void 0 : item.props.isDefaultItem) {
+            if (item.props.isDefaultItem) {
                 setDefaultItem(false);
             }
         });
@@ -1685,7 +1741,7 @@ var NavItemWithSubNav = function (_a) {
             if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot2` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
-            if (item === null || item === void 0 ? void 0 : item.props.isDefaultItem) {
+            if (item.props.isDefaultItem) {
                 setDefaultItem(false);
             }
         });
@@ -1693,7 +1749,7 @@ var NavItemWithSubNav = function (_a) {
             if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot3` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
-            if (item === null || item === void 0 ? void 0 : item.props.isDefaultItem) {
+            if (item.props.isDefaultItem) {
                 setDefaultItem(false);
             }
         });
@@ -1723,7 +1779,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, props;
+    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAll, title, props;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -1754,13 +1810,17 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
                 link = el.querySelector(".arc-SiteHeaderNavItem-link");
                 subTitle = el.querySelector(".arc-SiteHeaderPanel-title");
                 viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
+                title = "";
+                if (link) {
+                    title = link.textContent || /* istanbul ignore next */ "";
+                }
                 props = {
                     href: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.getAttribute("href")) || undefined,
-                    slot1: slot1 || undefined,
-                    slot2: slot2 || undefined,
+                    slot1: slot1 || /* istanbul ignore next */ undefined,
+                    slot2: slot2 || /* istanbul ignore next */ undefined,
                     slot3: slot3 || undefined,
                     subTitle: (subTitle === null || subTitle === void 0 ? void 0 : subTitle.textContent) || undefined,
-                    title: (link === null || link === void 0 ? void 0 : link.textContent) || "",
+                    title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
                 return [2 /*return*/, React__default["default"].createElement(NavItemWithSubNav, __assign({}, props))];
@@ -1790,7 +1850,7 @@ var Provider = Context.Provider;
  */
 var SiteHeader = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.basketHref, basketHref = _c === void 0 ? "/basket" : _c, _d = _a.hasBasket, hasBasket = _d === void 0 ? false : _d, _e = _a.hasLogin, hasLogin = _e === void 0 ? true : _e, _f = _a.isTransparent, isTransparent = _f === void 0 ? false : _f, _g = _a.loginHref, loginHref = _g === void 0 ? "/login" : _g, _h = _a.loginTitle, loginTitle = _h === void 0 ? "Login / Register" : _h, _j = _a.logoHref, logoHref = _j === void 0 ? "/" : _j, _k = _a.logoLabel, logoLabel = _k === void 0 ? "Home" : _k, search = _a.search, props = __rest(_a, ["children", "basketHref", "hasBasket", "hasLogin", "isTransparent", "loginHref", "loginTitle", "logoHref", "logoLabel", "search"]);
+    var children = _a.children, _c = _a.basketHref, basketHref = _c === void 0 ? "/basket" : _c, _d = _a.hasBasket, hasBasket = _d === void 0 ? false : _d, _e = _a.hasLogin, hasLogin = _e === void 0 ? true : _e, _f = _a.isTransparent, isTransparent = _f === void 0 ? false : _f, _g = _a.loginHref, loginHref = _g === void 0 ? "/login" : _g, _h = _a.loginTitle, loginTitle = _h === void 0 ? "Login / Register" : _h, _j = _a.logoHref, logoHref = _j === void 0 ? "/" : _j, _k = _a.logoLabel, logoLabel = _k === void 0 ? "Home" : _k, search = _a.search, subBrand = _a.subBrand, props = __rest(_a, ["children", "basketHref", "hasBasket", "hasLogin", "isTransparent", "loginHref", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
     var _l = React.useState(false), hasClientSideJavaScript = _l[0], setHasClientSideJavaScript = _l[1];
     var _m = React.useState(false), menuOpen = _m[0], setMenuOpen = _m[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
@@ -1841,15 +1901,15 @@ var SiteHeader = function (_a) {
                     : undefined },
                 React__default["default"].createElement("div", { className: "arc-SiteHeader-inner" },
                     React__default["default"].createElement("a", { className: "arc-SiteHeader-brand", href: logoHref },
-                        React__default["default"].createElement(BrandLogo, { label: logoLabel, size: 34 })),
-                    React__default["default"].createElement("nav", { className: "arc-SiteHeader-nav" }, children && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        React__default["default"].createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
+                    children && (React__default["default"].createElement("nav", { className: "arc-SiteHeader-nav" },
                         React__default["default"].createElement("div", { className: "arc-SiteHeader-menuButton" },
                             React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
                         React__default["default"].createElement("div", { className: "arc-SiteHeader-main" },
                             React__default["default"].createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
                             hasLogin && (React__default["default"].createElement("div", { className: "arc-SiteHeader-loginButton" },
-                                React__default["default"].createElement(Button, { href: loginHref, isFullWidth: true, label: loginTitle }))))))),
-                    (children || hasBasket || hasLogin || search) && (React__default["default"].createElement("div", { className: "arc-SiteHeader-secondary" },
+                                React__default["default"].createElement(Button, { href: loginHref, isFullWidth: true, label: loginTitle })))))),
+                    (hasBasket || hasLogin || search) && (React__default["default"].createElement("div", { className: "arc-SiteHeader-secondary" },
                         search ? (React__default["default"].createElement("div", { className: "arc-SiteHeader-search" }, search)) : null,
                         hasBasket ? (React__default["default"].createElement("a", { className: "arc-SiteHeader-basket", href: basketHref },
                             React__default["default"].createElement(Icon, { icon: "btBasket", label: "Basket", size: 24 }))) : null,
@@ -1869,27 +1929,33 @@ SiteHeader.NavItemWithSubNav = NavItemWithSubNav;
 SiteHeader.SubNavItem = SubNavItem;
 
 var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, search, basket, login, props;
-    var _a, _b;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    var children, search, basket, brand, login, logoHref, logoLabel, props;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeader-navItems");
                 search = el.querySelector(".arc-SiteHeader-search");
                 if (!children) return [3 /*break*/, 2];
                 return [4 /*yield*/, hydrate(children)];
             case 1:
-                children = _c.sent();
-                _c.label = 2;
+                children = _a.sent();
+                _a.label = 2;
             case 2:
                 if (!search) return [3 /*break*/, 4];
                 return [4 /*yield*/, hydrate(search)];
             case 3:
-                search = _c.sent();
-                _c.label = 4;
+                search = _a.sent();
+                _a.label = 4;
             case 4:
                 basket = el.querySelector(".arc-SiteHeader-basket");
+                brand = el.querySelector(".arc-SiteHeader-brand");
                 login = el.querySelector(".arc-SiteHeader-loginLink");
+                logoHref = "";
+                logoLabel = "";
+                if (brand) {
+                    logoHref = brand.getAttribute("href") || /* istanbul ignore next */ "";
+                    logoLabel = brand.textContent || /* istanbul ignore next */ "";
+                }
                 props = {
                     basketHref: (basket === null || basket === void 0 ? void 0 : basket.getAttribute("href")) || undefined,
                     hasBasket: Boolean(basket),
@@ -1897,9 +1963,8 @@ var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, voi
                     isTransparent: Boolean(el.dataset.transparent),
                     loginHref: (login === null || login === void 0 ? void 0 : login.getAttribute("href")) || undefined,
                     loginTitle: (login === null || login === void 0 ? void 0 : login.textContent) || undefined,
-                    logoHref: ((_a = el.querySelector(".arc-SiteHeader-brand")) === null || _a === void 0 ? void 0 : _a.getAttribute("href")) ||
-                        undefined,
-                    logoLabel: ((_b = el.querySelector("arc-BrandLogo-text")) === null || _b === void 0 ? void 0 : _b.textContent) || undefined,
+                    logoHref: logoHref,
+                    logoLabel: logoLabel,
                     search: search
                 };
                 return [2 /*return*/, React__default["default"].createElement(SiteHeader, __assign({}, props), children)];
@@ -1917,14 +1982,13 @@ 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 = React.useContext(Context$2).surface;
+    var surface = React.useContext(Context$3).surface;
     return (React__default["default"].createElement("span", __assign({ className: classNames((_b = {
-                "arc-Text": true,
-                "arc-Text--alignCenter": align === "center",
-                "arc-Text--alignRight": align === "right",
-                "arc-Text--inline": isInline,
-                "arc-Text--measured": isMeasured
+                "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",
@@ -1935,8 +1999,8 @@ var Text = function (_a) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = React.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 = React.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 = React.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({
@@ -1949,8 +2013,8 @@ var TextInput = React.forwardRef(function (_a, ref) {
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React__default["default"].createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isRequired: isRequired, label: label, labelSize: labelSize },
-            React__default["default"].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__default["default"].createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
+            React__default["default"].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)))));
 });
 
 /**
@@ -1994,7 +2058,7 @@ exports.SiteFooterRehydrator = SiteFooter_rehydrator;
 exports.SiteHeader = SiteHeader;
 exports.SiteHeaderRehydrator = SiteHeaderRehydrator;
 exports.Surface = Surface;
-exports.SurfaceContext = Context$2;
+exports.SurfaceContext = Context$3;
 exports.Text = Text;
 exports.TextInput = TextInput;
 exports.UniversalHeader = UniversalHeader;