@arc-ui/components 10.8.1 → 11.0.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useRef, useState, useEffect, forwardRef, Fragment } from 'react';
+import React$8, { createContext, useContext, useRef, useState, useEffect, forwardRef, Fragment } from 'react';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -289,8 +289,8 @@ var suffixModifier = function (rootClassName, suffix) {
 var Align = function (_a) {
     var _b;
     var children = _a.children, _c = _a.horizontal, horizontal = _c === void 0 ? "left" : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, _e = _a.vertical, vertical = _e === void 0 ? "top" : _e, props = __rest(_a, ["children", "horizontal", "isDebugVisible", "vertical"]);
-    var wrappedChildren = React.Children.map(children, function (child, i) { return (React.createElement(AlignItem, { key: i }, child)); });
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    var wrappedChildren = React$8.Children.map(children, function (child, i) { return (React$8.createElement(AlignItem, { key: i }, child)); });
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Align"] = true,
             _b[suffixModifier("arc-Align--horizontal", horizontal)] = horizontal !== "left",
             _b["arc-Align--debugVisible"] = isDebugVisible,
@@ -299,7 +299,7 @@ var Align = function (_a) {
 };
 var AlignItem = function (_a) {
     var children = _a.children;
-    return React.createElement("div", { className: "arc-Align-item" }, children);
+    return React$8.createElement("div", { className: "arc-Align-item" }, children);
 };
 
 var ArcRootElementContext = createContext(null);
@@ -308,9 +308,9 @@ var ArcRootElementContext = createContext(null);
  */
 var Base = function (_a) {
     var _b = _a.brand, brand = _b === void 0 ? "bt" : _b, children = _a.children, props = __rest(_a, ["brand", "children"]);
-    var _c = React.useState(null), arcRoot = _c[0], setArcRoot = _c[1];
-    return (React.createElement("div", __assign({ id: "arc-root", ref: setArcRoot, className: "arc".concat(brand ? " arc-".concat(brand) : "") }, filterDataAttrs(props)),
-        React.createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
+    var _c = React$8.useState(null), arcRoot = _c[0], setArcRoot = _c[1];
+    return (React$8.createElement("div", __assign({ id: "arc-root", ref: setArcRoot, className: "arc".concat(brand ? " arc-".concat(brand) : "") }, filterDataAttrs(props)),
+        React$8.createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
 };
 
 /**
@@ -852,290 +852,64 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-/**
- * Do not edit directly
- * Generated file
- */
-var ArcBreakpointM = 768;
-var ArcBreakpointL = 1024;
-var iconsSelected = [
-    "bt3GFill",
-    "bt4GFill",
-    "bt5GFill",
-    "btAccessibilityFill",
-    "btAddFill",
-    "btAlertFill",
-    "btAlertTriangleFill",
-    "btAnswerPointFill",
-    "btArchitectureFill",
-    "btArchiveFill",
-    "btArrowAltDownFill",
-    "btArrowAltLeftFill",
-    "btArrowAltLeftRightFill",
-    "btArrowAltRightFill",
-    "btArrowAltUpFill",
-    "btArrowDownFill",
-    "btArrowLeftFill",
-    "btArrowLeftRightFill",
-    "btArrowRightFill",
-    "btArrowUpFill",
-    "btAttachmentAltFill",
-    "btAttachmentFill",
-    "btBagFill",
-    "btBasketFill",
-    "btBinFill",
-    "btBlockedNumberFill",
-    "btBoatFill",
-    "btBroadbandFill",
-    "btBuildingFill",
-    "btBurgerMenuFill",
-    "btCakeFill",
-    "btCalenderAcceptedFill",
-    "btCalenderAddEventFill",
-    "btCalenderFill",
-    "btCalenderPaymentPlanAltFill",
-    "btCalenderPaymentPlanFill",
-    "btCalenderSpecialDateFill",
-    "btCallRoutingFill",
-    "btCallerIdFill",
-    "btChatFill",
-    "btChatMessageFill",
-    "btChatTypingFill",
-    "btClipboardFill",
-    "btClipboardTickFill",
-    "btClockFill",
-    "btCloudAlertFill",
-    "btCloudDesktopFill",
-    "btCloudFill",
-    "btCloudLinkFill",
-    "btCloudMeetingFill",
-    "btCloudPhoneFill",
-    "btCloudSecurityFill",
-    "btCloudUploadFill",
-    "btCloudUserFill",
-    "btCollapseFill",
-    "btCompareFill",
-    "btComputerChipFill",
-    "btConnectedCareFill",
-    "btContactDetailsFill",
-    "btContactNoDetailsFill",
-    "btContactsFill",
-    "btCreditCardFill",
-    "btCrossAlt2pxFill",
-    "btCrossAltFill",
-    "btCrossFill",
-    "btDashboardFill",
-    "btDepositFill",
-    "btDesignFill",
-    "btDeskPhoneFill",
-    "btDetailsFill",
-    "btDetailsGroupFill",
-    "btDexterityFill",
-    "btDialPadFill",
-    "btDialPadWithHandFill",
-    "btDialledNumberDestinationFill",
-    "btDigitalCollaborationFill",
-    "btDisabilityFill",
-    "btDiscountFill",
-    "btDivertOnBusyFill",
-    "btDocumentAndPencilFill",
-    "btDocumentArticleFill",
-    "btDocumentBillsFill",
-    "btDocumentDownloadFill",
-    "btDocumentFill",
-    "btDocumentPdfFill",
-    "btDocumentWithCopyCrossedOutFill",
-    "btDocumentWithCopyFill",
-    "btDynamicCollaborationFill",
-    "btEducationFill",
-    "btEmailReadFill",
-    "btEmailUnreadFill",
-    "btEngagedFill",
-    "btEthernetFill",
-    "btFaceHappyFill",
-    "btFaceNeutralFill",
-    "btFaceSadFill",
-    "btFaceVeryHappyFill",
-    "btFirstAidFill",
-    "btFolderFill",
-    "btGamingFill",
-    "btGenderFemaleAndMaleFill",
-    "btGenderFemaleFill",
-    "btGenderMaleFill",
-    "btGenderNeutralFill",
-    "btGiftFill",
-    "btGlobalConnectivityFill",
-    "btGlobeFill",
-    "btGlossaryFill",
-    "btGondolaFill",
-    "btGraphBarAndPlotFill",
-    "btGraphBarChartFill",
-    "btGraphDownFill",
-    "btGraphUpAndDownFill",
-    "btGraphUpFill",
-    "btHeadsetFill",
-    "btHeartBrokenFill",
-    "btHeartCareFill",
-    "btHeartFill",
-    "btHoldingHeartFill",
-    "btHomeFill",
-    "btHomeTechExpertFill",
-    "btHometownFill",
-    "btHubAndMobileFill",
-    "btHubFill",
-    "btHubOldFill",
-    "btIpFill",
-    "btIPv6Fill",
-    "btIdeaFill",
-    "btInfoFill",
-    "btJsonFill",
-    "btJigsawFill",
-    "btJourneyFill",
-    "btKeyFill",
-    "btKnifeAndForkFill",
-    "btLanFill",
-    "btLaptopAndMobileFill",
-    "btLaptopConnectAndShareFill",
-    "btLaptopDetectionFill",
-    "btLaptopFill",
-    "btLaptopSecureFill",
-    "btLaptopVideoConferenceFill",
-    "btLaptopUsersFill",
-    "btLayoutGridLargeFill",
-    "btLayoutGridMediumFill",
-    "btLayoutGridSmallFill",
-    "btLayoutRowsLargeFill",
-    "btLayoutRowsMediumFill",
-    "btLayoutRowsSmallFill",
-    "btLeadershipFill",
-    "btLinkFill",
-    "btLiteracyNumeracyFill",
-    "btLocationFill",
-    "btLockedFill",
-    "btLogoutFill",
-    "btMedalFill",
-    "btMedalWithStarFill",
-    "btMeetingSpaceFill",
-    "btMegaphoneFill",
-    "btMicrophoneFill",
-    "btMobileFill",
-    "btMobileTransferCallFill",
-    "btMobileWithHandFill",
-    "btMobilityFill",
-    "btMoneyFill",
-    "btMonitorFill",
-    "btMonitorTickFill",
-    "btMoonFill",
-    "btMouseFill",
-    "btNamingFill",
-    "btNewWindowFill",
-    "btNoHearingFill",
-    "btNoHearingOrSpeechFill",
-    "btNoSpeechFill",
-    "btNoViewFill",
-    "btNotificationFill",
-    "btPaperTowelFill",
-    "btPasswordFIll",
-    "btPaymentMethodFill",
-    "btPayphoneFill",
-    "btPhoneBarredFill",
-    "btPhoneFill",
-    "btPictureFill",
-    "btPinAltFill",
-    "btPinFill",
-    "btPlaneFill",
-    "btPlanningFill",
-    "btPlantFill",
-    "btPlayFill",
-    "btPodcastFill",
-    "btPresentationFill",
-    "btPriceFill",
-    "btPrinterFill",
-    "btProcessFill",
-    "btProcessMiningFill",
-    "btProcessRolesFill",
-    "btProportionalCallDistributionFill",
-    "btQuestionFill",
-    "btRecyclingFill",
-    "btRefreshFill",
-    "btRefundFill",
-    "btReleaseFill",
-    "btResolution4KFill",
-    "btResolutionHdFill",
-    "btResolutionSdFill",
-    "btScaleFill",
-    "btSearchFill",
-    "btServerFill",
-    "btSettingsAlt2Fill",
-    "btSettingsAltFill",
-    "btSettingsFill",
-    "btShieldAddFill",
-    "btShieldFill",
-    "btShieldQuestionMarkFIll",
-    "btShieldSecurityFill",
-    "btShieldTickFill",
-    "btShipFill",
-    "btSignalFill",
-    "btSignatureFill",
-    "btSignpostFill",
-    "btSimFill",
-    "btSimpleFill",
-    "btSkiingFill",
-    "btSkisFill",
-    "btSnowboardingFill",
-    "btSpannerFill",
-    "btSpeakerFullVolumeFill",
-    "btSpeakerHalfVolumeFill",
-    "btSpeakerLowVolumeFill",
-    "btSpeakerMuteFill",
-    "btSpeedFasterFill",
-    "btSpeedFastestFill",
-    "btSpeedGuaranteeFill",
-    "btSpeedSlowFill",
-    "btSportFootballFill",
-    "btStarFill",
-    "btStopFill",
-    "btStopAltFill",
-    "btSuitcaseFill",
-    "btSunFill",
-    "btSwitchFill",
-    "btTvArialFill",
-    "btTvFill",
-    "btTvAndHubFill",
-    "btTvAndHubAndPhoneFill",
-    "btTabletFill",
-    "btTabletWithKeyboardFill",
-    "btTagFill",
-    "btTaxonomyFill",
-    "btTechBarFill",
-    "btTelemarkFill",
-    "btThumbsDownFill",
-    "btThumbsUpFill",
-    "btTickAlt2pxFill",
-    "btTickFill",
-    "btTickVariantFill",
-    "btTree1Fill",
-    "btTree2Fill",
-    "btTrophyFill",
-    "btUkFill",
-    "btUkHotspotsFill",
-    "btUsbFill",
-    "btUnlockedFill",
-    "btUserAddFill",
-    "btUserCloudFill",
-    "btUserDuplicateProfileFill",
-    "btUserFill",
-    "btUserGroupsFill",
-    "btUserParentAndChildFill",
-    "btUserWithQuestionmarkFill",
-    "btVanFill",
-    "btViewFill",
-    "btVirusFill",
-    "btWholeHomeWifiFill",
-    "btWiFiFill",
-    "btWizardFill",
-    "btWorkstationFill"
-];
+const React$7 = React$8;
+const BtIconChevronLeft2Px = props =>
+  /*#__PURE__*/ React$7.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$7.createElement("defs", null),
+    /*#__PURE__*/ React$7.createElement("path", {
+      d:
+        "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
+
+const React$6 = React$8;
+const BtIconChevronRight2Px = props =>
+  /*#__PURE__*/ React$6.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$6.createElement("defs", null),
+    /*#__PURE__*/ React$6.createElement("path", {
+      d:
+        "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
+
+const React$5 = React$8;
+const ArcIconArc = props =>
+  /*#__PURE__*/ React$5.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$5.createElement("path", {
+      fill: "none",
+      d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
+      stroke: "currentColor"
+    })
+  );
+var ArcIconArc_2 = ArcIconArc;
 
 var defaultContext$3 = { surface: "light" };
 var Context$3 = createContext(defaultContext$3);
@@ -1154,8 +928,8 @@ var Surface = function (_a) {
         background === "darker") {
         surface = "dark";
     }
-    return (React.createElement(Provider$4, { value: { surface: surface } },
-        React.createElement("div", __assign({ className: classNames((_b = {
+    return (React$8.createElement(Provider$4, { value: { surface: surface } },
+        React$8.createElement("div", __assign({ className: classNames((_b = {
                     "arc-Surface": true
                 },
                 _b["arc-Surface--".concat(background &&
@@ -1186,28 +960,29 @@ __spreadArray([], backgroundsShared, true);
  */
 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 testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc_2 : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
     var surface = useContext(Context$3).surface;
-    return (React.createElement("span", __assign({ "aria-label": label, className: classNames((_b = {},
+    var Icon = icon;
+    return (React$8.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
             _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--onDarkSurface"] = surface === "dark",
             _b)), role: label ? "img" : undefined, style: {
             height: size,
             width: size
-        } }, filterDataAttrs(props))));
+        } }, filterDataAttrs(props)),
+        React$8.createElement(Icon, null)));
 };
 
 var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
-    return (React.createElement("li", { className: "arc-Breadcrumbs-item" },
-        spacerIconBefore && (React.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
-            React.createElement(Icon, { icon: "btChevronLeft2px" }))),
+    return (React$8.createElement("li", { className: "arc-Breadcrumbs-item" },
+        spacerIconBefore && (React$8.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
+            React$8.createElement(Icon, { icon: BtIconChevronLeft2Px_2 }))),
         children,
-        spacerIconAfter && (React.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
-            React.createElement(Icon, { icon: "btChevronRight2px" })))));
+        spacerIconAfter && (React$8.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
+            React$8.createElement(Icon, { icon: BtIconChevronRight2Px_2 })))));
 };
 
 var handleLinkClick = function (_a) {
@@ -1222,12 +997,12 @@ var handleLinkClick = function (_a) {
     };
 };
 
-var BreadcrumbsLink = React.forwardRef(function (_a, ref) {
+var BreadcrumbsLink = React$8.forwardRef(function (_a, ref) {
     var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
-    return (React.createElement(React.Fragment, null, isActive || href === undefined ? (React.createElement("span", __assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: classNames({
+    return (React$8.createElement(React$8.Fragment, null, isActive || href === undefined ? (React$8.createElement("span", __assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: classNames({
             "arc-Breadcrumbs-text": true,
             "arc-Breadcrumbs-text--active": isActive
-        }) }), children)) : (React.createElement("a", __assign({}, (onClick && ref
+        }) }), children)) : (React$8.createElement("a", __assign({}, (onClick && ref
         ? { onClick: onClick }
         : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
 });
@@ -1239,7 +1014,7 @@ var Breadcrumbs = function (_a) {
     var _b = useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
     var _c = useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== BreadcrumbsItem) {
                 throw new Error("Illegal child passed to <Breadcrumbs />. Ensure to only use <Breadcrumbs.Item />");
             }
@@ -1257,7 +1032,7 @@ var Breadcrumbs = function (_a) {
              * TODO! Revise this if statement
              */
             if (children != null &&
-                React.Children.count(children) > 2 &&
+                React$8.Children.count(children) > 2 &&
                 breadcrumbsList.current != null &&
                 (breadcrumbsList.current.offsetWidth ===
                     ((_a = breadcrumbsList.current.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) ||
@@ -1272,29 +1047,29 @@ var Breadcrumbs = function (_a) {
         };
         // eslint-disable-next-line
     }, []);
-    var items = React.Children.toArray(children);
-    return (React.createElement("nav", { "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
+    var items = React$8.Children.toArray(children);
+    return (React$8.createElement("nav", { "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
             "arc-Breadcrumbs": true,
             "arc-Breadcrumbs--dark": isLight
         }) },
-        React.createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React.createElement(React.Fragment, null, items.length < 3 ? (React.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React.createElement(React.Fragment, null, isCompressed ? (React.createElement(React.Fragment, null,
-            React.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
-            React.createElement(Breadcrumbs.Item, { spacerIconAfter: true },
-                React.createElement("button", { className: "arc-Breadcrumbs-expand arc-Breadcrumbs-text", onClick: function () { return setIsCompressed(false); }, "aria-label": "Expand Breadcrumbs", type: "button", "data-testid": "expand-ellipsis" }, "...")),
-            React.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+        React$8.createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React$8.createElement(React$8.Fragment, null, items.length < 3 ? (React$8.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React$8.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React$8.createElement(React$8.Fragment, null, isCompressed ? (React$8.createElement(React$8.Fragment, null,
+            React$8.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
+            React$8.createElement(Breadcrumbs.Item, { spacerIconAfter: true },
+                React$8.createElement("button", { className: "arc-Breadcrumbs-expand arc-Breadcrumbs-text", onClick: function () { return setIsCompressed(false); }, "aria-label": "Expand Breadcrumbs", type: "button", "data-testid": "expand-ellipsis" }, "...")),
+            React$8.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
                 items[items.length - 1].props.children &&
-                React.cloneElement(items[items.length - 1].props.children, {
+                React$8.cloneElement(items[items.length - 1].props.children, {
                     isActive: true
-                })))) : (React.createElement(React.Fragment, null,
+                })))) : (React$8.createElement(React$8.Fragment, null,
             items
                 .slice(0, items.length - 1)
                 .map(function (item, index) {
-                return (React.createElement(React.Fragment, { key: "listItem-".concat(index) },
-                    React.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, item.props.children)));
+                return (React$8.createElement(React$8.Fragment, { key: "listItem-".concat(index) },
+                    React$8.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, item.props.children)));
             }),
-            React.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+            React$8.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
                 items[items.length - 1].props.children &&
-                React.cloneElement(items[items.length - 1].props.children, {
+                React$8.cloneElement(items[items.length - 1].props.children, {
                     isActive: items.length > 1
                 })))))))));
 };
@@ -1310,7 +1085,7 @@ var BrandLogo = function (_a) {
     var _b;
     var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = __rest(_a, ["color", "label", "size", "subBrand"]);
     var surface = useContext(Context$3).surface;
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {
                 "arc-BrandLogo": true,
                 "arc-BrandLogo--colorBrand": color === "brand",
                 "arc-BrandLogo--onDarkSurface": surface === "dark"
@@ -1318,8 +1093,52 @@ var BrandLogo = function (_a) {
             _b[suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
             _b)), style: {
             width: size !== 34 ? size : undefined
-        } }, filterDataAttrs(props)), label ? React.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
-};
+        } }, filterDataAttrs(props)), label ? React$8.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
+};
+
+const React$4 = React$8;
+const BtIconChevronLeftMid = props =>
+  /*#__PURE__*/ React$4.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$4.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
+
+const React$3 = React$8;
+const BtIconChevronRightMid = props =>
+  /*#__PURE__*/ React$3.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$3.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronRightMid_2 = BtIconChevronRightMid;
 
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
@@ -1341,27 +1160,27 @@ var Button = forwardRef(function (_a, ref) {
         _b["arc-Button--onDarkSurface"] = surface === "dark",
         _b));
     var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
-    var buttonText = supportingText ? (React.createElement("span", null,
-        React.createElement("span", { className: "arc-Button-text" }, label),
-        React.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React.createElement("span", { className: "arc-Button-text" }, label));
-    var buttonIcon = icon || fill === "flat" ? (React.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
+    var buttonText = supportingText ? (React$8.createElement("span", null,
+        React$8.createElement("span", { className: "arc-Button-text" }, label),
+        React$8.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React$8.createElement("span", { className: "arc-Button-text" }, label));
+    var buttonIcon = icon || fill === "flat" ? (React$8.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
     if (href && !isDisabled) {
-        return (React.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
-            React.createElement("span", { className: "arc-Button-inner" },
+        return (React$8.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+            React$8.createElement("span", { className: "arc-Button-inner" },
                 buttonText,
                 buttonIcon)));
     }
-    return (React.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
-        React.createElement("span", { className: "arc-Button-inner" },
+    return (React$8.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+        React$8.createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React.createElement("span", { className: classNames({
+    return (React$8.createElement("span", { className: classNames({
             "arc-Button-icon": true,
             "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React.createElement(Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "Mid") })) : (React.createElement(Icon, { icon: icon }))));
+        }) }, isChevron ? (React$8.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React$8.createElement(Icon, { icon: icon }))));
 };
 
 /**
@@ -1372,27 +1191,27 @@ var Image = function (_a) {
     var _b;
     var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== ImageSource) {
                 throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
             }
         });
     }, [children]);
-    var img = (React.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    var img = (React$8.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
             },
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
-            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React.createElement("picture", null,
+            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React$8.createElement("picture", null,
         children,
         " ",
-        img)) : (React.createElement(React.Fragment, null, img))));
+        img)) : (React$8.createElement(React$8.Fragment, null, img))));
 };
 var ImageSource = function (_a) {
     var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = __rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
-    return (React.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
+    return (React$8.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
 };
 ImageSource.displayName = "Image.Source";
 Image.Source = ImageSource;
@@ -1408,7 +1227,7 @@ var Heading = function (_a) {
     if (level) {
         Element = "h".concat(level);
     }
-    return (React.createElement(Element, __assign({ className: classNames((_b = {
+    return (React$8.createElement(Element, __assign({ className: classNames((_b = {
                 "arc-Heading": true
             },
             _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
@@ -1420,7 +1239,7 @@ var Heading = function (_a) {
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
+    return React$8.createElement("span", { className: "arc-Heading-proposition" }, children);
 };
 HeadingProposition.displayName = "Heading.Proposition";
 Heading.Proposition = HeadingProposition;
@@ -1550,41 +1369,41 @@ var Card = function (_a) {
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
-        return fill === "outlined" || fill === "neutral" ? (React.createElement("div", null, children)) : (React.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
+        return fill === "outlined" || fill === "neutral" ? (React$8.createElement("div", null, children)) : (React$8.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
     };
-    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    var coverImage = imageSrc && (React$8.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Card": true,
                 "arc-Card--onDarkSurface": surface === "dark"
             },
             _b[suffixModifier("arc-Card--fill", fill)] = fill !== "solid",
             _b["arc-is-".concat(interactionMode, "InteractionMode")] = interactionMode,
             _b)) }, filterDataAttrs(props)),
-        React.createElement(Wrapper, null,
-            React.createElement("div", { className: "arc-Card-inner", style: { minHeight: minHeight } },
-                React.createElement("div", { className: "arc-Card-header" },
-                    React.createElement("div", { className: "arc-Card-title" },
-                        React.createElement(Heading, { size: titleSize },
-                            React.createElement(CardLink, { stretch: true, onClick: onClick, actionId: actionId, fill: fill, href: href, linkData: linkData, target: target }, title))),
+        React$8.createElement(Wrapper, null,
+            React$8.createElement("div", { className: "arc-Card-inner", style: { minHeight: minHeight } },
+                React$8.createElement("div", { className: "arc-Card-header" },
+                    React$8.createElement("div", { className: "arc-Card-title" },
+                        React$8.createElement(Heading, { size: titleSize },
+                            React$8.createElement(CardLink, { stretch: true, onClick: onClick, actionId: actionId, fill: fill, href: href, linkData: linkData, target: target }, title))),
                     coverImage),
-                React.createElement("div", { className: "arc-Card-children" },
-                    React.createElement(Card.Block, null, children)),
-                href && (React.createElement(CardBlock, null,
-                    React.createElement(CardLink, { href: href, fill: fill, actionId: actionId, onClick: onClick, isButton: true }, actionLabel)))))));
+                React$8.createElement("div", { className: "arc-Card-children" },
+                    React$8.createElement(Card.Block, null, children)),
+                href && (React$8.createElement(CardBlock, null,
+                    React$8.createElement(CardLink, { href: href, fill: fill, actionId: actionId, onClick: onClick, isButton: true }, actionLabel)))))));
 };
 /**
  * Internal `Card.Block` component to section blocks of content within a Card.
  */
 var CardBlock = function (_a) {
     var _b = _a.align, align = _b === void 0 ? "left" : _b, children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d;
-    return (React.createElement("div", { className: classNames({
+    return (React$8.createElement("div", { className: classNames({
             "arc-Card-block": true,
             "arc-Card-block--alignCenter": align === "center",
             "arc-Card-block--alignRight": align === "right",
             "arc-Card-block--fullWidth": isFullWidth,
             "arc-Card-block--grow": grow
         }) },
-        React.createElement("div", { className: "arc-Card-blockInner" }, children)));
+        React$8.createElement("div", { className: "arc-Card-blockInner" }, children)));
 };
 CardBlock.displayName = "Card.Block";
 Card.Block = CardBlock;
@@ -1593,10 +1412,10 @@ Card.Block = CardBlock;
  */
 var CardImage = function (_a) {
     var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
-    return (React.createElement("div", { className: classNames({
+    return (React$8.createElement("div", { className: classNames({
             "arc-Card-image": true
         }) },
-        React.createElement(Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
+        React$8.createElement(Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -1606,16 +1425,65 @@ Card.Image = CardImage;
 var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, onClick = _a.onClick, stretch = _a.stretch, target = _a.target;
     var surface = useContext(Context$3).surface;
-    return (React.createElement("a", __assign({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: classNames({
+    return (React$8.createElement("a", __assign({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: classNames({
             "arc-Card-link": true,
             "arc-Card-link--button": isButton,
             "arc-Card-link--onDarkSurface": surface === "dark" && fill !== "neutral",
             "arc-Card-link--stretch": stretch
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
-        React.createElement("span", { className: "arc-Card-linkText" }, children),
-        isButton && (React.createElement("span", { className: "arc-Card-linkIcon" },
-            React.createElement(Icon, { icon: "btChevronRightMid", size: 16 })))));
-};
+        React$8.createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React$8.createElement("span", { className: "arc-Card-linkIcon" },
+            React$8.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 16 })))));
+};
+
+const React$2 = React$8;
+const BtIconTickVariant = props =>
+  /*#__PURE__*/ React$2.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$2.createElement("defs", null),
+    /*#__PURE__*/ React$2.createElement("path", {
+      d:
+        "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconTickVariant_2 = BtIconTickVariant;
+
+const React$1 = React$8;
+const BtIconAlert = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React$1.createElement("path", {
+      fill: "currentColor",
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
+    }),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconAlert_2 = BtIconAlert;
 
 var defaultContext$2 = {
     requirementStatus: null
@@ -1648,18 +1516,21 @@ var FormControl = function (_a) {
     else {
         elementProps["aria-describedby"] = ariaDescribedby;
     }
-    return (React.createElement(Provider$3, { value: { requirementStatus: requirementStatus } },
-        React.createElement(ElementType, __assign({ className: classNames({
+    return (React$8.createElement(Provider$3, { value: { requirementStatus: requirementStatus } },
+        React$8.createElement(ElementType, __assign({ className: classNames({
                 "arc-FormControl": true,
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, filterDataAttrs(props)),
-            React.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+            React$8.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
                 label,
-                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
-            helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+                requirementStatus === "optional" && (React$8.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React$8.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
             children,
-            errorMessage && (React.createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+            errorMessage && (React$8.createElement("div", { className: "arc-FormControl-error", id: idError },
+                React$8.createElement("span", { className: "arc-FormControl-error--icon" },
+                    React$8.createElement(BtIconAlert_2, null)),
+                errorMessage)))));
 };
 
 /**
@@ -1684,21 +1555,25 @@ var Checkbox = forwardRef(function (_a, ref) {
     if (requirementStatus === "required") {
         isRequired = true;
     }
-    return (React.createElement("div", { className: classNames({
+    return (React$8.createElement("div", { className: classNames({
             "arc-Checkbox": true,
             "arc-Checkbox--disabled": isDisabled,
             "arc-Checkbox--invalid": errorMessage,
             "arc-Checkbox--small": size === "s",
             "arc-Checkbox--onDarkSurface": surface === "dark"
         }) },
-        React.createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
-            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
-            React.createElement("span", { className: "arc-Checkbox-box" }),
-            React.createElement("span", null,
+        React$8.createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
+            React$8.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$8.createElement("span", { className: "arc-Checkbox-box" },
+                React$8.createElement(BtIconTickVariant_2, null)),
+            React$8.createElement("span", null,
                 label,
-                !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
-                helper && React.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
-        errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error" }, errorMessage))));
+                !isRequired && requirementStatus !== "optional" ? (React$8.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && React$8.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
+        errorMessage && (React$8.createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React$8.createElement("span", { className: "arc-Checkbox-error--icon" },
+                React$8.createElement(BtIconAlert_2, null)),
+            errorMessage))));
 });
 
 /**
@@ -1718,7 +1593,7 @@ var Clock = function (_a) {
         var interval = setInterval(tick, 1000);
         return function () { return clearInterval(interval); };
     }, [locale]);
-    return (React.createElement("time", __assign({ className: "arc-Clock", dateTime: time.toISOString() }, filterDataAttrs(props), { "data-locale": locale }), humanTime));
+    return (React$8.createElement("time", __assign({ className: "arc-Clock", dateTime: time.toISOString() }, filterDataAttrs(props), { "data-locale": locale }), humanTime));
 };
 
 var Clock_rehydrator = (function (el) { return __awaiter(void 0, void 0, void 0, function () {
@@ -1727,7 +1602,7 @@ var Clock_rehydrator = (function (el) { return __awaiter(void 0, void 0, void 0,
         props = {
             locale: el.dataset.locale
         };
-        return [2 /*return*/, React.createElement(Clock, __assign({}, props))];
+        return [2 /*return*/, React$8.createElement(Clock, __assign({}, props))];
     });
 }); });
 
@@ -1737,22 +1612,22 @@ var Clock_rehydrator = (function (el) { return __awaiter(void 0, void 0, void 0,
 var Columns = function (_a) {
     var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isGutterless"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== Col) {
                 throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
             }
         });
     }, [children]);
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React$8.createElement("div", __assign({ className: classNames({
             "arc-Columns": true,
             "arc-Columns--gutterless": isGutterless
         }) }, filterDataAttrs(props)),
-        React.createElement("div", { className: "arc-Columns-inner" }, children)));
+        React$8.createElement("div", { className: "arc-Columns-inner" }, children)));
 };
 var Col = function (_a) {
     var _b;
     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.createElement("div", __assign({ className: classNames((_b = {},
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Columns-col"] = true,
             _b[suffixModifier("arc-Columns-col--align", align || "")] = align,
             _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
@@ -1783,7 +1658,7 @@ Columns.Col = Col;
 var Curve = function (_a) {
     var _b;
     var bottomColor = _a.bottomColor, _c = _a.from, from = _c === void 0 ? "top" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "m" : _e, topColor = _a.topColor, props = __rest(_a, ["bottomColor", "from", "isInverted", "size", "topColor"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Curve": true
             },
             _b[suffixModifier("arc-Curve--from", from)] = from && from !== "top",
@@ -1794,6 +1669,26 @@ var Curve = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
+const React = React$8;
+const BtIconChevronDown2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronDown2Px_2 = BtIconChevronDown2Px;
+
 /**
  * Use `Disclosure` to display content that is only visible when toggled into
  * an "open" state.
@@ -1801,14 +1696,16 @@ var Curve = function (_a) {
 var Disclosure = function (_a) {
     var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
     var surface = useContext(Context$3).surface;
-    return (React.createElement("details", __assign({ className: classNames({
+    return (React$8.createElement("details", __assign({ className: classNames({
             "arc-Disclosure": true,
             "arc-Disclosure--indentDetails": indentDetails,
             "arc-Disclosure--onDarkSurface": surface === "dark"
         }), open: isOpen }, filterDataAttrs(props)),
-        React.createElement("summary", { className: "arc-Disclosure-summary" },
-            React.createElement(Heading, { level: headingLevel, size: "s" }, summary)),
-        React.createElement("div", { className: "arc-Disclosure-details" }, children)));
+        React$8.createElement("summary", { className: "arc-Disclosure-summary" },
+            React$8.createElement("span", { className: "arc-Disclosure-summary-icon" },
+                React$8.createElement(BtIconChevronDown2Px_2, null)),
+            React$8.createElement(Heading, { level: headingLevel, size: "s" }, summary)),
+        React$8.createElement("div", { className: "arc-Disclosure-details" }, children)));
 };
 
 /**
@@ -1817,7 +1714,7 @@ var Disclosure = function (_a) {
 var Elevation = function (_a) {
     var _b;
     var children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isFullWidth"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Elevation"] = true,
             _b["arc-Elevation--fullWidth"] = isFullWidth,
             _b)) }, filterDataAttrs(props)), children));
@@ -1831,13 +1728,13 @@ var Group = function (_a) {
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = __rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
     var surface = useContext(Context$3).surface;
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== GroupItem) {
                 throw new Error("Illegal child passed to <Group />. Ensure to only use <Group.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Group"] = true,
             _b["arc-Group--grow"] = grow,
             _b["arc-Group--growEqual"] = growEqual,
@@ -1845,12 +1742,12 @@ var Group = function (_a) {
             _b["arc-Group--noWrap"] = noWrap,
             _b["arc-Group--onDarkSurface"] = surface === "dark",
             _b)) }, filterDataAttrs(props)),
-        React.createElement("div", { className: "arc-Group-inner" }, children)));
+        React$8.createElement("div", { className: "arc-Group-inner" }, children)));
 };
 var GroupItem = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = __rest(_a, ["children", "grow", "isDebugVisible"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Group-item"] = true,
             _b["arc-Group-item--grow"] = grow,
             _b["arc-Group-item--debugVisible"] = isDebugVisible,
@@ -1865,7 +1762,7 @@ Group.Item = GroupItem;
 var Markup = function (_a) {
     var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
     var surface = useContext(Context$3).surface;
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React$8.createElement("div", __assign({ className: classNames({
             "arc-Markup": true,
             "arc-Markup--measured": isMeasured,
             "arc-Markup--onDarkSurface": surface === "dark"
@@ -1878,34 +1775,34 @@ var Markup = function (_a) {
 var UniversalHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== UniversalHeaderItem) {
                 throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
-        React.createElement(Surface, { background: "light" },
-            React.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+    return (React$8.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+        React$8.createElement(Surface, { background: "light" },
+            React$8.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
 };
 var UniversalHeaderItem = function (_a) {
     var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
-    return (React.createElement("li", __assign({}, filterDataAttrs(props)),
-        React.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+    return (React$8.createElement("li", __assign({}, filterDataAttrs(props)),
+        React$8.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
 };
 UniversalHeaderItem.displayName = "UniversalHeader.Item";
 UniversalHeader.Item = UniversalHeaderItem;
 
 var PosterImage = function (_a) {
     var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
-    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
+    return (React$8.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
 };
 PosterImage.displayName = "Poster.Image";
 
 var PosterVideo = function (_a) {
     var _b;
     var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = __rest(_a, ["anchor", "autoPlay", "children", "loop"]);
-    return (React.createElement("video", __assign({ className: classNames((_b = {
+    return (React$8.createElement("video", __assign({ className: classNames((_b = {
                 "arc-PosterVideo": true
             },
             _b[suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
@@ -1918,14 +1815,14 @@ PosterVideo.displayName = "Poster.Video";
  */
 var Poster = function (_a) {
     var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = __rest(_a, ["background", "children", "overlay", "surface"]);
-    return (React.createElement(Surface, { background: surface },
-        React.createElement("div", __assign({ className: classNames({
+    return (React$8.createElement(Surface, { background: surface },
+        React$8.createElement("div", __assign({ className: classNames({
                 "arc-Poster": true,
                 "arc-Poster--overlay": overlay,
                 "arc-Poster--overlayLight": surface === "lighter"
             }) }, filterDataAttrs(props)),
-            React.createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
-            React.createElement("div", { className: "arc-Poster-body" }, children))));
+            React$8.createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
+            React$8.createElement("div", { className: "arc-Poster-body" }, children))));
 };
 PosterImage.displayName = "Poster.Image";
 Poster.Image = PosterImage;
@@ -1948,18 +1845,18 @@ var RadioButton = forwardRef(function (_a, ref) {
     var surface = useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     var checked = checkedValue === value ? true : false;
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React$8.createElement("div", __assign({ className: classNames({
             "arc-RadioButton": true,
             "arc-RadioButton--disabled": isDisabled || groupDisabled,
             "arc-RadioButton--small": size === "s",
             "arc-RadioButton--smallLabel": labelSize === "s",
             "arc-RadioButton--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
-            React.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
-            React.createElement("span", null,
+        React$8.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React$8.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$8.createElement("span", null,
                 label,
-                helper && React.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
+                helper && React$8.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
 });
 
 /**
@@ -1968,13 +1865,13 @@ var RadioButton = forwardRef(function (_a, ref) {
 var RadioGroup = function (_a) {
     var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== RadioButton) {
                 throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
             }
         });
     }, [children]);
-    return (React.createElement(Provider$2, { value: {
+    return (React$8.createElement(Provider$2, { value: {
             blurEvent: onBlur,
             changeEvent: onChange,
             groupDisabled: isDisabled,
@@ -1983,8 +1880,8 @@ var RadioGroup = function (_a) {
             name: name,
             size: size
         } },
-        React.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
-            React.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
+        React$8.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
+            React$8.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
 };
 RadioButton.displayName = "RadioGroup.RadioButton";
 RadioGroup.RadioButton = RadioButton;
@@ -1994,7 +1891,7 @@ RadioGroup.RadioButton = RadioButton;
  */
 var Rule = function (props) {
     var surface = useContext(Context$3).surface;
-    return (React.createElement("hr", __assign({ className: classNames({
+    return (React$8.createElement("hr", __assign({ className: classNames({
             "arc-Rule": true,
             "arc-Rule--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props))));
@@ -2005,61 +1902,70 @@ var Rule = function (props) {
  */
 var Section = function (_a) {
     var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isFullWidth", "isDebugVisible"]);
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React$8.createElement("div", __assign({ className: classNames({
             "arc-Section": true,
             "arc-Section--fullWidth": isFullWidth,
             "arc-Section--debugVisible": isDebugVisible
         }) }, filterDataAttrs(props)), children));
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
+var ArcBreakpointM = 768;
+var ArcBreakpointL = 1024;
+
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
  */
 var SiteFooter = function (_a) {
     var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
                 throw new Error("Illegal child passed to <SiteFooter />. Ensure to only use <SiteFooter.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement(React.Fragment, null,
-        curve ? (React.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
-        React.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
-            React.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
-                (siteName || main) && (React.createElement(React.Fragment, null,
-                    React.createElement(Section, null,
-                        siteName && (React.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
-                        main && React.createElement("div", { className: "arc-SiteFooter-main" }, main)),
-                    React.createElement("hr", { className: "arc-SiteFooter-rule" }))),
-                React.createElement(Section, null,
-                    React.createElement("div", { className: "arc-SiteFooter-secondary" },
-                        children && (React.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
-                        React.createElement("div", { className: "arc-SiteFooter-brand" },
-                            React.createElement("div", { className: "arc-SiteFooter-copyright" },
-                                React.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
-                            React.createElement(BrandLogo, { label: logoLabel }))))))));
+    return (React$8.createElement(React$8.Fragment, null,
+        curve ? (React$8.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
+        React$8.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
+            React$8.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+                (siteName || main) && (React$8.createElement(React$8.Fragment, null,
+                    React$8.createElement(Section, null,
+                        siteName && (React$8.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
+                        main && React$8.createElement("div", { className: "arc-SiteFooter-main" }, main)),
+                    React$8.createElement("hr", { className: "arc-SiteFooter-rule" }))),
+                React$8.createElement(Section, null,
+                    React$8.createElement("div", { className: "arc-SiteFooter-secondary" },
+                        children && (React$8.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
+                        React$8.createElement("div", { className: "arc-SiteFooter-brand" },
+                            React$8.createElement("div", { className: "arc-SiteFooter-copyright" },
+                                React$8.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
+                            React$8.createElement(BrandLogo, { label: logoLabel }))))))));
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
-        React.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
-            React.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
-        React.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+    return (React$8.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
+        React$8.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React$8.createElement("span", { className: "arc-SiteFooter-icon" },
+                React$8.createElement(BtIconChevronDown2Px_2, null)),
+            React$8.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
+        React$8.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };
 var SiteFooterItem = function (_a) {
     var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
-    return (React.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterDataAttrs(props)),
-        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+    return (React$8.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterDataAttrs(props)),
+        React$8.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
 };
 SiteFooterItem.displayName = "SiteFooter.Item";
 SiteFooter.Item = SiteFooterItem;
@@ -2082,7 +1988,7 @@ var SiteFooter_rehydrator = (function (el, rehydrateChildren) { return __awaiter
                     children: children,
                     title: title
                 };
-                return [2 /*return*/, React.createElement(SiteFooter.ItemGroup, __assign({}, props), children)];
+                return [2 /*return*/, React$8.createElement(SiteFooter.ItemGroup, __assign({}, props), children)];
         }
     });
 }); });
@@ -2090,11 +1996,14 @@ var SiteFooter_rehydrator = (function (el, rehydrateChildren) { return __awaiter
 var Item = function (_a) {
     var _b;
     var children = _a.children, href = _a.href, isEmphasised = _a.isEmphasised, onClick = _a.onClick, props = __rest(_a, ["children", "href", "isEmphasised", "onClick"]);
-    return (React.createElement("li", __assign({ className: classNames((_b = {},
+    return (React$8.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderItem"] = true,
             _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
             _b)) }, filterDataAttrs(props)),
-        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href }, children)));
+        React$8.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
+            isEmphasised && (React$8.createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
+                React$8.createElement(BtIconChevronRight2Px_2, null))),
+            children)));
 };
 
 var ItemGroup = function (_a) {
@@ -2102,7 +2011,7 @@ var ItemGroup = function (_a) {
     var _b = useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== Item && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.ItemGroup />. Ensure to only use <SiteHeader.Item />.");
             }
@@ -2116,15 +2025,18 @@ var ItemGroup = function (_a) {
     if (title) {
         ElementType = "details";
     }
-    return (React.createElement("li", { className: "arc-SiteHeaderItemGroup" },
-        React.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
-            title ? (React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { onClick: handleLinkClick({
+    return (React$8.createElement("li", { className: "arc-SiteHeaderItemGroup" },
+        React$8.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
+            title ? (React$8.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React$8.createElement("a", { onClick: handleLinkClick({
                     handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
-            React.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
+                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
+                title,
+                React$8.createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
+                    React$8.createElement(BtIconChevronDown2Px_2, null)))) : (React$8.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+            React$8.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
-                href && title ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
-                    React.createElement("a", { className: "arc-SiteHeaderItem-link", onClick: handleLinkClick({
+                href && title ? (React$8.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
+                    React$8.createElement("a", { className: "arc-SiteHeaderItem-link", onClick: handleLinkClick({
                             handler: onClick
                         }), href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
 };
@@ -2154,7 +2066,7 @@ var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, voi
                     title: title,
                     viewAllTitle: viewAllTitle
                 };
-                return [2 /*return*/, React.createElement(ItemGroup, __assign({}, props), children)];
+                return [2 /*return*/, React$8.createElement(ItemGroup, __assign({}, props), children)];
         }
     });
 }); });
@@ -2162,22 +2074,24 @@ var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, voi
 var Column = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item && item.type !== ItemGroup) {
                 throw new Error("Illegal child passed to <SiteHeader.Column />. Ensure to only use <SiteHeader.ItemGroup />.");
             }
         });
     }, [children]);
-    return (React.createElement("li", __assign({ className: "arc-SiteHeaderColumn" }, filterDataAttrs(props)),
-        React.createElement("ul", { className: "arc-SiteHeaderColumn-items" }, children)));
+    return (React$8.createElement("li", __assign({ className: "arc-SiteHeaderColumn" }, filterDataAttrs(props)),
+        React$8.createElement("ul", { className: "arc-SiteHeaderColumn-items" }, children)));
 };
 
 var BackButton = function (_a) {
     var setOpen = _a.setOpen;
-    return (React.createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
+    return (React$8.createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
         } },
-        React.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
+        React$8.createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
+            React$8.createElement(BtIconChevronLeft2Px_2, null)),
+        React$8.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
 var Panel = function (_a) {
@@ -2238,26 +2152,29 @@ var Panel = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setOpen, subNavItemRef]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderPanel"] = true,
             _b["arc-SiteHeaderPanel--open"] = open,
             _b["arc-SiteHeaderPanel--transparent"] = transparent,
             _b["arc-SiteHeaderPanel--withSubNav"] = withSubNav,
             _b)) }, filterDataAttrs(props)),
-        React.createElement(Surface, { background: "white", growVertically: true },
-            React.createElement(BackButton, { setOpen: setOpen }),
-            React.createElement("div", { className: "arc-SiteHeaderPanel-inner" },
-                React.createElement("div", { className: "arc-SiteHeaderPanel-main" },
-                    React.createElement("div", { className: "arc-SiteHeaderPanel-mainInner" },
-                        withSubNav && (React.createElement("div", { className: "arc-SiteHeaderPanel-subNavArea" })),
-                        title && (React.createElement("div", { className: "arc-SiteHeaderPanel-title" }, title)),
-                        React.createElement("ul", { className: "arc-SiteHeaderPanel-items" }, children)),
+        React$8.createElement(Surface, { background: "white", growVertically: true },
+            React$8.createElement(BackButton, { setOpen: setOpen }),
+            React$8.createElement("div", { className: "arc-SiteHeaderPanel-inner" },
+                React$8.createElement("div", { className: "arc-SiteHeaderPanel-main" },
+                    React$8.createElement("div", { className: "arc-SiteHeaderPanel-mainInner" },
+                        withSubNav && (React$8.createElement("div", { className: "arc-SiteHeaderPanel-subNavArea" })),
+                        title && (React$8.createElement("div", { className: "arc-SiteHeaderPanel-title" }, title)),
+                        React$8.createElement("ul", { className: "arc-SiteHeaderPanel-items" }, children)),
                     viewAll),
-                promo && React.createElement("div", { className: "arc-SiteHeaderPanel-promo" }, promo)))));
+                promo && React$8.createElement("div", { className: "arc-SiteHeaderPanel-promo" }, promo)))));
 };
 var ViewAll = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href }, title));
+    return (React$8.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
+        title,
+        React$8.createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
+            React$8.createElement(BtIconChevronRight2Px_2, null))));
 };
 ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
@@ -2267,8 +2184,9 @@ var NavItem = function (_a) {
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, promo = _a.promo, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
     var navItem = useRef();
     var _d = useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
@@ -2277,20 +2195,22 @@ var NavItem = function (_a) {
             }
         });
     }, [children]);
-    return (React.createElement("li", __assign({ className: classNames((_b = {},
+    return (React$8.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderNavItem"] = true,
             _b["arc-SiteHeaderNavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
-            _b)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React.createElement("a", { onClick: handleLinkClick({
+            _b)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React$8.createElement("a", { onClick: handleLinkClick({
             handler: onClick
-        }), className: "arc-SiteHeaderNavItem-link", href: href }, title)) : null) : (React.createElement(React.Fragment, null,
-        React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+        }), className: "arc-SiteHeaderNavItem-link", href: href }, title)) : null) : (React$8.createElement(React$8.Fragment, null,
+        React$8.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                 _c["arc-SiteHeaderNavItem-link"] = true,
                 _c["arc-SiteHeaderNavItem-link--itemHasChildren"] = true,
                 _c)), onClick: function (e) {
                 e.preventDefault();
                 setPanelOpen(!panelOpen);
-            } }, title),
-        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
+            } },
+            React$8.createElement("span", null, title),
+            React$8.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React$8.createElement(BtIconChevronDown2Px_2, null)) : (React$8.createElement(BtIconChevronRight2Px_2, null)))),
+        React$8.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React$8.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
 var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2330,7 +2250,7 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React.createElement(NavItem, __assign({}, props), children)];
+                return [2 /*return*/, React$8.createElement(NavItem, __assign({}, props), children)];
         }
     });
 }); });
@@ -2342,7 +2262,7 @@ var Text = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
     var surface = useContext(Context$3).surface;
-    return (React.createElement("span", __assign({ className: classNames((_b = {
+    return (React$8.createElement("span", __assign({ className: classNames((_b = {
                 "arc-Text": true
             },
             _b[suffixModifier("arc-Text--align", align)] = align !== "left",
@@ -2362,7 +2282,7 @@ var SubNavItem = function (_a) {
     var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
@@ -2379,23 +2299,26 @@ var SubNavItem = function (_a) {
             setPanelOpen(false);
         }
     }, [isDefaultItem, isMinWidthArcBreakpointL]);
-    var linkTitle = (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
-        subTitle ? (React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
-    return (React.createElement("li", __assign({ className: classNames((_b = {},
+    var linkTitle = (React$8.createElement(React$8.Fragment, null,
+        React$8.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
+        subTitle ? (React$8.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
+    return (React$8.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderSubNavItem"] = true,
             _b["arc-SiteHeaderSubNavItem--linkSelected"] = children && panelOpen,
             _b[suffixModifier("arc-SiteHeaderSubNavItem--offsetXL", offsetXL || "")] = offsetXL,
-            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", onClick: handleLinkClick({ handler: onClick }), href: href }, linkTitle)) : null) : (React.createElement(React.Fragment, null,
-        React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React$8.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", onClick: handleLinkClick({ handler: onClick }), href: href }, linkTitle)) : null) : (React$8.createElement(React$8.Fragment, null,
+        React$8.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                 _c["arc-SiteHeaderSubNavItem-link"] = true,
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, linkTitle),
-        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement("span", null,
+            } },
+            linkTitle,
+            children && (React$8.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
+                React$8.createElement(BtIconChevronRight2Px_2, null)))),
+        React$8.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React$8.createElement("span", null,
                 title,
-                subTitle && (React.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
+                subTitle && (React$8.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React$8.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2449,7 +2372,7 @@ var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, vo
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React.createElement(SubNavItem, __assign({}, props), children)];
+                return [2 /*return*/, React$8.createElement(SubNavItem, __assign({}, props), children)];
         }
     });
 }); });
@@ -2463,8 +2386,9 @@ var NavItemWithSubNav = function (_a) {
     var navItem = useRef();
     var _e = useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
     var _f = useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(slot1, function (item) {
+        React$8.Children.map(slot1, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot1` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
@@ -2472,7 +2396,7 @@ var NavItemWithSubNav = function (_a) {
                 setDefaultItem(false);
             }
         });
-        React.Children.map(slot2, function (item) {
+        React$8.Children.map(slot2, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot2` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
@@ -2480,7 +2404,7 @@ var NavItemWithSubNav = function (_a) {
                 setDefaultItem(false);
             }
         });
-        React.Children.map(slot3, function (item) {
+        React$8.Children.map(slot3, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot3` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
@@ -2489,21 +2413,23 @@ var NavItemWithSubNav = function (_a) {
             }
         });
     }, [slot1, slot2, slot3]);
-    return (React.createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
-        React.createElement("li", __assign({ className: classNames((_b = {},
+    return (React$8.createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
+        React$8.createElement("li", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeaderNavItemWithSubNav"] = true,
                 _b["arc-SiteHeaderNavItem--linkSelected"] = panelOpen,
                 _b)), ref: navItem }, filterDataAttrs(props)),
-            React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+            React$8.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                     _c["arc-SiteHeaderNavItem-link"] = true,
                     _c["arc-SiteHeaderNavItem-link--itemHasChildren"] = true,
                     _c)), onClick: function (e) {
                     e.preventDefault();
                     setPanelOpen(!panelOpen);
-                } }, title),
-            React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
+                } },
+                title,
+                React$8.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React$8.createElement(BtIconChevronDown2Px_2, null)) : (React$8.createElement(BtIconChevronRight2Px_2, null)))),
+            React$8.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React$8.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
                 defaultItem
-                    ? React.cloneElement(slot1, { isDefaultItem: defaultItem })
+                    ? React$8.cloneElement(slot1, { isDefaultItem: defaultItem })
                     : slot1,
                 slot2,
                 slot3))));
@@ -2559,7 +2485,7 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React.createElement(NavItemWithSubNav, __assign({}, props))];
+                return [2 /*return*/, React$8.createElement(NavItemWithSubNav, __assign({}, props))];
         }
     });
 }); });
@@ -2567,15 +2493,15 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
 var MenuButton = function (_a) {
     var _b;
     var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
-    return (React.createElement("button", { "aria-expanded": menuOpen, className: classNames((_b = {},
+    return (React$8.createElement("button", { "aria-expanded": menuOpen, className: classNames((_b = {},
             _b["arc-MenuButton"] = true,
             _b["arc-MenuButton--menuOpen"] = menuOpen,
             _b)), onClick: function () {
             setMenuOpen(!menuOpen);
         }, type: "button" },
-        React.createElement("span", { className: "arc-MenuButton-box" },
-            React.createElement("span", { className: "arc-MenuButton-inner" }),
-            React.createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
+        React$8.createElement("span", { className: "arc-MenuButton-box" },
+            React$8.createElement("span", { className: "arc-MenuButton-inner" }),
+            React$8.createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
 };
 
 var defaultContext = { transparent: false };
@@ -2591,7 +2517,7 @@ var SiteHeader = function (_a) {
     var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React$8.Children.map(children, function (item) {
             if (item &&
                 item.type !== NavItem &&
                 item.type !== NavItemWithSubNav &&
@@ -2637,32 +2563,32 @@ var SiteHeader = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
-    return (React.createElement(Provider, { value: { transparent: isTransparent } },
-        React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React$8.createElement(Provider, { value: { transparent: isTransparent } },
+        React$8.createElement("div", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeader"] = true,
                 _b["arc-SiteHeader--menuOpen"] = menuOpen,
                 _b["arc-no-js"] = !hasClientSideJavaScript,
                 _b)) }, filterDataAttrs(props), { "data-transparent": isTransparent || null }),
-            React.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
+            React$8.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
                     ? "brand-flat"
                     : undefined },
-                React.createElement("div", { className: "arc-SiteHeader-inner" },
-                    React.createElement("a", { className: "arc-SiteHeader-brand", onClick: handleLinkClick({
+                React$8.createElement("div", { className: "arc-SiteHeader-inner" },
+                    React$8.createElement("a", { className: "arc-SiteHeader-brand", onClick: handleLinkClick({
                             handler: logoOnClick
                         }), href: logoHref },
-                        React.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
-                    children && (React.createElement("nav", { className: "arc-SiteHeader-nav" },
-                        React.createElement("div", { className: "arc-SiteHeader-menuButton" },
-                            React.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React.createElement("div", { className: "arc-SiteHeader-main" },
-                            React.createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
-                            hasLogin && (React.createElement(React.Fragment, null, loginOnClick ? (React.createElement("div", { className: "arc-SiteHeader-loginButton" },
-                                React.createElement(Button, { onClick: loginOnClick, isFullWidth: true, label: loginTitle }))) : (React.createElement("div", { className: "arc-SiteHeader-loginButton" },
-                                React.createElement(Button, { href: loginHref, isFullWidth: true, label: loginTitle })))))))),
-                    (basket || hasLogin || search) && (React.createElement("div", { className: "arc-SiteHeader-secondary" },
-                        search ? (React.createElement("div", { className: "arc-SiteHeader-search" }, search)) : null,
-                        basket ? (React.createElement("div", { className: "arc-SiteHeader-basket" }, basket)) : null,
-                        hasLogin && (React.createElement(React.Fragment, null, loginOnClick ? (React.createElement("div", { className: "arc-SiteHeader-loginLink arc-SiteHeader-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React.createElement("a", { className: "arc-SiteHeader-loginLink", href: loginHref }, loginTitle)))))))))));
+                        React$8.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
+                    children && (React$8.createElement("nav", { className: "arc-SiteHeader-nav" },
+                        React$8.createElement("div", { className: "arc-SiteHeader-menuButton" },
+                            React$8.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
+                        React$8.createElement("div", { className: "arc-SiteHeader-main" },
+                            React$8.createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
+                            hasLogin && (React$8.createElement(React$8.Fragment, null, loginOnClick ? (React$8.createElement("div", { className: "arc-SiteHeader-loginButton" },
+                                React$8.createElement(Button, { onClick: loginOnClick, isFullWidth: true, label: loginTitle }))) : (React$8.createElement("div", { className: "arc-SiteHeader-loginButton" },
+                                React$8.createElement(Button, { href: loginHref, isFullWidth: true, label: loginTitle })))))))),
+                    (basket || hasLogin || search) && (React$8.createElement("div", { className: "arc-SiteHeader-secondary" },
+                        search ? (React$8.createElement("div", { className: "arc-SiteHeader-search" }, search)) : null,
+                        basket ? (React$8.createElement("div", { className: "arc-SiteHeader-basket" }, basket)) : null,
+                        hasLogin && (React$8.createElement(React$8.Fragment, null, loginOnClick ? (React$8.createElement("div", { className: "arc-SiteHeader-loginLink arc-SiteHeader-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React$8.createElement("a", { className: "arc-SiteHeader-loginLink", href: loginHref }, loginTitle)))))))))));
 };
 Column.displayName = "SiteHeader.Column";
 Item.displayName = "SiteHeader.Item";
@@ -2721,7 +2647,7 @@ var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, voi
                     logoLabel: logoLabel,
                     search: search
                 };
-                return [2 /*return*/, React.createElement(SiteHeader, __assign({}, props), children)];
+                return [2 /*return*/, React$8.createElement(SiteHeader, __assign({}, props), children)];
         }
     });
 }); };
@@ -2743,13 +2669,13 @@ var TextInput = forwardRef(function (_a, ref) {
         id: id,
         helper: helper
     }).ariaDescribedby;
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React$8.createElement("div", __assign({ className: classNames({
             "arc-TextInput": true,
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
-            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+        React$8.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
+            React$8.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)))));
 });
 
 /**
@@ -2758,7 +2684,7 @@ var TextInput = forwardRef(function (_a, ref) {
 var VerticalSpace = function (_a) {
     var _b;
     var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest(_a, ["isDebugVisible", "size"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    return (React$8.createElement("div", __assign({ className: classNames((_b = {
                 "arc-VerticalSpace": true
             },
             _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
@@ -2771,7 +2697,7 @@ var VerticalSpace = function (_a) {
  */
 var VisuallyHidden = function (_a) {
     var children = _a.children;
-    return (React.createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+    return (React$8.createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
 };
 
 export { Align, Base, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, FormControl, Group, Heading, Icon, Image, Markup, Poster, RadioGroup, Rule, Section, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Text, TextInput, UniversalHeader, VerticalSpace, VisuallyHidden };