@arc-ui/components 11.21.0 → 11.22.0

package/dist/Filter/Filter.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Filter = require('../_shared/cjs/Filter-1bde635c.js');
+var Filter = require('../_shared/cjs/Filter-f4b73f5d.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('react');
 require('../_shared/cjs/Surface-038db6e1.js');

package/dist/Filter/Filter.esm.js

@@ -1,4 +1,4 @@
-export { F as Filter } from '../_shared/esm/Filter-58a42358.js';
+export { F as Filter } from '../_shared/esm/Filter-ad254e3d.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import 'react';
 import '../_shared/esm/Surface-0ca6817d.js';

package/dist/ImpactCard/ImpactCard.cjs.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var BtIconArrowRight_esm = require('../_shared/cjs/BtIconArrowRight.esm-50d96943.js');
+var CardFooter = require('../_shared/cjs/CardFooter-ff015d7d.js');
+var Image = require('../_shared/cjs/Image-e873b8fc.js');
+var Surface = require('../_shared/cjs/Surface-038db6e1.js');
+require('../_shared/cjs/suffix-modifier-64dcd338.js');
+require('../_shared/cjs/BtIconArrowRightFill.esm-435cf4bd.js');
+require('../_shared/cjs/Icon-b46897a3.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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 = filterDataAttrs.__rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "linkData", "pathway", "headingLevel", "buttonIcon"]);
+    var _f = React.useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
+    var surface = React.useContext(Surface.Context).surface;
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var isDarkPathway = pathway === "dark";
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-ImpactCard", {
+            "arc-ImpactCard--darkPathway": isDarkPathway,
+            "arc-ImpactCard--outlined": url && showHoverState,
+            "arc-ImpactCard--isHovered": showHoverState,
+            "arc-ImpactCard--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-ImpactCard-backgroundImageContainer" },
+            React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({ fit: "cover", alt: "" }, img))),
+        React__default["default"].createElement("div", { className: "arc-ImpactCard-contentContainer" },
+            label && (React__default["default"].createElement("div", { className: "arc-ImpactCard-labelContainer" },
+                React__default["default"].createElement(BtIconArrowRight_esm.CardLabel, { isDarkPathway: isDarkPathway, color: "supporting", isBold: true, text: label }))),
+            React__default["default"].createElement(BtIconArrowRight_esm.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["default"].createElement(CardFooter.CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));
+};
+
+exports.ImpactCard = ImpactCard;

package/dist/ImpactCard/ImpactCard.esm.js

@@ -0,0 +1,33 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import React__default, { useState, useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { C as CardLabel, a as CardHeading } from '../_shared/esm/BtIconArrowRight.esm-9b181878.js';
+import { C as CardFooter } from '../_shared/esm/CardFooter-e13f77b0.js';
+import { I as Image } from '../_shared/esm/Image-12fbd327.js';
+import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
+import '../_shared/esm/suffix-modifier-3d548e45.js';
+import '../_shared/esm/BtIconArrowRightFill.esm-99019d1a.js';
+import '../_shared/esm/Icon-15799695.js';
+
+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).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 })));
+};
+
+export { ImpactCard };

package/dist/ImpactCard/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/impactcard",
+  "types": "../types/components/ImpactCard/index.d.ts",
+  "main": "./ImpactCard.cjs.js",
+  "module": "./ImpactCard.esm.js",
+  "private": true
+}

package/dist/InformationCard/InformationCard.cjs.js

@@ -23,7 +23,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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 = filterDataAttrs.__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 = filterDataAttrs.__rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "minHeight", "headingLevel"]);
+    var surface = React.useContext(Surface.Context).surface;
     var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointS, "px)"));
     var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointM, "px)"));
     var _c = React.useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
