@arc-ui/components 11.21.1 → 11.23.0

package/dist/InformationCard/InformationCard.esm.js

@@ -1,21 +1,23 @@
 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';
-import { T as Tag } from '../_shared/esm/Tag-664b85c8.js';
+import { T as Tag } from '../_shared/esm/Tag-cb35d57b.js';
 import { I as Image } from '../_shared/esm/Image-12fbd327.js';
 import { T as Text } from '../_shared/esm/Text-14f586ac.js';
-import { B as Button } from '../_shared/esm/Button-3f294e64.js';
+import { B as Button } from '../_shared/esm/Button-a7d134c6.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';
 
+/** 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).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 +25,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/Link/Link.cjs.js

@@ -0,0 +1,76 @@
+'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 Surface = require('../_shared/cjs/Surface-038db6e1.js');
+var Icon = require('../_shared/cjs/Icon-b46897a3.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
+require('../_shared/cjs/suffix-modifier-64dcd338.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const BtIconNewWindow = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["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["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 = filterDataAttrs.__rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = React.useContext(Surface.Context).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: index.classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied
+        })
+    };
+    var elementProps = {
+        a: filterDataAttrs.__assign(filterDataAttrs.__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: filterDataAttrs.__assign({}, commonProps),
+        span: filterDataAttrs.__assign({}, commonProps)
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React__default["default"].createElement(LinkElement, filterDataAttrs.__assign({}, elementProps[LinkElement], filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-Link-wrapper" },
+            React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0"),
+            React__default["default"].createElement("span", { className: "arc-Link-iconWrapper" },
+                React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React__default["default"].createElement(Icon.Icon, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
+};
+
+exports.Link = Link;

package/dist/Link/Link.esm.js

@@ -0,0 +1,68 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import React__default, { useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
+import { I as Icon } from '../_shared/esm/Icon-15799695.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-06692fd3.js';
+import '../_shared/esm/suffix-modifier-3d548e45.js';
+
+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).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 { Link };

package/dist/Link/package.json

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

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/Modal/Modal.cjs.js

@@ -14,7 +14,7 @@ var index$2 = require('../_shared/cjs/index-d38f1bd0.js');
 var Icon = require('../_shared/cjs/Icon-b46897a3.js');
 var Base = require('../_shared/cjs/Base-f5a86eed.js');
 var Heading = require('../_shared/cjs/Heading-27cba320.js');
-var Button = require('../_shared/cjs/Button-84533dc8.js');
+var Button = require('../_shared/cjs/Button-6ba21d3b.js');
 var Text = require('../_shared/cjs/Text-606ca3a2.js');
 var VerticalSpace = require('../_shared/cjs/VerticalSpace-dc53bb70.js');
 require('react-dom');
@@ -255,7 +255,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 = filterDataAttrs.__rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size"]);
     var arcRootElement = React.useContext(Base.ArcRootElementContext);
@@ -280,7 +280,7 @@ var Modal = function (_a) {
     return (React__default["default"].createElement($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { open: isOpen },
         React__default["default"].createElement($5d3850c4d0b4e6c7$export$602eac185826482c, { container: arcRootElement || undefined },
             React__default["default"].createElement($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "arc-Modal-overlay" },
-                React__default["default"].createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, filterDataAttrs.__assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, className: index$3.classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
+                React__default["default"].createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, filterDataAttrs.__assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: index$3.classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
                         "arc-Modal-dialog--maxHeightWindow": isContentScrollable
                     }) }, filterDataAttrs.filterDataAttrs(props)),
                     React__default["default"].createElement("div", { className: "arc-Modal-section" },

package/dist/Modal/Modal.esm.js

@@ -10,7 +10,7 @@ import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from '../_shared/esm/i
 import { I as Icon } from '../_shared/esm/Icon-15799695.js';
 import { A as ArcRootElementContext } from '../_shared/esm/Base-f200653c.js';
 import { H as Heading } from '../_shared/esm/Heading-d16e0e53.js';
-import { B as Button } from '../_shared/esm/Button-3f294e64.js';
+import { B as Button } from '../_shared/esm/Button-a7d134c6.js';
 import { T as Text } from '../_shared/esm/Text-14f586ac.js';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
 import 'react-dom';
@@ -247,7 +247,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);
@@ -272,7 +272,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" },

package/dist/Pagination/Pagination.cjs.js

@@ -52,7 +52,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 = filterDataAttrs.__rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);

package/dist/Pagination/Pagination.esm.js

@@ -44,7 +44,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"]);

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -16,10 +16,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
- * 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 = filterDataAttrs.__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 = filterDataAttrs.__rest(_a, ["hidePrev", "hideNext", "prevHref", "nextHref", "onPrevPage", "onNextPage", "isFluid"]);
     var surface = React.useContext(Surface.Context).surface;
     return (React__default["default"].createElement("nav", filterDataAttrs.__assign({ className: index.classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--onDarkSurface": surface === "dark",
@@ -28,20 +28,16 @@ var PaginationSimple = function (_a) {
         }) }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement("ul", { className: "arc-PaginationSimple-list" },
             React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
-                React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
+                React__default["default"].createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
                         "arc-PaginationSimple-navigationButton--hidden": hidePrev
-                    }), onClick: function () {
-                        onPrevPage();
-                    } },
+                    }), onClick: onPrevPage },
                     React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
                         React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_esm.BtIconChevronLeftMid })),
                     React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
             React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
-                React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
+                React__default["default"].createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
                         "arc-PaginationSimple-navigationButton--hidden": hideNext
-                    }), onClick: function () {
-                        onNextPage();
-                    } },
+                    }), onClick: onNextPage },
                     React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
                     React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
                         React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_esm.BtIconChevronRightMid })))))));

package/dist/PaginationSimple/PaginationSimple.esm.js

@@ -8,10 +8,10 @@ import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 
 /**
- * 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).surface;
     return (React__default.createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--onDarkSurface": surface === "dark",
@@ -20,20 +20,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 })))))));

package/dist/ProgressBar/ProgressBar.cjs.js

@@ -59,10 +59,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 = filterDataAttrs.__rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
     var surface = React.useContext(Surface.Context).surface;
     var progressValue = Math.min(100, Math.max(0, value));
+    var autoFocusRef = function (canFocus) { return function (el) {
+        canFocus && el && el.focus();
+    }; };
     return (React__default["default"].createElement("div", filterDataAttrs.__assign({ "data-testid": "progress", className: index.classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
             "arc-ProgressBar--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs.filterDataAttrs(props)),
@@ -76,11 +82,11 @@ var ProgressBar = function (_a) {
         React__default["default"].createElement("div", { className: "arc-ProgressBar-container" },
             React__default["default"].createElement("div", { className: "arc-ProgressBar-outerBar" },
                 React__default["default"].createElement("div", filterDataAttrs.__assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
-            description && (React__default["default"].createElement("div", { className: "arc-ProgressBar-description" },
+            description && (React__default["default"].createElement("div", { className: "arc-ProgressBar-description", role: "status" },
                 React__default["default"].createElement(Text.Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
             action && (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }),
-                React__default["default"].createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
+                React__default["default"].createElement("button", { ref: autoFocusRef(action.autofocusOnMount), className: "arc-ProgressBar-actionButton", onClick: action.action },
                     React__default["default"].createElement("div", { className: "arc-ProgressBar-actionContainer" },
                         React__default["default"].createElement(Text.Text, null, action.text),
                         action.icon && (React__default["default"].createElement("div", { className: "arc-ProgressBar-actionIcon" },

package/dist/ProgressBar/ProgressBar.esm.js

@@ -51,10 +51,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).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)),
@@ -68,11 +74,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" },

package/dist/ProgressStepper/ProgressStepper.cjs.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ProgressStepper = require('../_shared/cjs/ProgressStepper-20a61620.js');
+var ProgressStepper = require('../_shared/cjs/ProgressStepper-57cfef1e.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');
 require('../_shared/cjs/Icon-b46897a3.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
 require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
 
 
 

package/dist/ProgressStepper/ProgressStepper.esm.js

@@ -1,8 +1,8 @@
-export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-74d48612.js';
+export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-6c811282.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';
 import '../_shared/esm/Icon-15799695.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/VisuallyHidden-06692fd3.js';

package/dist/RadioGroup/RadioGroup.cjs.js

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../_shared/cjs/RadioGroup-07bb155e.js');
+var RadioGroup = require('../_shared/cjs/RadioGroup-85eda600.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('react');
-require('../_shared/cjs/FormControl-5f3b6ce4.js');
+require('../_shared/cjs/FormControl-68258ce1.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('../_shared/cjs/BtIconAlert.esm-1a0ff9f0.js');
 require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/DisclosureMini-d0eeb6bb.js');
+require('../_shared/cjs/DisclosureMini-09c749e5.js');
 require('../_shared/cjs/BtIconChevronDown2Px.esm-39030ee0.js');
 require('../_shared/cjs/Text-606ca3a2.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
 
 
 

package/dist/RadioGroup/RadioGroup.esm.js

@@ -1,12 +1,12 @@
-export { R as RadioGroup } from '../_shared/esm/RadioGroup-362be63f.js';
+export { R as RadioGroup } from '../_shared/esm/RadioGroup-6c8f8454.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import 'react';
-import '../_shared/esm/FormControl-cc99cde0.js';
+import '../_shared/esm/FormControl-8e836656.js';
 import '../_shared/esm/index-2e73c2e9.js';
 import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
 import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/DisclosureMini-ec17b008.js';
+import '../_shared/esm/DisclosureMini-56719716.js';
 import '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
 import '../_shared/esm/Text-14f586ac.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/VisuallyHidden-06692fd3.js';

package/dist/Select/Select.cjs.js

@@ -17,15 +17,15 @@ var index$5 = require('../_shared/cjs/index-a31e64a9.js');
 var BtIconChevronDown2Px_esm = require('../_shared/cjs/BtIconChevronDown2Px.esm-39030ee0.js');
 var BtIconTickAlt2Px_esm = require('../_shared/cjs/BtIconTickAlt2Px.esm-57c89acc.js');
 var Icon = require('../_shared/cjs/Icon-b46897a3.js');
-var FormControl = require('../_shared/cjs/FormControl-5f3b6ce4.js');
+var FormControl = require('../_shared/cjs/FormControl-68258ce1.js');
 var Surface = require('../_shared/cjs/Surface-038db6e1.js');
 var Base = require('../_shared/cjs/Base-f5a86eed.js');
 require('../_shared/cjs/index-74004a9c.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
 require('../_shared/cjs/BtIconAlert.esm-1a0ff9f0.js');
-require('../_shared/cjs/DisclosureMini-d0eeb6bb.js');
+require('../_shared/cjs/DisclosureMini-09c749e5.js');
 require('../_shared/cjs/Text-606ca3a2.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }