@arc-ui/components 11.8.0 → 11.10.0

package/dist/_shared/esm/ProgressStepper-3ffbdb73.js

@@ -0,0 +1,138 @@
+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 { B as BtIconAlert } from './BtIconAlert.esm-09346130.js';
+import { I as Icon } from './Icon-3bfabb14.js';
+import { C as Context } from './Surface-c6e817cd.js';
+import { V as VerticalSpace } from './VerticalSpace-43cd9138.js';
+import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
+
+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 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 surface = useContext(Context).surface;
+    var statusIcons = {
+        completed: BtIconTickVariant,
+        current: BtIconCircle,
+        warning: BtIconAlert,
+        error: BtIconCrossAlt
+    };
+    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", (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid,
+                "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--".concat(size)] = size === "small",
+            _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-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)),
+            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))))))));
+};
+
+/** 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) {
+        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)))));
+    })));
+};
+ProgressStepper.Item = ProgressStepperItem;
+
+export { ProgressStepper as P };

package/dist/_shared/esm/{RadioGroup-be16d5d3.js → RadioGroup-1273a716.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from './FormControl-f18e2f59.js';
-import { c as classNames } from './index-2ae58626.js';
-import { C as Context } from './Surface-dde51789.js';
+import { F as FormControl } from './FormControl-aad4288c.js';
+import { c as classNames } from './index-2e73c2e9.js';
+import { C as Context } from './Surface-c6e817cd.js';
 
 var RadioContext = createContext({});
 var Provider = RadioContext.Provider;
@@ -58,7 +58,6 @@ var RadioGroup = function (_a) {
         React__default.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
             React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
 };
-RadioButton.displayName = "RadioGroup.RadioButton";
 RadioGroup.RadioButton = RadioButton;
 
 export { RadioGroup as R };

package/dist/_shared/esm/{Section-b8038d66.js → Section-73781b56.js}

@@ -1,5 +1,5 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
-import { c as classNames } from './index-2ae58626.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
 
 /**

package/dist/_shared/esm/{SiteFooter-a182cb18.js → SiteFooter-60d1b216.js}

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import { u as useMediaQuery, A as ArcBreakpointM } from './index.es-00cb3bcb.js';
-import { B as BtIconChevronDown2Px_2 } from './BtIconChevronDown2Px-782876e2.js';
+import { B as BtIconChevronDown2Px } from './BtIconChevronDown2Px.esm-345d78fe.js';
 import React__default, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from './BrandLogo-9ec620e8.js';
-import { C as Curve } from './Curve-bbc5589c.js';
-import { S as Section } from './Section-b8038d66.js';
-import { S as Surface } from './Surface-dde51789.js';
+import { B as BrandLogo } from './BrandLogo-51fc6f15.js';
+import { C as Curve } from './Curve-d8679dde.js';
+import { S as Section } from './Section-73781b56.js';
+import { S as Surface } from './Surface-c6e817cd.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 
 /**
@@ -50,7 +50,7 @@ var SiteFooterItemGroup = function (_a) {
     return (React__default.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
         React__default.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
             React__default.createElement("span", { className: "arc-SiteFooter-icon" },
-                React__default.createElement(BtIconChevronDown2Px_2, null)),
+                React__default.createElement(BtIconChevronDown2Px, null)),
             React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };
@@ -59,9 +59,7 @@ var SiteFooterItem = function (_a) {
     return (React__default.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterDataAttrs(props)),
         React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
 };
-SiteFooterItem.displayName = "SiteFooter.Item";
 SiteFooter.Item = SiteFooterItem;
-SiteFooterItemGroup.displayName = "SiteFooter.ItemGroup";
 SiteFooter.ItemGroup = SiteFooterItemGroup;
 
 export { SiteFooter as S };

package/dist/_shared/esm/{SiteHeader.rehydrator-023b7b76.js → SiteHeader.rehydrator-029f568e.js}

@@ -1,15 +1,15 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from './filter-data-attrs-afdb7d32.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
-import { c as classNames } from './index-2ae58626.js';
+import { c as classNames } from './index-2e73c2e9.js';
 import { u as useMediaQuery, a as ArcBreakpointL } from './index.es-00cb3bcb.js';
-import { B as BtIconChevronDown2Px_2 } from './BtIconChevronDown2Px-782876e2.js';
+import { B as BtIconChevronDown2Px } from './BtIconChevronDown2Px.esm-345d78fe.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { a as BtIconChevronRight2Px_2, B as BtIconChevronLeft2Px_2 } from './BtIconChevronRight2Px-b8e7b4ad.js';
-import { S as Surface } from './Surface-dde51789.js';
-import { B as BrandLogo } from './BrandLogo-9ec620e8.js';
-import { B as Button } from './Button-d1dbcf79.js';
-import { s as suffixModifier } from './suffix-modifier-7e640670.js';
-import { T as Text } from './Text-40457811.js';
+import { a as BtIconChevronRight2Px, B as BtIconChevronLeft2Px } from './BtIconChevronRight2Px.esm-2c693ef3.js';
+import { S as Surface } from './Surface-c6e817cd.js';
+import { B as BrandLogo } from './BrandLogo-51fc6f15.js';
+import { B as Button } from './Button-67f68b14.js';
+import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
+import { T as Text } from './Text-a3720712.js';
 
 var Item = function (_a) {
     var _b;
@@ -20,7 +20,7 @@ var Item = function (_a) {
             _b)) }, filterDataAttrs(props)),
         React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
             isEmphasised && (React__default.createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
-                React__default.createElement(BtIconChevronRight2Px_2, null))),
+                React__default.createElement(BtIconChevronRight2Px, null))),
             children)));
 };
 
@@ -50,7 +50,7 @@ var ItemGroup = function (_a) {
                 }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
                 title,
                 React__default.createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
-                    React__default.createElement(BtIconChevronDown2Px_2, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                    React__default.createElement(BtIconChevronDown2Px, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React__default.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -108,7 +108,7 @@ var BackButton = function (_a) {
             setOpen(false);
         } },
         React__default.createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
-            React__default.createElement(BtIconChevronLeft2Px_2, null)),
+            React__default.createElement(BtIconChevronLeft2Px, null)),
         React__default.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
@@ -192,9 +192,8 @@ var ViewAll = function (_a) {
     return (React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
         title,
         React__default.createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
-            React__default.createElement(BtIconChevronRight2Px_2, null))));
+            React__default.createElement(BtIconChevronRight2Px, null))));
 };
-ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
 
 var NavItem = function (_a) {
@@ -227,7 +226,7 @@ var NavItem = function (_a) {
                 setPanelOpen(!panelOpen);
             } },
             React__default.createElement("span", null, title),
-            React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px_2, null)) : (React__default.createElement(BtIconChevronRight2Px_2, null)))),
+            React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px, null)) : (React__default.createElement(BtIconChevronRight2Px, null)))),
         React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
@@ -314,7 +313,7 @@ var SubNavItem = function (_a) {
             } },
             linkTitle,
             children && (React__default.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
-                React__default.createElement(BtIconChevronRight2Px_2, null)))),
+                React__default.createElement(BtIconChevronRight2Px, null)))),
         React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default.createElement("span", null,
                 title,
                 subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
@@ -425,7 +424,7 @@ var NavItemWithSubNav = function (_a) {
                     setPanelOpen(!panelOpen);
                 } },
                 title,
-                React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px_2, null)) : (React__default.createElement(BtIconChevronRight2Px_2, null)))),
+                React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px, null)) : (React__default.createElement(BtIconChevronRight2Px, null)))),
             React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
                 defaultItem
                     ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
@@ -595,13 +594,6 @@ var SiteHeader = function (_a) {
                         basket ? (React__default.createElement("div", { className: "arc-SiteHeader-basket" }, basket)) : null,
                         hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeader-loginLink arc-SiteHeader-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default.createElement("a", { className: "arc-SiteHeader-loginLink", href: loginHref }, loginTitle)))))))))));
 };
-Column.displayName = "SiteHeader.Column";
-Item.displayName = "SiteHeader.Item";
-ItemGroup.displayName = "SiteHeader.ItemGroup";
-NavItem.displayName = "SiteHeader.NavItem";
-NodeItem.displayName = "SiteHeader.NodeItem";
-NavItemWithSubNav.displayName = "SiteHeader.NavItemWithSubNav";
-SubNavItem.displayName = "SiteHeader.SubNavItem";
 SiteHeader.Column = Column;
 SiteHeader.Item = Item;
 SiteHeader.ItemGroup = ItemGroup;

package/dist/_shared/esm/{Surface-dde51789.js → Surface-c6e817cd.js}

@@ -1,5 +1,5 @@
-import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
-import { c as classNames } from './index-2ae58626.js';
+import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext } from 'react';
 
 var defaultContext = { surface: "light" };