@arc-ui/components 12.0.0-beta.23 → 12.0.0-beta.24

package/lib/_shared/esm/{ContentSwitcherDropdown-BCkuAfwC.mjs → ContentSwitcherDropdown-DgrN4Bdb.mjs}

@@ -1,20 +1,24 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
-import React__default, { useState, isValidElement } from 'react';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useState, useEffect, isValidElement } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { R as Root2, T as Trigger, V as Value, I as Icon, P as Portal, C as Content2, S as ScrollUpButton, a as Viewport, b as Item, c as ItemText, d as ItemIndicator, e as ScrollDownButton } from './index-CYUcQl4W.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+import { R as Root2, T as Trigger, V as Value, I as Icon, P as Portal, C as Content2, S as ScrollUpButton, a as Viewport, b as Item, c as ItemText, d as ItemIndicator, e as ScrollDownButton } from './index-vnVJe9rH.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
 import { e as useThemeElement } from './index-Bz2JQq34.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
 
 // src/get-text-width/get-text-width.ts
 var getTextWidth = (text, font) => {
+  if (typeof document === "undefined") {
+    return 236;
+  }
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d");
   if (context) {
     context.font = getComputedStyle(document.body).font;
     return context.measureText(text).width;
   }
-  return 0;
+  return 236;
 };
 
 var ContentSwitcherDropdown = function (_a) {
@@ -22,15 +26,22 @@ var ContentSwitcherDropdown = function (_a) {
     var initialValue = defaultValue || tabs[0].value;
     var _d = useThemeElement(), themeElement = _d[0], setThemeElement = _d[1];
     var _e = useState(initialValue), uncontrolledValue = _e[0], setUncontrolledValue = _e[1];
+    var _f = useState(236), longestLabelWidth = _f[0], setLongestLabelWidth = _f[1];
+    // compute longest width client side
+    useEffect(function () {
+        if (tabs.length === 0)
+            return;
+        var longestLabel = tabs.reduce(function (longest, current) {
+            return current.label.length > longest.length ? current.label : longest;
+        }, "");
+        setLongestLabelWidth(getTextWidth(longestLabel));
+    }, [tabs]);
     var isControlled = typeof value !== "undefined";
     var selectValue = isControlled ? value : uncontrolledValue;
     var onValueChangeHandler = function (value) {
         onValueChange && onValueChange(value);
         setUncontrolledValue(value);
     };
-    var LongestLabelWidth = getTextWidth(tabs.reduce(function (longest, current) {
-        return current.label.length > longest.length ? current.label : longest;
-    }, ""));
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Root2, { defaultValue: defaultValue, onValueChange: onValueChangeHandler, value: selectValue },
             React__default.createElement("span", __assign({ className: classNames("arc-ContentSwitcherDropdown-selectTriggerWrapper", {
@@ -38,7 +49,7 @@ var ContentSwitcherDropdown = function (_a) {
                     "arc-ContentSwitcherDropdown-selectTriggerWrapper--isFluid": isFluid,
                 }), ref: setThemeElement }, (!isFluid && {
                 style: {
-                    width: width ? width : LongestLabelWidth + 84,
+                    width: width ? width : longestLabelWidth + 84,
                 },
             }), filterAttrs(props)),
                 React__default.createElement(Trigger, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },

package/lib/_shared/esm/{ContentSwitcherList-DwHfU3no.mjs → ContentSwitcherList-i4m4nAzP.mjs}

@@ -1,7 +1,8 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
 import { $ as $69cb30bb0017df05$export$be92b6f5f03c0fe9, a as $69cb30bb0017df05$export$41fb9f06171c75f4, b as $69cb30bb0017df05$export$7c6e2c02157bb7d2, c as $69cb30bb0017df05$export$54c2e3dc7acea9f5 } from './index-BWkI4Dwz.mjs';
-import { T as Text } from './Text-CBlnm5CT.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { T as Text } from './Text-BAzOkkzN.mjs';
 import { d as debounce } from './debounce-D_Nx5go6.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 
@@ -13,8 +14,8 @@ var ContentSwitcher = function (_a) {
 };
 
 var ContentSwitcherTab = forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, onClick = _a.onClick, props = __rest(_a, ["label", "value", "onClick"]);
-    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, filterAttrs(props)),
+    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, props = __rest(_a, ["label", "value", "onClick", "onFocus"]);
+    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs(props)),
         React__default.createElement(Text, { size: "m" }, label)));
 });
 
