@arc-ui/components 11.25.0 → 12.0.0-beta.10

package/dist/_shared/esm/Preview-43b2a75d.js

@@ -0,0 +1,161 @@
+import React__default from 'react';
+
+function _mergeNamespaces(n, m) {
+  m.forEach(function (e) {
+    e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+      if (k !== 'default' && !(k in n)) {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  });
+  return Object.freeze(n);
+}
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var Preview_exports = {};
+__export(Preview_exports, {
+  default: () => Preview
+});
+var Preview_1 = __toCommonJS(Preview_exports);
+var import_react = __toESM(React__default);
+const ICON_SIZE = "64px";
+const cache = {};
+class Preview extends import_react.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "mounted", false);
+    __publicField(this, "state", {
+      image: null
+    });
+    __publicField(this, "handleKeyPress", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        this.props.onClick();
+      }
+    });
+  }
+  componentDidMount() {
+    this.mounted = true;
+    this.fetchImage(this.props);
+  }
+  componentDidUpdate(prevProps) {
+    const { url, light } = this.props;
+    if (prevProps.url !== url || prevProps.light !== light) {
+      this.fetchImage(this.props);
+    }
+  }
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+  fetchImage({ url, light, oEmbedUrl }) {
+    if (import_react.default.isValidElement(light)) {
+      return;
+    }
+    if (typeof light === "string") {
+      this.setState({ image: light });
+      return;
+    }
+    if (cache[url]) {
+      this.setState({ image: cache[url] });
+      return;
+    }
+    this.setState({ image: null });
+    return window.fetch(oEmbedUrl.replace("{url}", url)).then((response) => response.json()).then((data) => {
+      if (data.thumbnail_url && this.mounted) {
+        const image = data.thumbnail_url.replace("height=100", "height=480").replace("-d_295x166", "-d_640");
+        this.setState({ image });
+        cache[url] = image;
+      }
+    });
+  }
+  render() {
+    const { light, onClick, playIcon, previewTabIndex, previewAriaLabel } = this.props;
+    const { image } = this.state;
+    const isElement = import_react.default.isValidElement(light);
+    const flexCenter = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    const styles = {
+      preview: {
+        width: "100%",
+        height: "100%",
+        backgroundImage: image && !isElement ? `url(${image})` : void 0,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        cursor: "pointer",
+        ...flexCenter
+      },
+      shadow: {
+        background: "radial-gradient(rgb(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%)",
+        borderRadius: ICON_SIZE,
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        position: isElement ? "absolute" : void 0,
+        ...flexCenter
+      },
+      playIcon: {
+        borderStyle: "solid",
+        borderWidth: "16px 0 16px 26px",
+        borderColor: "transparent transparent transparent white",
+        marginLeft: "7px"
+      }
+    };
+    const defaultPlayIcon = /* @__PURE__ */ import_react.default.createElement("div", { style: styles.shadow, className: "react-player__shadow" }, /* @__PURE__ */ import_react.default.createElement("div", { style: styles.playIcon, className: "react-player__play-icon" }));
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: styles.preview,
+        className: "react-player__preview",
+        onClick,
+        tabIndex: previewTabIndex,
+        onKeyPress: this.handleKeyPress,
+        ...previewAriaLabel ? { "aria-label": previewAriaLabel } : {}
+      },
+      isElement ? light : null,
+      playIcon || defaultPlayIcon
+    );
+  }
+}
+
+var Preview$1 = /*#__PURE__*/_mergeNamespaces({
+  __proto__: null,
+  'default': Preview_1
+}, [Preview_1]);
+
+export { Preview$1 as P };

package/dist/_shared/esm/{ProgressStepper-7eba3a6a.js → ProgressStepper-9bb4706f.js}

