@arc-ui/components 10.8.0 → 11.0.0

package/dist/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var React$8 = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$8);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -310,7 +310,7 @@ var AlignItem = function (_a) {
     return React__default["default"].createElement("div", { className: "arc-Align-item" }, children);
 };
 
-var ArcRootElementContext = React.createContext(null);
+var ArcRootElementContext = React$8.createContext(null);
 /**
  * Use `Base` as the root component of the arc system.
  */
@@ -860,293 +860,67 @@ 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__default["default"];
+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__default["default"];
+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__default["default"];
+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 = React.createContext(defaultContext$3);
+var Context$3 = React$8.createContext(defaultContext$3);
 var Provider$4 = Context$3.Provider;
 /**
  * Use `Surface` to compose content using the Arc system.
@@ -1194,28 +968,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 surface = React.useContext(Context$3).surface;
-    return (React__default["default"].createElement("span", __assign({ "aria-label": label, className: classNames((_b = {},
+    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 = React$8.useContext(Context$3).surface;
+    var Icon = icon;
+    return (React__default["default"].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__default["default"].createElement(Icon, null)));
 };
 
 var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
     return (React__default["default"].createElement("li", { className: "arc-Breadcrumbs-item" },
         spacerIconBefore && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
-            React__default["default"].createElement(Icon, { icon: "btChevronLeft2px" }))),
+            React__default["default"].createElement(Icon, { icon: BtIconChevronLeft2Px_2 }))),
         children,
         spacerIconAfter && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
-            React__default["default"].createElement(Icon, { icon: "btChevronRight2px" })))));
+            React__default["default"].createElement(Icon, { icon: BtIconChevronRight2Px_2 })))));
 };
 
 var handleLinkClick = function (_a) {
@@ -1243,17 +1018,17 @@ var BreadcrumbsLink = React__default["default"].forwardRef(function (_a, ref) {
 /** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
 var Breadcrumbs = function (_a) {
     var isLight = _a.isLight, children = _a.children;
-    var breadcrumbsList = React.useRef(null);
-    var _b = React.useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
-    var _c = React.useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
-    React.useEffect(function () {
+    var breadcrumbsList = React$8.useRef(null);
+    var _b = React$8.useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
+    var _c = React$8.useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== BreadcrumbsItem) {
                 throw new Error("Illegal child passed to <Breadcrumbs />. Ensure to only use <Breadcrumbs.Item />");
             }
         });
     }, [children]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         var handleResize = debounce_1(function () {
             var _a;
             setShowBackTrail(false);
@@ -1317,7 +1092,7 @@ Breadcrumbs.Link = BreadcrumbsLink;
 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 = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
                 "arc-BrandLogo": true,
                 "arc-BrandLogo--colorBrand": color === "brand",
@@ -1329,13 +1104,57 @@ var BrandLogo = function (_a) {
         } }, filterDataAttrs(props)), label ? React__default["default"].createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
+const React$4 = React__default["default"];
+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__default["default"];
+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.
  */