@@ -88,6 +89,9 @@ var ContentSwitcherList = function (_a) {
                         onClick: function () {
                             return scrollTabIntoView({ current: tabRefs.current[index] });
                         },
+                        onFocus: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        },
                     });
                 }
                 else {

package/lib/_shared/esm/{DisclosureMini-B9LzsQC2.mjs → DisclosureMini-ClSe9sSt.mjs}

@@ -1,9 +1,10 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext, useState } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { T as Text } from './Text-CBlnm5CT.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { T as Text } from './Text-BAzOkkzN.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
 
 /**
  * Use `DisclosureMini` to show and hide sections of content.

package/lib/_shared/esm/{Download-DFz_1HCG.mjs → Download-BD8Bigeq.mjs}

@@ -1,12 +1,14 @@
-import { a as __assign } from './filter-attrs-B6CM-NUr.mjs';
-import React__default from 'react';
+import { a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { T as Text } from './Text-CBlnm5CT.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
-import { V as VerticalSpace } from './VerticalSpace-Duhm0zXP.mjs';
+import { T as Text } from './Text-BAzOkkzN.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
+import { V as VerticalSpace } from './VerticalSpace-BLWB02I7.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
 
 var Download = function (_a) {
     var name = _a.name, onClick = _a.onClick, description = _a.description, href = _a.href, type = _a.type, size = _a.size, _b = _a.icon, icon = _b === void 0 ? "downloadFile" : _b, _c = _a.isCompact, isCompact = _c === void 0 ? false : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? true : _d;
+    var surface = useContext(Context).surface;
     var linkProps = href
         ? {
             href: href,
@@ -20,6 +22,7 @@ var Download = function (_a) {
     return (React__default.createElement("a", __assign({}, linkProps, { className: classNames("arc-Download", {
             "arc-Download--maxContent": !isFullWidth,
             "arc-Download--compact": isCompact,
+            "arc-Download--onDarkSurface": surface === "dark",
         }), "aria-label": name, onClick: onClick }),
         React__default.createElement("div", { className: "arc-Download-iconContainer" },
             React__default.createElement(ThemeIcon, { size: isCompact ? 40 : 64, icon: icon })),

package/lib/_shared/esm/{FormControl-CWyrVi1u.mjs → FormControl-Pc1aHUNM.mjs}

@@ -1,10 +1,11 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { createContext, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { C as Context$1 } from './Surface-Colbp3Zx.mjs';
-import { D as DisclosureMini } from './DisclosureMini-B9LzsQC2.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context$1 } from './Surface-C69KVzkY.mjs';
+import { D as DisclosureMini } from './DisclosureMini-ClSe9sSt.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
@@ -43,14 +44,14 @@ var Provider = Context.Provider;
  */
 var FormControl = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? "top" : _e, _f = _a.requirementStatus, requirementStatus = _f === void 0 ? "optional" : _f, _g = _a.helperUnderLabel, helperUnderLabel = _g === void 0 ? false : _g, isDisabled = _a.isDisabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? "top" : _e, _f = _a.requirementStatus, requirementStatus = _f === void 0 ? "optional" : _f, _g = _a.helperUnderLabel, helperUnderLabel = _g === void 0 ? false : _g, isDisabled = _a.isDisabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _j = _a.isErrorAlert, isErrorAlert = _j === void 0 ? false : _j, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure", "isErrorAlert"]);
     var surface = useContext(Context$1).surface;
