@arc-ui/components 11.20.0 → 11.21.1

package/dist/ProgressStepper/ProgressStepper.cjs.js

@@ -2,15 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ProgressStepper = require('../_shared/cjs/ProgressStepper-3af8a210.js');
+var ProgressStepper = require('../_shared/cjs/ProgressStepper-20a61620.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/BtIconAlert.esm-1a0ff9f0.js');
 require('../_shared/cjs/Icon-b46897a3.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
 require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/VerticalSpace-dc53bb70.js');
 require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
 
 

package/dist/ProgressStepper/ProgressStepper.esm.js

@@ -1,10 +1,8 @@
-export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-d4c5b6d9.js';
+export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-74d48612.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
 import '../_shared/esm/Icon-15799695.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/VerticalSpace-43cd9138.js';
 import '../_shared/esm/VisuallyHidden-b9eebf71.js';

package/dist/Select/Select.cjs.js

@@ -1201,7 +1201,7 @@ var Select = function (_a) {
                             "arc-Select-trigger--invalid": errorMessage
                         },
                         _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
-                        _b)) }, filterDataAttrs.filterDataAttrs(props)),
+                        _b)), "aria-describedby": "".concat(id, "-helper") }, filterDataAttrs.filterDataAttrs(props)),
                     React__default["default"].createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default["default"].createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
                         React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronDown2Px_esm.BtIconChevronDown2Px, size: getIconSize(selectSize) }))),

package/dist/Select/Select.esm.js

@@ -1193,7 +1193,7 @@ var Select = function (_a) {
                             "arc-Select-trigger--invalid": errorMessage
                         },
                         _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
-                        _b)) }, filterDataAttrs(props)),
+                        _b)), "aria-describedby": "".concat(id, "-helper") }, filterDataAttrs(props)),
                     React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
                         React__default.createElement(Icon, { icon: BtIconChevronDown2Px, size: getIconSize(selectSize) }))),

package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-301c765c.js');
+var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-b41fdb49.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('../_shared/cjs/use-media-query-e61881d8.js');
 require('react');

package/dist/SiteHeaderV2/SiteHeaderV2.esm.js

@@ -1,4 +1,4 @@
-export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-0096e25b.js';
+export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-f06ac085.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import '../_shared/esm/use-media-query-4c807227.js';
 import 'react';

package/dist/TextArea/TextArea.cjs.js

@@ -19,16 +19,17 @@ require('../_shared/cjs/Filter-1bde635c.js');
 var FormControl = require('../_shared/cjs/FormControl-5f3b6ce4.js');
 require('../_shared/cjs/Group-0429741a.js');
 require('../_shared/cjs/Poster-9b48fd61.js');
-require('../_shared/cjs/ProgressStepper-3af8a210.js');
+require('../_shared/cjs/ProgressStepper-20a61620.js');
 require('../_shared/cjs/RadioGroup-07bb155e.js');
 require('../_shared/cjs/debounce-123468fb.js');
 require('../_shared/cjs/SiteFooter-65b6360c.js');
 require('../_shared/cjs/SiteHeader.rehydrator-ea49f8d5.js');
-require('../_shared/cjs/SiteHeaderV2-301c765c.js');
+require('../_shared/cjs/SiteHeaderV2-b41fdb49.js');
 require('../_shared/cjs/Tabs-24e6f45b.js');
 require('../_shared/cjs/TextInput-5da70ec2.js');
 require('../_shared/cjs/Toast-7a20d1b9.js');
 require('../_shared/cjs/UniversalHeader-b8389447.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
 require('../_shared/cjs/BtIconChevronRight2Px.esm-dbf8cbee.js');
 require('../_shared/cjs/Icon-b46897a3.js');
@@ -39,8 +40,6 @@ require('../_shared/cjs/BtIconTickAlt2Px.esm-57c89acc.js');
 require('../_shared/cjs/BtIconAlert.esm-1a0ff9f0.js');
 require('../_shared/cjs/DisclosureMini-d0eeb6bb.js');
 require('../_shared/cjs/BtIconChevronDown2Px.esm-39030ee0.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
-require('../_shared/cjs/VerticalSpace-dc53bb70.js');
 require('../_shared/cjs/use-media-query-e61881d8.js');
 require('../_shared/cjs/BrandLogo-aea340c8.js');
 require('../_shared/cjs/Curve-d038052b.js');
@@ -90,15 +89,16 @@ var TextArea = React.forwardRef(function (_a, ref) {
     return (React__default["default"].createElement(FormControl.FormControl, filterDataAttrs.__assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(Text.Text, { tone: isDisabled ? "muted" : "default" },
-                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount" },
+                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
                     characterCount,
                     " / ",
-                    maxLength)))) }, filterDataAttrs.filterDataAttrs(props)),
+                    maxLength,
+                    characterCount === maxLength && (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement("textarea", { id: id, className: index.classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width } })));
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper") })));
 });
 
 exports.TextArea = TextArea;

