@arc-ui/components 3.1.0 → 4.0.0

package/dist/index.js

@@ -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 _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$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
+    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));
 };
 
@@ -644,10 +646,10 @@ var Icon = function (_a) {
     var surface = React.useContext(Context$2).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
@@ -663,11 +665,10 @@ var Button = React.forwardRef(function (_a, ref) {
     var surface = React.useContext(Context$2).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",
@@ -724,7 +725,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",
@@ -854,25 +855,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 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$2).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,
@@ -880,12 +880,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.
@@ -919,12 +919,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 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$2).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),
@@ -1020,9 +1020,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",
@@ -1054,7 +1052,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,
@@ -1352,10 +1350,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;
@@ -1383,16 +1379,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)];
         }
@@ -1410,7 +1410,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) {
@@ -1419,24 +1420,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)];
         }
@@ -1466,7 +1486,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,
@@ -1576,7 +1596,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:
@@ -1596,11 +1616,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)];
@@ -1649,7 +1678,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:
@@ -1668,11 +1697,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)];
         }
@@ -1693,7 +1728,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);
             }
         });
@@ -1701,7 +1736,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);
             }
         });
@@ -1709,7 +1744,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);
             }
         });
@@ -1739,7 +1774,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:
@@ -1770,13 +1805,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))];
@@ -1806,7 +1845,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)"));
@@ -1857,15 +1896,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,
@@ -1885,27 +1924,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),
@@ -1913,9 +1958,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)];
@@ -1935,12 +1979,11 @@ var Text = function (_a) {
     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;
     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",