@arc-ui/components 11.24.1 → 12.0.0-beta.3

package/dist/Pagination/Pagination.cjs.js

@@ -2,14 +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 BtIconChevronRightMid_esm = require('../_shared/cjs/BtIconChevronRightMid.esm-d01ebbd4.js');
-var BtIconChevronLeftMid_esm = require('../_shared/cjs/BtIconChevronLeftMid.esm-0aaa6770.js');
-var Icon = require('../_shared/cjs/Icon-b46897a3.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.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 }; }
 
@@ -22,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));
@@ -55,8 +53,7 @@ var usePagination = function (pageCount, selectedPage) {
  * 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 () {
@@ -64,24 +61,22 @@ 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(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_esm.BtIconChevronLeftMid }))),
+                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" },
-                React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_esm.BtIconChevronRightMid })))));
+                React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationNext" })))));
 };
 
 exports.Pagination = Pagination;

package/dist/Pagination/Pagination.esm.js

@@ -1,11 +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 { B as BtIconChevronRightMid } from '../_shared/esm/BtIconChevronRightMid.esm-32268f1a.js';
-import { B as BtIconChevronLeftMid } from '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';
-import { I as Icon } from '../_shared/esm/Icon-15799695.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.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) {
@@ -48,7 +46,6 @@ var usePagination = function (pageCount, selectedPage) {
  */
 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 () {
@@ -56,14 +53,12 @@ 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) },
             React__default.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--left" },
-                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid }))),
+                React__default.createElement(ThemeIcon, { size: 32, icon: "paginationPrevious" }))),
         React__default.createElement("div", { className: "arc-Pagination-pageNumberContainer" }, pageRange.map(function (rangeValue, i) {
             return isPageNumber(rangeValue) ? (React__default.createElement("button", { "aria-current": parseInt(rangeValue) === selectedPage, key: "pagination-range-value-".concat(rangeValue), "aria-label": "Go to page ".concat(rangeValue), className: classNames("arc-Pagination-value arc-Pagination-value--number", {
                     "arc-Pagination-value--selected": parseInt(rangeValue) === selectedPage
@@ -73,7 +68,7 @@ var Pagination = function (_a) {
                 "arc-Pagination-navigationButton--hidden": selectedPage === pageCount
             }), onClick: handlePagechange(selectedPage + 1) },
             React__default.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--right" },
-                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))));
+                React__default.createElement(ThemeIcon, { size: 32, icon: "paginationNext" })))));
 };
 
 export { Pagination };

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -2,14 +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 BtIconChevronRightMid_esm = require('../_shared/cjs/BtIconChevronRightMid.esm-d01ebbd4.js');
-var BtIconChevronLeftMid_esm = require('../_shared/cjs/BtIconChevronLeftMid.esm-0aaa6770.js');
-var Icon = require('../_shared/cjs/Icon-b46897a3.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.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 }; }
 
@@ -19,28 +17,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Use `PaginationSimple` to navigate through multiple pages of content.
  */
 var PaginationSimple = function (_a) {
-    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",
+    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)),
+        }) }, 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.classNames("arc-PaginationSimple-navigationButton", {
+                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(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_esm.BtIconChevronLeftMid })),
+                        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.classNames("arc-PaginationSimple-navigationButton", {
+                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(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_esm.BtIconChevronRightMid })))))));
+                        React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimpleNext" })))))));
 };
 
 exports.PaginationSimple = PaginationSimple;

package/dist/PaginationSimple/PaginationSimple.esm.js

@@ -1,20 +1,16 @@
-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 { B as BtIconChevronRightMid } from '../_shared/esm/BtIconChevronRightMid.esm-32268f1a.js';
-import { B as BtIconChevronLeftMid } from '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';
-import { I as Icon } from '../_shared/esm/Icon-15799695.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.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 through multiple pages of content.
  */
 var PaginationSimple = function (_a) {
     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",
             "arc-PaginationSimple--fluid": isFluid,
             "arc-PaginationSimple--centered": !isFluid
         }) }, filterDataAttrs(props)),
@@ -24,7 +20,7 @@ var PaginationSimple = function (_a) {
                         "arc-PaginationSimple-navigationButton--hidden": hidePrev
                     }), 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(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", {
@@ -32,7 +28,7 @@ var PaginationSimple = function (_a) {
                     }), 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 })))))));
