@arc-ui/components 11.20.0 → 11.21.0

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/TextArea/TextArea.cjs.js

@@ -19,7 +19,7 @@ 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');
@@ -40,7 +40,6 @@ 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');

package/dist/TextArea/TextArea.esm.js

@@ -15,7 +15,7 @@ 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';
@@ -36,7 +36,6 @@ 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';

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/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 };

package/dist/index.es.js

@@ -35626,68 +35626,48 @@ var ProgressBar = function (_a) {
                             React__default.createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
-const BtIconTickVariant = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.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",
-    }),
-  );
-
-const BtIconCrossAlt = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCircle = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 32 32",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
-      fill: "currentColor",
-    }),
-  );
-
+var Error$1 = 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, _c, _d;
-    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _e = _a.direction, direction = _e === void 0 ? "horizontal" : _e, _f = _a.status, status = _f === void 0 ? "todo" : _f, _g = _a.size, size = _g === void 0 ? "large" : _g, _h = _a.position, position = _h === void 0 ? "middle" : _h, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
+    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$5).surface;
     var statusIcons = {
-        completed: BtIconTickVariant,
-        current: BtIconCircle,
-        warning: BtIconAlert,
-        error: BtIconCrossAlt
+        todo: Todo,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error$1
     };
     var onClickHandler = function (event) {
         event.preventDefault();
@@ -35696,37 +35676,25 @@ var ProgressStepperItem = function (_a) {
     var capitaliseFirstLetter = function (word) {
         return word.charAt(0).toUpperCase() + word.slice(1);
     };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", (_b = {
+    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,
+                "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
                 "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
                 "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
             },
-            _b["arc-ProgressStepperItem--".concat(size)] = size === "small",
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
             _b)) }, filterDataAttrs(props)),
-        React__default.createElement("div", { className: classNames("arc-ProgressStepperItem-iconSection", (_c = {},
-                _c["arc-ProgressStepperItem-iconSection--".concat(position)] = position !== "middle",
-                _c)) },
-            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailBefore" }),
-            React__default.createElement("div", { className: classNames("arc-ProgressStepperItem-iconWrapper", (_d = {},
-                    _d["arc-ProgressStepperItem-iconWrapper--".concat(status)] = status !== "todo",
-                    _d)), "data-testid": "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default.createElement("div", { style: {
-                    width: size === "small" ? "16px" : "32px",
-                    height: size === "small" ? "16px" : "32px"
-                } })) : (React__default.createElement(Icon, { size: size === "small" ? 16 : 32, icon: statusIcons[status] }))),
-            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailAfter" })),
+        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: "arc-ProgressStepperItem-title", onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            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),
-            isExpandable && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" },
-                    React__default.createElement("div", { className: "arc-ProgressStepperItem-keyline" }),
-                    stepContent && !isStepContentHidden && (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(VerticalSpace, { size: "8" }),
-                        stepContent))))))));
+            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.  */
@@ -35739,15 +35707,8 @@ var ProgressStepper = function (_a) {
     };
     return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical"
-        }) }, filterDataAttrs(props)), items.map(function (item, index) {
-        var currentPosition = index === 0
-            ? "first"
-            : index === React__default.Children.count(children) - 1
-                ? "last"
-                : undefined;
-        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, position: currentPosition, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs(item.props)))));
-    })));
+        }) }, 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;