@arc-ui/components 12.0.0-beta.19 → 12.0.0-beta.20

package/lib/_shared/esm/{MenuSubContent-DCfTtJpf.mjs → MenuItemMultiLevelContent-JTOHqpzg.mjs}

@@ -908,7 +908,7 @@ var MenuSubTrigger = React.forwardRef(
 );
 MenuSubTrigger.displayName = SUB_TRIGGER_NAME$1;
 var SUB_CONTENT_NAME$1 = "MenuSubContent";
-var MenuSubContent$1 = React.forwardRef(
+var MenuSubContent = React.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
     const { forceMount = portalContext.forceMount, ...subContentProps } = props;
@@ -954,7 +954,7 @@ var MenuSubContent$1 = React.forwardRef(
     ) }) }) });
   }
 );
-MenuSubContent$1.displayName = SUB_CONTENT_NAME$1;
+MenuSubContent.displayName = SUB_CONTENT_NAME$1;
 function getOpenState(open) {
   return open ? "open" : "closed";
 }
@@ -1023,7 +1023,7 @@ var Separator = MenuSeparator;
 var Arrow2 = MenuArrow;
 var Sub = MenuSub;
 var SubTrigger = MenuSubTrigger;
-var SubContent = MenuSubContent$1;
+var SubContent = MenuSubContent;
 
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
@@ -1286,11 +1286,11 @@ var MenuContent = React__default.forwardRef(function (_a, ref) {
 });
 
 /**
- * The submenu content that pops out when a menu item with children is hovered or clicked.
+ * The multi-level menu content that pops out when a menu item with children is hovered or clicked.
  */
-var MenuSubContent = React__default.forwardRef(function (_a, ref) {
+var MenuItemMultiLevelContent = React__default.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"]);
-    return (React__default.createElement(SubContent2, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent arc-MenuSubContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
+    return (React__default.createElement(SubContent2, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
 });
 
-export { CheckboxItem2 as C, Group2 as G, Item2 as I, MenuContent as M, Portal2 as P, Root2 as R, Separator2 as S, Trigger as T, RadioGroup2 as a, RadioItem2 as b, Sub2 as c, SubTrigger2 as d, MenuSubContent as e };
+export { CheckboxItem2 as C, Group2 as G, Item2 as I, MenuContent as M, Portal2 as P, Root2 as R, Separator2 as S, Trigger as T, RadioGroup2 as a, RadioItem2 as b, Sub2 as c, SubTrigger2 as d, MenuItemMultiLevelContent as e };

package/lib/_shared/esm/ProgressStepper-CLBtBNy2.mjs

@@ -0,0 +1,74 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { s as svgToMiniDataURI } from './index-CL6dwOYV.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';
+
+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  ";
+
+var Warning = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path\n      d=\"M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n      strokeWidth=\".3\"\n    />\n  </svg>\n";
+
+var Complete = "\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=\"m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath>\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
+
+var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"12\" cy=\"12\" r=\"7\" fill=\"currentColor\" />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_1_1050\"\n        x1=\"36.6036\"\n        y1=\"-4.31391e-07\"\n        x2=\"-12.6036\"\n        y2=\"24\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#F200F5\" />\n        <stop offset=\"1\" stopColor=\"#1EC8E6\" />\n      </linearGradient>\n    </defs>\n  </svg>\n  ";
+
+var ProgressStepperItem = function (_a) {
+    var _b;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var statusIcons = {
+        todo: undefined,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error,
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var statusIcon = statusIcons[status];
+    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
+            _b["arc-ProgressStepperItem--invertLabelPosition"] = direction !== "vertical" && invertLabelPosition,
+            _b)) }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
+                React__default.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
+                        "arc-ProgressStepperItem-statusIcon--small": size === "small",
+                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
+};
+
+/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
+var ProgressStepper = function (_a) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+    var items = React__default.Children.toArray(children);
+    var getStepStatus = function (item) {
+        var _a;
+        return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical",
+        }) }, filterAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
+        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
+};
+
+export { ProgressStepper as P, ProgressStepperItem as a };

package/lib/_shared/esm/ProgressStepperOverflow-B9ba8ljs.mjs