@@ -1,48 +1,39 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { useContext } from 'react';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-fc59ba8f.js';
+import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { I as Icon } from './Icon-15799695.js';
-import { C as Context } from './Surface-0ca6817d.js';
-import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
+import { V as VisuallyHidden } from './VisuallyHidden-59f004f5.js';
+import { I as Icon } from './Icon-6fef56b3.js';
 
 var Error = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("g", { clipPath: "url(#a)" },
         React__default.createElement("path", { d: "m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z", fill: "currentColor" })),
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
     React__default.createElement("defs", null,
         React__default.createElement("clipPath", { id: "a" },
             React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
 
 var Warning = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
     React__default.createElement("path", { d: "M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z", fill: "currentColor", stroke: "currentColor", strokeWidth: ".3" }))); };
 
 var Complete = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("g", { clipPath: "url(#a)" },
         React__default.createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
     React__default.createElement("defs", null,
-        React__default.createElement("clipPath", { id: "a" },
+        React__default.createElement("clipPath", null,
             React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
 
 var Current = function () { return (React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React__default.createElement("rect", { x: "0.666667", y: "0.666667", width: "22.6667", height: "22.6667", rx: "11.3333", stroke: "url(#paint0_linear_1_1050)", strokeWidth: "1.33333" }),
     React__default.createElement("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
     React__default.createElement("defs", null,
         React__default.createElement("linearGradient", { id: "paint0_linear_1_1050", x1: "36.6036", y1: "-4.31391e-07", x2: "-12.6036", y2: "24", gradientUnits: "userSpaceOnUse" },
             React__default.createElement("stop", { stopColor: "#F200F5" }),
             React__default.createElement("stop", { offset: "1", stopColor: "#1EC8E6" }))))); };
 
-var Todo = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }))); };
-
 // export current step as an icon
 var ProgressStepperItem = function (_a) {
     var _b;
     var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
-    var surface = useContext(Context).surface;
     var statusIcons = {
-        todo: Todo,
+        todo: undefined,
         completed: Complete,
         current: Current,
         warning: Warning,
@@ -58,19 +49,25 @@ var ProgressStepperItem = function (_a) {
     return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
                 "arc-ProgressStepperItem--vertical": direction === "vertical",
                 "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
-                "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
                 "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
             },
             _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
             _b)) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
             React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
-                React__default.createElement(Icon, { size: size === "small" ? 16 : 24, icon: statusIcons[status] }))),
+                React__default.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
+                        "arc-ProgressStepperItem-statusIcon--small": size === "small"
+                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon, { icon: statusIcons[status] }))))),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
-            status !== "todo" && (React__default.createElement(VisuallyHidden, null,
-                capitaliseFirstLetter(status),
-                ":")),
-            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))),
             React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
             stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));

package/dist/_shared/esm/{RadioGroup-427652ac.js → RadioGroup-84c7ca35.js}

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-fc59ba8f.js';
 import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from './FormControl-8e836656.js';
+import { F as FormControl } from './FormControl-350bb1c8.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context } from './Surface-0ca6817d.js';
-import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
+import { C as Context } from './Surface-201aa0d6.js';
+import { V as VisuallyHidden } from './VisuallyHidden-59f004f5.js';
 
 var RadioContext = createContext({});
 var Provider = RadioContext.Provider;
@@ -13,10 +13,10 @@ var useRadioContext = function () {
 };
 
 var RadioButton = forwardRef(function (_a, ref) {
-    var id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin, props = __rest(_a, ["id", "changeEvent", "isDisabled", "size", "labelSize", "checked", "defaultChecked", "radioButtonAlignment", "name", "blurEvent", "value", "label", "helper", "hideLabel", "withMargin"]);
+    var id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin;
     var surface = useContext(Context).surface;
     var idLabel = "".concat(id, "-label");
-    return (React__default.createElement("div", __assign({ className: classNames({
+    return (React__default.createElement("div", { className: classNames({
             "arc-RadioButton": true,
             "arc-RadioButton--withMargin": withMargin,
             "arc-RadioButton--withMarginSmall": withMargin && size === "s",
@@ -24,7 +24,7 @@ var RadioButton = forwardRef(function (_a, ref) {
             "arc-RadioButton--small": size === "s",
             "arc-RadioButton--smallLabel": labelSize === "s",
             "arc-RadioButton--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
+        }) },
         React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
                 "arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
             }), htmlFor: id, id: idLabel },
@@ -52,7 +52,7 @@ var RadioButtonGroupInput = forwardRef(function (_a, ref) {
  * Use `RadioGroup` to wrap and control radio buttons and apply default values
  */
 var RadioGroup = function (_a) {
-    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, errorMessage = _a.errorMessage, _c = _a.isRequired, isRequired = _c === void 0 ? true : _c, helper = _a.helper, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "errorMessage", "isRequired", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== RadioButtonGroupInput) {
@@ -70,7 +70,7 @@ var RadioGroup = function (_a) {
             size: size
         } },
         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 },
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: isRequired ? "required" : "optional", helperUnderLabel: true, errorMessage: isRequired && checkedValue === "" ? errorMessage : "" },
                 React__default.createElement("span", { className: "arc-RadioGroup-radioButtonContainer" }, children)))));
 };
 RadioGroup.RadioButton = RadioButtonGroupInput;

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

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

package/dist/_shared/esm/{SiteFooter-86f910b4.js → SiteFooter-7317b40e.js}

@@ -1,18 +1,18 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import { u as useMediaQuery, A as ArcBreakpointM } from './use-media-query-4c807227.js';
-import { B as BtIconChevronDown2Px } from './BtIconChevronDown2Px.esm-217276c2.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-fc59ba8f.js';
+import { S as SemSizeBreakpointsM } from './index.es-be971b8d.js';
 import React__default, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { C as Curve } from './Curve-e05b3c3f.js';
-import { S as Section } from './Section-73781b56.js';
-import { S as Surface } from './Surface-0ca6817d.js';
+import { B as BrandLogo } from './BrandLogo-640e58ed.js';
+import { u as useMediaQuery } from './use-media-query-d3622da8.js';
+import { S as Section } from './Section-3ab74edb.js';
+import { S as Surface } from './Surface-201aa0d6.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+import { T as ThemeIcon } from './ThemeIcon-69de5351.js';
 
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
  */
 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"]);
+    var children = _a.children, currentYear = _a.currentYear, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "logoLabel", "main", "siteName"]);
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
@@ -21,9 +21,8 @@ var SiteFooter = function (_a) {
         });
     }, [children]);
     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" },
