@arc-ui/components 10.8.1 → 11.1.0

package/dist/SiteHeader/SiteHeader.esm.js

@@ -1,24 +1,29 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/index-229fc864.js';
-import { a as ArcBreakpointL } from '../_shared/esm/index.es-42f84e2d.js';
+import { u as useMediaQuery, a as ArcBreakpointL } from '../_shared/esm/index.es-00cb3bcb.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
-import { B as BrandLogo } from '../_shared/esm/BrandLogo-ea3dd0e6.js';
-import { B as Button } from '../_shared/esm/Button-d59c31a2.js';
-import { u as useMediaQuery } from '../_shared/esm/use-media-query-38faed7f.js';
-import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import React__default, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
+import { B as BrandLogo } from '../_shared/esm/BrandLogo-4f13fe85.js';
+import { B as Button } from '../_shared/esm/Button-69439f8f.js';
+import { S as Surface } from '../_shared/esm/Surface-bf201530.js';
+import { B as BtIconChevronDown2Px_2 } from '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
 import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
+import { a as BtIconChevronRight2Px_2, B as BtIconChevronLeft2Px_2 } from '../_shared/esm/BtIconChevronRight2Px-b8e7b4ad.js';
 import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
-import { T as Text } from '../_shared/esm/Text-d8988620.js';
-import '../_shared/esm/Icon-2fd92daa.js';
+import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import '../_shared/esm/Icon-61f7237a.js';
 
 var Item = function (_a) {
     var _b;
     var children = _a.children, href = _a.href, isEmphasised = _a.isEmphasised, onClick = _a.onClick, props = __rest(_a, ["children", "href", "isEmphasised", "onClick"]);
-    return (React.createElement("li", __assign({ className: classNames((_b = {},
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderItem"] = true,
             _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
             _b)) }, filterDataAttrs(props)),
-        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href }, children)));
+        React__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))),
+            children)));
 };
 
 var ItemGroup = function (_a) {
@@ -26,7 +31,7 @@ var ItemGroup = function (_a) {
     var _b = useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== Item && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.ItemGroup />. Ensure to only use <SiteHeader.Item />.");
             }
@@ -40,15 +45,18 @@ var ItemGroup = function (_a) {
     if (title) {
         ElementType = "details";
     }
-    return (React.createElement("li", { className: "arc-SiteHeaderItemGroup" },
-        React.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
-            title ? (React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { onClick: handleLinkClick({
+    return (React__default.createElement("li", { className: "arc-SiteHeaderItemGroup" },
+        React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
+            title ? (React__default.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default.createElement("a", { onClick: handleLinkClick({
                     handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
-            React.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
+                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
+                title,
+                React__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("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
-                href && title ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
-                    React.createElement("a", { className: "arc-SiteHeaderItem-link", onClick: handleLinkClick({
+                href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
+                    React__default.createElement("a", { className: "arc-SiteHeaderItem-link", onClick: handleLinkClick({
                             handler: onClick
                         }), href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
 };
@@ -78,7 +86,7 @@ var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, voi
                     title: title,
                     viewAllTitle: viewAllTitle
                 };
-                return [2 /*return*/, React.createElement(ItemGroup, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(ItemGroup, __assign({}, props), children)];
         }
     });
 }); });
@@ -86,22 +94,24 @@ var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, voi
 var Column = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== ItemGroup) {
                 throw new Error("Illegal child passed to <SiteHeader.Column />. Ensure to only use <SiteHeader.ItemGroup />.");
             }
         });
     }, [children]);
-    return (React.createElement("li", __assign({ className: "arc-SiteHeaderColumn" }, filterDataAttrs(props)),
-        React.createElement("ul", { className: "arc-SiteHeaderColumn-items" }, children)));
+    return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderColumn" }, filterDataAttrs(props)),
+        React__default.createElement("ul", { className: "arc-SiteHeaderColumn-items" }, children)));
 };
 
 var BackButton = function (_a) {
     var setOpen = _a.setOpen;
-    return (React.createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
+    return (React__default.createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
         } },
-        React.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
+        React__default.createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
+            React__default.createElement(BtIconChevronLeft2Px_2, null)),
+        React__default.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
 var Panel = function (_a) {
@@ -162,26 +172,29 @@ var Panel = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setOpen, subNavItemRef]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderPanel"] = true,
             _b["arc-SiteHeaderPanel--open"] = open,
             _b["arc-SiteHeaderPanel--transparent"] = transparent,
             _b["arc-SiteHeaderPanel--withSubNav"] = withSubNav,
             _b)) }, filterDataAttrs(props)),
-        React.createElement(Surface, { background: "white", growVertically: true },
-            React.createElement(BackButton, { setOpen: setOpen }),
-            React.createElement("div", { className: "arc-SiteHeaderPanel-inner" },
-                React.createElement("div", { className: "arc-SiteHeaderPanel-main" },
-                    React.createElement("div", { className: "arc-SiteHeaderPanel-mainInner" },
-                        withSubNav && (React.createElement("div", { className: "arc-SiteHeaderPanel-subNavArea" })),
-                        title && (React.createElement("div", { className: "arc-SiteHeaderPanel-title" }, title)),
-                        React.createElement("ul", { className: "arc-SiteHeaderPanel-items" }, children)),
+        React__default.createElement(Surface, { background: "white", growVertically: true },
+            React__default.createElement(BackButton, { setOpen: setOpen }),
+            React__default.createElement("div", { className: "arc-SiteHeaderPanel-inner" },
+                React__default.createElement("div", { className: "arc-SiteHeaderPanel-main" },
+                    React__default.createElement("div", { className: "arc-SiteHeaderPanel-mainInner" },
+                        withSubNav && (React__default.createElement("div", { className: "arc-SiteHeaderPanel-subNavArea" })),
+                        title && (React__default.createElement("div", { className: "arc-SiteHeaderPanel-title" }, title)),
+                        React__default.createElement("ul", { className: "arc-SiteHeaderPanel-items" }, children)),
                     viewAll),
-                promo && React.createElement("div", { className: "arc-SiteHeaderPanel-promo" }, promo)))));
+                promo && React__default.createElement("div", { className: "arc-SiteHeaderPanel-promo" }, promo)))));
 };
 var ViewAll = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href }, title));
