@arc-ui/components 11.21.1 → 11.23.0

package/dist/index.es.js

@@ -557,7 +557,7 @@ const BtIconTick = (props) =>
     ),
   );
 
-/** use `Alert` to display persistent messages, either permanent or dismissible. */
+/** Use `Alert` to inform the user of important changes or actions. */
 var Alert = function (_a) {
     var _b;
     var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, type = _a.type, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, headingLevel = _a.headingLevel, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "type", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
@@ -699,7 +699,7 @@ const BtIconPlayFill = (props) =>
   );
 
 var CardFooter = function (_a) {
-    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.showFilledIcon, showFilledIcon = _e === void 0 ? false : _e;
+    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.isHovered, isHovered = _e === void 0 ? false : _e;
     var icons = {
         arrow: {
             regular: BtIconArrowRight,
@@ -711,16 +711,18 @@ var CardFooter = function (_a) {
         }
     };
     return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
-            "arc-CardFooter--darkPathway": isDarkPathway,
-            "arc-CardFooter--showFilledIcon": showFilledIcon
+            "arc-CardFooter--darkPathway": isDarkPathway
         }) },
         React__default.createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default.createElement("span", { className: "arc-CardFooter-metaText" }, metaText))),
         showButton && (React__default.createElement("div", null,
             React__default.createElement("div", { className: "arc-CardFooter-button" },
-                React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIcon", "arc-CardFooter-buttonIcon--regular") },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
-                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon arc-CardFooter-buttonIcon--filled" },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].filled, size: 40 })))))));
+                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon" },
+                    React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIconRight", {
+                            "arc-CardFooter-buttonIconRight--isHovered": isHovered
+                        }) },
+                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
+                    React__default.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
+                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 }))))))));
 };
 
 var ConditionalWrapper = function (_a) {
@@ -800,6 +802,7 @@ var AvatarContent = function (_a) {
     return React__default.createElement(Icon, { size: iconSize[size], icon: BtIconUser });
 };
 
+/** Use `Avatar` to visually represent a user. */
 var Avatar = function (_a) {
     var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
     var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
@@ -817,6 +820,7 @@ var getAvatars = function (avatars, max) {
         : []), true);
 };
 
+/** Use `AvatarGroup` to visually represent a group of users. */
 var AvatarGroup = function (_a) {
     var title = _a.title, ariaLabel = _a.ariaLabel, href = _a.href, avatars = _a.avatars, onClick = _a.onClick, max = _a.max, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["title", "ariaLabel", "href", "avatars", "onClick", "max", "size"]);
     var id = useId();
@@ -826,7 +830,7 @@ var AvatarGroup = function (_a) {
             React__default.createElement(Avatar, __assign({ size: size }, props)))); }))));
 };
 