@@ -31,8 +32,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["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-InformationCard", {
-            "arc-InformationCard--outlined": cardUrl && showHoverState
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-InformationCard", {
+            "arc-InformationCard--isALink": cardUrl,
+            "arc-InformationCard--outlined": cardUrl && showHoverState,
+            "arc-InformationCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement(Surface.Surface, { growVertically: true, padding: containerSpacing, background: "white" },
             React__default["default"].createElement("div", null,

package/dist/InformationCard/InformationCard.esm.js

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default, { useState } from 'react';
+import React__default, { useContext, useState } from 'react';
 import { u as useMediaQuery, a as ArcBreakpointS, A as ArcBreakpointM } from '../_shared/esm/use-media-query-4c807227.js';
 import { C as CardLabel, a as CardHeading, B as BtIconArrowRight } from '../_shared/esm/BtIconArrowRight.esm-9b181878.js';
 import { I as Icon } from '../_shared/esm/Icon-15799695.js';
@@ -9,13 +9,14 @@ import { T as Text } from '../_shared/esm/Text-14f586ac.js';
 import { B as Button } from '../_shared/esm/Button-3f294e64.js';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { S as Surface } from '../_shared/esm/Surface-0ca6817d.js';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-0ca6817d.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';
 import '../_shared/esm/BtIconChevronRightMid.esm-32268f1a.js';
 
 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).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];
@@ -23,8 +24,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,

package/dist/MediaCard/MediaCard.cjs.js

@@ -7,7 +7,7 @@ var React = require('react');
 var index = require('../_shared/cjs/index-9947ac13.js');
 var useMediaQuery = require('../_shared/cjs/use-media-query-e61881d8.js');
 var BtIconArrowRight_esm = require('../_shared/cjs/BtIconArrowRight.esm-50d96943.js');
-var CardFooter = require('../_shared/cjs/CardFooter-4a68a862.js');
+var CardFooter = require('../_shared/cjs/CardFooter-ff015d7d.js');
 var ConditionalWrapper = require('../_shared/cjs/ConditionalWrapper-be3b2625.js');
 var Image = require('../_shared/cjs/Image-e873b8fc.js');
 var Surface = require('../_shared/cjs/Surface-038db6e1.js');
@@ -25,14 +25,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * 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 = filterDataAttrs.__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 = filterDataAttrs.__rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var surface = React.useContext(Surface.Context).surface;
     var _e = React.useState(false), showHoverState = _e[0], setShowHoverState = _e[1];
     var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointS, "px)"));
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-MediaCard", {
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-MediaCard", {
             "arc-MediaCard--outlined": url && isContained && showHoverState,
-            "arc-MediaCard--contained": isContained
+            "arc-MediaCard--contained": isContained,
+            "arc-MediaCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement(ConditionalWrapper.ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default["default"].createElement(Surface.Surface, { growVertically: true, background: "white" }, children)); } },
             React__default["default"].createElement("div", { className: "arc-MediaCard-imgContainer" },
@@ -46,7 +48,7 @@ var MediaCard = function (_a) {
                     React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }),
                     React__default["default"].createElement(Text.Text, null, text),
                     (url || metaText) && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
-                React__default["default"].createElement(CardFooter.CardFooter, { showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) })))));
+                React__default["default"].createElement(CardFooter.CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url), isHovered: showHoverState })))));
 };
 
 exports.MediaCard = MediaCard;

package/dist/MediaCard/MediaCard.esm.js

@@ -1,12 +1,12 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default, { useState } from 'react';
+import React__default, { useContext, useState } from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 import { u as useMediaQuery, a as ArcBreakpointS } from '../_shared/esm/use-media-query-4c807227.js';
 import { C as CardLabel, a as CardHeading } from '../_shared/esm/BtIconArrowRight.esm-9b181878.js';
-import { C as CardFooter } from '../_shared/esm/CardFooter-a08b70ee.js';
+import { C as CardFooter } from '../_shared/esm/CardFooter-e13f77b0.js';
 import { C as ConditionalWrapper } from '../_shared/esm/ConditionalWrapper-59be8f35.js';
 import { I as Image } from '../_shared/esm/Image-12fbd327.js';
-import { S as Surface } from '../_shared/esm/Surface-0ca6817d.js';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-0ca6817d.js';
 import { T as Text } from '../_shared/esm/Text-14f586ac.js';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
@@ -17,14 +17,16 @@ import '../_shared/esm/Icon-15799695.js';
  * 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).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" },
@@ -38,7 +40,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 })))));
 };
 
 export { MediaCard };

package/dist/Select/Select.cjs.js

@@ -1201,7 +1201,7 @@ var Select = function (_a) {
                             "arc-Select-trigger--invalid": errorMessage
                         },
                         _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
