@arc-ui/components 11.22.0 → 11.23.0

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/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 }; }
 

package/dist/Select/Select.esm.js

@@ -13,15 +13,15 @@ import { $ as $ea1ef594cf570d83$export$439d29a4e110a164 } from '../_shared/esm/i
 import { B as BtIconChevronDown2Px } from '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
 import { B as BtIconTickAlt2Px } from '../_shared/esm/BtIconTickAlt2Px.esm-0bc2ded0.js';
 import { I as Icon } from '../_shared/esm/Icon-15799695.js';
-import { F as FormControl } from '../_shared/esm/FormControl-cc99cde0.js';
+import { F as FormControl } from '../_shared/esm/FormControl-8e836656.js';
 import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
 import { A as ArcRootElementContext } from '../_shared/esm/Base-f200653c.js';
 import '../_shared/esm/index-2cfab9f2.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
-import '../_shared/esm/DisclosureMini-ec17b008.js';
+import '../_shared/esm/DisclosureMini-56719716.js';
 import '../_shared/esm/Text-14f586ac.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/VisuallyHidden-06692fd3.js';
 
 function $ae6933e535247d3d$export$7d15b64cf5a3a4c4(value, [min, max]) {
     return Math.min(max, Math.max(min, value));

package/dist/SiteHeader/SiteHeader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SiteHeader_rehydrator = require('../_shared/cjs/SiteHeader.rehydrator-ea49f8d5.js');
+var SiteHeader_rehydrator = require('../_shared/cjs/SiteHeader.rehydrator-b76b0889.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');
@@ -13,7 +13,7 @@ require('../_shared/cjs/BtIconChevronRight2Px.esm-dbf8cbee.js');
 require('../_shared/cjs/Surface-038db6e1.js');
 require('../_shared/cjs/BrandLogo-aea340c8.js');
 require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/Button-84533dc8.js');
+require('../_shared/cjs/Button-6ba21d3b.js');
 require('../_shared/cjs/BtIconChevronLeftMid.esm-0aaa6770.js');
 require('../_shared/cjs/BtIconChevronRightMid.esm-d01ebbd4.js');
 require('../_shared/cjs/Icon-b46897a3.js');

package/dist/SiteHeader/SiteHeader.esm.js

@@ -1,4 +1,4 @@
-export { S as SiteHeader, a as SiteHeaderRehydrator } from '../_shared/esm/SiteHeader.rehydrator-65c8cf71.js';
+export { S as SiteHeader, a as SiteHeaderRehydrator } from '../_shared/esm/SiteHeader.rehydrator-8ad7651b.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';
@@ -9,7 +9,7 @@ import '../_shared/esm/BtIconChevronRight2Px.esm-75e92636.js';
 import '../_shared/esm/Surface-0ca6817d.js';
 import '../_shared/esm/BrandLogo-1af78f76.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/Button-3f294e64.js';
+import '../_shared/esm/Button-a7d134c6.js';
 import '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';
 import '../_shared/esm/BtIconChevronRightMid.esm-32268f1a.js';
 import '../_shared/esm/Icon-15799695.js';

package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-e0735a9d.js');
+var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-ce1c8737.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('../_shared/cjs/use-media-query-e61881d8.js');
 require('react');
@@ -14,7 +14,7 @@ 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/Button-6ba21d3b.js');
 require('../_shared/cjs/BtIconChevronLeftMid.esm-0aaa6770.js');
 require('../_shared/cjs/Icon-b46897a3.js');
 require('../_shared/cjs/Text-606ca3a2.js');

package/dist/SiteHeaderV2/SiteHeaderV2.esm.js

@@ -1,4 +1,4 @@
-export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-c74b811b.js';
+export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-a7c1b1cb.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import '../_shared/esm/use-media-query-4c807227.js';
 import 'react';
@@ -10,7 +10,7 @@ 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/Button-a7d134c6.js';
 import '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';
 import '../_shared/esm/Icon-15799695.js';
 import '../_shared/esm/Text-14f586ac.js';

package/dist/SkipLink/SkipLink.cjs.js

@@ -14,6 +14,7 @@ var SkipLinkItem = function (_a, props) {
     return (React__default["default"].createElement("a", filterDataAttrs.__assign({ className: "arc-SkipLinkItem", href: href, id: id }, filterDataAttrs.filterDataAttrs(props)), label));
 };
 
+/** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
 var SkipLink = function (_a, props) {
     var children = _a.children;
     return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-SkipLink" }, filterDataAttrs.filterDataAttrs(props)), children));

package/dist/SkipLink/SkipLink.esm.js

@@ -6,6 +6,7 @@ var SkipLinkItem = function (_a, props) {
     return (React__default.createElement("a", __assign({ className: "arc-SkipLinkItem", href: href, id: id }, filterDataAttrs(props)), label));
 };
 
+/** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
 var SkipLink = function (_a, props) {
     var children = _a.children;
     return (React__default.createElement("div", __assign({ className: "arc-SkipLink" }, filterDataAttrs(props)), children));

package/dist/Switch/Switch.cjs.js

@@ -10,14 +10,14 @@ require('react-dom');
 var Icon = require('../_shared/cjs/Icon-b46897a3.js');
 var BtIconTickAlt2Px_esm = require('../_shared/cjs/BtIconTickAlt2Px.esm-57c89acc.js');
 var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-var FormControl = require('../_shared/cjs/FormControl-5f3b6ce4.js');
+var FormControl = require('../_shared/cjs/FormControl-68258ce1.js');
 var VerticalSpace = require('../_shared/cjs/VerticalSpace-dc53bb70.js');
 var Text = require('../_shared/cjs/Text-606ca3a2.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/BtIconChevronDown2Px.esm-39030ee0.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 }; }
 
@@ -509,7 +509,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 = filterDataAttrs.__rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel"]);
     var surface = React.useContext(Surface.Context).surface;

package/dist/Switch/Switch.esm.js

@@ -6,14 +6,14 @@ import 'react-dom';
 import { I as Icon } from '../_shared/esm/Icon-15799695.js';
 import { B as BtIconTickAlt2Px } from '../_shared/esm/BtIconTickAlt2Px.esm-0bc2ded0.js';
 import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { F as FormControl } from '../_shared/esm/FormControl-cc99cde0.js';
+import { F as FormControl } from '../_shared/esm/FormControl-8e836656.js';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
 import { T as Text } from '../_shared/esm/Text-14f586ac.js';
 import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
-import '../_shared/esm/DisclosureMini-ec17b008.js';
+import '../_shared/esm/DisclosureMini-56719716.js';
 import '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/VisuallyHidden-06692fd3.js';
 
 function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
     return function handleEvent(event) {
@@ -501,7 +501,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).surface;

package/dist/Tabs/Tabs.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Tabs = require('../_shared/cjs/Tabs-24e6f45b.js');
+var Tabs = require('../_shared/cjs/Tabs-bc9fac46.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('react');
 require('../_shared/cjs/extends-8c5e4b48.js');

package/dist/Tabs/Tabs.esm.js

@@ -1,4 +1,4 @@
-export { T as Tabs } from '../_shared/esm/Tabs-a85af483.js';
+export { T as Tabs } from '../_shared/esm/Tabs-9485cab6.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import 'react';
 import '../_shared/esm/extends-8cc61aad.js';

package/dist/Tag/Tag.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Tag = require('../_shared/cjs/Tag-8723b324.js');
+var Tag = require('../_shared/cjs/Tag-73a59171.js');
 require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');

package/dist/Tag/Tag.esm.js

@@ -1,4 +1,4 @@
-export { T as Tag } from '../_shared/esm/Tag-664b85c8.js';
+export { T as Tag } from '../_shared/esm/Tag-cb35d57b.js';
 import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';