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

package/dist/Modal/styles.css

@@ -0,0 +1 @@
+.arc .arc-Modal{color:auto}.arc .arc-Modal-overlay{align-items:center;background-color:var(--overlay-colors-overlay-default);display:flex;height:100%;justify-content:center;left:0;overflow-x:hidden;overflow-y:auto;padding:16px;position:fixed;top:0;width:100%;z-index:100}.arc .arc-Modal-dialog{background-color:var(--modal-colors-light-bg-default);border-radius:var(--modal-border-radius-s);display:flex;flex-direction:column;margin:auto;padding:var(--modal-padding-m) 0;position:relative;width:100%}.arc .arc-Modal-dialog--maxHeightWindow{height:100%}.arc .arc-Modal-iconContainer{position:absolute;right:8px;top:8px}.arc .arc-Modal-closeButton{background-color:transparent;border:none;cursor:pointer;margin:0;padding:0}.arc .arc-Modal-closeButton:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Modal-content{overflow-x:hidden;overflow-y:auto}.arc .arc-Modal-section{padding:0 var(--modal-padding-m)}.arc .arc-Modal-actions{margin-top:var(--modal-gap-m)}.arc .arc-Modal-actionButton:nth-of-type(n+2){margin-top:var(--modal-gap-s)}@media (min-width:636px){.arc .arc-Modal-overlay{padding:80px 0}.arc .arc-Modal-dialog--s{max-width:var(--modal-size-m)}.arc .arc-Modal-dialog--m,.arc .arc-Modal-dialog--l{max-width:var(--modal-size-l)}.arc .arc-Modal-actions{display:flex}.arc .arc-Modal-actionButton{flex:1 1 auto}.arc .arc-Modal-actionButton:nth-of-type(n+2){margin-left:var(--modal-gap-s);margin-top:0}}@media (min-width:768px){.arc .arc-Modal-actions{justify-content:flex-end}.arc .arc-Modal-actionButton{flex:0 1 auto}}@media (min-width:1024px){.arc .arc-Modal-dialog--m{max-width:var(--modal-size-xl)}.arc .arc-Modal-dialog--l{max-width:var(--modal-size-xxl)}.arc .arc-Modal-actions{justify-content:flex-end}.arc .arc-Modal-actionButton{flex:0 1 auto}}@media (prefers-reduced-motion:no-preference){.arc .arc-Modal-overlay{animation:overlay-show 100ms cubic-bezier(0.44,0,0.55,0.94)}.arc .arc-Modal-dialog{animation:content-show 100ms cubic-bezier(0.44,0,0.55,0.94)}@keyframes content-show{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}@keyframes overlay-show{from{opacity:0}to{opacity:1}}}

package/dist/PageBanner/PageBanner.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
+var React = require('react');
+var Banner = require('../_shared/cjs/Banner-a28364b4.js');
+require('../_shared/cjs/index-9947ac13.js');
+require('../_shared/cjs/index.es-0f681622.js');
+require('../_shared/cjs/use-media-query-d34c83b9.js');
+require('../_shared/cjs/Heading-b4b65724.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
+require('../_shared/cjs/Image-bb696c61.js');
+require('../_shared/cjs/Grid-102905c8.js');
+require('../_shared/cjs/VerticalSpace-a5cf4d4e.js');
+require('../_shared/cjs/Text-1b3e4fb6.js');
+require('../_shared/cjs/Box-a8f42d4f.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var PageBanner = function (_a) {
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.minHeight, minHeight = _c === void 0 ? 576 : _c, _d = _a.isReversed, isReversed = _d === void 0 ? false : _d, _e = _a.isElevated, isElevated = _e === void 0 ? false : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.alignment, alignment = _h === void 0 ? "center" : _h, props = index_es.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
+    return (React__default["default"].createElement(Banner.Banner, index_es.__assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, index_es.filterDataAttrs(props)), children));
+};
+
+exports.PageBanner = PageBanner;

package/dist/PageBanner/PageBanner.esm.js