-                        _b)) }, filterDataAttrs.filterDataAttrs(props)),
+                        _b)), "aria-describedby": "".concat(id, "-helper") }, filterDataAttrs.filterDataAttrs(props)),
                     React__default["default"].createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default["default"].createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
                         React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronDown2Px_esm.BtIconChevronDown2Px, size: getIconSize(selectSize) }))),

package/dist/Select/Select.esm.js

@@ -1193,7 +1193,7 @@ var Select = function (_a) {
                             "arc-Select-trigger--invalid": errorMessage
                         },
                         _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
-                        _b)) }, filterDataAttrs(props)),
+                        _b)), "aria-describedby": "".concat(id, "-helper") }, filterDataAttrs(props)),
                     React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
                         React__default.createElement(Icon, { icon: BtIconChevronDown2Px, size: getIconSize(selectSize) }))),

package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-301c765c.js');
+var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-e0735a9d.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('../_shared/cjs/use-media-query-e61881d8.js');
 require('react');
@@ -12,6 +12,7 @@ require('../_shared/cjs/suffix-modifier-64dcd338.js');
 require('../_shared/cjs/Surface-038db6e1.js');
 require('../_shared/cjs/handle-link-click-17a44cf4.js');
 require('../_shared/cjs/BtIconChevronRightMid.esm-d01ebbd4.js');
+require('../_shared/cjs/ConditionalWrapper-be3b2625.js');
 require('../_shared/cjs/BtIconChevronRight2Px.esm-dbf8cbee.js');
 require('../_shared/cjs/Button-84533dc8.js');
 require('../_shared/cjs/BtIconChevronLeftMid.esm-0aaa6770.js');

package/dist/SiteHeaderV2/SiteHeaderV2.esm.js

@@ -1,4 +1,4 @@
-export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-0096e25b.js';
+export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-c74b811b.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import '../_shared/esm/use-media-query-4c807227.js';
 import 'react';
@@ -8,6 +8,7 @@ import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/Surface-0ca6817d.js';
 import '../_shared/esm/handle-link-click-f64f55a2.js';
 import '../_shared/esm/BtIconChevronRightMid.esm-32268f1a.js';
+import '../_shared/esm/ConditionalWrapper-59be8f35.js';
 import '../_shared/esm/BtIconChevronRight2Px.esm-75e92636.js';
 import '../_shared/esm/Button-3f294e64.js';
 import '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';

package/dist/TextArea/TextArea.cjs.js

@@ -15,7 +15,7 @@ require('../_shared/cjs/Button-84533dc8.js');
 require('../_shared/cjs/Card-5b19cabc.js');
 require('../_shared/cjs/Checkbox-8915fcd9.js');
 require('../_shared/cjs/Columns-ae4f8cef.js');
-require('../_shared/cjs/Filter-1bde635c.js');
+require('../_shared/cjs/Filter-f4b73f5d.js');
 var FormControl = require('../_shared/cjs/FormControl-5f3b6ce4.js');
 require('../_shared/cjs/Group-0429741a.js');
 require('../_shared/cjs/Poster-9b48fd61.js');
@@ -24,11 +24,12 @@ require('../_shared/cjs/RadioGroup-07bb155e.js');
 require('../_shared/cjs/debounce-123468fb.js');
 require('../_shared/cjs/SiteFooter-65b6360c.js');
 require('../_shared/cjs/SiteHeader.rehydrator-ea49f8d5.js');