-/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+/** Use `Badge` as a static, non-interactive way to provide short updates. */
 var Badge = function (_a) {
     var _b, _c;
     var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = __rest(_a, ["children", "state", "size", "fill", "ariaLabel", "ariaRole"]);
@@ -1606,7 +1610,7 @@ const BtIconChevronRightMid = (props) =>
   );
 
 /**
- * Use `Button` to allow users to take actions with clicks and taps.
+ * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
 var Button = forwardRef(function (_a, ref) {
     var _b;
@@ -1875,8 +1879,7 @@ const BtIconChevronDown2Px = (props) =>
   );
 
 /**
- * Use `DisclosureMini` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `DisclosureMini` to show and hide sections of content.
  */
 var DisclosureMini = function (_a) {
     var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
@@ -1905,7 +1908,7 @@ var DisclosureMini = function (_a) {
 };
 
 /**
- * Provides text for screen readers that is visually hidden.
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
  */
 var VisuallyHidden = function (_a) {
     var children = _a.children;
@@ -2008,7 +2011,7 @@ var Checkbox = forwardRef(function (_a, ref) {
         React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
                 "arc-Checkbox-label--top": checkboxAlignment === "top"
             }) },
-            React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
+            React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default.createElement("span", { className: "arc-Checkbox-box" },
                 React__default.createElement(BtIconTickAlt2Px, null)),
             React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
@@ -2060,7 +2063,7 @@ var Columns = function (_a) {
     var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isGutterless"]);
     useEffect(function () {
         React__default.Children.map(children, function (item) {
-            if (item && item.type !== Col) {
+            if (item && item.type !== Col$1) {
                 throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
             }
         });
@@ -2071,7 +2074,7 @@ var Columns = function (_a) {
         }) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-Columns-inner" }, children)));
 };
-var Col = function (_a) {
+var Col$1 = function (_a) {
     var _b;
     var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
     return (React__default.createElement("div", __assign({ className: classNames((_b = {},
@@ -2095,7 +2098,7 @@ var Col = function (_a) {
             _b["arc-Columns-col--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props)), children));
 };
-Columns.Col = Col;
+Columns.Col = Col$1;
 
 /**
 #### Deprecation Notice
@@ -2119,8 +2122,7 @@ var Curve = function (_a) {
 };
 
 /**
- * Use `Disclosure` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `Disclosure` to show and hide sections of content.
  */
 var Disclosure = function (_a) {
     var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
@@ -2166,8 +2168,11 @@ var FilterControl = function (_a) {
     return (React__default.createElement("button", { className: classNames("arc-FilterControl", {
             "arc-FilterControl--onDarkSurface": surface === "dark",
             "arc-FilterControl--selected": selected
-        }), onClick: onClickHandler, tabIndex: 0 },
-        React__default.createElement("div", { className: "arc-FilterControl-text" }, children)));
+        }), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
+        React__default.createElement("div", { className: "arc-FilterControl-text" },
+            React__default.createElement(VisuallyHidden, null, "Filter by"),
+            " ",
+            children)));
 };
 
 var FilterControls = function (_a) {
@@ -2184,19 +2189,23 @@ var FilterItem = function (_a) {
 };
 
 var FilterItems = function (_a) {
-    var children = _a.children, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest(_a, ["children", "displayType"]);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-FilterItems", {
-            "arc-FilterItems--list": displayType === "list",
-            "arc-FilterItems--grid": displayType === "grid"
-        }) }, filterDataAttrs(props)), displayType === "list"
-        ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
-            child,
-            index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
-        : children));
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest(_a, ["children", "error", "displayType"]);
+    return React__default.Children.toArray(children).length > 0 ? (React__default.createElement("div", null,
+        React__default.createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React__default.Children.toArray(children).length > 0
+            ? "".concat(React__default.Children.toArray(children).length, " records listed.")
+            : null),
+        React__default.createElement("div", __assign({ className: classNames("arc-FilterItems", {
+                "arc-FilterItems--list": displayType === "list",
+                "arc-FilterItems--grid": displayType === "grid"
+            }) }, filterDataAttrs(props)), displayType === "list"
+            ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
+                child,
+                index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+            : children))) : (React__default.createElement("div", { "aria-live": "assertive" }, error));
 };
 
-/** use `Filter` for interactive elements that filter and categorise page content. */
+/** Use `Filter` to filter and categorise page content. */
 var Filter = function (_a) {
     var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = __rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
     var _c = useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
@@ -2253,13 +2262,46 @@ var Filter = function (_a) {
         React__default.createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
             React__default.isValidElement(controls) &&
             React__default.Children.map(controls.props.children, function (control, index) { return (React__default.createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
-        filteredItems.length === 0 ? (React__default.createElement(React__default.Fragment, null, error)) : (React__default.createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+        React__default.createElement(FilterItems, { displayType: displayType, error: error }, filteredItems.map(function (item) { return item.props.children; }))));
 };
 Filter.Controls = FilterControls;
 Filter.Control = FilterControl;
 Filter.Items = FilterItems;
 Filter.Item = FilterItem;
 
+var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
+
+var Col = function (props) {
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
+            var _a;
+            var _b, _c;
+            var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
+            var orderValue = (_b = props.order) === null || _b === void 0 ? void 0 : _b[bp];
+            var offsetValue = (_c = props.offset) === null || _c === void 0 ? void 0 : _c[bp];
+            return __assign(__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a));
+        }, {})) }, filterDataAttrs(props)), props.children));
+};
+
+var Row = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = __rest(_a, ["direction", "align", "justify", "children"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-row", "".concat(suffixModifier("arc-Grid-row--direction", direction)), "".concat(suffixModifier("arc-Grid-row--justify", justify)), "".concat(suffixModifier("arc-Grid-row--align", align))) }, filterDataAttrs(props)), children));
+};
+
+/**
+ * Use `Grid` to compose layouts on a 12-column grid.
+ */
+var Grid = function (_a) {
+    var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = __rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid", {
+            "arc-Grid--fluid": isFluid,
+            "arc-Grid--debugVisible": isDebugVisible,
+            "arc-Grid--gutterless": isGutterless
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-Grid-inner" }, children)));
+};
+Grid.Row = Row;
+Grid.Col = Col;
+
 /**
  * Use `Group` to arrange flexible items in a row.
  */
@@ -2295,6 +2337,17 @@ var GroupItem = function (_a) {
 };
 Group.Item = GroupItem;
 
+var Hidden = 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-Hidden--xs": xs,
+            "arc-Hidden--s": s,
+            "arc-Hidden--m": m,
+            "arc-Hidden--l": l,
+            "arc-Hidden--xl": xl
+        }) }, filterDataAttrs(props)), children));
+};
+
 /**
  * Do not edit directly
  * Generated file
@@ -2342,10 +2395,10 @@ const BtIconCrossFill = (props) =>
   );
 
 /**
- * use `Tag` to promote features and manage filtering.
+ * Use `Tag` to promote features and manage filtering.
  */
 var Tag = function (_a) {
-    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove", "title"]);
     var surface = useContext(Context$5).surface;
     var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
@@ -2362,13 +2415,13 @@ var Tag = function (_a) {
         link ? (React__default.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
             icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
             icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
             icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
+            React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))))),
         isRemovable && (React__default.createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
             React__default.createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
             React__default.createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
@@ -2392,8 +2445,10 @@ var VerticalSpace = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
+/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
 var InformationCard = function (_a) {
-    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
+    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, minHeight = _a.minHeight, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "minHeight", "headingLevel"]);
+    var surface = useContext(Context$5).surface;
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
     var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