@@ -0,0 +1,140 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { d as debounce } from './debounce-mCD9-ufA.mjs';
+import { P as ProgressStepper } from './ProgressStepper-CLBtBNy2.mjs';
+
+/** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
+var ProgressStepperOverflow = forwardRef(function (_a, stepperRef) {
+    var children = _a.children, onIndexChange = _a.onIndexChange, onLoadStep = _a.onLoadStep, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["children", "onIndexChange", "onLoadStep", "size", "invertLabelPosition", "offsetLeft"]);
+    var _c = useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
+    var _d = useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
+    var _e = useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
+    var containerRef = useRef(null);
+    useImperativeHandle(stepperRef, function () { return ({
+        handleStepScroll: handleStepScroll,
+        scrollToStep: scrollToStep,
+        handleViewScroll: handleViewScroll,
+        isLastChildVisible: isLastChildVisible,
+    }); });
+    // Add Horizontal Scroll Event Listener
+    useEffect(function () {
+        var _a, _b;
+        var checkClosest = debounce(function () {
+            var closestIndex = findClosestIndex();
+            setClosestScrolledIndex(closestIndex);
+        }, 100);
+        var checkLastChild = debounce(function () {
+            var lastVisible = isLastChildVisible();
+            if (lastVisible) {
+                setLastStepVisible(true);
+            }
+            else
+                setLastStepVisible(false);
+        }, 100);
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", checkLastChild);
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", checkClosest);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", checkClosest);
+            checkLastChild.cancel();
+        };
+    }, []);
+    // Scroll to activeIndex
+    useEffect(function () {
+        scrollTo();
+    }, [activeIndex]);
+    // Exposing changes in activeIndex outside of component
+    useEffect(function () {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(closestScrolledIndex);
+        isLastChildVisible();
+    }, [closestScrolledIndex, onIndexChange, lastStepVisible]);
+    // helper functions - start
+    var getProgressStepper = function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.firstChild; };
+    var getStepChildren = function () {
+        var _a;
+        return Array.from(((_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children) || []);
+    };
+    var getLeftRects = function (children) {
+        var container = getProgressStepper();
+        if (!container)
+            return [];
+        var parentRect = container.getBoundingClientRect();
+        return children.map(function (child) {
+            var childRect = child.getBoundingClientRect();
+            return {
+                left: childRect.left - parentRect.left,
+            };
+        });
+    };
+    var indexOfClosest = function (values) {
+        return values.indexOf(Math.min.apply(Math, values));
+    };
+    // helper functions - end
+    var isLastChildVisible = function () {
+        var _a;
+        var steps = getStepChildren();
+        var lastStep = steps[steps.length - 1];
+        var rect = lastStep.getBoundingClientRect();
+        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        return rect.right <= containerRect.right;
+    };
+    // Used for onScroll function of scrolling without buttons
+    var findClosestIndex = function () {
+        var _a, _b;
+        var children = getStepChildren();
+        var scrolledAmount = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        // compare the scrolled amount to the intial left edge distance for each step
+        var getScrollDistances = function (children, scrolledAmount) {
+            return getLeftRects(children).map(function (rect) {
+                return Math.abs(scrolledAmount - rect.left);
+            });
+        };
+        var closestIndex = indexOfClosest(getScrollDistances(children, scrolledAmount));
+        return closestIndex;
+    };
+    // Scroll active step to the far left of the page
+    var scrollTo = function () {
+        var _a, _b;
+        var activeStep = (_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children[activeIndex];
+        if (activeStep) {
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                left: activeStep.offsetLeft - offsetLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    var handleStepScroll = function (increment) {
+        // Account for any manual scrolling set closest index to active index
+        setActiveIndex(closestScrolledIndex);
+        var newIndex = closestScrolledIndex + increment;
+        setActiveIndex(newIndex);
+        // If clicking backwards to include half visible step
+        if (closestScrolledIndex + increment === activeIndex) {
+            scrollTo();
+        }
+        if (closestScrolledIndex + increment < 0) {
+            setActiveIndex(0);
+            scrollTo();
+        }
+    };
+    // Used to scroll by Parent width
+    var handleViewScroll = function (direction) {
+        var _a;
+        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        var stepper = containerRef.current;
+        if (!stepper)
+            return;
+        stepper.scrollBy({
+            left: direction ? clientWidth : -clientWidth,
+            behavior: "smooth",
+        });
+    };
+    // Used to set a specific step to jump to on a button click
+    var scrollToStep = function (step) {
+        setActiveIndex(step);
+    };
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
+        React__default.createElement(ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
+});
+
+export { ProgressStepperOverflow as P };

package/lib/_shared/esm/{RadioCardGroupInput-Cy1r7M8l.mjs → RadioCardGroupInput-D7W28geB.mjs}

@@ -3,7 +3,7 @@ import React__default, { createContext, useContext, forwardRef } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { c as capitaliseFirstLetter } from './capitalise-first-letter-Cubg2CS1.mjs';
 import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 
 var RadioContext = createContext({});
 var Provider = RadioContext.Provider;

package/lib/_shared/esm/{SiteHeaderV2NavItemWithSubNav-B9hz5IKd.mjs → SiteHeaderV2NavItemWithSubNav-BMoBdUxK.mjs}

@@ -1,12 +1,12 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { createContext, useState, useRef, useEffect, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { d as ArcSizeBreakpointsL } from './index.es-DZ9WSYOo.mjs';
+import { c as ArcSizeBreakpointsL } from './index.es-DCvYtQfu.mjs';
 import { a as BtIconChevronRight2Px, B as BtIconChevronLeft2Px } from './BtIconChevronRight2Px-DzWb16fR.mjs';
 import { u as useMediaQuery } from './use-media-query-DmKuIDEM.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { S as Surface } from './Surface-Colbp3Zx.mjs';
-import { B as ButtonV2 } from './ButtonV2-2U4PvnpS.mjs';
+import { B as ButtonV2 } from './ButtonV2-DwYBAojW.mjs';
 import { h as handleLinkClick } from './handle-link-click-CIgZ7pa0.mjs';
 import { B as BrandLogo } from './BrandLogo-_2Z_8I2Y.mjs';
 

package/lib/_shared/esm/{TemplateBanner-CS95cxio.mjs → TemplateBanner-Up6cR-3_.mjs}

@@ -1,17 +1,25 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { A as ArcSizeBreakpointsM } from './index.es-DZ9WSYOo.mjs';
-import { u as useMediaQuery } from './use-media-query-DmKuIDEM.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 { G as Grid, b as GridRow, a as GridCol } from './GridRow-Ddt5CtFn.mjs';
+import { b as GridRow, G as Grid, a as GridCol } from './GridRow-Ddt5CtFn.mjs';
+import './index-Spae4j7j.mjs';
 import { B as BannerImage } from './BannerImage-BTsixvUH.mjs';
+import { V as Visible } from './Visible-C-jVXUWp.mjs';
+
+var BannerRow = function (_a) {
+    var isReversed = _a.isReversed, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Visible, { xs: true, s: true },
+            React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow-mobile" }, children)),
+        React__default.createElement(Visible, { m: true, l: true, xl: true },
+            React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow-desktop", direction: isReversed ? "row-reverse" : "row" }, children))));
+};
 
 var TemplateBanner = 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, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -24,7 +32,6 @@ var TemplateBanner = function (_a) {
     };
     var isContained = type === "contained";
     var borderWidth = isContained && !isElevated ? "thin" : undefined;
-    var direction = isReversed && isMinWidthArcBreakpointM ? "row-reverse" : "row";
     var columnWithImgWidths = {
         "1/0": 12,
         "2/3": 8,
@@ -35,7 +42,7 @@ var TemplateBanner = function (_a) {
         }) }, filterAttrs(props)),
         React__default.createElement(Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
             React__default.createElement(Grid, { isGutterless: true, isFluid: true },
-                React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow", direction: direction },
+                React__default.createElement(BannerRow, { "data-testid": "arc-TemplateBanner-gridRow", isReversed: isReversed },
                     React__default.createElement(GridCol, { "data-testid": "arc-TemplateBanner-contentCol", align: {
                             m: alignment === "start" ? "start" : "center",
                             xs: !img || contentRatio === "1/0" ? "center" : "start",
@@ -44,7 +51,7 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
+                                React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
                                 React__default.createElement(VerticalSpace, { size: "8" }))),
                             React__default.createElement(Heading, { level: headingLevel, size: headingSize }, heading),
                             text && (React__default.createElement(React__default.Fragment, null,

package/lib/_shared/esm/Visible-C-jVXUWp.mjs

@@ -0,0 +1,16 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+
+var Visible = function (_a) {
+    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Visible", {
+            "arc-Visible--xs": xs,
+            "arc-Visible--s": s,
+            "arc-Visible--m": m,
+            "arc-Visible--l": l,
+            "arc-Visible--xl": xl,
+        }) }, filterAttrs(props)), children));
+};
+
+export { Visible as V };

package/lib/_shared/esm/{index.es-DZ9WSYOo.mjs → index.es-DCvYtQfu.mjs}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Jun 2025 09:53:42 GMT
+ * Generated on Mon, 21 Jul 2025 12:02:37 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -9,4 +9,4 @@ var ArcSizeBreakpointsL = "1024px";
 var ArcSizeBreakpointsXl = "1280px";
 var ArcSizeBreakpointsXxl = "1440px";
 
-export { ArcSizeBreakpointsM as A, ArcSizeBreakpointsS as a, ArcSizeBreakpointsXxl as b, ArcSizeBreakpointsXl as c, ArcSizeBreakpointsL as d, ArcSizeBreakpointsXs as e };
+export { ArcSizeBreakpointsM as A, ArcSizeBreakpointsXxl as a, ArcSizeBreakpointsXl as b, ArcSizeBreakpointsL as c, ArcSizeBreakpointsS as d, ArcSizeBreakpointsXs as e };