-require('../_shared/cjs/SiteHeaderV2-301c765c.js');
+require('../_shared/cjs/SiteHeaderV2-e0735a9d.js');
 require('../_shared/cjs/Tabs-24e6f45b.js');
 require('../_shared/cjs/TextInput-5da70ec2.js');
 require('../_shared/cjs/Toast-7a20d1b9.js');
 require('../_shared/cjs/UniversalHeader-b8389447.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
 require('../_shared/cjs/BtIconChevronRight2Px.esm-dbf8cbee.js');
 require('../_shared/cjs/Icon-b46897a3.js');
@@ -39,11 +40,11 @@ require('../_shared/cjs/BtIconTickAlt2Px.esm-57c89acc.js');
 require('../_shared/cjs/BtIconAlert.esm-1a0ff9f0.js');
 require('../_shared/cjs/DisclosureMini-d0eeb6bb.js');
 require('../_shared/cjs/BtIconChevronDown2Px.esm-39030ee0.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
 require('../_shared/cjs/use-media-query-e61881d8.js');
 require('../_shared/cjs/BrandLogo-aea340c8.js');
 require('../_shared/cjs/Curve-d038052b.js');
 require('../_shared/cjs/Section-59804166.js');
+require('../_shared/cjs/ConditionalWrapper-be3b2625.js');
 require('../_shared/cjs/extends-8c5e4b48.js');
 require('../_shared/cjs/index-dd1d18ea.js');
 require('react-dom');
@@ -89,15 +90,16 @@ var TextArea = React.forwardRef(function (_a, ref) {
     return (React__default["default"].createElement(FormControl.FormControl, filterDataAttrs.__assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(Text.Text, { tone: isDisabled ? "muted" : "default" },
-                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount" },
+                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
                     characterCount,
                     " / ",
-                    maxLength)))) }, filterDataAttrs.filterDataAttrs(props)),
+                    maxLength,
+                    characterCount === maxLength && (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement("textarea", { id: id, className: index.classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), 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 } })));
+            }), 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") })));
 });
 
 exports.TextArea = TextArea;

package/dist/TextArea/TextArea.esm.js

@@ -11,7 +11,7 @@ import '../_shared/esm/Button-3f294e64.js';
 import '../_shared/esm/Card-7fc6c9b4.js';
 import '../_shared/esm/Checkbox-0e051546.js';
 import '../_shared/esm/Columns-d96b7425.js';
-import '../_shared/esm/Filter-58a42358.js';
+import '../_shared/esm/Filter-ad254e3d.js';
 import { F as FormControl } from '../_shared/esm/FormControl-cc99cde0.js';
 import '../_shared/esm/Group-73fdb896.js';
 import '../_shared/esm/Poster-4ec2f679.js';
@@ -20,11 +20,12 @@ import '../_shared/esm/RadioGroup-362be63f.js';
 import '../_shared/esm/debounce-6fed6b84.js';
 import '../_shared/esm/SiteFooter-38ee1536.js';
 import '../_shared/esm/SiteHeader.rehydrator-65c8cf71.js';
-import '../_shared/esm/SiteHeaderV2-0096e25b.js';
+import '../_shared/esm/SiteHeaderV2-c74b811b.js';
 import '../_shared/esm/Tabs-a85af483.js';
 import '../_shared/esm/TextInput-1d1c5fd6.js';
 import '../_shared/esm/Toast-7a232e15.js';
 import '../_shared/esm/UniversalHeader-80c7313f.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/BtIconChevronRight2Px.esm-75e92636.js';
 import '../_shared/esm/Icon-15799695.js';
@@ -35,11 +36,11 @@ import '../_shared/esm/BtIconTickAlt2Px.esm-0bc2ded0.js';
 import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
 import '../_shared/esm/DisclosureMini-ec17b008.js';
 import '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
 import '../_shared/esm/use-media-query-4c807227.js';
 import '../_shared/esm/BrandLogo-1af78f76.js';
 import '../_shared/esm/Curve-d8679dde.js';
 import '../_shared/esm/Section-73781b56.js';
+import '../_shared/esm/ConditionalWrapper-59be8f35.js';
 import '../_shared/esm/extends-8cc61aad.js';
 import '../_shared/esm/index-7b531fa7.js';
 import 'react-dom';
@@ -81,15 +82,16 @@ var TextArea = forwardRef(function (_a, ref) {
     return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
-                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
+                React__default.createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
                     characterCount,
                     " / ",
-                    maxLength)))) }, filterDataAttrs(props)),
+                    maxLength,
+                    characterCount === maxLength && (React__default.createElement(VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs(props)),
         React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), 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 } })));
+            }), 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") })));
 });
 
 export { TextArea };

package/dist/TypographyCard/TypographyCard.cjs.js

@@ -6,31 +6,33 @@ var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 var React = require('react');
 var index = require('../_shared/cjs/index-9947ac13.js');
 var BtIconArrowRight_esm = require('../_shared/cjs/BtIconArrowRight.esm-50d96943.js');