@@ -2401,8 +2456,10 @@ var InformationCard = function (_a) {
     var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
     var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-InformationCard", {
-            "arc-InformationCard--outlined": cardUrl && showHoverState
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-InformationCard", {
+            "arc-InformationCard--isALink": cardUrl,
+            "arc-InformationCard--outlined": cardUrl && showHoverState,
+            "arc-InformationCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
         React__default.createElement(Surface, { growVertically: true, padding: containerSpacing, background: "white" },
             React__default.createElement("div", null,
@@ -2435,6 +2492,28 @@ var InformationCard = function (_a) {
                     React__default.createElement(Image, __assign({}, footerLogo))))))));
 };
 
+/** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
+var ImpactCard = function (_a) {
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "linkData", "pathway", "headingLevel", "buttonIcon"]);
+    var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
+    var surface = useContext(Context$5).surface;
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var isDarkPathway = pathway === "dark";
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-ImpactCard", {
+            "arc-ImpactCard--darkPathway": isDarkPathway,
+            "arc-ImpactCard--outlined": url && showHoverState,
+            "arc-ImpactCard--isHovered": showHoverState,
+            "arc-ImpactCard--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-ImpactCard-backgroundImageContainer" },
+            React__default.createElement(Image, __assign({ fit: "cover", alt: "" }, img))),
+        React__default.createElement("div", { className: "arc-ImpactCard-contentContainer" },
+            label && (React__default.createElement("div", { className: "arc-ImpactCard-labelContainer" },
+                React__default.createElement(CardLabel, { isDarkPathway: isDarkPathway, color: "supporting", isBold: true, text: label }))),
+            React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+        React__default.createElement(CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));
+};
+
 /**
  * Use `Markup` to display HTML-formatted text.
  */
@@ -2452,14 +2531,16 @@ var Markup = function (_a) {
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 var MediaCard = function (_a) {
-    var img = _a.img, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "buttonIcon", "isContained", "headingLevel"]);
+    var img = _a.img, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var surface = useContext(Context$5).surface;
     var _e = useState(false), showHoverState = _e[0], setShowHoverState = _e[1];
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-MediaCard", {
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-MediaCard", {
             "arc-MediaCard--outlined": url && isContained && showHoverState,