+            React__default.createElement(Surface, { background: "dark-brand-01", 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)),
@@ -39,7 +38,7 @@ var SiteFooter = function (_a) {
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem && item.type !== Fragment) {
@@ -50,7 +49,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, null)),
+                React__default.createElement(ThemeIcon, { icon: "siteFooterExpand" })),
             React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };

package/dist/_shared/esm/{SiteHeaderV2-a7c1b1cb.js → SiteHeaderV2-6d4af7e5.js}

@@ -1,17 +1,17 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import { u as useMediaQuery, b as ArcBreakpointL } from './use-media-query-4c807227.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-fc59ba8f.js';
+import { b as SemSizeBreakpointsL } from './index.es-be971b8d.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useEffect, Fragment, useRef, useState, createContext, useContext } from 'react';
-import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { S as Surface } from './Surface-0ca6817d.js';
+import { B as BrandLogo } from './BrandLogo-640e58ed.js';
+import { u as useMediaQuery } from './use-media-query-d3622da8.js';
+import { S as Surface } from './Surface-201aa0d6.js';
+import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-4764708f.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper-b85979de.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
-import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
-import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { B as Button } from './Button-a7d134c6.js';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { T as Text } from './Text-14f586ac.js';
-import { I as Icon } from './Icon-15799695.js';
+import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-c939e317.js';
+import { B as ButtonV2 } from './ButtonV2-b35cea64.js';
+import { T as Text } from './Text-dc3f9cb5.js';
+import { I as Icon } from './Icon-6fef56b3.js';
 
 var Item = function (_a) {
     var _b;
@@ -28,7 +28,7 @@ var Item = function (_a) {
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, subtitle = _a.subtitle, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== Item && item.type !== Fragment) {
@@ -82,7 +82,7 @@ var BackButton = function (_a) {
 var Panel = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     var menubarRef = useHeaderV2Context().menubarRef;
     useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
@@ -155,7 +155,7 @@ var Panel = function (_a) {
         var handleKeydown = function (e) {
             var _a, _b;
             // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(SemSizeBreakpointsL, ")")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
                 if (isMinWidthArcBreakpointL && subNavItemRef) {
                     // Don't close Panels inside SubNavItems when viewport width is above
@@ -180,7 +180,7 @@ var Panel = function (_a) {
                 _b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
                 _b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
                 _b)) }, filterDataAttrs(props)),
-            React__default.createElement(Surface, { background: "white" },
+            React__default.createElement(Surface, { background: "light-white" },
                 React__default.createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
                 React__default.createElement("div", { className: classNames((_c = {},
                         _c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
@@ -210,21 +210,18 @@ var Panel = function (_a) {
                     withSubNav && viewAll)))));
 };
 var ViewAll = function (_a) {
-    var href = _a.href, title = _a.title, onClick = _a.onClick, fill = _a.fill;
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    if (fill === "outlined") {
+    var href = _a.href, title = _a.title, onClick = _a.onClick, buttonStyle = _a.buttonStyle;
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    if (buttonStyle === "secondary") {
         return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAllOutlined" },
-            React__default.createElement(Button, { fill: fill, label: title !== null && title !== void 0 ? title : "", href: href, onClick: onClick }),
-            " ")) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll arc-SiteHeaderV2Panel-mobileViewAllOutlined" },
+            React__default.createElement(ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", href: href, onClick: onClick }))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll arc-SiteHeaderV2Panel-mobileViewAllOutlined" },
             React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
                     handler: onClick
                 }), href: href }, title)));
     }
     else {
         return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAll" },
-            " ",
-            React__default.createElement(Button, { fill: fill, label: title !== null && title !== void 0 ? title : "", isFullWidth: true, href: href, onClick: onClick }),
-            " ")) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll" },
+            React__default.createElement(ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", isFullWidth: true, href: href, onClick: onClick }))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll" },
             React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
                     handler: onClick
                 }), href: href }, title)));
