@arc-ui/components 10.8.1 → 11.1.0

package/dist/Select/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/select",
+  "types": "./Select.esm.d.ts",
+  "main": "./Select.cjs.js",
+  "module": "./Select.esm.js",
+  "private": true
+}

package/dist/SiteFooter/SiteFooter.cjs.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../_shared/cjs/index-78b35bc1.js');
-var index_es = require('../_shared/cjs/index.es-f590caaf.js');
+var index_es = require('../_shared/cjs/index.es-77def0c9.js');
+var BtIconChevronDown2Px = require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
 var React = require('react');
 var BrandLogo = require('../_shared/cjs/BrandLogo-3c6102ef.js');
 var Curve = require('../_shared/cjs/Curve-e72ce25b.js');
-var useMediaQuery = require('../_shared/cjs/use-media-query-75d1bbae.js');
 var Section = require('../_shared/cjs/Section-780f2377.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
@@ -49,7 +49,7 @@ var SiteFooter = function (_a) {
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
-    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointM, "px)"));
+    var isMinWidthArcBreakpointM = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointM, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem && item.type !== React.Fragment) {
@@ -59,6 +59,8 @@ var SiteFooterItemGroup = function (_a) {
     }, [children]);
     return (React__default["default"].createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
         React__default["default"].createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React__default["default"].createElement("span", { className: "arc-SiteFooter-icon" },
+                React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)),
             React__default["default"].createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React__default["default"].createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };

package/dist/SiteFooter/SiteFooter.esm.js

@@ -1,11 +1,11 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/index-229fc864.js';
-import { A as ArcBreakpointM } from '../_shared/esm/index.es-42f84e2d.js';
-import React, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from '../_shared/esm/BrandLogo-ea3dd0e6.js';
-import { C as Curve } from '../_shared/esm/Curve-cfdca379.js';
-import { u as useMediaQuery } from '../_shared/esm/use-media-query-38faed7f.js';
-import { S as Section } from '../_shared/esm/Section-f1256c87.js';
-import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import { u as useMediaQuery, A as ArcBreakpointM } from '../_shared/esm/index.es-00cb3bcb.js';
+import { B as BtIconChevronDown2Px_2 } from '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
+import React__default, { useEffect, Fragment } from 'react';
+import { B as BrandLogo } from '../_shared/esm/BrandLogo-4f13fe85.js';
+import { C as Curve } from '../_shared/esm/Curve-50697f7e.js';
+import { S as Section } from '../_shared/esm/Section-7bc71e26.js';
+import { S as Surface } from '../_shared/esm/Surface-bf201530.js';
 import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
 import '../_shared/esm/index-2ae58626.js';
 import '../_shared/esm/suffix-modifier-f5e28822.js';
@@ -16,48 +16,50 @@ import '../_shared/esm/suffix-modifier-f5e28822.js';
 var SiteFooter = function (_a) {
     var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
                 throw new Error("Illegal child passed to <SiteFooter />. Ensure to only use <SiteFooter.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement(React.Fragment, null,
-        curve ? (React.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
-        React.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
-            React.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
-                (siteName || main) && (React.createElement(React.Fragment, null,
-                    React.createElement(Section, null,
-                        siteName && (React.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
-                        main && React.createElement("div", { className: "arc-SiteFooter-main" }, main)),
-                    React.createElement("hr", { className: "arc-SiteFooter-rule" }))),
-                React.createElement(Section, null,
-                    React.createElement("div", { className: "arc-SiteFooter-secondary" },
-                        children && (React.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
-                        React.createElement("div", { className: "arc-SiteFooter-brand" },
-                            React.createElement("div", { className: "arc-SiteFooter-copyright" },
-                                React.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
-                            React.createElement(BrandLogo, { label: logoLabel }))))))));
+    return (React__default.createElement(React__default.Fragment, null,
+        curve ? (React__default.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
+        React__default.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
+            React__default.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+                (siteName || main) && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Section, null,
+                        siteName && (React__default.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
+                        main && React__default.createElement("div", { className: "arc-SiteFooter-main" }, main)),
+                    React__default.createElement("hr", { className: "arc-SiteFooter-rule" }))),
+                React__default.createElement(Section, null,
+                    React__default.createElement("div", { className: "arc-SiteFooter-secondary" },
+                        children && (React__default.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
+                        React__default.createElement("div", { className: "arc-SiteFooter-brand" },
+                            React__default.createElement("div", { className: "arc-SiteFooter-copyright" },
+                                React__default.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
+                            React__default.createElement(BrandLogo, { label: logoLabel }))))))));
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
-        React.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
-            React.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
-        React.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+    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("h2", { className: "arc-SiteFooter-title" }, title)),
+        React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };
 var SiteFooterItem = function (_a) {
     var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
-    return (React.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterDataAttrs(props)),
-        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+    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;
@@ -80,7 +82,7 @@ var SiteFooter_rehydrator = (function (el, rehydrateChildren) { return __awaiter
                     children: children,
                     title: title
                 };
-                return [2 /*return*/, React.createElement(SiteFooter.ItemGroup, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(SiteFooter.ItemGroup, __assign({}, props), children)];
         }
     });
 }); });