-var CardFooter = require('../_shared/cjs/CardFooter-4a68a862.js');
+var CardFooter = require('../_shared/cjs/CardFooter-ff015d7d.js');
+var Surface = require('../_shared/cjs/Surface-038db6e1.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
 require('../_shared/cjs/BtIconArrowRightFill.esm-435cf4bd.js');
 require('../_shared/cjs/Icon-b46897a3.js');
-require('../_shared/cjs/Surface-038db6e1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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 = filterDataAttrs.__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 = filterDataAttrs.__rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "linkData", "pathway", "buttonIcon", "headingLevel"]);
+    var surface = React.useContext(Surface.Context).surface;
     var _f = React.useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-TypographyCard", {
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ style: { minHeight: minHeight }, className: index.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.filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: "arc-TypographyCard-contentContainer" },
             label && (React__default["default"].createElement("div", { className: "arc-TypographyCard-labelContainer" },
-                React__default["default"].createElement(BtIconArrowRight_esm.CardLabel, { isDarkPathway: isDarkPathway, isBold: false, text: label }))),
+                React__default["default"].createElement(BtIconArrowRight_esm.CardLabel, { isDarkPathway: isDarkPathway, isBold: true, text: label }))),
             React__default["default"].createElement(BtIconArrowRight_esm.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["default"].createElement(CardFooter.CardFooter, { showButton: true, isDarkPathway: isDarkPathway, showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText })));
+        React__default["default"].createElement(CardFooter.CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
 };
 
 exports.TypographyCard = TypographyCard;

package/dist/TypographyCard/TypographyCard.esm.js

@@ -1,28 +1,30 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default, { useState } from 'react';
+import React__default, { useContext, useState } from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 import { C as CardLabel, a as CardHeading } from '../_shared/esm/BtIconArrowRight.esm-9b181878.js';
-import { C as CardFooter } from '../_shared/esm/CardFooter-a08b70ee.js';
+import { C as CardFooter } from '../_shared/esm/CardFooter-e13f77b0.js';
+import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/BtIconArrowRightFill.esm-99019d1a.js';
 import '../_shared/esm/Icon-15799695.js';
-import '../_shared/esm/Surface-0ca6817d.js';
 
 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).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 })));
 };
 
 export { TypographyCard };

package/dist/_shared/cjs/{CardFooter-4a68a862.js → CardFooter-ff015d7d.js}

@@ -53,7 +53,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_esm.BtIconArrowRight,
@@ -65,16 +65,18 @@ var CardFooter = function (_a) {
         }
     };
     return (React__default["default"].createElement("div", { className: index.classNames("arc-CardFooter", {
-            "arc-CardFooter--darkPathway": isDarkPathway,
-            "arc-CardFooter--showFilledIcon": showFilledIcon
+            "arc-CardFooter--darkPathway": isDarkPathway
         }) },
         React__default["default"].createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default["default"].createElement("span", { className: "arc-CardFooter-metaText" }, metaText))),
         showButton && (React__default["default"].createElement("div", null,
             React__default["default"].createElement("div", { className: "arc-CardFooter-button" },
-                React__default["default"].createElement("div", { className: index.classNames("arc-CardFooter-buttonIcon", "arc-CardFooter-buttonIcon--regular") },
-                    React__default["default"].createElement(Icon.Icon, { icon: icons[buttonIcon].regular, size: 40 })),
-                React__default["default"].createElement("div", { className: "arc-CardFooter-buttonIcon arc-CardFooter-buttonIcon--filled" },
-                    React__default["default"].createElement(Icon.Icon, { icon: icons[buttonIcon].filled, size: 40 })))))));
+                React__default["default"].createElement("div", { className: "arc-CardFooter-buttonIcon" },
+                    React__default["default"].createElement("div", { className: index.classNames("arc-CardFooter-buttonIconRight", {
+                            "arc-CardFooter-buttonIconRight--isHovered": isHovered
+                        }) },
+                        React__default["default"].createElement(Icon.Icon, { icon: icons[buttonIcon].regular, size: 40 })),
+                    React__default["default"].createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
+                        React__default["default"].createElement(Icon.Icon, { icon: icons[buttonIcon].regular, size: 40 }))))))));
 };
 
 exports.CardFooter = CardFooter;