+                        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-9b48fd61.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-4ec2f679.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,47 +2,24 @@
 
 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 Icon = require('../_shared/cjs/Icon-b46897a3.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
-var BtIconTickAlt2Px_esm = require('../_shared/cjs/BtIconTickAlt2Px.esm-57c89acc.js');
-var BtIconCrossAlt2Px_esm = require('../_shared/cjs/BtIconCrossAlt2Px.esm-1452b14b.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 }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const BtIconRefresh = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
-      fill: "currentColor",
-    }),
-  );
-
 var PROGRESS_BAR_ICON_MAP = {
-    refresh: BtIconRefresh,
-    tick: BtIconTickAlt2Px_esm.BtIconTickAlt2Px,
-    cross: BtIconCrossAlt2Px_esm.BtIconCrossAlt2Px
+    refresh: "progressBarRefresh",
+    tick: "progressBarSuccess",
+    cross: "progressBarError"
 };
 
 var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
@@ -52,8 +29,8 @@ 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;
@@ -63,15 +40,12 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
  * 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));
     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)),
+    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),
@@ -81,7 +55,7 @@ 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)))),
+                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,
@@ -90,7 +64,7 @@ var ProgressBar = function (_a) {
                     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" },
-                            React__default["default"].createElement(Icon.Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+                            React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
 exports.ProgressBar = ProgressBar;

package/dist/ProgressBar/ProgressBar.esm.js

@@ -1,40 +1,17 @@
-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 { I as Icon } from '../_shared/esm/Icon-15799695.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import { B as BtIconTickAlt2Px } from '../_shared/esm/BtIconTickAlt2Px.esm-0bc2ded0.js';
-import { B as BtIconCrossAlt2Px } from '../_shared/esm/BtIconCrossAlt2Px.esm-7165ab1a.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-
-const BtIconRefresh = (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: "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
-      fill: "currentColor",
-    }),
-  );
+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: BtIconRefresh,
-    tick: BtIconTickAlt2Px,
-    cross: BtIconCrossAlt2Px
+    refresh: "progressBarRefresh",
+    tick: "progressBarSuccess",
+    cross: "progressBarError"
 };
 
 var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
@@ -56,14 +33,11 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
  */
 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)),
+    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),
@@ -82,7 +56,7 @@ var ProgressBar = function (_a) {
                     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" },
-                            React__default.createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+                            React__default.createElement(ThemeIcon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
 export { ProgressBar };

package/dist/ProgressStepper/ProgressStepper.cjs.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ProgressStepper = require('../_shared/cjs/ProgressStepper-491f0286.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/Icon-b46897a3.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/Surface-038db6e1.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,8 +1,8 @@
-export { P as ProgressStepper } from '../_shared/esm/ProgressStepper-7eba3a6a.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/Icon-15799695.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/Surface-0ca6817d.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,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../_shared/cjs/RadioGroup-26dc00fc.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-68258ce1.js');
+require('../_shared/cjs/FormControl-88d48f42.js');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/BtIconAlert.esm-1a0ff9f0.js');
-require('../_shared/cjs/Surface-038db6e1.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/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');
 
 

package/dist/RadioGroup/RadioGroup.esm.js

@@ -1,12 +1,11 @@
-export { a as RadioButton, R as RadioGroup } from '../_shared/esm/RadioGroup-427652ac.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-8e836656.js';
+import '../_shared/esm/FormControl-d873f7fa.js';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
-import '../_shared/esm/Surface-0ca6817d.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/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,10 +2,10 @@
 
 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 = require('../_shared/cjs/index-9947ac13.js');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
+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 }; }
 
@@ -18,12 +18,12 @@ 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", filterDataAttrs.__assign({ className: index.classNames((_b = {
+    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)) }, filterDataAttrs.filterDataAttrs(props))));
+            _b)) }, index.filterDataAttrs(props))));
 };
 
 exports.Rule = Rule;

package/dist/Rule/Rule.esm.js

@@ -1,7 +1,7 @@
-import { a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+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-0ca6817d.js';
+import { C as Context } from '../_shared/esm/Surface-71d21a9e.js';
 
 /**
  * Use `Rule` to display a horizontal or vertical rule.