@arc-ui/components 11.16.0 → 11.17.0

package/dist/_shared/cjs/{FormControl-166e0957.js → FormControl-b26ad353.js}

@@ -6,6 +6,7 @@ var React = require('react');
 var BtIconAlert_esm = require('./BtIconAlert.esm-1a0ff9f0.js');
 var Surface = require('./Surface-038db6e1.js');
 var DisclosureMini = require('./DisclosureMini-d0eeb6bb.js');
+var VisuallyHidden = require('./VisuallyHidden-e2c8b291.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,14 +48,14 @@ var Provider = Context.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = filterDataAttrs.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = filterDataAttrs.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = React.useContext(Surface.Context).surface;
-    var _f = useAriaDescribedby({
+    var _g = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id
-    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
+    }), ariaDescribedby = _g.ariaDescribedby, idError = _g.idError, idHelper = _g.idHelper, idDisclosure = _g.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -79,9 +80,11 @@ var FormControl = function (_a) {
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, filterDataAttrs.filterDataAttrs(props)),
-            React__default["default"].createElement(LabelType, filterDataAttrs.__assign({ className: "arc-FormControl-label" }, labelProps),
+            React__default["default"].createElement(LabelType, filterDataAttrs.__assign({ className: "arc-FormControl-label" }, labelProps), hideLabel === true ? (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
                 label,
-                requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+                requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                label,
+                requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))),
             helperUnderLabel && (React__default["default"].createElement(React__default["default"].Fragment, null, helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
             React__default["default"].createElement("div", { className: index.classNames("arc-FormControl-info", {

package/dist/_shared/cjs/{RadioGroup-1eddf86f.js → RadioGroup-23c964ae.js}

@@ -2,7 +2,7 @@
 
 var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
 var React = require('react');
-var FormControl = require('./FormControl-166e0957.js');
+var FormControl = require('./FormControl-b26ad353.js');
 var index = require('./index-9947ac13.js');
 var Surface = require('./Surface-038db6e1.js');
 

package/dist/_shared/cjs/{SiteFooter-97c27b29.js → SiteFooter-65b6360c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
-var index_es = require('./index.es-26dd8c5d.js');
+var useMediaQuery = require('./use-media-query-e61881d8.js');
 var BtIconChevronDown2Px_esm = require('./BtIconChevronDown2Px.esm-39030ee0.js');
 var React = require('react');
 var BrandLogo = require('./BrandLogo-aea340c8.js');
@@ -45,7 +45,7 @@ var SiteFooter = function (_a) {
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
-    var isMinWidthArcBreakpointM = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointM, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointM, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem && item.type !== React.Fragment) {

package/dist/_shared/cjs/{SiteHeader.rehydrator-af3dddef.js → SiteHeader.rehydrator-df053a52.js}

@@ -3,7 +3,7 @@
 var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
 var React = require('react');
 var index = require('./index-9947ac13.js');
-var index_es = require('./index.es-26dd8c5d.js');
+var useMediaQuery = require('./use-media-query-e61881d8.js');
 var BtIconChevronDown2Px_esm = require('./BtIconChevronDown2Px.esm-39030ee0.js');
 var handleLinkClick = require('./handle-link-click-17a44cf4.js');
 var BtIconChevronRight2Px_esm = require('./BtIconChevronRight2Px.esm-dbf8cbee.js');
@@ -33,7 +33,7 @@ var Item = function (_a) {
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = filterDataAttrs.__rest(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
     var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
-    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== Item && item.type !== React.Fragment) {
@@ -161,7 +161,7 @@ var Panel = function (_a) {
     React.useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(index_es.ArcBreakpointL, "px)")).matches;
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
                 if (isMinWidthArcBreakpointL && subNavItemRef) {
                     // Don't close Panels inside SubNavItems when viewport width is above
@@ -207,7 +207,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 = filterDataAttrs.__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)"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -284,7 +284,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 = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -390,7 +390,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)"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(slot1, function (item) {
             if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
@@ -524,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 = filterDataAttrs.__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 = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -586,7 +586,7 @@ var SiteHeader = function (_a) {
                     React__default["default"].createElement("a", { className: "arc-SiteHeader-brand", onClick: handleLinkClick.handleLinkClick({
                             handler: logoOnClick
                         }), href: logoHref },
-                        React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand })),
+                        React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand, size: 40 })),
                     children && (React__default["default"].createElement("nav", { className: "arc-SiteHeader-nav" },
                         React__default["default"].createElement("div", { className: "arc-SiteHeader-menuButton" },
                             React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),