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

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

@@ -42,14 +42,15 @@ var Provider = Context.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? "top" : _d, _e = _a.requirementStatus, requirementStatus = _e === void 0 ? "optional" : _e, _f = _a.helperUnderLabel, helperUnderLabel = _f === void 0 ? false : _f, isDisabled = _a.isDisabled, _g = _a.hideLabel, hideLabel = _g === void 0 ? false : _g, 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 _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 surface = useContext(Context$1).surface;
-    var _h = useAriaDescribedby({
+    var _j = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id, // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _h.ariaDescribedby, idError = _h.idError, idHelper = _h.idHelper, idDisclosure = _h.idDisclosure;
+    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError, idHelper = _j.idHelper, idDisclosure = _j.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -69,22 +70,27 @@ var FormControl = function (_a) {
         ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
         : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React__default.createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React__default.createElement(ElementType, __assign({ className: classNames({
-                "arc-FormControl": true,
-                "arc-FormControl--isDisabled": isDisabled,
-                "arc-FormControl--smallLabel": labelSize === "s",
-                "arc-FormControl--onDarkSurface": surface === "dark",
-                "arc-FormControl--sideLabel": labelPosition === "left",
-            }), id: id }, elementProps, filterAttrs(props)),
+        React__default.createElement(ElementType, __assign({ className: classNames((_b = {
+                    "arc-FormControl": true,
+                    "arc-FormControl--isDisabled": isDisabled,
+                    "arc-FormControl--onDarkSurface": surface === "dark",
+                    "arc-FormControl--sideLabel": labelPosition === "left"
+                },
+                _b["arc-FormControl--".concat(labelSize)] = labelSize !== "l",
+                _b)), id: id }, elementProps, filterAttrs(props)),
             hideLabel === true ? (React__default.createElement(VisuallyHidden, null,
                 React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
                         "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                     }) }, labelProps),
-                    label,
+                    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)"))))) : (React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
                     "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                 }) }, labelProps),
-                label,
+                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)")))),
             helperUnderLabel && helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
             children,
@@ -97,7 +103,7 @@ var FormControl = function (_a) {
                     React__default.createElement("span", { className: "arc-FormControl-error--icon" },
                         React__default.createElement(ThemeIcon, { icon: "formControlAlert" })),
                     errorMessage)) : (!helperUnderLabel &&
-                    (disclosureTitle ? (React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
+                    (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))))))),
                 supplementaryInfo && (React__default.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 

package/lib/_shared/esm/{HeroButton-HYskwyvn.mjs → HeroButton-jdjjV_Gf.mjs}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6C
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { c as camelcase } from './index-Spae4j7j.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { C as Context } from './Surface-Colbp3Zx.mjs';
 import { S as Spinner } from './Spinner-Cd7LiPTy.mjs';
 

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

@@ -27,10 +27,10 @@ var Icon = function (_a) {
 var colors = [
     "auto",
     "brand",
+    "brand-alt",
     "statusRed",
     "statusAmber",
     "statusGreen",
-    "gradient",
 ];
 
 export { Icon as I, colors as c };

package/lib/_shared/esm/{MediaCard-CjTDOvmx.mjs → MediaCard-DqMaNWsE.mjs}

@@ -1,15 +1,13 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { useContext, useState, useEffect, Suspense } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { a as ArcSizeBreakpointsS } from './index.es-C3WGtwrW.mjs';
-import { u as useMediaQuery } from './use-media-query-DmKuIDEM.mjs';
 import { I as Image } from './Image-Dl8oH1Rn.mjs';
 import { H as Heading } from './Heading-CxHWefi7.mjs';
 import { C as Context, S as Surface } from './Surface-Colbp3Zx.mjs';
 import { T as Text } from './Text-CBlnm5CT.mjs';
 import { V as VerticalSpace } from './VerticalSpace-Duhm0zXP.mjs';
 import { C as CardHeading } from './CardHeading-_setRRjq.mjs';
-import { C as CardFooter } from './CardFooter-CgDDDI7Z.mjs';
+import { C as CardFooter } from './CardFooter-fsAY4cc6.mjs';
 import { C as ConditionalWrapper } from './ConditionalWrapper-WoJxFYwS.mjs';
 
 var VideoPlayer = React__default.lazy(function () {
@@ -28,8 +26,6 @@ var MediaCard = function (_a) {
     var surface = useContext(Context).surface;
     var _e = useState(false), isClient = _e[0], setIsClient = _e[1];
     var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
-    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     useEffect(function () {
         setIsClient(true);
@@ -45,12 +41,12 @@ var MediaCard = function (_a) {
             media.type === "video" && isClient && (React__default.createElement(Suspense, { fallback: null },
                 React__default.createElement(VideoPlayer, __assign({ isSupportingTextHidden: true }, media)))),
             React__default.createElement("div", { className: "arc-MediaCard-content" },
-                label && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
+                label && (React__default.createElement("div", { className: "arc-MediaCard-label" },
+                    React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
+                    React__default.createElement(VerticalSpace, { size: "16" }))),
                 React__default.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__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
+                    React__default.createElement(VerticalSpace, { size: "16" }),
                     React__default.createElement(Text, null, text),
                     (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
                 React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));

package/lib/_shared/esm/{MenuSubContent-Cv9mSn58.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(
@@ -1268,7 +1268,6 @@ var Trigger = DropdownMenuTrigger;
 var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Group2 = DropdownMenuGroup;
-var Label2 = DropdownMenuLabel;
 var Item2 = DropdownMenuItem;
 var CheckboxItem2 = DropdownMenuCheckboxItem;
 var RadioGroup2 = DropdownMenuRadioGroup;
@@ -1287,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, Label2 as L, 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/{RadioGroupInput-DiRS2jwQ.mjs → RadioGroupInput-zAWSV29m.mjs}

@@ -40,11 +40,11 @@ var RadioGroupButton = forwardRef(function (_a, ref) {
  */
 var RadioGroupInput = 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, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value"]);
-    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, labelSize = _c.labelSize, name = _c.name, size = _c.size;
+    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__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, labelSize: labelSize, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
+    return (React__default.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 }, props)));
 });
 
 export { Provider as P, RadioGroupButton as R, RadioGroupInput as a };

package/lib/_shared/esm/{SiteHeaderV2NavItemWithSubNav-BLqiSeEC.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-C3WGtwrW.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-zc4VmeeW.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-C3WGtwrW.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/{TextInput-Vp_cBbpQ.mjs → TextInput-Dk7qNGoh.mjs}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { forwardRef, useContext, useState } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-B9fp1ilz.mjs';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-CWyrVi1u.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';
@@ -36,9 +36,9 @@ var useNumericInput = function (props) {
 
 var TextInputComponent = forwardRef(function (_a, ref) {
     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, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, 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, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
+    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, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, 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", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
     var surface = useContext(Context).surface;
-    var _m = useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
+    var _l = useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -72,9 +72,9 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                 "arc-TextInput--withPrefix": prefix,
                 "arc-TextInput--withSuffix": suffix
             },
-            _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
+            _b["arc-TextInput--size".concat(size && size.toUpperCase())] = size && size !== "m",
             _b)) }, filterAttrs(props)),
-        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
             React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
                 React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled || isLoading, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
@@ -83,7 +83,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                             e.preventDefault();
                             iconButton.onClick();
                         } },
-                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[size] })))),
                 suffix && !showPassword ? (React__default.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
                 showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
@@ -93,7 +93,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden"))))),
                 isLoading && (React__default.createElement("span", { className: "arc-TextInput-spinner" },
-                    React__default.createElement(Spinner, { size: spinnerSize[inputSize] })))))));
+                    React__default.createElement(Spinner, { size: spinnerSize[size] })))))));
 });
 /**
  * Use `TextInput` to allow users to enter short form text.

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-C3WGtwrW.mjs → index.es-DCvYtQfu.mjs}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 19 May 2025 14:54:16 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 };