@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.4

package/dist/Pagination/Pagination.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
-var index = require('../_shared/cjs/index-9947ac13.js');
+var index = require('../_shared/cjs/index-df60851b.js');
+var index$1 = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-ee814862.js');
+require('../_shared/cjs/suffix-modifier-c8a34402.js');
+require('../_shared/cjs/Surface-8599dbe4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,14 +20,14 @@ var usePagination = function (pageCount, selectedPage) {
     return React.useMemo(function () {
         if (pageCount > 7 && selectedPage < 5) {
             // show 1 - 5 the right dots are visible.
-            return formatValues(filterDataAttrs.__spreadArray(filterDataAttrs.__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
+            return formatValues(index.__spreadArray(index.__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
                 "...",
                 pageCount,
             ], false));
         }
         if (pageCount > 7 && selectedPage >= pageCount - 3) {
             // show numbers to the end but the left dots are visible
-            return formatValues(filterDataAttrs.__spreadArray([
+            return formatValues(index.__spreadArray([
                 1,
                 "..."
             ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
@@ -50,11 +50,10 @@ 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"]);
-    var surface = React.useContext(Surface.Context).surface;
+    var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = index.__rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
     var _c = React.useState(defaultSelectedPage), selectedPage = _c[0], setSelectedPage = _c[1];
     var pageRange = usePagination(pageCount, selectedPage);
     var handlePagechange = function (pageToSelect) { return function () {
@@ -62,20 +61,18 @@ var Pagination = function (_a) {
         onPageChange(pageToSelect);
     }; };
     var isPageNumber = function (rangeValue) { return !isNaN(parseInt(rangeValue)); };
-    return (React__default["default"].createElement("nav", filterDataAttrs.__assign({ "aria-label": "pagination navigation", className: index.classNames("arc-Pagination", {
-            "arc-Pagination--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("button", { "aria-label": "Go to previous page", className: index.classNames("arc-Pagination-navigationButton", {
+    return (React__default["default"].createElement("nav", index.__assign({ "aria-label": "pagination navigation", className: index$1.classNames("arc-Pagination") }, index.filterDataAttrs(props)),
+        React__default["default"].createElement("button", { "aria-label": "Go to previous page", className: index$1.classNames("arc-Pagination-navigationButton", {
                 "arc-Pagination-navigationButton--hidden": selectedPage === 1
             }), onClick: handlePagechange(selectedPage - 1) },
             React__default["default"].createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--left" },
                 React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationPrevious" }))),
         React__default["default"].createElement("div", { className: "arc-Pagination-pageNumberContainer" }, pageRange.map(function (rangeValue, i) {
-            return isPageNumber(rangeValue) ? (React__default["default"].createElement("button", { "aria-current": parseInt(rangeValue) === selectedPage, key: "pagination-range-value-".concat(rangeValue), "aria-label": "Go to page ".concat(rangeValue), className: index.classNames("arc-Pagination-value arc-Pagination-value--number", {
+            return isPageNumber(rangeValue) ? (React__default["default"].createElement("button", { "aria-current": parseInt(rangeValue) === selectedPage, key: "pagination-range-value-".concat(rangeValue), "aria-label": "Go to page ".concat(rangeValue), className: index$1.classNames("arc-Pagination-value arc-Pagination-value--number", {
                     "arc-Pagination-value--selected": parseInt(rangeValue) === selectedPage
-                }), onClick: handlePagechange(parseInt(rangeValue)) }, rangeValue)) : (React__default["default"].createElement("span", { key: "pagination-range-value-dot".concat(i), className: index.classNames("arc-Pagination-value arc-Pagination-value--dots") }, rangeValue));
+                }), onClick: handlePagechange(parseInt(rangeValue)) }, rangeValue)) : (React__default["default"].createElement("span", { key: "pagination-range-value-dot".concat(i), className: index$1.classNames("arc-Pagination-value arc-Pagination-value--dots") }, rangeValue));
         })),
-        React__default["default"].createElement("button", { "aria-label": "Go to next page", className: index.classNames("arc-Pagination-navigationButton", {
+        React__default["default"].createElement("button", { "aria-label": "Go to next page", className: index$1.classNames("arc-Pagination-navigationButton", {
                 "arc-Pagination-navigationButton--hidden": selectedPage === pageCount
             }), onClick: handlePagechange(selectedPage + 1) },
             React__default["default"].createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--right" },

package/dist/Pagination/Pagination.esm.js

@@ -1,9 +1,9 @@
-import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-288c66b5.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import React__default, { useMemo, useContext, useState } from 'react';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import React__default, { useMemo, useState } from 'react';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-c2dc41a6.js';
+import '../_shared/esm/suffix-modifier-1ce05abe.js';
+import '../_shared/esm/Surface-71d21a9e.js';
 
 var usePagination = function (pageCount, selectedPage) {
     var formatValues = function (range) {
@@ -42,11 +42,10 @@ 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"]);
-    var surface = useContext(Context).surface;
     var _c = useState(defaultSelectedPage), selectedPage = _c[0], setSelectedPage = _c[1];
     var pageRange = usePagination(pageCount, selectedPage);
     var handlePagechange = function (pageToSelect) { return function () {
@@ -54,9 +53,7 @@ var Pagination = function (_a) {
         onPageChange(pageToSelect);
     }; };
     var isPageNumber = function (rangeValue) { return !isNaN(parseInt(rangeValue)); };
-    return (React__default.createElement("nav", __assign({ "aria-label": "pagination navigation", className: classNames("arc-Pagination", {
-            "arc-Pagination--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
+    return (React__default.createElement("nav", __assign({ "aria-label": "pagination navigation", className: classNames("arc-Pagination") }, filterDataAttrs(props)),
         React__default.createElement("button", { "aria-label": "Go to previous page", className: classNames("arc-Pagination-navigationButton", {
                 "arc-Pagination-navigationButton--hidden": selectedPage === 1
             }), onClick: handlePagechange(selectedPage - 1) },

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -2,44 +2,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
-var index = require('../_shared/cjs/index-9947ac13.js');
+var index = require('../_shared/cjs/index-df60851b.js');
+var index$1 = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-ee814862.js');
+require('../_shared/cjs/suffix-modifier-c8a34402.js');
+require('../_shared/cjs/Surface-8599dbe4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 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 surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("nav", filterDataAttrs.__assign({ className: index.classNames("arc-PaginationSimple", {
-            "arc-PaginationSimple--onDarkSurface": surface === "dark",
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, prevHref = _a.prevHref, nextHref = _a.nextHref, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = index.__rest(_a, ["hidePrev", "hideNext", "prevHref", "nextHref", "onPrevPage", "onNextPage", "isFluid"]);
+    return (React__default["default"].createElement("nav", index.__assign({ className: index$1.classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--fluid": isFluid,
             "arc-PaginationSimple--centered": !isFluid
-        }) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
-                "arc-PaginationSimple-navigationButton--hidden": hidePrev
-            }), onClick: function () {
-                onPrevPage();
-            } },
-            React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
-                React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimplePrevious" })),
-            React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
-        React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
-                "arc-PaginationSimple-navigationButton--hidden": hideNext
-            }), onClick: function () {
-                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(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimpleNext" })))));
+        }) }, index.filterDataAttrs(props)),
+        React__default["default"].createElement("ul", { className: "arc-PaginationSimple-list" },
+            React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__default["default"].createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: index$1.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hidePrev
+                    }), onClick: onPrevPage },
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                        React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimplePrevious" })),
+                    React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
+            React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__default["default"].createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: index$1.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hideNext
+                    }), 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(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimpleNext" })))))));
 };
 
 exports.PaginationSimple = PaginationSimple;

package/dist/PaginationSimple/PaginationSimple.esm.js

@@ -1,37 +1,34 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-288c66b5.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import React__default, { useContext } from 'react';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import React__default from 'react';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-c2dc41a6.js';
+import '../_shared/esm/suffix-modifier-1ce05abe.js';
+import '../_shared/esm/Surface-71d21a9e.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 surface = useContext(Context).surface;
+    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"]);
     return (React__default.createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
-            "arc-PaginationSimple--onDarkSurface": surface === "dark",
             "arc-PaginationSimple--fluid": isFluid,
             "arc-PaginationSimple--centered": !isFluid
         }) }, filterDataAttrs(props)),
-        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
-                "arc-PaginationSimple-navigationButton--hidden": hidePrev
-            }), onClick: function () {
-                onPrevPage();
-            } },
-            React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
-                React__default.createElement(ThemeIcon, { size: 32, icon: "paginationSimplePrevious" })),
-            React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
-        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
-                "arc-PaginationSimple-navigationButton--hidden": hideNext
-            }), onClick: function () {
-                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(ThemeIcon, { size: 32, icon: "paginationSimpleNext" })))));
+        React__default.createElement("ul", { className: "arc-PaginationSimple-list" },
+            React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__default.createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hidePrev
+                    }), onClick: onPrevPage },
+                    React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                        React__default.createElement(ThemeIcon, { size: 32, icon: "paginationSimplePrevious" })),
+                    React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
+            React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__default.createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hideNext
+                    }), 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(ThemeIcon, { size: 32, icon: "paginationSimpleNext" })))))));
 };
 
 export { PaginationSimple };

package/dist/Poster/Poster.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Poster = require('../_shared/cjs/Poster-499b78da.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var Poster = require('../_shared/cjs/Poster-b7242b37.js');
+require('../_shared/cjs/index-df60851b.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('react');
-require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/Image-e873b8fc.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+require('../_shared/cjs/Surface-8599dbe4.js');
+require('../_shared/cjs/Image-e9a5a326.js');
+require('../_shared/cjs/suffix-modifier-c8a34402.js');
 
 
 

package/dist/Poster/Poster.esm.js

@@ -1,7 +1,7 @@
-export { P as Poster } from '../_shared/esm/Poster-699dc89b.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { P as Poster } from '../_shared/esm/Poster-e05a8b45.js';
+import '../_shared/esm/index-288c66b5.js';
 import '../_shared/esm/index-2e73c2e9.js';
 import 'react';
-import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/Image-12fbd327.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import '../_shared/esm/Surface-71d21a9e.js';
+import '../_shared/esm/Image-57d08939.js';
+import '../_shared/esm/suffix-modifier-1ce05abe.js';

package/dist/ProgressBar/ProgressBar.cjs.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
-var index = require('../_shared/cjs/index-9947ac13.js');
+var index = require('../_shared/cjs/index-df60851b.js');
+var index$1 = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var Text = require('../_shared/cjs/Text-606ca3a2.js');
-var Heading = require('../_shared/cjs/Heading-27cba320.js');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-dc53bb70.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+var Text = require('../_shared/cjs/Text-1c1110a4.js');
+var Heading = require('../_shared/cjs/Heading-fb63844f.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-e128ec68.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-ee814862.js');
+require('../_shared/cjs/suffix-modifier-c8a34402.js');
+require('../_shared/cjs/Surface-8599dbe4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,20 +29,23 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
         "aria-label": ariaLabel,
         tabIndex: 0
     };
-    var indeterminateProps = filterDataAttrs.__assign(filterDataAttrs.__assign({}, commonProps), { className: index.classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
-    var determinateProps = filterDataAttrs.__assign(filterDataAttrs.__assign({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
+    var indeterminateProps = index.__assign(index.__assign({}, commonProps), { className: index$1.classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = index.__assign(index.__assign({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
             transform: "translateX(".concat(-100 + progressValue, "%)")
         } });
     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 _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 = index.__rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
     var progressValue = Math.min(100, Math.max(0, value));
-    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)),
+    var autoFocusRef = function (canFocus) { return function (el) {
+        canFocus && el && el.focus();
+    }; };
+    return (React__default["default"].createElement("div", index.__assign({ "data-testid": "progress", className: index$1.classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state)) }, index.filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
             React__default["default"].createElement("div", { className: "arc-ProgressBar-titleContainer" },
                 headline && React__default["default"].createElement(Heading.Heading, { size: "s" }, headline),
@@ -52,12 +55,12 @@ var ProgressBar = function (_a) {
                 React__default["default"].createElement(Text.Text, null, displayValue)))),
         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" },
+                React__default["default"].createElement("div", index.__assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
+            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

@@ -1,12 +1,12 @@
-import { a as __assign, _ as __rest, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { a as __assign, _ as __rest, f as filterDataAttrs } from '../_shared/esm/index-288c66b5.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import React__default, { useContext } from 'react';
-import { T as Text } from '../_shared/esm/Text-14f586ac.js';
-import { H as Heading } from '../_shared/esm/Heading-d16e0e53.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import React__default from 'react';
+import { T as Text } from '../_shared/esm/Text-a46fb76b.js';
+import { H as Heading } from '../_shared/esm/Heading-906c7c7c.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-b07cd8e6.js';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-c2dc41a6.js';
+import '../_shared/esm/suffix-modifier-1ce05abe.js';
+import '../_shared/esm/Surface-71d21a9e.js';
 
 var PROGRESS_BAR_ICON_MAP = {
     refresh: "progressBarRefresh",
@@ -28,13 +28,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));
-    return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
-            "arc-ProgressBar--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
+    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)) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
             React__default.createElement("div", { className: "arc-ProgressBar-titleContainer" },
                 headline && React__default.createElement(Heading, { size: "s" }, headline),
@@ -45,11 +48,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,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ProgressStepper = require('../_shared/cjs/ProgressStepper-74ee1eec.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var ProgressStepper = require('../_shared/cjs/ProgressStepper-fb8405c2.js');
+require('../_shared/cjs/index-df60851b.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/VerticalSpace-dc53bb70.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
+require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
+require('../_shared/cjs/Icon-0ec0c1fb.js');
+require('../_shared/cjs/suffix-modifier-c8a34402.js');
+require('../_shared/cjs/Surface-8599dbe4.js');
 
 
 

package/dist/ProgressStepper/ProgressStepper.esm.js

@@ -1,9 +1,8 @@
-export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-5de34269.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-189ed0f9.js';
+import '../_shared/esm/index-288c66b5.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/VerticalSpace-43cd9138.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import '../_shared/esm/VisuallyHidden-06692fd3.js';
+import '../_shared/esm/Icon-512f834f.js';
+import '../_shared/esm/suffix-modifier-1ce05abe.js';
+import '../_shared/esm/Surface-71d21a9e.js';

package/dist/RadioGroup/RadioGroup.cjs.js

@@ -2,17 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../_shared/cjs/RadioGroup-9bc96f6a.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var RadioGroup = require('../_shared/cjs/RadioGroup-a4186267.js');
+require('../_shared/cjs/index-df60851b.js');
 require('react');
-require('../_shared/cjs/FormControl-30f2330f.js');
+require('../_shared/cjs/FormControl-88d48f42.js');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/DisclosureMini-145105a4.js');
-require('../_shared/cjs/Text-606ca3a2.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
+require('../_shared/cjs/Surface-8599dbe4.js');
+require('../_shared/cjs/DisclosureMini-c01ecce0.js');
+require('../_shared/cjs/Text-1c1110a4.js');
+require('../_shared/cjs/suffix-modifier-c8a34402.js');
+require('../_shared/cjs/ThemeIcon-ee814862.js');
+require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
 
 
 
+exports.RadioButton = RadioGroup.RadioButton;
 exports.RadioGroup = RadioGroup.RadioGroup;

package/dist/RadioGroup/RadioGroup.esm.js

@@ -1,10 +1,11 @@
-export { R as RadioGroup } from '../_shared/esm/RadioGroup-002a32ba.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { a as RadioButton, R as RadioGroup } from '../_shared/esm/RadioGroup-8ff17cbb.js';
+import '../_shared/esm/index-288c66b5.js';
 import 'react';
-import '../_shared/esm/FormControl-433228f5.js';
+import '../_shared/esm/FormControl-d873f7fa.js';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/DisclosureMini-bf95a9db.js';
-import '../_shared/esm/Text-14f586ac.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
+import '../_shared/esm/Surface-71d21a9e.js';
+import '../_shared/esm/DisclosureMini-38f4c459.js';
+import '../_shared/esm/Text-a46fb76b.js';
+import '../_shared/esm/suffix-modifier-1ce05abe.js';
+import '../_shared/esm/ThemeIcon-c2dc41a6.js';
+import '../_shared/esm/VisuallyHidden-06692fd3.js';

package/dist/Rule/Rule.cjs.js

@@ -2,18 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index = require('../_shared/cjs/index-df60851b.js');
 var React = require('react');
+var index$1 = require('../_shared/cjs/index-9947ac13.js');
+var Surface = require('../_shared/cjs/Surface-8599dbe4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
- * Use `Rule` to display a horizontal rule.
+ * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (props) {
-    return React__default["default"].createElement("hr", filterDataAttrs.__assign({ className: "arc-Rule" }, filterDataAttrs.filterDataAttrs(props)));
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("hr", index.__assign({ className: index$1.classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, index.filterDataAttrs(props))));
 };
 
 exports.Rule = Rule;

package/dist/Rule/Rule.esm.js

@@ -1,11 +1,21 @@
-import { a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default from 'react';
+import { a as __assign, f as filterDataAttrs } from '../_shared/esm/index-288c66b5.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-71d21a9e.js';
 
 /**
- * Use `Rule` to display a horizontal rule.
+ * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (props) {
-    return React__default.createElement("hr", __assign({ className: "arc-Rule" }, filterDataAttrs(props)));
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props))));
 };
 
 export { Rule };