+    return (React__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))));
 };
 ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
@@ -191,8 +204,9 @@ var NavItem = function (_a) {
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, promo = _a.promo, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
     var navItem = useRef();
     var _d = useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
@@ -201,20 +215,22 @@ var NavItem = function (_a) {
             }
         });
     }, [children]);
-    return (React.createElement("li", __assign({ className: classNames((_b = {},
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderNavItem"] = true,
             _b["arc-SiteHeaderNavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
-            _b)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React.createElement("a", { onClick: handleLinkClick({
+            _b)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React__default.createElement("a", { onClick: handleLinkClick({
             handler: onClick
-        }), className: "arc-SiteHeaderNavItem-link", href: href }, title)) : null) : (React.createElement(React.Fragment, null,
-        React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+        }), className: "arc-SiteHeaderNavItem-link", href: href }, title)) : null) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                 _c["arc-SiteHeaderNavItem-link"] = true,
                 _c["arc-SiteHeaderNavItem-link--itemHasChildren"] = true,
                 _c)), onClick: function (e) {
                 e.preventDefault();
                 setPanelOpen(!panelOpen);
-            } }, title),
-        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
+            } },
+            React__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(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)))));
 };
 
 var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -254,7 +270,7 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React.createElement(NavItem, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(NavItem, __assign({}, props), children)];
         }
     });
 }); });
@@ -267,7 +283,7 @@ var SubNavItem = function (_a) {
     var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
@@ -284,23 +300,26 @@ var SubNavItem = function (_a) {
             setPanelOpen(false);
         }
     }, [isDefaultItem, isMinWidthArcBreakpointL]);
-    var linkTitle = (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
-        subTitle ? (React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
-    return (React.createElement("li", __assign({ className: classNames((_b = {},
+    var linkTitle = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
+        subTitle ? (React__default.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderSubNavItem"] = true,
             _b["arc-SiteHeaderSubNavItem--linkSelected"] = children && panelOpen,
             _b[suffixModifier("arc-SiteHeaderSubNavItem--offsetXL", offsetXL || "")] = offsetXL,
-            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", onClick: handleLinkClick({ handler: onClick }), href: href }, linkTitle)) : null) : (React.createElement(React.Fragment, null,
-        React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React__default.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", onClick: handleLinkClick({ handler: onClick }), href: href }, linkTitle)) : null) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                 _c["arc-SiteHeaderSubNavItem-link"] = true,
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, linkTitle),
-        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement("span", null,
+            } },
+            linkTitle,
+            children && (React__default.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
+                React__default.createElement(BtIconChevronRight2Px_2, 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.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
+                subTitle && (React__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)))));
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -354,7 +373,7 @@ var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, vo
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React.createElement(SubNavItem, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(SubNavItem, __assign({}, props), children)];
         }
     });
 }); });