-var Button = React.forwardRef(function (_a, ref) {
+var Button = React$8.forwardRef(function (_a, ref) {
     var _b;
     var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
@@ -1369,7 +1188,7 @@ var ButtonIcon = function (_a) {
     return (React__default["default"].createElement("span", { className: classNames({
             "arc-Button-icon": true,
             "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React__default["default"].createElement(Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "Mid") })) : (React__default["default"].createElement(Icon, { icon: icon }))));
+        }) }, isChevron ? (React__default["default"].createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon, { icon: icon }))));
 };
 
 /**
@@ -1379,7 +1198,7 @@ var ButtonIcon = function (_a) {
 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"]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== ImageSource) {
                 throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
@@ -1411,7 +1230,7 @@ Image.Source = ImageSource;
 var Heading = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, props = __rest(_a, ["align", "casing", "children", "color", "level", "size"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     var Element = "span";
     if (level) {
         Element = "h".concat(level);
@@ -1460,8 +1279,8 @@ var useAriaDescribedby = function (_a) {
  * Detect interaction mode
  */
 var useInteractionMode = function () {
-    var _a = React.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
-    React.useEffect(function () {
+    var _a = React$8.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
+    React$8.useEffect(function () {
         var onKeyDown = function (event) {
             if (event.altKey || event.ctrlKey || event.metaKey) {
                 return;
@@ -1504,13 +1323,13 @@ var useInteractionMode = function () {
  */
 var useMediaQuery = function (mediaQuery) {
     var mediaQueryList = typeof window !== "undefined" ? window.matchMedia(mediaQuery) : undefined;
-    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
-    React.useEffect(function () {
+    var _a = React$8.useState(false), matches = _a[0], setMatches = _a[1];
+    React$8.useEffect(function () {
         setMatches(typeof window !== "undefined"
             ? window.matchMedia(mediaQuery).matches
             : false);
     }, [mediaQuery]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         var onMatchMedia = function (event) { return setMatches(event.matches); };
         // Using deprecated addListener methods here for IE & Safari 13 support
         if (mediaQueryList) {
@@ -1554,7 +1373,7 @@ var useNumericInput = function (props) {
 var Card = function (_a) {
     var _b;
     var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageHeight = _a.imageHeight, imageLoading = _a.imageLoading, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, linkData = _a.linkData, minHeight = _a.minHeight, onClick = _a.onClick, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "onClick", "target", "title", "titleSize"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
@@ -1613,7 +1432,7 @@ 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 = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     return (React__default["default"].createElement("a", __assign({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: classNames({
             "arc-Card-link": true,
             "arc-Card-link--button": isButton,
@@ -1622,20 +1441,69 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React__default["default"].createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default["default"].createElement("span", { className: "arc-Card-linkIcon" },
-            React__default["default"].createElement(Icon, { icon: "btChevronRightMid", size: 16 })))));
-};
+            React__default["default"].createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 16 })))));
+};
+
+const React$2 = React__default["default"];
+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__default["default"];
+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
 };
-var Context$2 = React.createContext(defaultContext$2);
+var Context$2 = React$8.createContext(defaultContext$2);
 var Provider$3 = Context$2.Provider;
 /**
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
     var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     var _e = useAriaDescribedby({
         errorMessage: errorMessage,
         helper: helper,
@@ -1667,16 +1535,19 @@ var FormControl = function (_a) {
                 requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
             helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
             children,
-            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+                React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
+                    React__default["default"].createElement(BtIconAlert_2, null)),
+                errorMessage)))));
 };
 
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-var Checkbox = React.forwardRef(function (_a, ref) {
+var Checkbox = React$8.forwardRef(function (_a, ref) {
     var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value"]);
-    var requirementStatus = React.useContext(Context$2).requirementStatus;
-    var surface = React.useContext(Context$3).surface;
+    var requirementStatus = React$8.useContext(Context$2).requirementStatus;
+    var surface = React$8.useContext(Context$3).surface;
     var _f = useAriaDescribedby({
         id: id,
         errorMessage: errorMessage
@@ -1701,12 +1572,16 @@ var Checkbox = React.forwardRef(function (_a, ref) {
         }) },
         React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
             React__default["default"].createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
-            React__default["default"].createElement("span", { className: "arc-Checkbox-box" }),
+            React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
+                React__default["default"].createElement(BtIconTickVariant_2, null)),
             React__default["default"].createElement("span", null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
                 helper && React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper))),
-        errorMessage && (React__default["default"].createElement("div", { id: idError, className: "arc-Checkbox-error" }, errorMessage))));
+        errorMessage && (React__default["default"].createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React__default["default"].createElement("span", { className: "arc-Checkbox-error--icon" },
+                React__default["default"].createElement(BtIconAlert_2, null)),
+            errorMessage))));
 });
 
 /**
@@ -1714,9 +1589,9 @@ var Checkbox = React.forwardRef(function (_a, ref) {
  */
 var Clock = function (_a) {
     var _b = _a.locale, locale = _b === void 0 ? "en-GB" : _b, props = __rest(_a, ["locale"]);
-    var _c = React.useState(new Date()), time = _c[0], setTime = _c[1];
-    var _d = React.useState(time.toLocaleTimeString(locale)), humanTime = _d[0], setHumanTime = _d[1];
-    React.useEffect(function () {
+    var _c = React$8.useState(new Date()), time = _c[0], setTime = _c[1];
+    var _d = React$8.useState(time.toLocaleTimeString(locale)), humanTime = _d[0], setHumanTime = _d[1];
+    React$8.useEffect(function () {
         var tick = function () {
             var newTime = new Date();
             setTime(newTime);
@@ -1744,7 +1619,7 @@ 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"]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== Col) {
                 throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
@@ -1802,19 +1677,41 @@ var Curve = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
+const React = React__default["default"];
+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.
  */
 var Disclosure = function (_a) {
     var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     return (React__default["default"].createElement("details", __assign({ className: classNames({
             "arc-Disclosure": true,
             "arc-Disclosure--indentDetails": indentDetails,
             "arc-Disclosure--onDarkSurface": surface === "dark"
         }), open: isOpen }, filterDataAttrs(props)),
         React__default["default"].createElement("summary", { className: "arc-Disclosure-summary" },
+            React__default["default"].createElement("span", { className: "arc-Disclosure-summary-icon" },
+                React__default["default"].createElement(BtIconChevronDown2Px_2, null)),
             React__default["default"].createElement(Heading, { level: headingLevel, size: "s" }, summary)),
         React__default["default"].createElement("div", { className: "arc-Disclosure-details" }, children)));
 };
@@ -1837,8 +1734,8 @@ var Elevation = function (_a) {
 var Group = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = __rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
-    var surface = React.useContext(Context$3).surface;
-    React.useEffect(function () {
+    var surface = React$8.useContext(Context$3).surface;
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== GroupItem) {
                 throw new Error("Illegal child passed to <Group />. Ensure to only use <Group.Item />.");
@@ -1872,7 +1769,7 @@ Group.Item = GroupItem;
  */
 var Markup = function (_a) {
     var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     return (React__default["default"].createElement("div", __assign({ className: classNames({
             "arc-Markup": true,
             "arc-Markup--measured": isMeasured,
@@ -1885,7 +1782,7 @@ var Markup = function (_a) {
  */
 var UniversalHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== UniversalHeaderItem) {
                 throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
@@ -1940,20 +1837,20 @@ Poster.Image = PosterImage;
 PosterVideo.displayName = "Poster.Video";
 Poster.Video = PosterVideo;
 
-var RadioContext = React.createContext({});
+var RadioContext = React$8.createContext({});
 var Provider$2 = RadioContext.Provider;
 var useRadioContext = function () {
-    var context = React.useContext(RadioContext);
+    var context = React$8.useContext(RadioContext);
     return context;
 };
 
 /**
  * Radio Button component.
  */
-var RadioButton = React.forwardRef(function (_a, ref) {
+var RadioButton = React$8.forwardRef(function (_a, ref) {
     var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
     var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     var checked = checkedValue === value ? true : false;
     return (React__default["default"].createElement("div", __assign({ className: classNames({
@@ -1975,7 +1872,7 @@ var RadioButton = React.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"]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== RadioButton) {
                 throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
@@ -2001,7 +1898,7 @@ RadioGroup.RadioButton = RadioButton;
  * Use `Rule` to display a horizontal rule.
  */
 var Rule = function (props) {
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     return (React__default["default"].createElement("hr", __assign({ className: classNames({
             "arc-Rule": true,
             "arc-Rule--onDarkSurface": surface === "dark"
@@ -2020,12 +1917,19 @@ var Section = function (_a) {
         }) }, 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"]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
                 throw new Error("Illegal child passed to <SiteFooter />. Ensure to only use <SiteFooter.Item />.");
@@ -2052,15 +1956,17 @@ var SiteFooter = function (_a) {
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== SiteFooterItem && item.type !== React.Fragment) {
+            if (item && item.type !== SiteFooterItem && item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
             }
         });
     }, [children]);
     return (React__default["default"].createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
         React__default["default"].createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React__default["default"].createElement("span", { className: "arc-SiteFooter-icon" },
+                React__default["default"].createElement(BtIconChevronDown2Px_2, null)),
             React__default["default"].createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React__default["default"].createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };
@@ -2102,21 +2008,24 @@ var Item = function (_a) {
             _b["arc-SiteHeaderItem"] = true,
             _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
             _b)) }, filterDataAttrs(props)),
-        React__default["default"].createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href }, children)));
+        React__default["default"].createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
+            isEmphasised && (React__default["default"].createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
+                React__default["default"].createElement(BtIconChevronRight2Px_2, null))),
+            children)));
 };
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
-    var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
+    var _b = React$8.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== Item && item.type !== React.Fragment) {
+            if (item && item.type !== Item && item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.ItemGroup />. Ensure to only use <SiteHeader.Item />.");
             }
         });
     }, [children]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
@@ -2128,7 +2037,10 @@ var ItemGroup = function (_a) {
         React__default["default"].createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
             title ? (React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("a", { onClick: handleLinkClick({
                     handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
+                title,
+                React__default["default"].createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
+                    React__default["default"].createElement(BtIconChevronDown2Px_2, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -2169,7 +2081,7 @@ var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, voi
 
 var Column = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].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 />.");
@@ -2185,14 +2097,16 @@ var BackButton = function (_a) {
     return (React__default["default"].createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
         } },
+        React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
+            React__default["default"].createElement(BtIconChevronLeft2Px_2, null)),
         React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
 var Panel = function (_a) {
     var _b;
     var children = _a.children, navItemRef = _a.navItemRef, open = _a.open, promo = _a.promo, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _c = _a.subNavLink, subNavLink = _c === void 0 ? "" : _c, title = _a.title, viewAll = _a.viewAll, withSubNav = _a.withSubNav, props = __rest(_a, ["children", "navItemRef", "open", "promo", "setOpen", "subNavItemRef", "subNavLink", "title", "viewAll", "withSubNav"]);
-    var transparent = React.useContext(Context).transparent;
-    React.useEffect(function () {
+    var transparent = React$8.useContext(Context).transparent;
+    React$8.useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
@@ -2228,7 +2142,7 @@ var Panel = function (_a) {
             document.removeEventListener("click", handleClick);
         };
     }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
             var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
@@ -2265,7 +2179,10 @@ var Panel = function (_a) {
 };
 var ViewAll = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React__default["default"].createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href }, title));
+    return (React__default["default"].createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
+        title,
+        React__default["default"].createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
+            React__default["default"].createElement(BtIconChevronRight2Px_2, null))));
 };
 ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
@@ -2273,14 +2190,15 @@ Panel.ViewAll = ViewAll;
 var NavItem = function (_a) {
     var _b, _c;
     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 = React.useRef();
-    var _d = React.useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
-    React.useEffect(function () {
+    var navItem = React$8.useRef();
+    var _d = React$8.useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
-                item.type !== React.Fragment) {
+                item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
             }
         });
@@ -2297,7 +2215,9 @@ var NavItem = function (_a) {
                 _c)), onClick: function (e) {
                 e.preventDefault();
                 setPanelOpen(!panelOpen);
-            } }, title),
+            } },
+            React__default["default"].createElement("span", null, title),
+            React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px_2, null)))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
@@ -2349,7 +2269,7 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
 var Text = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     return (React__default["default"].createElement("span", __assign({ className: classNames((_b = {
                 "arc-Text": true
             },
@@ -2365,21 +2285,21 @@ var Text = function (_a) {
 var SubNavItem = function (_a) {
     var _b, _c;
     var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, onClick = _a.onClick, offsetXL = _a.offsetXL, promo = _a.promo, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
-    var navItem = React.useContext(Context$1).navItem;
-    var subNavItem = React.useRef();
-    var _e = React.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
+    var navItem = React$8.useContext(Context$1).navItem;
+    var subNavItem = React$8.useRef();
+    var _e = React$8.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
-                item.type !== React.Fragment) {
+                item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.SubNavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
             }
         });
     }, [children]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         if (isDefaultItem && isMinWidthArcBreakpointL) {
             setPanelOpen(true);
         }
@@ -2400,7 +2320,10 @@ var SubNavItem = function (_a) {
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, linkTitle),
+            } },
+            linkTitle,
+            children && (React__default["default"].createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
+                React__default["default"].createElement(BtIconChevronRight2Px_2, null)))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default["default"].createElement("span", null,
                 title,
                 subTitle && (React__default["default"].createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
@@ -2463,17 +2386,18 @@ var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, vo
 }); });
 
 var defaultContext$1 = { navItem: null, subTitle: null };
-var Context$1 = React.createContext(defaultContext$1);
+var Context$1 = React$8.createContext(defaultContext$1);
 var Provider$1 = Context$1.Provider;
 var NavItemWithSubNav = function (_a) {
     var _b, _c;
     var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, _d = _a.subTitle, subTitle = _d === void 0 ? null : _d, title = _a.title, onViewAllClick = _a.onViewAllClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["href", "slot1", "slot2", "slot3", "subTitle", "title", "onViewAllClick", "viewAllTitle"]);
-    var navItem = React.useRef();
-    var _e = React.useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
-    var _f = React.useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
-    React.useEffect(function () {
+    var navItem = React$8.useRef();
+    var _e = React$8.useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
+    var _f = React$8.useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    React$8.useEffect(function () {
         React__default["default"].Children.map(slot1, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
+            if (item && item.type !== SubNavItem && item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot1` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -2481,7 +2405,7 @@ var NavItemWithSubNav = function (_a) {
             }
         });
         React__default["default"].Children.map(slot2, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
+            if (item && item.type !== SubNavItem && item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot2` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -2489,7 +2413,7 @@ var NavItemWithSubNav = function (_a) {
             }
         });
         React__default["default"].Children.map(slot3, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
+            if (item && item.type !== SubNavItem && item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot3` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -2508,7 +2432,9 @@ var NavItemWithSubNav = function (_a) {
                     _c)), onClick: function (e) {
                     e.preventDefault();
                     setPanelOpen(!panelOpen);
-                } }, title),
+                } },
+                title,
+                React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px_2, null)))),
             React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
                 defaultItem
                     ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
@@ -2587,7 +2513,7 @@ var MenuButton = function (_a) {
 };
 
 var defaultContext = { transparent: false };
-var Context = React.createContext(defaultContext);
+var Context = React$8.createContext(defaultContext);
 var Provider = Context.Provider;
 /**
  * Use `SiteHeader` to display brand logo and navigation at the top of a page.
@@ -2595,20 +2521,20 @@ var Provider = Context.Provider;
 var SiteHeader = function (_a) {
     var _b;
     var children = _a.children, basket = _a.basket, _c = _a.hasLogin, hasLogin = _c === void 0 ? true : _c, _d = _a.isTransparent, isTransparent = _d === void 0 ? false : _d, _e = _a.loginHref, loginHref = _e === void 0 ? "/login" : _e, logoOnClick = _a.logoOnClick, loginOnClick = _a.loginOnClick, _f = _a.loginTitle, loginTitle = _f === void 0 ? "Log in / Register" : _f, _g = _a.logoHref, logoHref = _g === void 0 ? "/" : _g, _h = _a.logoLabel, logoLabel = _h === void 0 ? "Home" : _h, search = _a.search, subBrand = _a.subBrand, props = __rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
-    var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
-    var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
+    var _j = React$8.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
+    var _k = React$8.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
                 item.type !== NavItem &&
                 item.type !== NavItemWithSubNav &&
-                item.type !== React.Fragment) {
+                item.type !== React$8.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader />. Ensure to only use <SiteHeader.NavItem /> or <SiteHeader.NavItemWithSubNav />");
             }
         });
     }, [children]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         if (!isMinWidthArcBreakpointL && menuOpen) {
             document.body.classList.add("arc-body--overflowHidden");
         }
@@ -2619,7 +2545,7 @@ var SiteHeader = function (_a) {
             document.body.classList.remove("arc-body--overflowHidden");
         };
     }, [isMinWidthArcBreakpointL, menuOpen]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         var handleKeydown = function (e) {
             if (e.key === "Escape" || e.keyCode === 27) {
                 setMenuOpen(false);
@@ -2630,7 +2556,7 @@ var SiteHeader = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setMenuOpen]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         var handleClick = function (e) {
             if (e.target.getAttribute("href")) {
                 setMenuOpen(false);
@@ -2641,7 +2567,7 @@ var SiteHeader = function (_a) {
             document.removeEventListener("click", handleClick);
         };
     }, [setMenuOpen]);
-    React.useEffect(function () {
+    React$8.useEffect(function () {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
@@ -2741,9 +2667,9 @@ SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
-var TextInput = React.forwardRef(function (_a, ref) {
+var TextInput = React$8.forwardRef(function (_a, ref) {
     var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
-    var surface = React.useContext(Context$3).surface;
+    var surface = React$8.useContext(Context$3).surface;
     var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = useAriaDescribedby({