package/dist/TextArea/TextArea.esm.js

@@ -15,16 +15,17 @@ import '../_shared/esm/Filter-58a42358.js';
 import { F as FormControl } from '../_shared/esm/FormControl-cc99cde0.js';
 import '../_shared/esm/Group-73fdb896.js';
 import '../_shared/esm/Poster-4ec2f679.js';
-import '../_shared/esm/ProgressStepper-d4c5b6d9.js';
+import '../_shared/esm/ProgressStepper-74d48612.js';
 import '../_shared/esm/RadioGroup-362be63f.js';
 import '../_shared/esm/debounce-6fed6b84.js';
 import '../_shared/esm/SiteFooter-38ee1536.js';
 import '../_shared/esm/SiteHeader.rehydrator-65c8cf71.js';
-import '../_shared/esm/SiteHeaderV2-0096e25b.js';
+import '../_shared/esm/SiteHeaderV2-f06ac085.js';
 import '../_shared/esm/Tabs-a85af483.js';
 import '../_shared/esm/TextInput-1d1c5fd6.js';
 import '../_shared/esm/Toast-7a232e15.js';
 import '../_shared/esm/UniversalHeader-80c7313f.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/BtIconChevronRight2Px.esm-75e92636.js';
 import '../_shared/esm/Icon-15799695.js';
@@ -35,8 +36,6 @@ import '../_shared/esm/BtIconTickAlt2Px.esm-0bc2ded0.js';
 import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
 import '../_shared/esm/DisclosureMini-ec17b008.js';
 import '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
-import '../_shared/esm/VerticalSpace-43cd9138.js';
 import '../_shared/esm/use-media-query-4c807227.js';
 import '../_shared/esm/BrandLogo-1af78f76.js';
 import '../_shared/esm/Curve-d8679dde.js';
@@ -82,15 +81,16 @@ var TextArea = forwardRef(function (_a, ref) {
     return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
-                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
+                React__default.createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
                     characterCount,
                     " / ",
-                    maxLength)))) }, filterDataAttrs(props)),
+                    maxLength,
+                    characterCount === maxLength && (React__default.createElement(VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs(props)),
         React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width } })));
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper") })));
 });
 
 export { TextArea };

package/dist/_shared/cjs/ProgressStepper-20a61620.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var Icon = require('./Icon-b46897a3.js');
+var Surface = require('./Surface-038db6e1.js');
+var VisuallyHidden = require('./VisuallyHidden-e2c8b291.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Error = function () { return (React__default["default"].createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default["default"].createElement("g", { "clip-path": "url(#a)" },
+        React__default["default"].createElement("path", { d: "m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z", fill: "currentColor" })),
+    React__default["default"].createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default["default"].createElement("defs", null,
+        React__default["default"].createElement("clipPath", { id: "a" },
+            React__default["default"].createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Warning = function () { return (React__default["default"].createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default["default"].createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default["default"].createElement("path", { d: "M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z", fill: "currentColor", stroke: "currentColor", "stroke-width": ".3" }))); };
+
+var Complete = function () { return (React__default["default"].createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default["default"].createElement("g", { "clip-path": "url(#a)" },
+        React__default["default"].createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
+    React__default["default"].createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default["default"].createElement("defs", null,
+        React__default["default"].createElement("clipPath", { id: "a" },
+            React__default["default"].createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Current = function () { return (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("rect", { x: "0.666667", y: "0.666667", width: "22.6667", height: "22.6667", rx: "11.3333", stroke: "url(#paint0_linear_1_1050)", "stroke-width": "1.33333" }),
+    React__default["default"].createElement("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
+    React__default["default"].createElement("defs", null,
+        React__default["default"].createElement("linearGradient", { id: "paint0_linear_1_1050", x1: "36.6036", y1: "-4.31391e-07", x2: "-12.6036", y2: "24", gradientUnits: "userSpaceOnUse" },
+            React__default["default"].createElement("stop", { "stop-color": "#F200F5" }),
+            React__default["default"].createElement("stop", { offset: "1", "stop-color": "#1EC8E6" }))))); };
+
+var Todo = function () { return (React__default["default"].createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default["default"].createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }))); };
+
+// export current step as an icon
+var ProgressStepperItem = function (_a) {
+    var _b;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = filterDataAttrs.__rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var statusIcons = {
+        todo: Todo,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var capitaliseFirstLetter = function (word) {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    };
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
+                "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
+            _b)) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
+            React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
+                React__default["default"].createElement(Icon.Icon, { size: size === "small" ? 16 : 24, icon: statusIcons[status] }))),
+        React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            status !== "todo" && (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                capitaliseFirstLetter(status),
+                ":")),
+            titleHref ? (React__default["default"].createElement("a", { href: titleHref, "aria-label": ariaLabel, className: index.classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            stepContent && !isStepContentHidden && direction === "vertical" && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
+};
+
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+var ProgressStepper = function (_a) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = filterDataAttrs.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
+    var items = React__default["default"].Children.toArray(children);
+    var getStepStatus = function (item) {
+        var _a;
+        return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
+    };
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical"
+        }) }, filterDataAttrs.filterDataAttrs(props)), items.map(function (item, index) { return (React__default["default"].createElement(React__default["default"].Fragment, { key: "StepperItem-".concat(index) },
+        React__default["default"].createElement(ProgressStepperItem, filterDataAttrs.__assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs.filterDataAttrs(item.props))))); })));
+};
+ProgressStepper.Item = ProgressStepperItem;
+
+exports.ProgressStepper = ProgressStepper;