@@ -239,7 +236,7 @@ var NavItem = function (_a) {
     var _g = useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
     var _h = useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
     var _j = useState(false), animation = _j[0], setAnimation = _j[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
@@ -293,7 +290,7 @@ var NavItem = function (_a) {
                         _f)) }))),
         React__default.createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: opensFirstWithPanel && isMinWidthArcBreakpointL
                 ? openSecondaryWithSubNav
-                : panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
+                : panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", buttonStyle: "primary" })) : undefined }, children)))));
 };
 
 var HorizontalPanel = function (_a) {
@@ -321,7 +318,7 @@ var HorizontalPanel = function (_a) {
     useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(SemSizeBreakpointsL, ")")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
                 if (isMinWidthArcBreakpointL && subNavItemRef) {
                     // Don't close Panels inside SubNavItems when viewport width is above
@@ -341,7 +338,7 @@ var HorizontalPanel = function (_a) {
             _b["arc-SiteHeaderV2HorizontalPanel--open"] = open,
             _b["arc-SiteHeaderV2HorizontalPanel--withSubNav"] = withSubNav,
             _b)) }, filterDataAttrs(props)),
-        React__default.createElement(Surface, { background: "light" },
+        React__default.createElement(Surface, { background: "light-neutral-02" },
             React__default.createElement("div", { className: classNames((_c = {},
                     _c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
                     _c)) },
@@ -364,7 +361,7 @@ var NavItemWithSubNav = function (_a) {
     var _k = useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
     var _l = useState(false), animation = _l[0], setAnimation = _l[1];
     var _m = useState(true), openSecondaryWithSubNav = _m[0], setOpenSecondaryWithSubNav = _m[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(slot1, function (item) {
             if (item.props.isDefaultItem) {
@@ -448,7 +445,7 @@ var NavItemWithSubNav = function (_a) {
                 slot5)),
             React__default.createElement(Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
                     ? openSecondaryWithSubNav
-                    : panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
+                    : panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, buttonStyle: "primary" })) : undefined, withSubNav: true, isNavItem: false },
                 defaultItem
                     ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
                     : slot1,
@@ -485,7 +482,7 @@ var SubNavItem = function (_a) {
     var subNavItem = useRef();
     var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var _f = useState(false), fade = _f[0], setFade = _f[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
@@ -531,7 +528,7 @@ var SubNavItem = function (_a) {
                 React__default.createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-linkSlotTitle" }, linkTitle))),
         React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, setOpenPanelOnFirstClick: function () { }, subNavLink: "arc-SiteHeaderV2SubNavItem-link", 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 || "See all ".concat(title), fill: "outlined" })) : undefined, isNavItem: false, fade: fade }, children)))));
+                subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "See all ".concat(title), buttonStyle: "secondary" })) : undefined, isNavItem: false, fade: fade }, children)))));
 };
 
 var VerticalDivider = function () {
@@ -549,7 +546,7 @@ var SiteHeaderV2 = 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 = __rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
     var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     var menubarRef = useRef();
     useEffect(function () {
         React__default.Children.map(children, function (item) {
@@ -610,7 +607,7 @@ var SiteHeaderV2 = function (_a) {
                 _b["arc-no-js"] = !hasClientSideJavaScript,
                 _b)) }, filterDataAttrs(props), { "data-transparent": isTransparent || null }),
             React__default.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
-                    ? "brand-flat"
+                    ? "dark-brand-01"
                     : undefined },
                 React__default.createElement("div", { className: "arc-SiteHeaderV2-inner" },
                     React__default.createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick({

package/dist/_shared/esm/Spinner-7c6f320f.js

@@ -0,0 +1,18 @@
+import { a as __assign, f as filterDataAttrs } from './index.es-fc59ba8f.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+
+/**
+ * Use `Spinner` to display a loading state.
+ */
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "m" : _b, color = _a.color;
+    var props = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        props[_i - 1] = arguments[_i];
+    }
+    return (React__default.createElement("svg", __assign({ className: classNames("arc-Spinner", "arc-Spinner-".concat(color), "arc-Spinner-size--".concat(size)), width: typeof size === "number" ? "".concat(size, "px") : undefined, "data-testid": "arc-Spinner", "aria-label": "loading", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, filterDataAttrs(props)),
+        React__default.createElement("circle", { cx: "24", cy: "24", fill: "none", r: "22", "stroke-width": "4", "stroke-linecap": "round" })));
+};
+
+export { Spinner as S };