@arc-ui/components 11.19.0 → 11.20.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, useRef, useEffect, forwardRef, useCallback, useMemo, createElement, useLayoutEffect, Children, isValidElement, cloneElement, Fragment, useReducer, useId } from 'react';
+import React__default, { createContext, useContext, useState, useEffect, useId, useRef, forwardRef, useCallback, useMemo, createElement, useLayoutEffect, Children, isValidElement, cloneElement, Fragment, useReducer } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -599,6 +599,233 @@ var Alert = function (_a) {
                 React__default.createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
 };
 
+var CardHeading = function (_a) {
+    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "s" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e;
+    var HeadingElement = "h".concat(headingLevel);
+    return (React__default.createElement(HeadingElement, { className: classNames("arc-CardHeading", "arc-CardHeading--".concat(size), {
+            "arc-CardHeading--darkPathway": isDarkPathway
+        }) }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterDataAttrs(linkData)), heading)) : (heading)));
+};
+
+var CardLabel = function (_a) {
+    var _b;
+    var text = _a.text, _c = _a.color, color = _c === void 0 ? "muted" : _c, _d = _a.isBold, isBold = _d === void 0 ? true : _d, _e = _a.isDarkPathway, isDarkPathway = _e === void 0 ? false : _e;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: classNames("arc-CardLabel", (_b = {},
+                _b[suffixModifier("arc-CardLabel--color", color)] = !isDarkPathway,
+                _b["arc-CardLabel--bold"] = isBold,
+                _b["arc-CardLabel--darkPathway"] = isDarkPathway,
+                _b)) }, text)));
+};
+
+const BtIconArrowRight = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconPlay = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M20.83887,15.03955,13.66113,10.896A1.107,1.107,0,0,0,12,11.85449v8.2876a1.10534,1.10534,0,0,0,1.66113.95947L20.83887,16.957a1.10688,1.10688,0,0,0,0-1.91748Zm-.5,1.05176-7.17774,4.14453a.10437.10437,0,0,1-.10742-.00049A.10314.10314,0,0,1,13,20.14209v-8.2876a.10229.10229,0,0,1,.05371-.09277.10284.10284,0,0,1,.10742,0l7.17774,4.14307a.10421.10421,0,0,1,.05371.09375A.10285.10285,0,0,1,20.33887,16.09131Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconArrowRightFill = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconPlayFill = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M13.16113,11.76172a.10284.10284,0,0,0-.10742,0A.10229.10229,0,0,0,13,11.85449v8.2876a.10314.10314,0,0,0,.05371.09326.10451.10451,0,0,0,.10742.00049l7.17774-4.14453a.10285.10285,0,0,0,.05371-.09277.10421.10421,0,0,0-.05371-.09375Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.83887,14.957-7.17774,4.14453A1.10791,1.10791,0,0,1,12,20.14209v-8.2876a1.107,1.107,0,0,1,1.66113-.95849l7.17774,4.14355a1.10688,1.10688,0,0,1,0,1.91748Z",
+      fill: "currentColor",
+    }),
+  );
+
+var CardFooter = function (_a) {
+    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.showFilledIcon, showFilledIcon = _e === void 0 ? false : _e;
+    var icons = {
+        arrow: {
+            regular: BtIconArrowRight,
+            filled: BtIconArrowRightFill
+        },
+        play: {
+            regular: BtIconPlay,
+            filled: BtIconPlayFill
+        }
+    };
+    return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
+            "arc-CardFooter--darkPathway": isDarkPathway,
+            "arc-CardFooter--showFilledIcon": showFilledIcon
+        }) },
+        React__default.createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default.createElement("span", { className: "arc-CardFooter-metaText" }, metaText))),
+        showButton && (React__default.createElement("div", null,
+            React__default.createElement("div", { className: "arc-CardFooter-button" },
+                React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIcon", "arc-CardFooter-buttonIcon--regular") },
+                    React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
+                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon arc-CardFooter-buttonIcon--filled" },
+                    React__default.createElement(Icon, { icon: icons[buttonIcon].filled, size: 40 })))))));
+};
+
+var ConditionalWrapper = function (_a) {
+    var condition = _a.condition, wrapper = _a.wrapper, fallback = _a.fallback, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null, condition ? wrapper(children) : fallback ? fallback(children) : children));
+};
+
+const BtIconUser = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M20.87579,16.014a6.99843,6.99843,0,1,0-9.75378.00091C6.725,17.77887,4,21.452,4,25.66113V27a1.001,1.001,0,0,0,1,1H27a1.001,1.001,0,0,0,1-1V25.66113C28,21.45129,25.27423,17.77765,20.87579,16.014ZM10,11a5.998,5.998,0,1,1,6,6A6.0068,6.0068,0,0,1,10,11ZM27,27H5V25.66113c0-4.61181,3.46484-7.57324,6.707-8.80761l.29492-.11206a6.97581,6.97581,0,0,0,7.99457-.00062l.29645.11268C23.53516,18.08789,27,21.04932,27,25.66113Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+var Image = function (_a) {
+    var _b;
+    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== ImageSource) {
+                throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
+            }
+        });
+    }, [children]);
+    var img = (React__default.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
+                "arc-Image": true,
+                "arc-Image--cover": fit === "cover"
+            },
+            _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
+            _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
+            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React__default.createElement("picture", null,
+        children,
+        " ",
+        img)) : (React__default.createElement(React__default.Fragment, null, img))));
+};
+var ImageSource = function (_a) {
+    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = __rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
+    return (React__default.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
+};
+Image.Source = ImageSource;
+
+var AvatarContent = function (_a) {
+    var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;
+    var textSize = {
+        s: "xxxs",
+        m: "xxs",
+        l: "xs",
+        xl: "s"
+    };
+    var iconSize = {
+        s: 16,
+        m: 24,
+        l: 32,
+        xl: 40
+    };
+    if (img) {
+        return React__default.createElement(Image, __assign({ fit: "cover" }, img));
+    }
+    if (initials) {
+        return (React__default.createElement(Heading, { size: textSize[size] }, initials.substring(0, 3).toUpperCase()));
+    }
+    return React__default.createElement(Icon, { size: iconSize[size], icon: BtIconUser });
+};
+
+var Avatar = function (_a) {
+    var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
+    var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
+            "arc-Avatar--img": Boolean(img)
+        }) }, filterDataAttrs(props));
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default.createElement("div", __assign({}, wrapperAttrs), children); } },
+        React__default.createElement(AvatarContent, { size: size, img: img, initials: initials })));
+};
+
+var getAvatars = function (avatars, max) {
+    var maxAvatars = avatars.slice(0, max);
+    var hasHiddenAvatars = maxAvatars.length < avatars.length;
+    return __spreadArray(__spreadArray([], maxAvatars, true), (hasHiddenAvatars && max
+        ? [{ initials: "+".concat(avatars.length - max) }]
+        : []), true);
+};
+
+var AvatarGroup = function (_a) {
+    var title = _a.title, ariaLabel = _a.ariaLabel, href = _a.href, avatars = _a.avatars, onClick = _a.onClick, max = _a.max, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["title", "ariaLabel", "href", "avatars", "onClick", "max", "size"]);
+    var id = useId();
+    var wrapperAttrs = __assign({ className: "arc-AvatarGroup" }, filterDataAttrs(props));
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default.createElement("div", __assign({}, wrapperAttrs), children); } },
+        React__default.createElement("div", { className: "arc-AvatarGroup-avatarContainer" }, getAvatars(avatars, max).map(function (props, i) { return (React__default.createElement("div", { key: "".concat(id, "-avatar-").concat(i), className: classNames("arc-AvatarGroup-avatar", "arc-AvatarGroup-avatar--".concat(size)) },
+            React__default.createElement(Avatar, __assign({ size: size }, props)))); }))));
+};
+
 /** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
 var Badge = function (_a) {
     var _b, _c;
@@ -1419,38 +1646,6 @@ var ButtonIcon = function (_a) {
     return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid : BtIconChevronRightMid })) : (React__default.createElement(Icon, { icon: icon }))));
 };
 
-/**
- * Use `Image` to render a single image, or set of images, with support for
- * image fitting and art direction.
- */
-var Image = function (_a) {
-    var _b;
-    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
-    useEffect(function () {
-        React__default.Children.map(children, function (item) {
-            if (item && item.type !== ImageSource) {
-                throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
-            }
-        });
-    }, [children]);
-    var img = (React__default.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
-    return (React__default.createElement("div", __assign({ className: classNames((_b = {
-                "arc-Image": true,
-                "arc-Image--cover": fit === "cover"
-            },
-            _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
-            _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
-            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React__default.createElement("picture", null,
-        children,
-        " ",
-        img)) : (React__default.createElement(React__default.Fragment, null, img))));
-};
-var ImageSource = function (_a) {
-    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = __rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
-    return (React__default.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
-};
-Image.Source = ImageSource;
-
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
@@ -1758,11 +1953,16 @@ var FormControl = function (_a) {
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, filterDataAttrs(props)),
-            React__default.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps), hideLabel === true ? (React__default.createElement(VisuallyHidden, null,
+            hideLabel === true ? (React__default.createElement(VisuallyHidden, null,
+                React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
+                        "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
+                    }) }, labelProps),
+                    label,
+                    requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
+                    "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
+                }) }, labelProps),
                 label,
-                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))) : (React__default.createElement(React__default.Fragment, null,
-                label,
-                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))),
+                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
             helperUnderLabel && (React__default.createElement(React__default.Fragment, null, helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
             React__default.createElement("div", { className: classNames("arc-FormControl-info", {
@@ -2103,27 +2303,6 @@ var ArcBreakpointS = 636;
 var ArcBreakpointM = 768;
 var ArcBreakpointL = 1024;
 
-const BtIconArrowRight = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
-      fill: "currentColor",
-    }),
-  );
-
 const BtIconCross = (props) =>
   /*#__PURE__*/ React__default.createElement(
     "svg",
@@ -2213,114 +2392,6 @@ var VerticalSpace = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
-var CardHeading = function (_a) {
-    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "s" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e;
-    var HeadingElement = "h".concat(headingLevel);
-    return (React__default.createElement(HeadingElement, { className: classNames("arc-CardHeading", "arc-CardHeading--".concat(size), {
-            "arc-CardHeading--darkPathway": isDarkPathway
-        }) }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterDataAttrs(linkData)), heading)) : (heading)));
-};
-
-var CardLabel = function (_a) {
-    var _b;
-    var text = _a.text, _c = _a.color, color = _c === void 0 ? "muted" : _c, _d = _a.isBold, isBold = _d === void 0 ? true : _d, _e = _a.isDarkPathway, isDarkPathway = _e === void 0 ? false : _e;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("span", { className: classNames("arc-CardLabel", (_b = {},
-                _b[suffixModifier("arc-CardLabel--color", color)] = !isDarkPathway,
-                _b["arc-CardLabel--bold"] = isBold,
-                _b["arc-CardLabel--darkPathway"] = isDarkPathway,
-                _b)) }, text)));
-};
-
-const BtIconPlay = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M20.83887,15.03955,13.66113,10.896A1.107,1.107,0,0,0,12,11.85449v8.2876a1.10534,1.10534,0,0,0,1.66113.95947L20.83887,16.957a1.10688,1.10688,0,0,0,0-1.91748Zm-.5,1.05176-7.17774,4.14453a.10437.10437,0,0,1-.10742-.00049A.10314.10314,0,0,1,13,20.14209v-8.2876a.10229.10229,0,0,1,.05371-.09277.10284.10284,0,0,1,.10742,0l7.17774,4.14307a.10421.10421,0,0,1,.05371.09375A.10285.10285,0,0,1,20.33887,16.09131Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconArrowRightFill = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconPlayFill = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M13.16113,11.76172a.10284.10284,0,0,0-.10742,0A.10229.10229,0,0,0,13,11.85449v8.2876a.10314.10314,0,0,0,.05371.09326.10451.10451,0,0,0,.10742.00049l7.17774-4.14453a.10285.10285,0,0,0,.05371-.09277.10421.10421,0,0,0-.05371-.09375Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.83887,14.957-7.17774,4.14453A1.10791,1.10791,0,0,1,12,20.14209v-8.2876a1.107,1.107,0,0,1,1.66113-.95849l7.17774,4.14355a1.10688,1.10688,0,0,1,0,1.91748Z",
-      fill: "currentColor",
-    }),
-  );
-
-var CardFooter = function (_a) {
-    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.showFilledIcon, showFilledIcon = _e === void 0 ? false : _e;
-    var icons = {
-        arrow: {
-            regular: BtIconArrowRight,
-            filled: BtIconArrowRightFill
-        },
-        play: {
-            regular: BtIconPlay,
-            filled: BtIconPlayFill
-        }
-    };
-    return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
-            "arc-CardFooter--darkPathway": isDarkPathway,
-            "arc-CardFooter--showFilledIcon": showFilledIcon
-        }) },
-        React__default.createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default.createElement("span", { className: "arc-CardFooter-metaText" }, metaText))),
-        showButton && (React__default.createElement("div", null,
-            React__default.createElement("div", { className: "arc-CardFooter-button" },
-                React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIcon", "arc-CardFooter-buttonIcon--regular") },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
-                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon arc-CardFooter-buttonIcon--filled" },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].filled, size: 40 })))))));
-};
-
-var ConditionalWrapper = function (_a) {
-    var condition = _a.condition, wrapper = _a.wrapper, children = _a.children;
-    return (React__default.createElement(React__default.Fragment, null, condition ? wrapper(children) : children));
-};
-
 var InformationCard = function (_a) {
     var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
@@ -35736,19 +35807,24 @@ 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 }, children))));
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true },
+                React__default.createElement("span", { className: "arc-RadioGroup-radioButtonContainer" }, children)))));
 };
 RadioGroup.RadioButton = RadioButton;
 
 /**
- * Use `Rule` to display a horizontal rule.
+ * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (props) {
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
     var surface = useContext(Context$5).surface;
-    return (React__default.createElement("hr", __assign({ className: classNames({
-            "arc-Rule": true,
-            "arc-Rule--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props))));
+    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props))));
 };
 
 const BtIconArrowAltUp = (props) =>
@@ -35794,7 +35870,7 @@ var ScrollToTop = function (_a) {
             "arc-ScrollToTop--visible": appear === "always" || (appear === "afterScroll" && hasScrolled)
         }) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-ScrollToTop-textWrapper" },
-            React__default.createElement("span", { className: "arc-ScrollToTop-text" }, "Scroll to top")),
+            React__default.createElement("span", { className: "arc-ScrollToTop-text" }, "Back to top")),
         React__default.createElement("span", { className: "arc-ScrollToTop-iconContainer" },
             React__default.createElement(Icon, { icon: BtIconArrowAltUp, size: 44 }))));
 };
@@ -39208,14 +39284,16 @@ const BtIconChevronUp2Px = (props) =>
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var _b;
-    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, hideLabel = _a.hideLabel, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "hideLabel", "name", "width", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
+    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, value = _a.value, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, hideLabel = _a.hideLabel, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "value", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "hideLabel", "name", "width", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
     var id = useId();
     var arcRootElement = useContext(ArcRootElementContext);
     var surface = useContext(Context$5).surface;
-    var _e = useState(defaultValue), selectedValue = _e[0], setSelectedValue = _e[1];
+    var _e = useState(defaultValue), uncontrolledValue = _e[0], setUncontrolledValue = _e[1];
+    var isControlled = typeof value !== "undefined";
+    var selectValue = isControlled ? value : uncontrolledValue;
     var onValueChange = function (value) {
         onChange && onChange(value);
-        setSelectedValue(value);
+        setUncontrolledValue(value);
     };
     var getSelectedValueName = function (value) {
         var _a;
@@ -39232,7 +39310,7 @@ var Select = function (_a) {
         }
     };
     return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
-        React__default.createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectedValue, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
+        React__default.createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectValue, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
             React__default.createElement("div", { className: "arc-Select-wrapper" },
                 React__default.createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, "aria-label": ariaLabel, style: { width: width }, className: classNames("arc-Select-trigger", (_b = {
                             "arc-Select-trigger--constrained": !isFluid,
@@ -39241,7 +39319,7 @@ var Select = function (_a) {
                         },
                         _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
                         _b)) }, filterDataAttrs(props)),
-                    React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(selectedValue) }),
+                    React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
                         React__default.createElement(Icon, { icon: BtIconChevronDown2Px, size: getIconSize(selectSize) }))),
                 React__default.createElement($cc7e05a45900e73f$export$602eac185826482c, { container: arcRootElement || undefined },
@@ -39990,9 +40068,9 @@ var Item = function (_a) {
             _b["arc-SiteHeaderV2Item--emphasised"] = true,
             _b)) }, filterDataAttrs(props)),
         React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
+            children,
             React__default.createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
-                React__default.createElement(BtIconChevronRightMid, null)),
-            children)));
+                React__default.createElement(BtIconChevronRightMid, null)))));
 };
 
 var ItemGroup = function (_a) {
@@ -40094,6 +40172,7 @@ var Panel = function (_a) {
             }
             // Close the panel.
             setOpen(false);
+            setOpenPanelOnFirstClick(false);
         };
         document.addEventListener("click", handleClick);
         return function () {
@@ -40271,32 +40350,15 @@ var HorizontalPanel = function (_a) {
         // Where appropriate, close the Panel when clicking outside of it,
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
-            var _a, _b;
-            // Don't close the Panel…
+            var _a;
+            // Close the Horizontal Panel…
             if (
-            // The click is inside the current SubNavItem.
-            ((_a = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) ||
-                // The click is inside the current NavItem
-                // and the Panel is not inside a SubNavItem.
-                // and the target is not a link
-                (((_b = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target)) &&
-                    !subNavItemRef &&
-                    !e.target.getAttribute("href")) ||
-                // The Panel is inside a SubNavItem
-                // and the click is not on a SubNavItem-link.
-                // This ensures that one SubNavItem Panel per NavItem always remains open.
-                (subNavItemRef &&
-                    !e.target.classList.contains(subNavLink) &&
-                    !e.target.classList.contains("".concat(subNavLink, "Title")) &&
-                    !e.target.classList.contains("".concat(subNavLink, "SubTitle"))) ||
-                // Panel is inside a SubNavItem
-                // and the click is not inside the Panel's NavItem parent.
-                // This prevents SubNavItem Panels in sibling NavItems from being closed.
-                (subNavItemRef && !(navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current.contains(e.target)))) {
+            // The click is not inside the current NavItem
+            !((_a = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) ||
+                e.target.classList.contains("arc-SiteHeaderV2HorizontalPanel--open")) {
+                setOpen(false);
                 return;
             }
-            // Close the panel.
-            setOpen(false);
         };
         document.addEventListener("click", handleClick);
         return function () {
@@ -42692,5 +42754,5 @@ var UniversalHeaderItem = function (_a) {
 };
 UniversalHeader.Item = UniversalHeaderItem;
 
-export { Alert, Align, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
+export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
 //# sourceMappingURL=index.es.js.map