-            "arc-MediaCard--contained": isContained
+            "arc-MediaCard--contained": isContained,
+            "arc-MediaCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
         React__default.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default.createElement(Surface, { growVertically: true, background: "white" }, children)); } },
             React__default.createElement("div", { className: "arc-MediaCard-imgContainer" },
@@ -2473,7 +2554,7 @@ var MediaCard = function (_a) {
                     React__default.createElement(VerticalSpace, { size: headingSpacing }),
                     React__default.createElement(Text, null, text),
                     (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
-                React__default.createElement(CardFooter, { showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) })))));
+                React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url), isHovered: showHoverState })))));
 };
 
 function _extends() {
@@ -35378,7 +35459,7 @@ const $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 = $5d3850c4d0b4e6c7$export$b6d95
 const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f7638e4a34b909;
 const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
 
-/** Use `Modal` to focus a user's attention to an urgent or required prompt for interaction or input. */
+/** Use `Modal` to display information that needs immediate action from a user. */
 var Modal = function (_a) {
     var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size"]);
     var arcRootElement = useContext(ArcRootElementContext);
@@ -35403,7 +35484,7 @@ var Modal = function (_a) {
     return (React__default.createElement($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { open: isOpen },
         React__default.createElement($5d3850c4d0b4e6c7$export$602eac185826482c, { container: arcRootElement || undefined },
             React__default.createElement($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "arc-Modal-overlay" },
-                React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
+                React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
                         "arc-Modal-dialog--maxHeightWindow": isContentScrollable
                     }) }, filterDataAttrs(props)),
                     React__default.createElement("div", { className: "arc-Modal-section" },
@@ -35461,7 +35542,7 @@ var usePagination = function (pageCount, selectedPage) {
 };
 
 /**
- * Use `Pagination` to navigate multiple pages.
+ * Use `Pagination` to navigate through multiple pages of content.
  */
 var Pagination = function (_a) {
     var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = __rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
@@ -35494,10 +35575,10 @@ var Pagination = function (_a) {
 };
 
 /**
- * Use `PaginationSimple` to navigate multiple pages.
+ * Use `PaginationSimple` to navigate through multiple pages of content.
  */
 var PaginationSimple = function (_a) {
-    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "onPrevPage", "onNextPage", "isFluid"]);
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, prevHref = _a.prevHref, nextHref = _a.nextHref, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "prevHref", "nextHref", "onPrevPage", "onNextPage", "isFluid"]);
     var surface = useContext(Context$5).surface;
     return (React__default.createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--onDarkSurface": surface === "dark",
@@ -35506,20 +35587,16 @@ var PaginationSimple = function (_a) {
         }) }, filterDataAttrs(props)),
         React__default.createElement("ul", { className: "arc-PaginationSimple-list" },
             React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
-                React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                React__default.createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
                         "arc-PaginationSimple-navigationButton--hidden": hidePrev
-                    }), onClick: function () {
-                        onPrevPage();
-                    } },
+                    }), onClick: onPrevPage },
                     React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
                         React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid })),
                     React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
             React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
-                React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                React__default.createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
                         "arc-PaginationSimple-navigationButton--hidden": hideNext
-                    }), onClick: function () {
-                        onNextPage();
-                    } },
+                    }), onClick: onNextPage },
                     React__default.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
                     React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
                         React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))))));
@@ -35598,10 +35675,16 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
     return isIndeterminate ? indeterminateProps : determinateProps;
 };
 