-    var _j = useAriaDescribedby({
+    var _k = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id, // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError, idHelper = _j.idHelper, idDisclosure = _j.idDisclosure;
+    }), ariaDescribedby = _k.ariaDescribedby, idError = _k.idError, idHelper = _k.idHelper, idDisclosure = _k.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -91,7 +92,8 @@ var FormControl = function (_a) {
                 label && (React__default.createElement("span", { className: classNames("arc-FormControl-labelText", {
                         "arc-FormControl-labelText--withOptional": requirementStatus === "optional",
                     }) }, label)),
-                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
+                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")),
+                LabelType === "legend" && (React__default.createElement(VisuallyHidden, null, "".concat(errorMessage ? "Error. " + errorMessage : "", ". ").concat(helper))))),
             helperUnderLabel && helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
             children,
             React__default.createElement("div", { className: classNames("arc-FormControl-info", {
@@ -99,8 +101,9 @@ var FormControl = function (_a) {
                 }) },
                 ((helper && !helperUnderLabel) ||
                     errorMessage ||
-                    disclosureTitle) && (React__default.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
+                    disclosureTitle) && (React__default.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError, role: isErrorAlert ? "alert" : undefined },
                     React__default.createElement("span", { className: "arc-FormControl-error--icon" },
+                        React__default.createElement(VisuallyHidden, null, "Error."),
                         React__default.createElement(ThemeIcon, { icon: "formControlAlert" })),
                     errorMessage)) : (!helperUnderLabel &&
                     (disclosureTitle ? (React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize === "m" ? "l" : labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),

package/lib/_shared/esm/{GridRow-Ddt5CtFn.mjs → GridRow-vjacXnq0.mjs}

@@ -1,10 +1,11 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
 
 /**
- * Use `Grid` to compose layouts on a 12-column grid.
+ * Use `Grid` to compose layouts on a 12-column grid. Aligns with sibling `Section` components.
  */
 var Grid = function (_a) {
     var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, _b = _a.isExtended, isExtended = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless", "isExtended"]);

package/lib/_shared/esm/{Heading-CxHWefi7.mjs → Heading-B9cbwfoz.mjs}

@@ -1,22 +1,21 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { c as camelcase } from './index-Spae4j7j.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { S as SemanticHeading } from './SemanticHeading-1tLcSJYD.mjs';
 
 /**
  * Use `Heading` to display heading text.
  */
 var Heading = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, _e = _a.color, color = _e === void 0 ? "auto" : _e, children = _a.children, level = _a.level, isInline = _a.isInline, _f = _a.fontStyle, fontStyle = _f === void 0 ? "default" : _f, _g = _a.isResponsive, isResponsive = _g === void 0 ? true : _g, size = _a.size, id = _a.id, props = __rest(_a, ["align", "casing", "color", "children", "level", "isInline", "fontStyle", "isResponsive", "size", "id"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, _e = _a.color, color = _e === void 0 ? "auto" : _e, children = _a.children, level = _a.level, isInline = _a.isInline, _f = _a.fontStyle, fontStyle = _f === void 0 ? "default" : _f, _g = _a.isResponsive, isResponsive = _g === void 0 ? true : _g, _h = _a.isWordWrap, isWordWrap = _h === void 0 ? true : _h, size = _a.size, id = _a.id, props = __rest(_a, ["align", "casing", "color", "children", "level", "isInline", "fontStyle", "isResponsive", "isWordWrap", "size", "id"]);
     var surface = useContext(Context).surface;
-    var Element = "span";
-    if (level) {
-        Element = "h".concat(level);
-    }
-    return (React__default.createElement(Element, __assign({ id: id, className: classNames(" arc-Heading arc-Heading--".concat(camelcase(fontStyle)), (_b = {
+    return (React__default.createElement(SemanticHeading, __assign({ id: id, level: level, className: classNames("arc-Heading", "arc-Heading--".concat(camelcase(fontStyle)), (_b = {
+                "arc-Heading--wrap": isWordWrap,
                 "arc-Heading--inline": isInline,
                 "arc-Heading--fixedSize": isResponsive === false
             },

package/lib/_shared/esm/{Hidden-DsrAaC0z.mjs → Hidden-CGRhG3dU.mjs}

@@ -1,6 +1,7 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 var Hidden = function (_a) {
     var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, xxl = _a.xxl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl", "xxl"]);

package/lib/_shared/esm/{Icon-CcPOJcQm.mjs → Icon-CCUbr_AO.mjs}

@@ -1,8 +1,9 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
 
 /**
  * Use `Icon` to display brand iconography.

package/lib/_shared/esm/{Image-Dl8oH1Rn.mjs → Image-LemsonUX.mjs}

@@ -1,7 +1,8 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useState } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /**
  * Use `Image` to render a single image, or set of images, with support for
@@ -9,7 +10,7 @@ import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
  */
 var Image = function (_a) {
     var _b;
-    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fetchPriority = _a.fetchPriority, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fetchPriority", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     var _e = useState(false), visible = _e[0], setVisible = _e[1];
     var imageRef = function (el) {
         if (el) {
@@ -20,7 +21,7 @@ var Image = function (_a) {
         "arc-Image-img--fade": fadeOnLoad,
         "arc-Image-img--fadeVisible": fadeOnLoad && visible,
     };
-    var img = (React__default.createElement("img", { ref: imageRef, className: classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    var img = (React__default.createElement("img", { ref: imageRef, className: classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width, fetchPriority: fetchPriority }));
     return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"

package/lib/_shared/esm/{Link-DxjGH_7f.mjs → Link-ogbR4K3O.mjs}

@@ -1,9 +1,10 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
 
 /**
  * Use `Link` to direct users to a new page or piece of information.

package/lib/_shared/esm/{Popover-8FfvgL4c.mjs → Popover-D0ePWPz_.mjs}

@@ -1,14 +1,15 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { R as Root2, A as Anchor2, T as Trigger, P as Portal, C as Content2, a as PopoverArrow } from './index-CxrL7jIX.mjs';
+import { R as Root2, A as Anchor2, T as Trigger, P as Portal, C as Content2, a as PopoverArrow } from './index-Do2wfP-X.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { e as useThemeElement } from './index-Bz2JQq34.mjs';
-import { S as Surface } from './Surface-Colbp3Zx.mjs';
+import { S as Surface } from './Surface-C69KVzkY.mjs';
 
 /** 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, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, side = _a.side, _f = _a.sideOffset, sideOffset = _f === void 0 ? 0 : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.hideWhenDetached, hideWhenDetached = _h === void 0 ? false : _h, _j = _a.useBespokeTrigger, useBespokeTrigger = _j === void 0 ? false : _j, props = __rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
-    var _k = useThemeElement(), themeElement = _k[0], setThemeElement = _k[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, 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 alignOffsetDefault = align === "center" ? 0 : -16;
     return (React__default.createElement("div", __assign({ className: "arc-Popover" }, filterAttrs(props)),
         React__default.createElement(Root2, { open: open, onOpenChange: onOpenChange },
@@ -21,7 +22,8 @@ var Popover = function (_a) {
                                 React__default.createElement("div", { className: classNames("arc-Popover-content", {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
-                                    }), style: { maxWidth: maxWidth }, "aria-labelledby": "popover-content" },
+                                        "arc-Popover-content--constrainToViewport": constrainToViewport,
+                                    }), style: { maxWidth: maxWidth, minHeight: minHeight }, "aria-labelledby": "popover-content" },
                                     content && React__default.createElement("div", { id: "popover-content" }, content),
                                     arrow && (React__default.createElement(PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
 };

package/lib/_shared/esm/{ProgressStepper-CLBtBNy2.mjs → ProgressStepper-CujHLQsm.mjs}

@@ -1,10 +1,142 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
-import { c as classNames } from './index-5C0-U8cc.mjs';
-import { s as svgToMiniDataURI } from './index-CL6dwOYV.mjs';
+import { g as getDefaultExportFromCjs, c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { c as capitaliseFirstLetter } from './capitalise-first-letter-Cubg2CS1.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { I as Icon } from './Icon-CCUbr_AO.mjs';
+
+var shorterCssColorNames;
+var hasRequiredShorterCssColorNames;
+
+function requireShorterCssColorNames () {
+	if (hasRequiredShorterCssColorNames) return shorterCssColorNames;
+	hasRequiredShorterCssColorNames = 1;
+	shorterCssColorNames = {
+	  aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  azure: /#f0ffff(ff)?(?!\w)/gi,
+	  beige: /#f5f5dc(ff)?(?!\w)/gi,
+	  bisque: /#ffe4c4(ff)?(?!\w)/gi,
+	  black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
+	  blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
+	  brown: /#a52a2a(ff)?(?!\w)/gi,
+	  coral: /#ff7f50(ff)?(?!\w)/gi,
+	  cornsilk: /#fff8dc(ff)?(?!\w)/gi,
+	  crimson: /#dc143c(ff)?(?!\w)/gi,
+	  cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  darkblue: /#00008b(ff)?(?!\w)/gi,
+	  darkcyan: /#008b8b(ff)?(?!\w)/gi,
+	  darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
+	  darkred: /#8b0000(ff)?(?!\w)/gi,
+	  deeppink: /#ff1493(ff)?(?!\w)/gi,
+	  dimgrey: /#696969(ff)?(?!\w)/gi,
+	  gold: /#ffd700(ff)?(?!\w)/gi,
+	  green: /#008000(ff)?(?!\w)/gi,
+	  grey: /#808080(ff)?(?!\w)/gi,
+	  honeydew: /#f0fff0(ff)?(?!\w)/gi,
+	  hotpink: /#ff69b4(ff)?(?!\w)/gi,
+	  indigo: /#4b0082(ff)?(?!\w)/gi,
+	  ivory: /#fffff0(ff)?(?!\w)/gi,
+	  khaki: /#f0e68c(ff)?(?!\w)/gi,
+	  lavender: /#e6e6fa(ff)?(?!\w)/gi,
+	  lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
+	  linen: /#faf0e6(ff)?(?!\w)/gi,
+	  maroon: /#800000(ff)?(?!\w)/gi,
+	  moccasin: /#ffe4b5(ff)?(?!\w)/gi,
+	  navy: /#000080(ff)?(?!\w)/gi,
+	  oldlace: /#fdf5e6(ff)?(?!\w)/gi,
+	  olive: /#808000(ff)?(?!\w)/gi,
+	  orange: /#ffa500(ff)?(?!\w)/gi,
+	  orchid: /#da70d6(ff)?(?!\w)/gi,
+	  peru: /#cd853f(ff)?(?!\w)/gi,
+	  pink: /#ffc0cb(ff)?(?!\w)/gi,
+	  plum: /#dda0dd(ff)?(?!\w)/gi,
+	  purple: /#800080(ff)?(?!\w)/gi,
+	  red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
+	  salmon: /#fa8072(ff)?(?!\w)/gi,
+	  seagreen: /#2e8b57(ff)?(?!\w)/gi,
+	  seashell: /#fff5ee(ff)?(?!\w)/gi,
+	  sienna: /#a0522d(ff)?(?!\w)/gi,
+	  silver: /#c0c0c0(ff)?(?!\w)/gi,
+	  skyblue: /#87ceeb(ff)?(?!\w)/gi,
+	  snow: /#fffafa(ff)?(?!\w)/gi,
+	  tan: /#d2b48c(ff)?(?!\w)/gi,
+	  teal: /#008080(ff)?(?!\w)/gi,
+	  thistle: /#d8bfd8(ff)?(?!\w)/gi,
+	  tomato: /#ff6347(ff)?(?!\w)/gi,
+	  violet: /#ee82ee(ff)?(?!\w)/gi,
+	  wheat: /#f5deb3(ff)?(?!\w)/gi,
+	  white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
+	};
+	return shorterCssColorNames;
+}
+
+var miniSvgDataUri;
+var hasRequiredMiniSvgDataUri;
+
+function requireMiniSvgDataUri () {
+	if (hasRequiredMiniSvgDataUri) return miniSvgDataUri;
+	hasRequiredMiniSvgDataUri = 1;
+	var shorterNames = requireShorterCssColorNames();
+	var REGEX = {
+	  whitespace: /\s+/g,
+	  urlHexPairs: /%[\dA-F]{2}/g,
+	  quotes: /"/g,
+	};
+
+	function collapseWhitespace(str) {
+	  return str.trim().replace(REGEX.whitespace, ' ');
+	}
+
+	function dataURIPayload(string) {
+	  return encodeURIComponent(string)
+	    .replace(REGEX.urlHexPairs, specialHexEncode);
+	}
+
+	// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
+	// their equivalent URL-encoded hex codes.
+	function colorCodeToShorterNames(string) {
+	  Object.keys(shorterNames).forEach(function(key) {
+	    if (shorterNames[key].test(string)) {
+	      string = string.replace(shorterNames[key], key);
+	    }
+	  });
+
+	  return string;
+	}
+
+	function specialHexEncode(match) {
+	  switch (match) { // Browsers tolerate these characters, and they're frequent
+	    case '%20': return ' ';
+	    case '%3D': return '=';
+	    case '%3A': return ':';
+	    case '%2F': return '/';
+	    default: return match.toLowerCase(); // compresses better
+	  }
+	}
+
+	function svgToTinyDataUri(svgString) {
+	  if (typeof svgString !== 'string') {
+	    throw new TypeError('Expected a string, but received ' + typeof svgString);
+	  }
+	  // Strip the Byte-Order Mark if the SVG has one
+	  if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1); }
+
+	  var body = colorCodeToShorterNames(collapseWhitespace(svgString))
+	    .replace(REGEX.quotes, "'");
+	  return 'data:image/svg+xml,' + dataURIPayload(body);
+	}
+
+	svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
+	  return svgToTinyDataUri(svgString).replace(/ /g, '%20');
+	};
+
+	miniSvgDataUri = svgToTinyDataUri;
+	return miniSvgDataUri;
+}
+
+var miniSvgDataUriExports = requireMiniSvgDataUri();
+var svgToMiniDataURI = /*@__PURE__*/getDefaultExportFromCjs(miniSvgDataUriExports);
 
 var Error = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"a\">\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
 

package/lib/_shared/esm/{Rule-3gdMHH-R.mjs → Rule-I1w3EaZi.mjs}

@@ -1,7 +1,8 @@
-import { a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
 
 /**
  * Use `Rule` to display a horizontal or vertical rule.

package/lib/_shared/esm/{Section-7InCvzfh.mjs → Section-COc1l3mp.mjs}

@@ -1,6 +1,7 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /**
  * Use `Section` to compose content into vertical page layouts.

package/lib/_shared/esm/SemanticHeading-1tLcSJYD.mjs

@@ -0,0 +1,10 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+
+var SemanticHeading = function (_a) {
+    var children = _a.children, level = _a.level, className = _a.className, props = __rest(_a, ["children", "level", "className"]);
+    return React__default.createElement(level ? "h".concat(level) : "span", __assign({ className: classNames("arc-SemanticHeading", className) }, props), children);
+};
+
+export { SemanticHeading as S };

package/lib/_shared/esm/{Spinner-Cd7LiPTy.mjs → Spinner-DvngCIwx.mjs}

@@ -1,6 +1,7 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /**
  * Use `Spinner` to display a loading state.

package/lib/_shared/esm/{Surface-Colbp3Zx.mjs → Surface-C69KVzkY.mjs}

@@ -1,7 +1,8 @@
-import { b as __spreadArray, _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { b as __spreadArray, _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { createContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { c as camelcase } from './index-Spae4j7j.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 var defaultContext = { surface: "light" };
 var Context = createContext(defaultContext);

package/lib/_shared/esm/{TemplateBanner-Dkgzu3A5.mjs → TemplateBanner-DEYOSosH.mjs}

@@ -1,13 +1,14 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { V as VerticalSpace } from './VerticalSpace-Duhm0zXP.mjs';
-import { B as Box } from './Box-BYm_GTct.mjs';
-import { H as Heading } from './Heading-CxHWefi7.mjs';
-import { b as GridRow, G as Grid, a as GridCol } from './GridRow-Ddt5CtFn.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { V as VerticalSpace } from './VerticalSpace-BLWB02I7.mjs';
+import { B as Box } from './Box-C8iK8x5c.mjs';
+import { H as Heading } from './Heading-B9cbwfoz.mjs';
+import { b as GridRow, G as Grid, a as GridCol } from './GridRow-vjacXnq0.mjs';
 import './index-Spae4j7j.mjs';
-import { B as BannerImage } from './BannerImage-BTsixvUH.mjs';
-import { V as Visible } from './Visible-B13QJn7R.mjs';
+import { B as BannerImage } from './BannerImage-CgjgaYkJ.mjs';
+import { V as Visible } from './Visible-B0d79VWZ.mjs';
 
 var BannerRow = function (_a) {
     var isReversed = _a.isReversed, children = _a.children;
@@ -19,7 +20,7 @@ var BannerRow = function (_a) {
 };
 
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, label = _a.label, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, img = _a.img, _c = _a.contentRatio, contentRatio = _c === void 0 ? "1/1" : _c, children = _a.children, _d = _a.alignment, alignment = _d === void 0 ? "center" : _d, additionalTopMargin = _a.additionalTopMargin, _e = _a.minHeight, minHeight = _e === void 0 ? 454 : _e, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _f = _a.headingSize, headingSize = _f === void 0 ? "xl" : _f, _g = _a.isReversed, isReversed = _g === void 0 ? false : _g, _h = _a.isElevated, isElevated = _h === void 0 ? false : _h, _j = _a.headingLevel, headingLevel = _j === void 0 ? "2" : _j, _k = _a.type, type = _k === void 0 ? "light" : _k, props = __rest(_a, ["heading", "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.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 backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -62,13 +63,13 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
+                                React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false }, label),
                                 React__default.createElement(VerticalSpace, { size: "8" }))),
-                            React__default.createElement(Heading, { level: headingLevel, size: headingSize }, heading),
+                            React__default.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: false }, heading),
                             text && (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement(VerticalSpace, { size: "16" }),
                                 React__default.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
-                            children && (React__default.createElement(React__default.Fragment, null,
+                            children && (React__default.createElement("span", null,
                                 React__default.createElement(VerticalSpace, { size: "32" }),
                                 children)))),
                     img && contentRatio !== "1/0" && (React__default.createElement(GridCol, __assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"