package/dist/SiteHeader/SiteHeader.cjs.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../_shared/cjs/index-78b35bc1.js');
-var index_es = require('../_shared/cjs/index.es-f590caaf.js');
+var index_es = require('../_shared/cjs/index.es-77def0c9.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
 var BrandLogo = require('../_shared/cjs/BrandLogo-3c6102ef.js');
-var Button = require('../_shared/cjs/Button-1743b3ec.js');
-var useMediaQuery = require('../_shared/cjs/use-media-query-75d1bbae.js');
+var Button = require('../_shared/cjs/Button-b3a69953.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var BtIconChevronDown2Px = require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
 var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
+var BtIconChevronRight2Px = require('../_shared/cjs/BtIconChevronRight2Px-a8e40136.js');
 var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.js');
 var Text = require('../_shared/cjs/Text-1d3844be.js');
-require('../_shared/cjs/Icon-bb5a5fd1.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+require('../_shared/cjs/Icon-719d13d4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,13 +28,16 @@ var Item = function (_a) {
             _b["arc-SiteHeaderItem"] = true,
             _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
             _b)) }, index.filterDataAttrs(props)),
-        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href }, children)));
+        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
+            isEmphasised && (React__default["default"].createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
+                React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null))),
+            children)));
 };
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = index.__rest(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
     var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== Item && item.type !== React.Fragment) {
@@ -52,7 +57,10 @@ var ItemGroup = function (_a) {
         React__default["default"].createElement(ElementType, index.__assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, index.filterDataAttrs(props)),
             title ? (React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
                     handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
+                title,
+                React__default["default"].createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
+                    React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -109,6 +117,8 @@ var BackButton = function (_a) {
     return (React__default["default"].createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
         } },
+        React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
+            React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronLeft2Px_2, null)),
         React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
@@ -189,7 +199,10 @@ var Panel = function (_a) {
 };
 var ViewAll = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href }, title));
+    return (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
+        title,
+        React__default["default"].createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
+            React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null))));
 };
 ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
@@ -199,6 +212,7 @@ 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 = index.__rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
     var navItem = React.useRef();
     var _d = React.useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -221,7 +235,9 @@ var NavItem = function (_a) {
                 _c)), onClick: function (e) {
                 e.preventDefault();
                 setPanelOpen(!panelOpen);
-            } }, title),
+            } },
+            React__default["default"].createElement("span", null, title),
+            React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
@@ -273,7 +289,7 @@ var SubNavItem = function (_a) {
     var navItem = React.useContext(Context$1).navItem;
     var subNavItem = React.useRef();
     var _e = React.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -305,7 +321,10 @@ var SubNavItem = function (_a) {
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, linkTitle),
+            } },
+            linkTitle,
+            children && (React__default["default"].createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
+                React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default["default"].createElement("span", null,
                 title,
                 subTitle && (React__default["default"].createElement(Text.Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
@@ -376,6 +395,7 @@ var NavItemWithSubNav = function (_a) {
     var navItem = React.useRef();
     var _e = React.useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
     var _f = React.useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(slot1, function (item) {
             if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
@@ -413,7 +433,9 @@ var NavItemWithSubNav = function (_a) {
                     _c)), onClick: function (e) {
                     e.preventDefault();
                     setPanelOpen(!panelOpen);
-                } }, title),
+                } },
+                title,
+                React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
             React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
                 defaultItem
                     ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
@@ -502,7 +524,7 @@ var SiteHeader = function (_a) {
     var children = _a.children, basket = _a.basket, _c = _a.hasLogin, hasLogin = _c === void 0 ? true : _c, _d = _a.isTransparent, isTransparent = _d === void 0 ? false : _d, _e = _a.loginHref, loginHref = _e === void 0 ? "/login" : _e, logoOnClick = _a.logoOnClick, loginOnClick = _a.loginOnClick, _f = _a.loginTitle, loginTitle = _f === void 0 ? "Log in / Register" : _f, _g = _a.logoHref, logoHref = _g === void 0 ? "/" : _g, _h = _a.logoLabel, logoLabel = _h === void 0 ? "Home" : _h, search = _a.search, subBrand = _a.subBrand, props = index.__rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
     var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&

package/dist/SiteHeader/SiteHeader.esm.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FC, ReactNode, ReactElement } from "react";
-import { subBrands } from "../_shared/esm/BrandLogo-ea3dd0e6";
+import { subBrands } from "../_shared/esm/BrandLogo-4f13fe85";
 declare const Column: FC<ColumnProps>;
 interface ColumnProps {
     /**