@@ -0,0 +1,20 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
+import React__default from 'react';
+import { B as Banner } from '../_shared/esm/Banner-1b709fc7.js';
+import '../_shared/esm/index-2e73c2e9.js';
+import '../_shared/esm/index.es-be971b8d.js';
+import '../_shared/esm/use-media-query-d3622da8.js';
+import '../_shared/esm/Heading-e83f0d49.js';
+import '../_shared/esm/Surface-201aa0d6.js';
+import '../_shared/esm/Image-45c7760b.js';
+import '../_shared/esm/Grid-5d1afe1a.js';
+import '../_shared/esm/VerticalSpace-4b6b7468.js';
+import '../_shared/esm/Text-dc3f9cb5.js';
+import '../_shared/esm/Box-0516cf8c.js';
+
+var PageBanner = function (_a) {
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.minHeight, minHeight = _c === void 0 ? 576 : _c, _d = _a.isReversed, isReversed = _d === void 0 ? false : _d, _e = _a.isElevated, isElevated = _e === void 0 ? false : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.alignment, alignment = _h === void 0 ? "center" : _h, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
+    return (React__default.createElement(Banner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, filterDataAttrs(props)), children));
+};
+
+export { PageBanner };

package/dist/PageBanner/package.json

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

package/dist/Pagination/Pagination.cjs.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var index = 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-cf6ddb34.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,14 +19,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_es.__spreadArray(index_es.__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_es.__spreadArray([
                 1,
                 "..."
             ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
@@ -50,11 +49,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_es.__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,9 +60,7 @@ 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)),
+    return (React__default["default"].createElement("nav", index_es.__assign({ "aria-label": "pagination navigation", className: index.classNames("arc-Pagination") }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement("button", { "aria-label": "Go to previous page", className: index.classNames("arc-Pagination-navigationButton", {
                 "arc-Pagination-navigationButton--hidden": selectedPage === 1
             }), onClick: handlePagechange(selectedPage - 1) },

package/dist/Pagination/Pagination.esm.js

@@ -1,9 +1,8 @@
-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.es-fc59ba8f.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-69de5351.js';
+import '../_shared/esm/Surface-201aa0d6.js';
 
 var usePagination = function (pageCount, selectedPage) {
     var formatValues = function (range) {
@@ -42,11 +41,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 +52,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/Pagination/styles.css

@@ -0,0 +1 @@
+.arc .arc-Pagination{align-items:center;display:flex;flex-wrap:nowrap}.arc .arc-Pagination-pageNumberContainer{display:flex;flex-wrap:nowrap}.arc .arc-Pagination-navigationButton{align-items:center;background:transparent;border:none;border-radius:var(--pagination-border-radius-m);color:var(--pagination-colors-light-fg-default);cursor:pointer;display:flex;height:var(--pagination-size-m);justify-content:center;line-height:0;margin:0;outline:none;padding:0;width:var(--pagination-size-m)}.arc .arc-Pagination--onDarkSurface .arc-Pagination-navigationButton{color:var(--pagination-colors-dark-fg-default)}.arc .arc-Pagination-navigationButtonIcon--left{margin-left:-2px}.arc .arc-Pagination-navigationButtonIcon--right{margin-right:-2px}.arc .arc-Pagination-navigationButton--hidden{visibility:hidden}.arc .arc-Pagination-navigationButton:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Pagination-value--number{background:transparent;border:none;color:inherit;cursor:pointer;font:var(--sem-type-interface-reg-s);outline:none;padding:0}.arc .arc-Pagination-value--number:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Pagination .arc-Pagination-value--number:active{background-color:var(--pagination-colors-light-bg-pressed);color:var(--pagination-colors-light-text-default)}.arc .arc-Pagination-value{align-items:center;border-radius:var(--pagination-border-radius-m);display:flex;height:var(--pagination-size-m);justify-content:center;width:var(--pagination-size-m)}@media (hover:hover){.arc .arc-Pagination-navigationButton:hover,.arc .arc-Pagination-value--number:not(.arc-Pagination-value--selected):hover{background-color:var(--pagination-colors-light-bg-hover);color:var(--pagination-colors-light-text-default)}}.arc .arc-Pagination-value--selected{background-color:var(--pagination-colors-light-bg-selected);color:var(--pagination-colors-light-text-default)}@media (min-width:768px){.arc .arc-Pagination-value{margin:0 calc(var(--pagination-gap-m) / 2)}.arc .arc-Pagination-pageNumberContainer{display:flex;flex-wrap:nowrap;margin:0 calc(var(--pagination-gap-m) / 2)}}

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -2,44 +2,109 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var index = 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-cf6ddb34.js');
+var Icon = require('../_shared/cjs/Icon-5dd78f2b.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const BtIconFirstMid = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.675 4.00537C5.04779 4.00537 5.35 4.30758 5.35 4.68037V11.3204C5.35 11.6932 5.04779 11.9954 4.675 11.9954C4.30221 11.9954 4 11.6932 4 11.3204V4.68037C4 4.30758 4.30221 4.00537 4.675 4.00537Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.97265 8.0002L10.8213 10.8522C10.9473 10.9785 11.0181 11.1495 11.0181 11.3279C11.0181 11.5063 10.9473 11.6773 10.8213 11.8036C10.759 11.866 10.6851 11.9155 10.6036 11.9493C10.5222 11.983 10.4349 12.0004 10.3467 12.0004C10.2585 12.0004 10.1712 11.983 10.0897 11.9493C10.0083 11.9155 9.93428 11.866 9.87199 11.8036L6.54799 8.47553C6.42219 8.34932 6.35156 8.17839 6.35156 8.0002C6.35156 7.822 6.42219 7.65107 6.54799 7.52486L9.87199 4.19686C9.93428 4.13446 10.0083 4.08495 10.0897 4.05117C10.1712 4.01738 10.2585 4 10.3467 4C10.4348 4 10.5222 4.01738 10.6036 4.05117C10.6851 4.08495 10.759 4.13446 10.8213 4.19686C10.9473 4.3231 11.0181 4.49417 11.0181 4.67253C11.0181 4.85089 10.9473 5.02196 10.8213 5.1482L7.97265 8.0002Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconLastMid = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10.3406 11.9951C9.96783 11.9951 9.66562 11.6929 9.66562 11.3201V4.68012C9.66562 4.30732 9.96783 4.00512 10.3406 4.00512C10.7134 4.00512 11.0156 4.30732 11.0156 4.68012L11.0156 11.3201C11.0156 11.6929 10.7134 11.9951 10.3406 11.9951Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.04297 8.00029L4.19434 5.14832C4.06834 5.02202 3.99754 4.85102 3.99754 4.67262C3.99754 4.49422 4.06834 4.32322 4.19434 4.19692C4.25664 4.13452 4.33054 4.08502 4.41204 4.05122C4.49344 4.01752 4.58074 4.00012 4.66897 4.00012C4.75714 4.00012 4.84445 4.01752 4.9259 4.05122C5.00735 4.08502 5.08134 4.13452 5.14363 4.19692L8.46763 7.52496C8.59343 7.65117 8.66406 7.8221 8.66406 8.00029C8.66406 8.17849 8.59343 8.34942 8.46763 8.47563L5.14363 11.8036C5.08134 11.866 5.00735 11.9155 4.9259 11.9493C4.84445 11.9831 4.75714 12.0005 4.66897 12.0005C4.58084 12.0005 4.49344 11.9831 4.41204 11.9493C4.33054 11.9155 4.25664 11.866 4.19434 11.8036C4.06834 11.6774 3.99754 11.5063 3.99754 11.328C3.99754 11.1496 4.06834 10.9785 4.19434 10.8523L7.04297 8.00029Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * TODO! Revise method of aligning svg's
+ */
 /**
- * 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 hide = _a.hide, hrefs = _a.hrefs, onPageChange = _a.onPageChange, isFluid = _a.isFluid, showEllipsis = _a.showEllipsis, props = index_es.__rest(_a, ["hide", "hrefs", "onPageChange", "isFluid", "showEllipsis"]);
+    return (React__default["default"].createElement("nav", index_es.__assign({ className: index.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_es.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: hrefs === null || hrefs === void 0 ? void 0 : hrefs.first, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.first) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.first
+                    }), onClick: function (e) { return onPageChange(e, "first"); } },
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default["default"].createElement(Icon.Icon, { size: 32, icon: BtIconFirstMid })),
+                    React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "First")),
+                React__default["default"].createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.prev, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.prev) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.prev
+                    }), onClick: function (e) { return onPageChange(e, "prev"); } },
+                    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: index.classNames("arc-PaginationSimple-listItem arc-PaginationSimple-listItemEllipsis", {
+                    "arc-PaginationSimple-listItemEllipsis--hidden": !showEllipsis
+                }) }, "..."),
+            React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__default["default"].createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.next, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.next) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.next
+                    }), onClick: function (e) { return onPageChange(e, "next"); } },
+                    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" }))),
+                React__default["default"].createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.last, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.last) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.last
+                    }), onClick: function (e) { return onPageChange(e, "last"); } },
+                    React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Last"),
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default["default"].createElement(Icon.Icon, { size: 32, icon: BtIconLastMid })))))));
 };
 
 exports.PaginationSimple = PaginationSimple;

package/dist/PaginationSimple/PaginationSimple.esm.js

@@ -1,37 +1,102 @@
-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.es-fc59ba8f.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-69de5351.js';
+import { I as Icon } from '../_shared/esm/Icon-6fef56b3.js';
+import '../_shared/esm/Surface-201aa0d6.js';
 
+const BtIconFirstMid = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.675 4.00537C5.04779 4.00537 5.35 4.30758 5.35 4.68037V11.3204C5.35 11.6932 5.04779 11.9954 4.675 11.9954C4.30221 11.9954 4 11.6932 4 11.3204V4.68037C4 4.30758 4.30221 4.00537 4.675 4.00537Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.97265 8.0002L10.8213 10.8522C10.9473 10.9785 11.0181 11.1495 11.0181 11.3279C11.0181 11.5063 10.9473 11.6773 10.8213 11.8036C10.759 11.866 10.6851 11.9155 10.6036 11.9493C10.5222 11.983 10.4349 12.0004 10.3467 12.0004C10.2585 12.0004 10.1712 11.983 10.0897 11.9493C10.0083 11.9155 9.93428 11.866 9.87199 11.8036L6.54799 8.47553C6.42219 8.34932 6.35156 8.17839 6.35156 8.0002C6.35156 7.822 6.42219 7.65107 6.54799 7.52486L9.87199 4.19686C9.93428 4.13446 10.0083 4.08495 10.0897 4.05117C10.1712 4.01738 10.2585 4 10.3467 4C10.4348 4 10.5222 4.01738 10.6036 4.05117C10.6851 4.08495 10.759 4.13446 10.8213 4.19686C10.9473 4.3231 11.0181 4.49417 11.0181 4.67253C11.0181 4.85089 10.9473 5.02196 10.8213 5.1482L7.97265 8.0002Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconLastMid = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10.3406 11.9951C9.96783 11.9951 9.66562 11.6929 9.66562 11.3201V4.68012C9.66562 4.30732 9.96783 4.00512 10.3406 4.00512C10.7134 4.00512 11.0156 4.30732 11.0156 4.68012L11.0156 11.3201C11.0156 11.6929 10.7134 11.9951 10.3406 11.9951Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.04297 8.00029L4.19434 5.14832C4.06834 5.02202 3.99754 4.85102 3.99754 4.67262C3.99754 4.49422 4.06834 4.32322 4.19434 4.19692C4.25664 4.13452 4.33054 4.08502 4.41204 4.05122C4.49344 4.01752 4.58074 4.00012 4.66897 4.00012C4.75714 4.00012 4.84445 4.01752 4.9259 4.05122C5.00735 4.08502 5.08134 4.13452 5.14363 4.19692L8.46763 7.52496C8.59343 7.65117 8.66406 7.8221 8.66406 8.00029C8.66406 8.17849 8.59343 8.34942 8.46763 8.47563L5.14363 11.8036C5.08134 11.866 5.00735 11.9155 4.9259 11.9493C4.84445 11.9831 4.75714 12.0005 4.66897 12.0005C4.58084 12.0005 4.49344 11.9831 4.41204 11.9493C4.33054 11.9155 4.25664 11.866 4.19434 11.8036C4.06834 11.6774 3.99754 11.5063 3.99754 11.328C3.99754 11.1496 4.06834 10.9785 4.19434 10.8523L7.04297 8.00029Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * TODO! Revise method of aligning svg's
+ */
 /**
- * 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 hide = _a.hide, hrefs = _a.hrefs, onPageChange = _a.onPageChange, isFluid = _a.isFluid, showEllipsis = _a.showEllipsis, props = __rest(_a, ["hide", "hrefs", "onPageChange", "isFluid", "showEllipsis"]);
     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: hrefs === null || hrefs === void 0 ? void 0 : hrefs.first, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.first) ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.first
+                    }), onClick: function (e) { return onPageChange(e, "first"); } },
+                    React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default.createElement(Icon, { size: 32, icon: BtIconFirstMid })),
+                    React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "First")),
+                React__default.createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.prev, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.prev) ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.prev
+                    }), onClick: function (e) { return onPageChange(e, "prev"); } },
+                    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: classNames("arc-PaginationSimple-listItem arc-PaginationSimple-listItemEllipsis", {
+                    "arc-PaginationSimple-listItemEllipsis--hidden": !showEllipsis
+                }) }, "..."),
+            React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__default.createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.next, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.next) ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.next
+                    }), onClick: function (e) { return onPageChange(e, "next"); } },
+                    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("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.last, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.last) ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.last
+                    }), onClick: function (e) { return onPageChange(e, "last"); } },
+                    React__default.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Last"),
+                    React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default.createElement(Icon, { size: 32, icon: BtIconLastMid })))))));
 };
 
 export { PaginationSimple };

package/dist/PaginationSimple/styles.css

@@ -0,0 +1 @@
+.arc .arc-PaginationSimple{width:100%}.arc .arc-PaginationSimple-list{align-items:center;display:flex;list-style:none;margin:0;padding:0;width:100%}.arc .arc-PaginationSimple--centered .arc-PaginationSimple-list{justify-content:center}.arc .arc-PaginationSimple-navigationButton{align-items:center;background:transparent;border:none;color:var(--pagination-colors-light-text-strong);cursor:pointer;display:flex;font:var(--sem-type-interface-reg-s);margin:0;outline:none;padding:0;text-decoration:none;width:-moz-max-content;width:max-content}.arc .arc-PaginationSimple-iconContainer{align-items:center;border-radius:50%;display:flex}.arc .arc-PaginationSimple-navigationButton .arc-PaginationSimple-iconContainer{color:var(--pagination-colors-light-fg-default)}.arc .arc-PaginationSimple-navigationButton:focus-visible .arc-PaginationSimple-iconContainer{border-radius:100%;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle)}.arc .arc-PaginationSimple-listItem{align-items:center;display:flex;gap:var(--pagination-gap-m)}.arc .arc-PaginationSimple-listItemEllipsis{margin:0 calc(var(--pagination-gap-s) * 2)}.arc .arc-PaginationSimple-listItem:first-child{margin-right:calc(var(--pagination-gap-s) * 2.5)}.arc .arc-PaginationSimple-listItem:last-child{margin-left:calc(var(--pagination-gap-s) * 2.5)}.arc .arc-PaginationSimple--fluid .arc-PaginationSimple-listItem:first-child{flex-grow:1}.arc .arc-PaginationSimple--fluid .arc-PaginationSimple-listItemEllipsis{flex-grow:1}.arc .arc-PaginationSimple-prevText{margin-left:var(--pagination-gap-s)}.arc .arc-PaginationSimple-nextText{margin-right:var(--pagination-gap-s)}.arc .arc-PaginationSimple--fluid .arc-PaginationSimple-navigationButton--hidden{visibility:hidden}.arc .arc-PaginationSimple--centered .arc-PaginationSimple-navigationButton--hidden,.arc .arc-PaginationSimple-listItemEllipsis--hidden{display:none}.arc .arc-PaginationSimple-iconContainer--left>:first-child{position:relative;right:1px}.arc .arc-PaginationSimple-iconContainer--right>:first-child{left:1px;position:relative}@media (hover:hover){.arc .arc-PaginationSimple-navigationButton:hover .arc-PaginationSimple-iconContainer{background-color:var(--pagination-colors-light-bg-hover);color:var(--pagination-colors-light-text-default)}}.arc .arc-PaginationSimple-navigationButton:active .arc-PaginationSimple-iconContainer{background-color:var(--pagination-colors-light-bg-pressed);color:var(--pagination-colors-light-text-default)}.arc .arc-PaginationSimple-navigationButton:focus-visible{outline:none}

package/dist/Poster/Poster.cjs.js

@@ -2,13 +2,12 @@
 
 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-11d2f8af.js');
+require('../_shared/cjs/index.es-0c2c97f4.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-ca708a8c.js');
+require('../_shared/cjs/Image-bb696c61.js');
 
 
 

package/dist/Poster/Poster.esm.js

@@ -1,7 +1,6 @@
-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-f248e28b.js';
+import '../_shared/esm/index.es-fc59ba8f.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-201aa0d6.js';
+import '../_shared/esm/Image-45c7760b.js';

package/dist/Poster/styles.css

@@ -0,0 +1 @@
+:root{--arc-poster-linear-gradient-scrim-left-light:linear-gradient(to left,transparent 0%,rgba(255,255,255,0.002) 0.4%,rgba(255,255,255,0.008) 0.8%,rgba(255,255,255,0.021) 4.8%,rgba(255,255,255,0.042) 9%,rgba(255,255,255,0.075) 13.9%,rgba(255,255,255,0.126) 19.8%,rgba(255,255,255,0.25) 27%,rgba(255,255,255,0.53) 35%,rgba(255,255,255,0.75) 43.5%,rgba(255,255,255,0.85) 53%,rgba(255,255,255,0.9) 66%,rgba(255,255,255,0.93) 81%,rgba(255,255,255,0.96) 100%);--arc-poster-overlay-light:linear-gradient(to left,rgba(255,255,255,0.541) 0%,rgba(255,255,255,0.541) 100%);--arc-poster-linear-gradient-scrim-left-dark:linear-gradient(to left,transparent 0%,rgba(85,20,180,0.002) 0.4%,rgba(85,20,180,0.008) 0.8%,rgba(85,20,180,0.021) 4.8%,rgba(85,20,180,0.042) 9%,rgba(85,20,180,0.075) 13.9%,rgba(85,20,180,0.126) 19.8%,rgba(85,20,180,0.19399999999999998) 27%,rgba(85,20,180,0.278) 35%,rgba(85,20,180,0.382) 43.5%,rgba(85,20,180,0.541) 53%,rgba(85,20,180,0.738) 66%,rgba(42,28,74,0.9) 81%,rgba(42,28,74,0.9) 100%);--arc-poster-overlay-dark:linear-gradient(to left,rgba(42,28,74,0.382) 0%,rgba(42,28,74,0.382) 100%)}.arc .arc-Poster{position:relative}.arc .arc-Poster-body{position:relative;z-index:1}.arc .arc-Poster-backgroundWrapper{bottom:0;display:block;left:0;overflow:hidden;position:absolute;right:0;top:0}.arc .arc-Poster--overlay{position:relative}.arc .arc-Poster--overlay::after{background-image:var(--arc-poster-overlay-dark);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.arc .arc-Poster--overlayLight::after{background-image:var(--arc-poster-overlay-light)}@media (min-width:768px){.arc .arc-Poster--overlay::after{background-image:var(--arc-poster-linear-gradient-scrim-left-dark)}.arc .arc-Poster--overlayLight::after{background-image:var(--arc-poster-linear-gradient-scrim-left-light)}}.arc .arc-PosterVideo{height:100%;width:100%}@supports (object-fit:cover) and (object-position:50% 50%){.arc .arc-PosterVideo{object-fit:cover;visibility:visible}.arc .arc-PosterVideo--anchorN{object-position:50% 0}.arc .arc-PosterVideo--anchorNE{object-position:100% 0}.arc .arc-PosterVideo--anchorE{object-position:100% 50%}.arc .arc-PosterVideo--anchorSE{object-position:100% 100%}.arc .arc-PosterVideo--anchorS{object-position:50% 100%}.arc .arc-PosterVideo--anchorSW{object-position:0 100%}.arc .arc-PosterVideo--anchorW{object-position:0 50%}.arc .arc-PosterVideo--anchorNW{object-position:0 0}.arc .arc-PosterVideo--anchorC{object-position:50% 50%}}.arc .arc-Poster--overlay:not(.arc-Poster--overlayLight)::after{background-image:var(--arc-poster-overlay-dark)}@media (min-width:768px){.arc .arc-Poster--overlay:not(.arc-Poster--overlayLight)::after{background-image:var(--arc-poster-linear-gradient-scrim-left-dark)}}

package/dist/ProgressBar/ProgressBar.cjs.js

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var index = 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-1b3e4fb6.js');
+var Heading = require('../_shared/cjs/Heading-b4b65724.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-a5cf4d4e.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-cf6ddb34.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,20 +28,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_es.__assign(index_es.__assign({}, commonProps), { className: index.classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = index_es.__assign(index_es.__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_es.__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_es.__assign({ "data-testid": "progress", className: index.classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state)) }, index_es.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 +54,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_es.__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" },