@@ -368,8 +387,9 @@ var NavItemWithSubNav = function (_a) {
     var navItem = useRef();
     var _e = useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
     var _f = useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(slot1, function (item) {
+        React__default.Children.map(slot1, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot1` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
@@ -377,7 +397,7 @@ var NavItemWithSubNav = function (_a) {
                 setDefaultItem(false);
             }
         });
-        React.Children.map(slot2, function (item) {
+        React__default.Children.map(slot2, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot2` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
@@ -385,7 +405,7 @@ var NavItemWithSubNav = function (_a) {
                 setDefaultItem(false);
             }
         });
-        React.Children.map(slot3, function (item) {
+        React__default.Children.map(slot3, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot3` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
@@ -394,21 +414,23 @@ var NavItemWithSubNav = function (_a) {
             }
         });
     }, [slot1, slot2, slot3]);
-    return (React.createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
-        React.createElement("li", __assign({ className: classNames((_b = {},
+    return (React__default.createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
+        React__default.createElement("li", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeaderNavItemWithSubNav"] = true,
                 _b["arc-SiteHeaderNavItem--linkSelected"] = panelOpen,
                 _b)), ref: navItem }, filterDataAttrs(props)),
-            React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+            React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                     _c["arc-SiteHeaderNavItem-link"] = true,
                     _c["arc-SiteHeaderNavItem-link--itemHasChildren"] = true,
                     _c)), onClick: function (e) {
                     e.preventDefault();
                     setPanelOpen(!panelOpen);
-                } }, title),
-            React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
+                } },
+                title,
+                React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px_2, null)) : (React__default.createElement(BtIconChevronRight2Px_2, 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.cloneElement(slot1, { isDefaultItem: defaultItem })
+                    ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
                     : slot1,
                 slot2,
                 slot3))));
@@ -464,7 +486,7 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React.createElement(NavItemWithSubNav, __assign({}, props))];
+                return [2 /*return*/, React__default.createElement(NavItemWithSubNav, __assign({}, props))];
         }
     });
 }); });
@@ -472,15 +494,15 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
 var MenuButton = function (_a) {
     var _b;
     var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
-    return (React.createElement("button", { "aria-expanded": menuOpen, className: classNames((_b = {},
+    return (React__default.createElement("button", { "aria-expanded": menuOpen, className: classNames((_b = {},
             _b["arc-MenuButton"] = true,
             _b["arc-MenuButton--menuOpen"] = menuOpen,
             _b)), onClick: function () {
             setMenuOpen(!menuOpen);
         }, type: "button" },
-        React.createElement("span", { className: "arc-MenuButton-box" },
-            React.createElement("span", { className: "arc-MenuButton-inner" }),
-            React.createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
+        React__default.createElement("span", { className: "arc-MenuButton-box" },
+            React__default.createElement("span", { className: "arc-MenuButton-inner" }),
+            React__default.createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
 };
 
 var defaultContext = { transparent: false };
@@ -496,7 +518,7 @@ var SiteHeader = function (_a) {
     var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item &&
                 item.type !== NavItem &&
                 item.type !== NavItemWithSubNav &&
@@ -542,32 +564,32 @@ var SiteHeader = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
-    return (React.createElement(Provider, { value: { transparent: isTransparent } },
-        React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React__default.createElement(Provider, { value: { transparent: isTransparent } },
+        React__default.createElement("div", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeader"] = true,
                 _b["arc-SiteHeader--menuOpen"] = menuOpen,
                 _b["arc-no-js"] = !hasClientSideJavaScript,
                 _b)) }, filterDataAttrs(props), { "data-transparent": isTransparent || null }),
-            React.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
+            React__default.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
                     ? "brand-flat"
                     : undefined },
-                React.createElement("div", { className: "arc-SiteHeader-inner" },
-                    React.createElement("a", { className: "arc-SiteHeader-brand", onClick: handleLinkClick({
+                React__default.createElement("div", { className: "arc-SiteHeader-inner" },
+                    React__default.createElement("a", { className: "arc-SiteHeader-brand", onClick: handleLinkClick({
                             handler: logoOnClick
                         }), href: logoHref },
-                        React.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
-                    children && (React.createElement("nav", { className: "arc-SiteHeader-nav" },
-                        React.createElement("div", { className: "arc-SiteHeader-menuButton" },
-                            React.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React.createElement("div", { className: "arc-SiteHeader-main" },
-                            React.createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
-                            hasLogin && (React.createElement(React.Fragment, null, loginOnClick ? (React.createElement("div", { className: "arc-SiteHeader-loginButton" },
-                                React.createElement(Button, { onClick: loginOnClick, isFullWidth: true, label: loginTitle }))) : (React.createElement("div", { className: "arc-SiteHeader-loginButton" },
-                                React.createElement(Button, { href: loginHref, isFullWidth: true, label: loginTitle })))))))),
-                    (basket || hasLogin || search) && (React.createElement("div", { className: "arc-SiteHeader-secondary" },
-                        search ? (React.createElement("div", { className: "arc-SiteHeader-search" }, search)) : null,
-                        basket ? (React.createElement("div", { className: "arc-SiteHeader-basket" }, basket)) : null,
-                        hasLogin && (React.createElement(React.Fragment, null, loginOnClick ? (React.createElement("div", { className: "arc-SiteHeader-loginLink arc-SiteHeader-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React.createElement("a", { className: "arc-SiteHeader-loginLink", href: loginHref }, loginTitle)))))))))));
+                        React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
+                    children && (React__default.createElement("nav", { className: "arc-SiteHeader-nav" },
+                        React__default.createElement("div", { className: "arc-SiteHeader-menuButton" },
+                            React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
+                        React__default.createElement("div", { className: "arc-SiteHeader-main" },
+                            React__default.createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
+                            hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeader-loginButton" },
+                                React__default.createElement(Button, { onClick: loginOnClick, isFullWidth: true, label: loginTitle }))) : (React__default.createElement("div", { className: "arc-SiteHeader-loginButton" },
+                                React__default.createElement(Button, { href: loginHref, isFullWidth: true, label: loginTitle })))))))),
+                    (basket || hasLogin || search) && (React__default.createElement("div", { className: "arc-SiteHeader-secondary" },
+                        search ? (React__default.createElement("div", { className: "arc-SiteHeader-search" }, search)) : null,
+                        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";
@@ -626,7 +648,7 @@ var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, voi
                     logoLabel: logoLabel,
                     search: search
                 };
-                return [2 /*return*/, React.createElement(SiteHeader, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(SiteHeader, __assign({}, props), children)];
         }
     });
 }); };

package/dist/Surface/Surface.esm.d.ts

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/esm/Surface-d515d212";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/esm/Surface-bf201530";

package/dist/Surface/Surface.esm.js

@@ -1,4 +1,4 @@
-export { S as Surface, C as SurfaceContext, b as backgrounds, a as backgroundsBT } from '../_shared/esm/Surface-d515d212.js';
+export { S as Surface, C as SurfaceContext, b as backgrounds, a as backgroundsBT } from '../_shared/esm/Surface-bf201530.js';
 import '../_shared/esm/index-229fc864.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';

package/dist/Text/Text.esm.d.ts

@@ -1 +1 @@
-export { Text } from "../_shared/esm/Text-d8988620";
+export { Text } from "../_shared/esm/Text-6b958ad8";

package/dist/Text/Text.esm.js

@@ -1,6 +1,6 @@
-export { T as Text } from '../_shared/esm/Text-d8988620.js';
+export { T as Text } from '../_shared/esm/Text-6b958ad8.js';
 import '../_shared/esm/index-229fc864.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';
 import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/Surface-d515d212.js';
+import '../_shared/esm/Surface-bf201530.js';

package/dist/TextInput/TextInput.cjs.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-7d8e10fa";
+import { FormControlProps } from "../_shared/cjs/FormControl-e6b7d7c5";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
@@ -58,6 +58,10 @@ interface TextInputProps extends Omit<FormControlProps, "children" | "elementTyp
      * Validation regex pattern.
      */
     pattern?: string;
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     */
+    showPassword?: boolean;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */

package/dist/TextInput/TextInput.cjs.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-7d8e10fa.js');
+var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/Text-1d3844be.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,22 +47,37 @@ var useNumericInput = function (props) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = React.forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = index.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = index.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
     var surface = React.useContext(Surface.Context).surface;
-    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    var _j = React.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : type
+    });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = FormControl.useAriaDescribedby({
         errorMessage: errorMessage,
         id: id,
-        helper: helper
+        helper: helper,
+        disclosureText: disclosureText
     }).ariaDescribedby;
     return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
             "arc-TextInput": true,
+            "arc-TextInput--withPasswordToggle": showPassword,
             "arc-TextInput--invalid": errorMessage,
             "arc-TextInput--onDarkSurface": surface === "dark"
         }) }, index.filterDataAttrs(props)),
-        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
-            React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper" },
+                React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                showPassword && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                        React__default["default"].createElement("div", { "aria-live": "polite" },
+                            React__default["default"].createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
 });
 
 exports.TextInput = TextInput;

package/dist/TextInput/TextInput.esm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-33194106";
+import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
@@ -58,6 +58,10 @@ interface TextInputProps extends Omit<FormControlProps, "children" | "elementTyp
      * Validation regex pattern.
      */
     pattern?: string;
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     */
+    showPassword?: boolean;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */