@arc-ui/components 12.1.0 → 13.0.0

package/lib/index.cjs

@@ -867,7 +867,7 @@ var BannerRow = function (_a) {
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.type, type = _l === void 0 ? "light" : _l, props = __rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = __rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -912,7 +912,7 @@ var TemplateBanner = function (_a) {
                             label && (React.createElement(React.Fragment, null,
                                 React.createElement(Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false }, label),
                                 React.createElement(VerticalSpace, { size: "8" }))),
-                            React.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: false }, heading),
+                            React.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
                             text && (React.createElement(React.Fragment, null,
                                 React.createElement(VerticalSpace, { size: "16" }),
                                 React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
@@ -927,8 +927,8 @@ var TemplateBanner = function (_a) {
 
 /** Use `Banner` to promote key content or products with bold visuals and messaging. */
 var Banner = function (_a) {
-    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
-    return (React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, filterAttrs(props)), children));
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, _h = _a.headingWordWrap, headingWordWrap = _h === void 0 ? false : _h, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment", "headingWordWrap"]);
+    return (React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment, headingWordWrap: headingWordWrap }, filterAttrs(props)), children));
 };
 
 /**
@@ -1704,22 +1704,22 @@ var handleLinkClick = function (_a) {
     };
 };
 
-var BreadcrumbsLink = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
-    return (React.createElement(React.Fragment, null, isActive || href === undefined ? (React.createElement("span", { onClick: onClick, className: classNames({
+var BreadcrumbsLink = function (_a) {
+    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children, ref = _a.ref, props = __rest(_a, ["onClick", "href", "isActive", "children", "ref"]);
+    return (React.createElement(React.Fragment, null, isActive || href === undefined ? (React.createElement("span", __assign({ onClick: onClick, className: classNames({
             "arc-Breadcrumbs-text": true,
             "arc-Breadcrumbs-text--active": isActive,
-        }) }, children)) : (React.createElement("a", __assign({}, (onClick && ref
+        }) }, filterAttrs(props)), children)) : (React.createElement("a", __assign({}, (onClick && ref
         ? { onClick: onClick }
-        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
-});
+        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }, filterAttrs(props)), children))));
+};
 
 /**
  * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
-var Button = React.forwardRef(function (_a, ref) {
+var Button = function (_a) {
     var _b;
-    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
+    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, ref = _a.ref, props = __rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form", "ref"]);
     var surface = React.useContext(Context$3).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
@@ -1747,7 +1747,7 @@ var Button = React.forwardRef(function (_a, ref) {
         React.createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));
-});
+};
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
     return (React.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React.createElement(ThemeIcon, { icon: isBeforeText ? "buttonLeft" : "buttonRight" })) : (React.createElement(Icon$1, { icon: icon }))));
@@ -1765,8 +1765,8 @@ var Spinner = function (_a) {
 /**
  * Use `ButtonV2` for our most up to date Call To Action button, offering Primary, Secondary, Tertiary, Compact and Error states.
  */
-var ButtonV2 = React.forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form"]);
+var ButtonV2 = function (_a) {
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, ref = _a.ref, props = __rest(_a, ["label", "buttonStyle", "icon", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form", "ref"]);
     var surface = React.useContext(Context$3).surface;
     var ButtonElement = isSpan ? "span" : "button";
     var iconSizes = {
@@ -1810,7 +1810,7 @@ var ButtonV2 = React.forwardRef(function (_a, ref) {
         return (React.createElement("a", __assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, target: target }), renderButtonContent()));
     }
     return (React.createElement(ButtonElement, __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }), renderButtonContent()));
-});
+};
 
 /**
  * Use `ButtonGroup` to group multiple buttons together, ensuring consistent sizing, spacing,
@@ -1828,7 +1828,10 @@ var ButtonGroup = function (_a) {
             "arc-ButtonGroup--vertical": orientation === "vertical",
         }), role: "group", "aria-label": ariaLabel }, filterAttrs(props)), React.Children.map(children, function (child) {
         if (React.isValidElement(child) && isArcButton(child.type)) {
-            return React.cloneElement(child, __assign(__assign({}, child.props), { size: size, isFullWidth: isFullWidth }));
+            return React.cloneElement(child, {
+                size: size,
+                isFullWidth: isFullWidth,
+            });
         }
         return null;
     })));
@@ -2023,7 +2026,7 @@ function startOfMonth(dirtyDate) {
 
 /**
  * Do not edit directly
- * Generated on Fri, 05 Dec 2025 13:50:26 GMT
+ * Generated on Tue, 23 Dec 2025 14:36:38 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -5268,8 +5271,8 @@ function cleanEscapedString(input) {
 
 var ArcCalendarContext = React.createContext(null);
 
-var CalendarDayNumber = React.forwardRef(function (_a, autoFocusRef) {
-    var date = _a.date, shouldRender = _a.shouldRender, isFocusWithinDayGrid = _a.isFocusWithinDayGrid;
+var CalendarDayNumber = function (_a) {
+    var autoFocusRef = _a.ref, date = _a.date, shouldRender = _a.shouldRender, isFocusWithinDayGrid = _a.isFocusWithinDayGrid;
     var context = React.useContext(ArcCalendarContext);
     var isFocusDate = context && isEqual$1(date, context.focusDate);
     var tableCellRef = React.useCallback(function (el) {
@@ -5330,7 +5333,7 @@ var CalendarDayNumber = React.forwardRef(function (_a, autoFocusRef) {
             React.createElement("div", { className: "arc-CalendarDayNumber-buttonInner" },
                 React.createElement(Text, { size: "s" },
                     React.createElement("span", { "aria-hidden": true }, getDate(date)))))))));
-});
+};
 
 /**
  * Do not edit directly
@@ -8435,15 +8438,16 @@ var FormControl = function (_a) {
 
 /** Use `CheckboxIcon` to display a visual checkbox indicator that reflects a checked, unchecked, or indeterminate state. */
 var CheckboxIcon = function (_a) {
-    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, props = __rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange"]);
+    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, ref = _a.ref, props = __rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange", "ref"]);
     var requirementStatus = React.useContext(Context$2).requirementStatus;
     var internalRef = React.useRef(null);
     var surface = React.useContext(Context$3).surface;
+    var inputRef = (ref || internalRef);
     React.useEffect(function () {
-        if (internalRef.current) {
-            internalRef.current.indeterminate = indeterminate;
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
         }
-    }, [indeterminate, checked]);
+    }, [indeterminate, checked, inputRef]);
     var tickSize = {
         s: 14,
         m: 18,
@@ -8471,7 +8475,7 @@ var CheckboxIcon = function (_a) {
                 ? true
                 : indeterminate && checked
                     ? "mixed"
-                    : false, className: classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: internalRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
+                    : false, className: classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: inputRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
         React.createElement("span", { className: classNames("arc-CheckboxIcon-box") }, indeterminate ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
             React.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React.createElement(ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
 };
@@ -8479,8 +8483,8 @@ var CheckboxIcon = function (_a) {
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-var Checkbox = React.forwardRef(function (_a) {
-    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, _j = _a.isError, isError = _j === void 0 ? false : _j, _k = _a.isErrorAlert, isErrorAlert = _k === void 0 ? false : _k, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate", "isError", "isErrorAlert"]);
+var Checkbox = function (_a) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, _j = _a.isError, isError = _j === void 0 ? false : _j, _k = _a.isErrorAlert, isErrorAlert = _k === void 0 ? false : _k, ref = _a.ref, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate", "isError", "isErrorAlert", "ref"]);
     var requirementStatus = React.useContext(Context$2).requirementStatus;
     var surface = React.useContext(Context$3).surface;
     var idError = useAriaDescribedby({
@@ -8498,7 +8502,7 @@ var Checkbox = React.forwardRef(function (_a) {
             "arc-Checkbox--invalid": errorMessage || isError,
             "arc-Checkbox--small": size === "s",
             "arc-Checkbox--onDarkSurface": surface === "dark",
-        }) }, filterAttrs(props)),
+        }), ref: ref }, filterAttrs(props)),
         React.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
                 "arc-Checkbox-label--top": checkboxAlignment === "top",
             }) },
@@ -8508,15 +8512,15 @@ var Checkbox = React.forwardRef(function (_a) {
             })), hideLabel ? (React.createElement(VisuallyHidden$2, null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
-                helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React.createElement(React.Fragment, null,
+                helper && React.createElement("span", { className: "arc-Checkbox-helper" }, helper))) : (React.createElement(React.Fragment, null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
-                helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
+                helper && React.createElement("span", { className: "arc-Checkbox-helper" }, helper))))),
         errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error", role: isErrorAlert ? "alert" : undefined },
             React.createElement("span", { className: "arc-Checkbox-error--icon", "aria-label": "Error. " },
                 React.createElement(ThemeIcon, { icon: "checkboxError" })),
             errorMessage))));
-});
+};
 
 /**
  * Use `Columns` to compose layouts on a 12-column grid. Place within `Section` components to align with any sibling `Grid` components.
@@ -9249,9 +9253,9 @@ var count = 0;
 function useId(deterministicId) {
   const [id, setId] = React__namespace.useState(useReactId());
   useLayoutEffect2(() => {
-    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
+    setId((reactId) => reactId ?? String(count++));
   }, [deterministicId]);
-  return deterministicId || (id ? `radix-${id}` : "");
+  return (id ? `radix-${id}` : "");
 }
 
 /**
@@ -13103,8 +13107,8 @@ var reducer = function (initialOptions) {
 };
 
 /** Use `ComboBox` to provide a searchable dropdown list that allows users to select from or filter through multiple options. */
-var ComboBox = React.forwardRef(function (_a, ref) {
-    var name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = __rest(_a, ["name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
+var ComboBox = function (_a) {
+    var ref = _a.ref, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = __rest(_a, ["ref", "name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
     var listBoxId = React.useId();
     var listItemRefs = React.useRef([]);
     var containerRef = React.useRef(null);
@@ -13140,9 +13144,7 @@ var ComboBox = React.forwardRef(function (_a, ref) {
             var selectedOptionIsAboveOverFlow = listItemEl.offsetTop < listEl.scrollTop;
             if (selectedOptionIsBelowOverFlow) {
                 listEl.scrollTop =
-                    listItemEl.offsetTop +
-                        listItemEl.offsetHeight -
-                        listEl.offsetHeight;
+                    listItemEl.offsetTop + listItemEl.offsetHeight - listEl.offsetHeight;
             }
             if (selectedOptionIsAboveOverFlow) {
                 listEl.scrollTop = listItemEl.offsetTop;
@@ -13255,7 +13257,9 @@ var ComboBox = React.forwardRef(function (_a, ref) {
                     React.createElement(Content2$4, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
                         React.createElement("div", { className: "arc-ComboBox-listboxContainer" },
                             React.createElement(Box, { elevationLevel: "1" },
-                                React.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) { return (listItemRefs.current[i] = el); }, key: option, className: classNames("arc-ComboBox-listItem", {
+                                React.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) {
+                                        listItemRefs.current[i] = el;
+                                    }, key: option, className: classNames("arc-ComboBox-listItem", {
                                         "arc-ComboBox-listItem--highlighted": i === highlightedOptionIndex,
                                     }), onMouseDown: onItemClick(option), role: "option", "aria-selected": isSelected(option, selectedOptions) },
                                     React.createElement("div", { className: "arc-ComboBox-listItemText" }, option),
@@ -13263,7 +13267,7 @@ var ComboBox = React.forwardRef(function (_a, ref) {
                                             "arc-ComboBox-listItemIcon--visible": isSelected(option, selectedOptions),
                                         }) },
                                         React.createElement(ThemeIcon, { size: 20, icon: "selectIndicator" })))); })) : (React.createElement("li", { className: "arc-ComboBox-listItem", role: "option", "aria-selected": false, "aria-disabled": true }, "No matches found")))))))))));
-});
+};
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -14230,11 +14234,12 @@ var ContentSwitcher = function (_a) {
         React.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs(props)), children)));
 };
 
-var ContentSwitcherTab = React.forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, props = __rest(_a, ["label", "value", "onClick", "onFocus"]);
-    return (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs(props)),
-        React.createElement(Text, { size: "m" }, label)));
-});
+var ContentSwitcherTab = function (_a) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, ref = _a.ref, props = __rest(_a, ["label", "value", "onClick", "onFocus", "ref"]);
+    return (React.createElement(Surface, { isTransparent: true },
+        React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs(props)),
+            React.createElement(Text, { size: "m" }, label))));
+};
 
 var ContentSwitcherContent = function (_a) {
     var children = _a.children, value = _a.value, _b = _a.hidden, hidden = _b === void 0 ? undefined : _b, _c = _a.forceMount, forceMount = _c === void 0 ? true : _c, props = __rest(_a, ["children", "value", "hidden", "forceMount"]);
@@ -14300,14 +14305,23 @@ var ContentSwitcherList = function (_a) {
                 "arc-ContentSwitcherList--isJustified": isJustified,
             }), ref: listRef, "aria-label": ariaLabel }, filterAttrs(props)),
             React.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React.Children.map(children, function (child, index) {
-                if (tabRefs) {
+                if (!React.isValidElement(child)) {
+                    return null;
+                }
+                if (tabRefs.current[index] !== null) {
                     return React.cloneElement(child, {
-                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        ref: function (el) {
+                            tabRefs.current[index] = el;
+                        },
                         onClick: function () {
-                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                            var el = tabRefs.current[index];
+                            if (el)
+                                scrollTabIntoView({ current: el });
                         },
                         onFocus: function () {
-                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                            var el = tabRefs.current[index];
+                            if (el)
+                                scrollTabIntoView({ current: el });
                         },
                     });
                 }
@@ -17083,9 +17097,9 @@ var TrailingSlot = function (_a) {
 };
 
 /** Use `TextInput` as a single-line field that allows users to enter short text, such as names, email, search queries or passwords. */
-var TextInputComponent = React.forwardRef(function (_a, ref) {
+var TextInputComponent = function (_a) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
+    var ref = _a.ref, _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = __rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
     var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
@@ -17124,12 +17138,12 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
                     isLoading ||
                     (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React.createElement(TrailingSlot, { showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled })),
                 suffix && (React.createElement("span", { className: "arc-TextInput-suffix arc-TextInput-affixes", "aria-hidden": true }, suffix))))));
-});
+};
 /**
  * Use `TextInput` to allow users to enter short form text.
  */
-var TextInput = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
-var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
+var TextInput = function (props) { return (React.createElement(TextInputComponent, __assign({}, props))); };
+var TextInputWithPlaceHolder = function (props) { return React.createElement(TextInputComponent, __assign({}, props)); };
 
 var formatDate = function (value) {
     return format(value, DATE_FORMAT);
@@ -17264,8 +17278,8 @@ function validateRangeOnBlur(_a) {
 /**
  * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
  */
-var DatePicker = React.forwardRef(function (_a, ref) {
-    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, _e = _a.selectionType, selectionType = _e === void 0 ? "single" : _e, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+var DatePicker = function (_a) {
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, _e = _a.selectionType, selectionType = _e === void 0 ? "single" : _e, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, ref = _a.ref, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate", "ref"]);
     var _f = useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
     var _g = React.useState("Choose date"), ariaLabel = _g[0], setAriaLabel = _g[1];
     var _h = React.useState(false), showCalendar = _h[0], setShowCalendar = _h[1];
@@ -17409,7 +17423,7 @@ var DatePicker = React.forwardRef(function (_a, ref) {
             React.createElement(Portal$5, { container: themeElement },
                 React.createElement(Content2$4, { align: "start", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
                     React.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
-});
+};
 
 var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
 var DatePickerRange = function (_a) {
@@ -17974,6 +17988,17 @@ var Drawer = function (_a) {
         var newHeight = dragRef.current.startH - dragRef.current.deltaY;
         setDrawerHeight(Math.round(newHeight));
     };
+    var onHandleDown = function (e) {
+        if (!contentRef.current)
+            return;
+        dragRef.current.active = true;
+        // record where the pointer was when dragging started
+        dragRef.current.startY = e.clientY;
+        // record inital height of drawer
+        dragRef.current.startH = contentRef.current.clientHeight;
+        // keep moving drawer even if cursor has left pill
+        e.target.setPointerCapture(e.pointerId);
+    };
     var resolveToPx = function (input) {
         // if already a number, assume px
         if (typeof input === "number")
@@ -17990,19 +18015,24 @@ var Drawer = function (_a) {
         var numericValue = Number(str);
         return Number.isFinite(numericValue) ? numericValue : undefined;
     };
-    var onHandleUpCore = function (e) {
-        if (!dragRef.current.active || !contentRef.current)
+    var onHandleUpCore = function (e, keyboardDeltaY) {
+        if (!contentRef.current)
             return;
+        // if the user scrolls down
         if (dragDownToDismiss && contentRef.current.clientHeight < 100) {
             dragRef.current.active = false;
             dragRef.current.deltaY = 0;
-            e.currentTarget.releasePointerCapture(e.pointerId);
+            if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            }
             setDrawerHeight(undefined);
             onRequestClose();
             return;
         }
         dragRef.current.active = false;
-        e.currentTarget.releasePointerCapture(e.pointerId);
+        if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        }
         var currentHeight = contentRef.current.clientHeight;
         // turn all snapPoints into px values. Order the values.
         var snapsPx = (normalisedSnapPoints !== null && normalisedSnapPoints !== void 0 ? normalisedSnapPoints : [])
@@ -18010,9 +18040,9 @@ var Drawer = function (_a) {
             .filter(function (value) { return value !== undefined; }) // remove undefined values
             .sort(function (a, b) { return a - b; });
         var targetSnap = undefined;
+        var deltaY = Math.sign(dragRef.current.deltaY);
         if (snapBehaviour === "next") {
-            var deltaY = Math.sign(dragRef.current.deltaY);
-            if (deltaY === -1) {
+            if (deltaY <= -1) {
                 // User scrolled up
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] > currentHeight) {
@@ -18024,7 +18054,7 @@ var Drawer = function (_a) {
                     }
                 }
             }
-            else if (deltaY === 1) {
+            else if (deltaY >= 1) {
                 // User scrolled down
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] < currentHeight) {
@@ -18065,17 +18095,6 @@ var Drawer = function (_a) {
         }
         setDrawerHeight(targetSnap);
     };
-    var onHandleDown = function (e) {
-        if (!contentRef.current)
-            return;
-        dragRef.current.active = true;
-        // record where the pointer was when dragging started
-        dragRef.current.startY = e.clientY;
-        // record inital height of drawer
-        dragRef.current.startH = contentRef.current.clientHeight;
-        // keep moving drawer even if cursor has left pill
-        e.target.setPointerCapture(e.pointerId);
-    };
     return (React.createElement("div", { ref: setThemeElement },
         React.createElement(Root$1, { open: isOpen },
             React.createElement(Portal$1, { container: themeElement },
@@ -18092,16 +18111,16 @@ var Drawer = function (_a) {
                                 React.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
                                     React.createElement(ThemeIcon, { size: 32, icon: "drawerClose" })),
                                 draggable && position === "bottom" && (React.createElement("div", { className: "arc-Drawer-dragHandle", onPointerDown: onHandleDown, onPointerUp: onHandleUp, onPointerMove: onHandleMove, onClick: onHandleClick, role: "separator", "aria-label": "Drag to resize the drawer" },
-                                    React.createElement("div", { className: "arc-Drawer-dragHandlePill", "data-testid": "arc-Drawer-dragHandlePill" })))),
+                                    React.createElement("div", { className: "arc-Drawer-dragHandlePill", tabIndex: -1, "data-testid": "arc-Drawer-dragHandlePill" })))),
                             children)))))));
 };
 
 /**
  * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (_a, props) {
+var Rule = function (_a) {
     var _b;
-    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c, props = __rest(_a, ["orientation"]);
     var surface = React.useContext(Context$3).surface;
     return (React.createElement("hr", __assign({ className: classNames((_b = {
                 "arc-Rule": true
@@ -18112,24 +18131,27 @@ var Rule = function (_a, props) {
 };
 
 var DrawerHeader = function (_a) {
-    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, props = __rest(_a, ["title", "isFixed", "isResponsive"]);
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, children = _a.children, _c = _a.isFullBleed, isFullBleed = _c === void 0 ? false : _c, _d = _a.titleWordWrap, titleWordWrap = _d === void 0 ? false : _d, props = __rest(_a, ["title", "isFixed", "isResponsive", "children", "isFullBleed", "titleWordWrap"]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({ className: classNames("arc-DrawerHeader", {
                 "arc-DrawerHeader--isFixed": isFixed,
+                "arc-DrawerHeader--isFullBleed": isFullBleed,
             }) }, filterAttrs(props)),
             React.createElement("div", { className: "arc-DrawerHeader-content" },
-                React.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                title && !children && (React.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
                     React.createElement(Title, { asChild: true },
-                        React.createElement(Heading, { isResponsive: isResponsive, size: "m" }, title)))),
+                        React.createElement(Heading, { isResponsive: isResponsive, size: "m", isWordWrap: titleWordWrap }, title)))),
+                children && !title && children),
             isFixed && (React.createElement("div", { className: "arc-DrawerHeader-divider" },
                 React.createElement(Rule, null))))));
 };
 
 var DrawerFooter = function (_a) {
-    var isFixed = _a.isFixed, children = _a.children;
+    var isFixed = _a.isFixed, _b = _a.isFullBleed, isFullBleed = _b === void 0 ? false : _b, children = _a.children;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames("arc-DrawerFooter", {
                 "arc-DrawerFooter--isFixed": isFixed,
+                "arc-DrawerFooter--isFullBleed": isFullBleed,
             }) },
             isFixed && (React.createElement("div", { className: "arc-DrawerFooter-divider" },
                 React.createElement(Rule, null))),
@@ -18258,13 +18280,13 @@ var FilterItem = function (_a) {
  *  Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
  */
 var GhostedHeroBanner = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle"]);
+    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle", "headingWordWrap"]);
     return (React.createElement("div", __assign({ className: "arc-GhostedHeroBanner" }, filterAttrs(props)),
         React.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React.createElement(React.Fragment, null,
                 React.createElement(Heading, { fontStyle: "overline" }, label),
                 React.createElement(VerticalSpace, { size: "8" }))),
-            React.createElement(Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle }, heading),
+            React.createElement(Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
             text && (React.createElement(React.Fragment, null,
                 React.createElement(VerticalSpace, { size: "16" }),
                 React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
@@ -18465,11 +18487,11 @@ var GroupItem = function (_a) {
 
 /** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
 var HeroBanner = function (_a) {
-    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.extendBeyondContainer, extendBeyondContainer = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.fontStyle, fontStyle = _h === void 0 ? "default" : _h, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "extendBeyondContainer", "type", "fontStyle"]);
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.extendBeyondContainer, extendBeyondContainer = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.fontStyle, fontStyle = _h === void 0 ? "default" : _h, _j = _a.headingWordWrap, headingWordWrap = _j === void 0 ? false : _j, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "extendBeyondContainer", "type", "fontStyle", "headingWordWrap"]);
     return (React.createElement(ConditionalWrapper, { condition: extendBeyondContainer, wrapper: function (children) { return (React.createElement("div", { className: classNames({
                 "arc-HeroBanner--expanded": extendBeyondContainer,
             }) }, children)); } },
-        React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, alignment: "center" }, filterAttrs(props)), children)));
+        React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, alignment: "center", headingWordWrap: headingWordWrap }, filterAttrs(props)), children)));
 };
 
 /**
@@ -18507,8 +18529,8 @@ const ArcIconWarn =
 /**
  * Use `HeroButton` as the most prominent call-to-action. It should be used sparingly at the most important parts of a user journey only.
  */
-var HeroButton = React.forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
+var HeroButton = function (_a) {
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, ref = _a.ref, props = __rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form", "ref"]);
     var surface = React.useContext(Context$3).surface;
     var HeroButtonClasses = classNames("arc-HeroButton", ["arc-HeroButton--".concat(camelcase(buttonStyle))], {
         "arc-HeroButton--onDarkSurface": surface === "dark",
@@ -18544,7 +18566,7 @@ var HeroButton = React.forwardRef(function (_a, ref) {
                         : HeroButtonIcons[icon] }))),
             isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
                 React.createElement(Spinner, { size: "xxl" }))))));
-});
+};
 
 /** Use `Hidden` to hide it's children at specific breakpoints */
 var Hidden = function (_a) {
@@ -18585,8 +18607,8 @@ var CardFooter = function (_a) {
 
 /** Use `CardHeading` internally within card components to display a title, icon, or leading content at the top of a card. */
 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 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;
-    return (React.createElement(Heading, { level: headingLevel, size: size, isWordWrap: false }, href ? (React.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
+    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 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.headingWordWrap, headingWordWrap = _e === void 0 ? false : _e;
+    return (React.createElement(Heading, { level: headingLevel, size: size, isWordWrap: headingWordWrap }, href ? (React.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
 };
 
 /** Use `HorizontalCard` to display card content in a horizontal layout. */
@@ -18610,8 +18632,8 @@ var HorizontalCard = function (_a) {
 
 /** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
 var ImpactCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.buttonIcon, buttonIcon = _f === void 0 ? "arrow" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "headingSize", "linkData", "pathway", "headingLevel", "buttonIcon", "labelLevel"]);
-    var _h = React.useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.pathway, pathway = _e === void 0 ? "light" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.buttonIcon, buttonIcon = _g === void 0 ? "arrow" : _g, _h = _a.labelLevel, labelLevel = _h === void 0 ? "3" : _h, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "headingSize", "headingWordWrap", "linkData", "pathway", "headingLevel", "buttonIcon", "labelLevel"]);
+    var _j = React.useState(false), showHoverState = _j[0], setShowHoverState = _j[1];
     var surface = React.useContext(Context$3).surface;
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
@@ -18627,7 +18649,7 @@ var ImpactCard = function (_a) {
             label && (React.createElement("div", { className: "arc-ImpactCard-label" },
                 React.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                 React.createElement(VerticalSpace, { size: "16" }))),
-            React.createElement(CardHeading, { heading: heading, size: headingSize, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+            React.createElement(CardHeading, { heading: heading, size: headingSize, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap })),
         React.createElement(CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));
 };
 
@@ -18649,7 +18671,7 @@ const BtIconArrowRightFill =
 
 /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
 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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel", "labelLevel"]);
+    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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, headingWordWrap = _a.headingWordWrap, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel", "labelLevel", "headingWordWrap"]);
     var surface = React.useContext(Context$3).surface;
     var _d = React.useState(false), showHoverState = _d[0], setShowHoverState = _d[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
@@ -18688,7 +18710,7 @@ var InformationCard = function (_a) {
                     label && (React.createElement(React.Fragment, null,
                         React.createElement("div", { className: "arc-InformationCard-label" },
                             React.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label)))),
-                    React.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                    React.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap }),
                     text && React.createElement(Text, null, text)),
                 (button || badges || footerLogo) && (React.createElement("div", { className: "arc-InformationCard-footer" },
                     badges && (React.createElement(React.Fragment, null,
@@ -18729,10 +18751,10 @@ var VideoPlayer$1 = React.lazy(function () {
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 var MediaCard = function (_a) {
-    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _c = _a.buttonIcon, buttonIcon = _c === void 0 ? "arrow" : _c, _d = _a.isContained, isContained = _d === void 0 ? true : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["media", "url", "onClick", "heading", "label", "labelLevel", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _c = _a.buttonIcon, buttonIcon = _c === void 0 ? "arrow" : _c, _d = _a.isContained, isContained = _d === void 0 ? true : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.headingWordWrap, headingWordWrap = _f === void 0 ? false : _f, props = __rest(_a, ["media", "url", "onClick", "heading", "label", "labelLevel", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel", "headingWordWrap"]);
     var surface = React.useContext(Context$3).surface;
-    var _f = React.useState(false), isClient = _f[0], setIsClient = _f[1];
-    var _g = React.useState(false), showHoverState = _g[0], setShowHoverState = _g[1];
+    var _g = React.useState(false), isClient = _g[0], setIsClient = _g[1];
+    var _h = React.useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     React.useEffect(function () {
         setIsClient(true);
@@ -18751,7 +18773,7 @@ var MediaCard = function (_a) {
                 label && (React.createElement("div", { className: "arc-MediaCard-label" },
                     React.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                     React.createElement(VerticalSpace, { size: "16" }))),
-                React.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                React.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap }),
                 React.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace, { size: "16" }),
                     React.createElement(Text, null, text),
@@ -20199,7 +20221,8 @@ var MenuItem = function (_a) {
 /**
  * Visual separator used to divide groups of menu items.
  */
-var MenuSeparator = function (props) {
+var MenuSeparator = function (_a) {
+    var props = __rest(_a, []);
     return (React.createElement(Separator2, __assign({ className: "arc-MenuSeparator" }, filterAttrs(props)),
         React.createElement(Rule, null)));
 };
@@ -20207,8 +20230,8 @@ var MenuSeparator = function (props) {
 /**
  * The component that pops out when the dropdown menu is open.
  */
-var MenuContent = React.forwardRef(function (_a, ref) {
-    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, initalTitle = _a.initalTitle, isFluidToViewport = _a.isFluidToViewport, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side", "initalTitle", "isFluidToViewport"]);
+var MenuContent = function (_a) {
+    var ref = _a.ref, children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, initalTitle = _a.initalTitle, isFluidToViewport = _a.isFluidToViewport, props = __rest(_a, ["ref", "children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side", "initalTitle", "isFluidToViewport"]);
     var _c = useMenuContext(), isMobileMenu = _c.isMobileMenu, stack = _c.stack, goBack = _c.goBack, defaultWidth = _c.defaultWidth, reset = _c.reset;
     if (!isMobileMenu) {
         return (React.createElement(Content2, __assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 12, loop: true, collisionPadding: 0, forceMount: true, align: align, alignOffset: alignOffset, side: side }, filterAttrs(props)),
@@ -20229,7 +20252,7 @@ var MenuContent = React.forwardRef(function (_a, ref) {
             React.createElement(MenuItem, { onClick: goBack, leadingIcon: BtIconChevronLeftMid }, prevTitle),
             React.createElement(MenuSeparator, null))),
         React.createElement("div", { key: stack.length, className: "arc-MenuContent-content arc-MenuContent-fade" }, active)));
-});
+};
 
 /**
  * Displays footer content at the bottom of the menu.
@@ -20354,21 +20377,21 @@ var MenuItemMultiLevel = function (_a) {
     if (!trigger || !pairedContent) {
         console.warn("MenuItemMultiLevel requires both a Trigger and Portal");
     }
-    // Inject content into the trigger,  skip rendering the portal in mobile
+    // Inject content into the trigger, skip rendering the portal in mobile
     return React.cloneElement(trigger, { pairedContent: pairedContent });
 };
 
 /**
  * The multi-level menu content that pops out when a menu item with children is hovered or clicked.
  */
-var MenuItemMultiLevelContent = React.forwardRef(function (_a, ref) {
-    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
+var MenuItemMultiLevelContent = function (_a) {
+    var ref = _a.ref, children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = __rest(_a, ["ref", "children", "width", "minWidth", "maxWidth", "alignOffset"]);
     var _b = useMenuContext(), isMobileMenu = _b.isMobileMenu, defaultWidth = _b.defaultWidth;
     if (isMobileMenu) {
         return React.createElement(React.Fragment, null, children);
     }
     return (React.createElement(SubContent2, __assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
-});
+};
 MenuItemMultiLevelContent.displayName = "MenuItemMultiLevelContent";
 
 /**
@@ -20425,7 +20448,7 @@ var MenuTrigger = function (_a) {
 /** Use `Modal` to display information that needs immediate action from a user. */
 var Modal = function (_a) {
     var _b;
-    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _c = _a.role, role = _c === void 0 ? "dialog" : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.isContentScrollable, isContentScrollable = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "l" : _f, _g = _a.fullBleed, fullBleed = _g === void 0 ? false : _g, customWidths = _a.customWidths, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidths"]);
+    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _c = _a.role, role = _c === void 0 ? "dialog" : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.isContentScrollable, isContentScrollable = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "l" : _f, _g = _a.fullBleed, fullBleed = _g === void 0 ? false : _g, customWidths = _a.customWidths, titleWordWrap = _a.titleWordWrap, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidths", "titleWordWrap"]);
     var _h = useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
     var triggerRef = React.useRef(null);
     var setTriggerElement = function () {
@@ -20466,7 +20489,7 @@ var Modal = function (_a) {
                                     React.createElement(VerticalSpace, { size: "24" }),
                                     React.createElement(Surface, null,
                                         React.createElement(Title, { asChild: true },
-                                            React.createElement(Heading, { level: "1", size: "m" }, title))),
+                                            React.createElement(Heading, { level: "1", size: "m", isWordWrap: titleWordWrap }, title))),
                                     React.createElement(VerticalSpace, { size: "12" })))),
                             React.createElement("div", { className: "arc-Modal-content" },
                                 title && description && (React.createElement("div", { className: "arc-Modal-section" },
@@ -20567,8 +20590,8 @@ var PaginationSimple = function (_a) {
  * Use `Popover` to display content in a portal, triggered by a button.
  */
 var Popover = function (_a) {
-    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, props = __rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
-    var _l = useThemeElement(), themeElement = _l[0], setThemeElement = _l[1];
+    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, _l = _a.isFluidToViewport, isFluidToViewport = _l === void 0 ? false : _l, _m = _a.contentMargin, contentMargin = _m === void 0 ? false : _m, _o = _a.isFullBleed, isFullBleed = _o === void 0 ? false : _o, props = __rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger", "isFluidToViewport", "contentMargin", "isFullBleed"]);
+    var _p = useThemeElement(), themeElement = _p[0], setThemeElement = _p[1];
     var alignOffsetDefault = align === "center" ? 0 : -16;
     return (React.createElement("div", __assign({ className: "arc-Popover" }, filterAttrs(props)),
         React.createElement(Root2$3, { open: open, onOpenChange: onOpenChange },
@@ -20582,6 +20605,9 @@ var Popover = function (_a) {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
                                         "arc-Popover-content--constrainToViewport": constrainToViewport,
+                                        "arc-Popover-content--isFluidToViewport": isFluidToViewport,
+                                        "arc-Popover-content--contentMargin": contentMargin,
+                                        "arc-Popover-content--isFullBleed": isFullBleed,
                                     }), style: { maxWidth: maxWidth, minHeight: minHeight }, "aria-labelledby": "popover-content" },
                                     content && React.createElement("div", { id: "popover-content" }, content),
                                     arrow && (React.createElement(PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
@@ -20641,7 +20667,7 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
  * Use `ProgressBar` to show the progress of a specific task within a page.
  */
 var ProgressBar = function (_a) {
-    var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
+    var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, _e = _a.headlineWordWrap, headlineWordWrap = _e === void 0 ? false : _e, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue", "headlineWordWrap"]);
     var progressValue = Math.min(100, Math.max(0, value));
     var autoFocusRef = function (canFocus) { return function (el) {
         canFocus && el && el.focus();
@@ -20649,7 +20675,7 @@ var ProgressBar = function (_a) {
     return (React.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state)) }, filterAttrs(props)),
         React.createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
             React.createElement("div", { className: "arc-ProgressBar-titleContainer" },
-                headline && React.createElement(Heading, { size: "s" }, headline),
+                headline && (React.createElement(Heading, { size: "s", isWordWrap: headlineWordWrap }, headline)),
                 headline && title && React.createElement(VerticalSpace, { size: "4" }),
                 title && React.createElement(Text, null, title)),
             displayValue && (React.createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
@@ -20853,8 +20879,8 @@ var ProgressStepperItem = function (_a) {
 };
 
 /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
-var ProgressStepper = React.forwardRef(function (_a, ref) {
-    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, currentStep = _a.currentStep, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "currentStep"]);
+var ProgressStepper = function (_a) {
+    var ref = _a.ref, children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, currentStep = _a.currentStep, props = __rest(_a, ["ref", "children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "currentStep"]);
     var items = React.Children.toArray(children);
     var getStepStatus = function (item) {
         var _a;
@@ -20864,14 +20890,14 @@ var ProgressStepper = React.forwardRef(function (_a, ref) {
             "arc-ProgressStepper--vertical": direction === "vertical",
         }) }, filterAttrs(props)), items.map(function (item, index) { return (React.createElement(React.Fragment, { key: "StepperItem-".concat(index) },
         React.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, ariaLabel: item.props.ariaLabel, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, isViewing: currentStep !== undefined ? currentStep === index : undefined, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
-});
+};
 
 /** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
-var ProgressStepperOverflow = React.forwardRef(function (_a, ref) {
-    var children = _a.children, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["children", "size", "invertLabelPosition", "offsetLeft"]);
+var ProgressStepperOverflow = function (_a) {
+    var ref = _a.ref, children = _a.children, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["ref", "children", "size", "invertLabelPosition", "offsetLeft"]);
     return (React.createElement("div", __assign({ className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
         React.createElement(ProgressStepper, { ref: ref, size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
-});
+};
 
 var useProgressStepperOverflow = function (_a) {
     var _b = _a === void 0 ? {} : _a, onLoadStep = _b.onLoadStep, _c = _b.increment, increment = _c === void 0 ? 1 : _c, _d = _b.offsetLeft, offsetLeft = _d === void 0 ? 24 : _d;
@@ -20988,8 +21014,8 @@ var capitaliseFirstLetter = (word) => {
   return word.charAt(0).toUpperCase() + word.slice(1);
 };
 
-var RadioCard = React.forwardRef(function (_a, ref) {
-    var id = _a.id, icon = _a.icon, label = _a.label, support = _a.support, isDisabled = _a.isDisabled, checked = _a.checked, defaultChecked = _a.defaultChecked, changeEvent = _a.changeEvent, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, children = _a.children, _b = _a.controlLocation, controlLocation = _b === void 0 ? "right" : _b, _c = _a.hideButton, hideButton = _c === void 0 ? false : _c;
+var RadioCard = function (_a) {
+    var ref = _a.ref, id = _a.id, icon = _a.icon, label = _a.label, support = _a.support, isDisabled = _a.isDisabled, checked = _a.checked, defaultChecked = _a.defaultChecked, changeEvent = _a.changeEvent, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, children = _a.children, _b = _a.controlLocation, controlLocation = _b === void 0 ? "right" : _b, _c = _a.hideButton, hideButton = _c === void 0 ? false : _c;
     var surface = React.useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     return (React.createElement("div", { className: classNames("arc-RadioCard", {
@@ -21009,19 +21035,19 @@ var RadioCard = React.forwardRef(function (_a, ref) {
                 !hideButton && (React.createElement("div", { className: classNames("arc-RadioCard-radioIcon", {
                         "arc-RadioCard-radioIcon--isSelected": checked,
                     }) }))))));
-});
+};
 
 /**
  * Radio Card component.
  */
-var RadioCardGroupInput = React.forwardRef(function (_a, ref) {
-    var icon = _a.icon, support = _a.support, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, children = _a.children, controlLocation = _a.controlLocation, hideButton = _a.hideButton, props = __rest(_a, ["icon", "support", "id", "isDisabled", "label", "value", "children", "controlLocation", "hideButton"]);
+var RadioCardGroupInput = function (_a) {
+    var ref = _a.ref, icon = _a.icon, support = _a.support, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, children = _a.children, controlLocation = _a.controlLocation, hideButton = _a.hideButton, props = __rest(_a, ["ref", "icon", "support", "id", "isDisabled", "label", "value", "children", "controlLocation", "hideButton"]);
     var _b = useRadioContext$1(), name = _b.name, changeEvent = _b.changeEvent, checkedValue = _b.checkedValue, groupDisabled = _b.groupDisabled;
     var isChecked = checkedValue === value ? true : false;
     var checked = typeof changeEvent !== "function" ? undefined : isChecked;
     var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
     return (React.createElement(RadioCard, __assign({ icon: icon, ref: ref, id: id, support: support, label: label, name: name, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, value: value, isDisabled: isDisabled || groupDisabled, controlLocation: controlLocation, hideButton: hideButton }, props), children));
-});
+};
 
 var RadioContext = React.createContext({});
 var Provider$2 = RadioContext.Provider;
@@ -21048,8 +21074,8 @@ var RadioGroup = function (_a) {
                 React.createElement("span", { className: "arc-RadioGroup-radioButtonContainer" }, children)))));
 };
 
-var RadioGroupButton = React.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, isError = _a.isError;
+var RadioGroupButton = function (_a) {
+    var ref = _a.ref, 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, isError = _a.isError;
     var surface = React.useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     return (React.createElement("div", { className: classNames({
@@ -21071,25 +21097,25 @@ var RadioGroupButton = React.forwardRef(function (_a, ref) {
                 }) },
                 hideLabel ? React.createElement(VisuallyHidden$2, null, label) : label,
                 helper && (React.createElement("span", { className: "arc-RadioGroupButton-helper" }, helper))))));
-});
+};
 
 /**
  * Radio Button component.
  */
-var RadioGroupInput = React.forwardRef(function (_a, ref) {
-    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, isError = _a.isError, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value", "isError"]);
+var RadioGroupInput = function (_a) {
+    var ref = _a.ref, helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, isError = _a.isError, props = __rest(_a, ["ref", "helper", "id", "isDisabled", "label", "radioButtonAlignment", "value", "isError"]);
     var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, name = _c.name, size = _c.size;
     var isChecked = checkedValue === value ? true : false;
     var checked = typeof changeEvent !== "function" ? undefined : isChecked;
     var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
     return (React.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value, isError: isError }, props)));
-});
+};
 
 /**
  * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
  */
 var ScrollToTop = function (_a) {
-    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, _f = _a.focusColor, focusColor = _f === void 0 ? "magenta" : _f, props = __rest(_a, ["appear", "isFixed", "fill", "zIndex", "focusColor"]);
+    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, _f = _a.focusColor, focusColor = _f === void 0 ? "primary" : _f, props = __rest(_a, ["appear", "isFixed", "fill", "zIndex", "focusColor"]);
     var _g = React.useState(false), hasScrolled = _g[0], setHasScrolled = _g[1];
     React.useEffect(function () {
         var handleScroll = debounce(function () {
@@ -21346,7 +21372,7 @@ var SiteHeaderV2 = function (_a) {
     var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
-    var menubarRef = React.useRef();
+    var menubarRef = React.useRef(null);
     React.useEffect(function () {
         if (!isMinWidthArcBreakpointL && menuOpen) {
             document.body.classList.add("arc-body--overflowHidden");
@@ -21488,6 +21514,9 @@ var SiteHeaderV2Panel = function (_a) {
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
             var _a, _b, _c, _d;
+            // null check for navItemRef
+            if (!(navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current))
+                return;
             (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
             // Don't close the Panel…
             if (
@@ -21630,7 +21659,7 @@ var SiteHeaderV2ViewAll = function (_a) {
 var SiteHeaderV2NavItem = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title, isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "isPrimary", "opensFirstWithPanel", "subTitle"]);
-    var navItem = React.useRef();
+    var navItem = React.useRef(null);
     var _g = React.useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
     var _h = React.useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
@@ -21741,7 +21770,7 @@ var Provider = Context.Provider;
 var SiteHeaderV2NavItemWithSubNav = function (_a) {
     var _b, _c, _d, _e, _f;
     var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, slot4 = _a.slot4, slot5 = _a.slot5, slot6 = _a.slot6, _g = _a.subTitle, subTitle = _g === void 0 ? null : _g, title = _a.title, onViewAllClick = _a.onViewAllClick, isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "opensFirstWithPanel", "viewAllTitle"]);
-    var navItem = React.useRef();
+    var navItem = React.useRef(null);
     var _h = React.useState(true), defaultItem = _h[0], setDefaultItem = _h[1];
     var _j = React.useState(false), panelOpen = _j[0], setPanelOpen = _j[1];
     var _k = React.useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
@@ -21849,7 +21878,7 @@ var SiteHeaderV2SubNavItem = function (_a) {
     var _b, _c;
     var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, onClick = _a.onClick, offsetXL = _a.offsetXL, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, icon = _a.icon, props = __rest(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "subTitle", "title", "viewAllTitle", "icon"]);
     var navItem = React.useContext(Context).navItem;
-    var subNavItem = React.useRef();
+    var subNavItem = React.useRef(null);
     var _e = React.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     React.useEffect(function () {
@@ -21907,8 +21936,8 @@ var Skeleton = function (_a) {
 };
 
 /** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
-var SkipLink = function (_a, props) {
-    var children = _a.children;
+var SkipLink = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
     return (React.createElement("div", __assign({ className: "arc-SkipLink" }, filterAttrs(props)), children));
 };
 
@@ -22267,8 +22296,8 @@ var Tag = function (_a) {
 };
 
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
-var TextArea = React.forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, isErrorAlert = _a.isErrorAlert, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onFocus", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight", "isErrorAlert"]);
+var TextArea = function (_a) {
+    var ref = _a.ref, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, isErrorAlert = _a.isErrorAlert, props = __rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onFocus", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight", "isErrorAlert"]);
     var surface = React.useContext(Context$3).surface;
     var ourRef = React.useRef(null);
     var _k = React.useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _k[0], setCharacterCount = _k[1];
@@ -22317,13 +22346,13 @@ var TextArea = React.forwardRef(function (_a, ref) {
                 minHeight: minHeight,
                 marginTop: hideLabel ? 0 : undefined,
             }, "aria-describedby": ariaDescribedby, autoComplete: autoComplete })));
-});
+};
 
 // package.json
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "12.1.0",
+  version: "13.0.0",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -23393,9 +23422,9 @@ var Truncate = function (_a) {
 
 /** Use `TypographyCard` for content that benefits from larger and energetic typography. */
 var TypographyCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel"]);
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, _h = _a.headingWordWrap, headingWordWrap = _h === void 0 ? false : _h, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel", "headingWordWrap"]);
     var surface = React.useContext(Context$3).surface;
-    var _h = React.useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
+    var _j = React.useState(false), showHoverState = _j[0], setShowHoverState = _j[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
     return (React.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TypographyCard", {
@@ -23408,7 +23437,7 @@ var TypographyCard = function (_a) {
             label && (React.createElement("div", { className: "arc-TypographyCard-label" },
                 React.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                 React.createElement(VerticalSpace, { size: "16" }))),
-            React.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+            React.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap })),
         React.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
 };
 
@@ -26562,10 +26591,10 @@ var ReactPlayerVimeo = /*@__PURE__*/getDefaultExportFromCjs(vimeoExports);
  * Use `VideoPlayer` to embed videos from YouTube or Vimeo.
  */
 var VideoPlayer = function (_a) {
-    var title = _a.title, description = _a.description, transcriptLink = _a.transcriptLink, transcriptContent = _a.transcriptContent, light = _a.light, url = _a.url, onReady = _a.onReady, onPlay = _a.onPlay, onStart = _a.onStart, onPause = _a.onPause, onError = _a.onError, onEnded = _a.onEnded, _b = _a.isBorderRadius, isBorderRadius = _b === void 0 ? false : _b, _c = _a.isSupportingTextHidden, isSupportingTextHidden = _c === void 0 ? false : _c, props = __rest(_a, ["title", "description", "transcriptLink", "transcriptContent", "light", "url", "onReady", "onPlay", "onStart", "onPause", "onError", "onEnded", "isBorderRadius", "isSupportingTextHidden"]);
+    var title = _a.title, description = _a.description, transcriptLink = _a.transcriptLink, transcriptContent = _a.transcriptContent, light = _a.light, url = _a.url, onReady = _a.onReady, onPlay = _a.onPlay, onStart = _a.onStart, onPause = _a.onPause, onError = _a.onError, onEnded = _a.onEnded, _b = _a.isBorderRadius, isBorderRadius = _b === void 0 ? false : _b, _c = _a.isSupportingTextHidden, isSupportingTextHidden = _c === void 0 ? false : _c, _d = _a.titleWordWrap, titleWordWrap = _d === void 0 ? false : _d, props = __rest(_a, ["title", "description", "transcriptLink", "transcriptContent", "light", "url", "onReady", "onPlay", "onStart", "onPause", "onError", "onEnded", "isBorderRadius", "isSupportingTextHidden", "titleWordWrap"]);
     var TextWrapper = isSupportingTextHidden ? VisuallyHidden$2 : "div";
     var isVimeo = new URL(url).hostname.includes("vimeo");
-    var _d = React.useState(false), isClient = _d[0], setIsClient = _d[1];
+    var _e = React.useState(false), isClient = _e[0], setIsClient = _e[1];
     // https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
     React.useEffect(function () {
         setIsClient(true);
@@ -26596,7 +26625,7 @@ var VideoPlayer = function (_a) {
             : isClient && React.createElement(ReactPlayerYoutube, __assign({}, playerProps))),
         React.createElement(TextWrapper, null,
             React.createElement(VerticalSpace, { size: "24" }),
-            React.createElement(Heading, { level: "3", size: "s" }, title),
+            React.createElement(Heading, { level: "3", size: "s", isWordWrap: titleWordWrap }, title),
             React.createElement(VerticalSpace, { size: "8" }),
             React.createElement(Text, null, description)),
         transcriptLink && (React.createElement(React.Fragment, null,
@@ -26677,14 +26706,14 @@ var NavigationHeaderInlineAction = function (_a) {
             React.createElement(Text, { size: "l" }, text))));
 };
 
-var NavigationHeaderButton = React.forwardRef(function (_a, ref) {
-    var isActive = _a.isActive, children = _a.children, onClick = _a.onClick, _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, props = __rest(_a, ["isActive", "children", "onClick", "isPadded"]);
+var NavigationHeaderButton = function (_a) {
+    var ref = _a.ref, isActive = _a.isActive, children = _a.children, onClick = _a.onClick, _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, props = __rest(_a, ["ref", "isActive", "children", "onClick", "isPadded"]);
     var surface = React.useContext(Context$3).surface;
     return (React.createElement("button", __assign({}, props, { ref: ref, onClick: onClick, className: classNames("arc-NavigationHeaderButton", suffixModifier("arc-NavigationHeaderButton--on", surface), {
             "arc-NavigationHeaderButton--active": isActive,
             "arc-NavigationHeaderButton--padded": isPadded,
         }) }), children));
-});
+};
 
 var NavigationHeaderDisclosure = function (_a) {
     var heading = _a.heading, children = _a.children;
@@ -26730,12 +26759,12 @@ var NavigationHeaderMenuLink = function (_a) {
                     React.createElement(ThemeIcon, { size: 28, icon: "navigationHeaderMenuLinkLarge" })))))));
 };
 
-var NavigationHeaderCloseButton = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, props = __rest(_a, ["onClick"]);
+var NavigationHeaderCloseButton = function (_a) {
+    var ref = _a.ref, onClick = _a.onClick, props = __rest(_a, ["ref", "onClick"]);
     var surface = React.useContext(Context$3).surface;
     return (React.createElement("button", __assign({}, props, { ref: ref, "aria-label": "close", onClick: onClick, className: classNames("arc-NavigationHeaderCloseButton", suffixModifier("arc-NavigationHeaderCloseButton--on", surface)) }),
         React.createElement(ThemeIcon, { size: 32, icon: "navigationHeaderClose" })));
-});
+};
 
 var NavigationHeaderBurgerMenu = function (_a) {
     var navItems = _a.navItems, actions = _a.actions, header = _a.header, footer = _a.footer, logo = _a.logo, background = _a.background, onOpenChange = _a.onOpenChange, _b = _a.pathway, pathway = _b === void 0 ? "invert" : _b;