+/**
+ * Use `ProgressBar` to show the progress of a specific task within a page.
+ */
 var ProgressBar = function (_a) {
     var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
     var surface = useContext(Context$5).surface;
     var progressValue = Math.min(100, Math.max(0, value));
+    var autoFocusRef = function (canFocus) { return function (el) {
+        canFocus && el && el.focus();
+    }; };
     return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
             "arc-ProgressBar--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
@@ -35615,11 +35698,11 @@ var ProgressBar = function (_a) {
         React__default.createElement("div", { className: "arc-ProgressBar-container" },
             React__default.createElement("div", { className: "arc-ProgressBar-outerBar" },
                 React__default.createElement("div", __assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
-            description && (React__default.createElement("div", { className: "arc-ProgressBar-description" },
+            description && (React__default.createElement("div", { className: "arc-ProgressBar-description", role: "status" },
                 React__default.createElement(Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
             action && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(VerticalSpace, { size: "8" }),
-                React__default.createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
+                React__default.createElement("button", { ref: autoFocusRef(action.autofocusOnMount), className: "arc-ProgressBar-actionButton", onClick: action.action },
                     React__default.createElement("div", { className: "arc-ProgressBar-actionContainer" },
                         React__default.createElement(Text, null, action.text),
                         action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },
@@ -35691,13 +35774,13 @@ var ProgressStepperItem = function (_a) {
             status !== "todo" && (React__default.createElement(VisuallyHidden, null,
                 capitaliseFirstLetter(status),
                 ":")),
-            titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            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)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
             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 illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+/** 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, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
     var items = React__default.Children.toArray(children);
@@ -35738,7 +35821,7 @@ var RadioButton = forwardRef(function (_a, ref) {
         React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
                 "arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
             }), htmlFor: id, id: idLabel },
-            React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
+            React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value, "aria-checked": checked }),
             React__default.createElement("span", { className: classNames({
                     "arc-RadioButton-label--marginTop": radioButtonAlignment === "top"
                 }) },
@@ -40044,17 +40127,14 @@ var ItemGroup = function (_a) {
             }
         });
     }, [children]);
-    var ElementType = "div";
-    if (title) {
-        ElementType = "details";
-    }
+    var ElementType = title ? "details" : "div";
     return (React__default.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
         React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
             title ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
-                    React__default.createElement("a", { onClick: handleLinkClick({
-                            handler: onClick
-                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, title),
+                React__default.createElement("summary", { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                    React__default.createElement(ConditionalWrapper, { condition: isMinWidthArcBreakpointL, wrapper: function (children) { return (React__default.createElement("a", { onClick: handleLinkClick({
+                                handler: onClick
+                            }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, children)); }, fallback: function (children) { return (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, children)); } }, title),
                     React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
                         React__default.createElement(BtIconChevronRightMid, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
                 React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
@@ -40099,16 +40179,16 @@ var Panel = function (_a) {
         // Where appropriate, close the Panel when clicking outside of it,
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
-            var _a, _b;
-            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
+            var _a, _b, _c, _d;
+            (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
             // Don't close the Panel…
             if (
             // The click is inside the current SubNavItem.
-            ((_a = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) ||
+            ((_c = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _c === void 0 ? void 0 : _c.contains(e.target)) ||
                 // The click is inside the current NavItem
                 // and the Panel is not inside a SubNavItem.
                 // and the target is not a link
-                (((_b = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target)) &&
+                (((_d = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _d === void 0 ? void 0 : _d.contains(e.target)) &&
                     !subNavItemRef &&
                     !e.target.getAttribute("href")) ||
                 // The Panel is inside a SubNavItem
@@ -40144,7 +40224,8 @@ var Panel = function (_a) {
     ]);
     useEffect(function () {
         var handleClick = function (e) {
-            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
+            var _a, _b;
+            (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
             // Close the Panel…
             if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
                 setOpenPanelOnFirstClick(false);
@@ -40163,6 +40244,7 @@ var Panel = function (_a) {
     }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
     useEffect(function () {
         var handleKeydown = function (e) {
+            var _a, _b;
             // Check the viewport width at time of press
             var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
@@ -40174,7 +40256,7 @@ var Panel = function (_a) {
                 return setOpen(false);
             }
             if (e.key === "Tab") {
-                menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.remove("noFocus");
+                (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove("noFocus");
             }
         };
         window.addEventListener("keydown", handleKeydown);
@@ -40594,7 +40676,8 @@ var SiteHeaderV2 = function (_a) {
         };
     }, [setMenuOpen]);
     useEffect(function () {
-        menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
+        var _a, _b;
+        (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
     }, []);
     useEffect(function () {
         var handleClick = function (e) {
@@ -41142,7 +41225,7 @@ function $6be4966fd9bbc698$var$getState(checked) {
 const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
 const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
 
-/** Use `Switch` to toggle between checked and not checked. */
+/** Use `Switch` to allow users to immediately toggle between two states. */
 var Switch = function (_a) {
     var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel"]);
     var surface = useContext(Context$5).surface;
@@ -41622,6 +41705,7 @@ var TabsList = function (_a) {
             React__default.createElement(Icon, { icon: BtIconArrowRightFill, size: 40, color: "brand" })))));
 };
 
+/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
 var Tabs = function (_a) {
     var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
     return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
@@ -41670,9 +41754,6 @@ var TextArea = forwardRef(function (_a, ref) {
             }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper") })));
 });
 
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
 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, 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, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width"]);
@@ -41727,6 +41808,9 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden")))))))));
 });
+/**
+ * Use `TextInput` to allow users to enter short form text.
+ */
 var TextInput = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
 forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
 
@@ -42668,7 +42752,7 @@ var ToastNotification = function (_a) {
                 React__default.createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
 };
 
-/** Use `Toast` to display temporary messages at the bottom of the viewport. */
+/** Use `Toast` to display temporary messages at the bottom of the screen. */
 var Toast = function (_a) {
     var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, props = __rest(_a, ["children", "colorScheme"]);
     return (React__default.createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },
@@ -42683,21 +42767,24 @@ var Truncate = function (_a) {
     return (React__default.createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs(props)), children));
 };
 
+/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
 var TypographyCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.buttonIcon, buttonIcon = _d === void 0 ? "arrow" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "linkData", "pathway", "buttonIcon", "headingLevel"]);
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.buttonIcon, buttonIcon = _d === void 0 ? "arrow" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "linkData", "pathway", "buttonIcon", "headingLevel"]);
+    var surface = useContext(Context$5).surface;
     var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
-    return (React__default.createElement("div", __assign({ className: classNames("arc-TypographyCard", {
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TypographyCard", {
             "arc-TypographyCard--outlined": showHoverState,
             "arc-TypographyCard--darkPathway": isDarkPathway,
-            "arc-TypographyCard--lightPathway": !isDarkPathway
+            "arc-TypographyCard--lightPathway": !isDarkPathway,
+            "arc-TypographyCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-TypographyCard-contentContainer" },
             label && (React__default.createElement("div", { className: "arc-TypographyCard-labelContainer" },
-                React__default.createElement(CardLabel, { isDarkPathway: isDarkPathway, isBold: false, text: label }))),
+                React__default.createElement(CardLabel, { isDarkPathway: isDarkPathway, isBold: true, text: label }))),
             React__default.createElement(CardHeading, { size: "m", linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, isDarkPathway: isDarkPathway, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
-        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText })));
+        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
 };
 
 /**
@@ -42725,5 +42812,75 @@ var UniversalHeaderItem = function (_a) {
 };
 UniversalHeader.Item = UniversalHeaderItem;
 
-export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
+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
+        }) }, filterDataAttrs(props)), children));
+};
+
+const BtIconNewWindow = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M24.70166,7.01794a.49968.49968,0,0,0-.19092-.03845H17.50586a.5.5,0,0,0,0,1h5.79785l-8.15918,8.15918a.49995.49995,0,1,0,.707.707l8.15918-8.15918v5.77393a.5.5,0,1,0,1,0v-6.981a.50171.50171,0,0,0-.30908-.46155Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M26.85156,3.99072H5.18359A1.20156,1.20156,0,0,0,3.9834,5.19141V26.89062a1.10362,1.10362,0,0,0,1.10254,1.103H26.85156a1.17979,1.17979,0,0,0,1.17871-1.17871V5.16943A1.17979,1.17979,0,0,0,26.85156,3.99072Zm.17871,22.82422a.17891.17891,0,0,1-.17871.17871H5.08594a.10419.10419,0,0,1-.10254-.103V5.19141a.20069.20069,0,0,1,.20019-.20069h21.668a.17888.17888,0,0,1,.17871.17871Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+var Link = function (_a) {
+    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = useContext(Context$5).surface;
+    var isExternalLink = target === "_blank";
+    var textArray = children.split(" ");
+    var firstText = textArray.slice(0, -1).join(" ");
+    var lastWord = textArray[textArray.length - 1];
+    var commonProps = {
+        id: id,
+        onClick: onClick,
+        className: classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied
+        })
+    };
+    var elementProps = {
+        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: __assign({}, commonProps),
+        span: __assign({}, commonProps)
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React__default.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-Link-wrapper" },
+            React__default.createElement(VisuallyHidden, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0"),
+            React__default.createElement("span", { className: "arc-Link-iconWrapper" },
+                React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React__default.createElement(Icon, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
+};
+
+export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Grid, Group, Heading, Hidden, Icon, Image, ImpactCard, InformationCard, Link, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, Visible, VisuallyHidden };
 //# sourceMappingURL=index.es.js.map