package/dist/_shared/cjs/{SiteHeaderV2-301c765c.js → SiteHeaderV2-b41fdb49.js}

@@ -24,8 +24,8 @@ var Item = function (_a) {
     return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
             _b["arc-SiteHeaderV2Item"] = true,
             _b["arc-SiteHeaderV2Item--emphasised"] = true,
-            _b)) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
+            _b)) }, filterDataAttrs.filterDataAttrs(props), { role: "none" }),
+        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
             children,
             React__default["default"].createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
                 React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))));
@@ -33,7 +33,6 @@ var Item = function (_a) {
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, subtitle = _a.subtitle, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = filterDataAttrs.__rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
-    var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
@@ -42,10 +41,6 @@ var ItemGroup = function (_a) {
             }
         });
     }, [children]);
-    React.useEffect(function () {
-        // useEffect does not run in ReactDomServer renders
-        setHasClientSideJavaScript(true);
-    }, [setHasClientSideJavaScript]);
     var ElementType = "div";
     if (title) {
         ElementType = "details";
@@ -53,16 +48,14 @@ var ItemGroup = function (_a) {
     return (React__default["default"].createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
         React__default["default"].createElement(ElementType, filterDataAttrs.__assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs.filterDataAttrs(props)),
             title ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                React__default["default"].createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
                     React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
                             handler: onClick
-                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
-                            ? 0
-                            : -1 }, title),
+                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, title),
                     React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
                         React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
                 React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
-            React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
+            React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
                 children,
                 href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
                     React__default["default"].createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick.handleLinkClick({
@@ -79,8 +72,8 @@ var Column = function (_a) {
             }
         });
     }, [children]);
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2Column-items" }, children)));
+    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs.filterDataAttrs(props), { role: "none" }),
+        React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
 };
 
 var BackButton = function (_a) {
@@ -98,11 +91,13 @@ var Panel = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = filterDataAttrs.__rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
+    var menubarRef = useHeaderV2Context().menubarRef;
     React.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) {
             var _a, _b;
+            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
             // Don't close the Panel…
             if (
             // The click is inside the current SubNavItem.
@@ -142,9 +137,11 @@ var Panel = function (_a) {
         subNavItemRef,
         subNavLink,
         setOpenPanelOnFirstClick,
+        menubarRef,
     ]);
     React.useEffect(function () {
         var handleClick = function (e) {
+            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
             // Close the Panel…
             if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
                 setOpenPanelOnFirstClick(false);
@@ -160,7 +157,7 @@ var Panel = function (_a) {
         return function () {
             document.removeEventListener("click", handleClick);
         };
-    }, [navItemRef, setOpenPanelOnFirstClick]);
+    }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
     React.useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
@@ -173,12 +170,15 @@ var Panel = function (_a) {
                 }
                 return setOpen(false);
             }
+            if (e.key === "Tab") {
+                menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.remove("noFocus");
+            }
         };
         window.addEventListener("keydown", handleKeydown);
         return function () {
             window.removeEventListener("keydown", handleKeydown);
         };
-    }, [setOpen, subNavItemRef]);
+    }, [setOpen, subNavItemRef, menubarRef]);
     return (React__default["default"].createElement("div", { style: { display: "flex" } },
         React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
                 _b["arc-SiteHeaderV2Panel"] = true,
@@ -267,8 +267,9 @@ var NavItem = function (_a) {
             handler: onClick
         }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-            React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
+            React__default["default"].createElement("button", { "aria-expanded": panelOpen, role: "menuitem", "aria-haspopup": "true", "aria-label": title, className: index.classNames((_c = {},
                     _c["arc-SiteHeaderV2NavItem-link"] = true,
+                    _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -406,10 +407,11 @@ var NavItemWithSubNav = function (_a) {
                     ? horizontalPanelOpen
                     : panelOpen,
                 _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
-                _b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
+                _b)), role: "none", ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
             React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-                React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen, className: index.classNames((_c = {},
+                React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: index.classNames((_c = {},
                         _c["arc-SiteHeaderV2NavItem-link"] = true,
+                        _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -542,7 +544,7 @@ var VerticalDivider = function () {
     return React__default["default"].createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
 };
 
-var defaultContext = { transparent: false };
+var defaultContext = { transparent: false, menubarRef: null };
 var Context = React.createContext(defaultContext);
 var Provider = Context.Provider;
 /**
@@ -554,6 +556,7 @@ var SiteHeaderV2 = function (_a) {
     var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
+    var menubarRef = React.useRef();
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -587,6 +590,9 @@ var SiteHeaderV2 = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setMenuOpen]);
+    React.useEffect(function () {
+        menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
+    }, []);
     React.useEffect(function () {
         var handleClick = function (e) {
             if (e.target.getAttribute("href")) {
@@ -602,7 +608,7 @@ var SiteHeaderV2 = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
-    return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent } },
+    return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent, menubarRef: menubarRef } },
         React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
                 _b["arc-SiteHeaderV2"] = true,
                 _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
@@ -619,8 +625,8 @@ var SiteHeaderV2 = function (_a) {
                     children && (React__default["default"].createElement("nav", { className: "arc-SiteHeaderV2-nav" },
                         React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
                             React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-main" },
-                            React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2-navItems" }, children),
+                        React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
+                            React__default["default"].createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
                             hasLogin && (React__default["default"].createElement(React__default["default"].Fragment, null, loginOnClick ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
                                 React__default["default"].createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
                                     loginTitle,
@@ -635,6 +641,9 @@ var SiteHeaderV2 = function (_a) {
                         basket ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
                         hasLogin && (React__default["default"].createElement(React__default["default"].Fragment, null, loginOnClick ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-loginLink arc-SiteHeaderV2-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default["default"].createElement("a", { className: "arc-SiteHeaderV2-loginLink", href: loginHref }, loginTitle)))))))))));
 };
+function useHeaderV2Context() {
+    return React.useContext(Context);
+}
 SiteHeaderV2.Column = Column;
 SiteHeaderV2.Item = Item;
 SiteHeaderV2.ItemGroup = ItemGroup;

package/dist/_shared/esm/ProgressStepper-74d48612.js

@@ -0,0 +1,94 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import React__default, { useContext } from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { I as Icon } from './Icon-15799695.js';
+import { C as Context } from './Surface-0ca6817d.js';
+import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
+
+var Error = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("g", { "clip-path": "url(#a)" },
+        React__default.createElement("path", { d: "m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z", fill: "currentColor" })),
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "a" },
+            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Warning = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default.createElement("path", { d: "M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z", fill: "currentColor", stroke: "currentColor", "stroke-width": ".3" }))); };
+
+var Complete = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("g", { "clip-path": "url(#a)" },
+        React__default.createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "a" },
+            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Current = function () { return (React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("rect", { x: "0.666667", y: "0.666667", width: "22.6667", height: "22.6667", rx: "11.3333", stroke: "url(#paint0_linear_1_1050)", "stroke-width": "1.33333" }),
+    React__default.createElement("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("linearGradient", { id: "paint0_linear_1_1050", x1: "36.6036", y1: "-4.31391e-07", x2: "-12.6036", y2: "24", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { "stop-color": "#F200F5" }),
+            React__default.createElement("stop", { offset: "1", "stop-color": "#1EC8E6" }))))); };
+
+var Todo = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }))); };
+
+// export current step as an icon
+var ProgressStepperItem = function (_a) {
+    var _b;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var surface = useContext(Context).surface;
+    var statusIcons = {
+        todo: Todo,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var capitaliseFirstLetter = function (word) {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
+                "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
+                React__default.createElement(Icon, { size: size === "small" ? 16 : 24, icon: statusIcons[status] }))),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            status !== "todo" && (React__default.createElement(VisuallyHidden, null,
+                capitaliseFirstLetter(status),
+                ":")),
+            titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
+};
+
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+var ProgressStepper = function (_a) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
+    var items = React__default.Children.toArray(children);
+    var getStepStatus = function (item) {
+        var _a;
+        return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
+    };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical"
+        }) }, filterDataAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
+        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs(item.props))))); })));
+};
+ProgressStepper.Item = ProgressStepperItem;
+
+export { ProgressStepper as P };