@arc-ui/components 12.0.0-beta.5 → 12.0.0-beta.8

package/dist/_shared/cjs/{DisclosureMini-c01ecce0.js → DisclosureMini-09ee2d12.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var Text = require('./Text-1c1110a4.js');
-var Surface = require('./Surface-8599dbe4.js');
-var ThemeIcon = require('./ThemeIcon-ee814862.js');
+var Text = require('./Text-f6be8fdd.js');
+var Surface = require('./Surface-4bc47dcb.js');
+var ThemeIcon = require('./ThemeIcon-6b10d20a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,20 +15,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Use `DisclosureMini` to show and hide sections of content.
  */
 var DisclosureMini = function (_a) {
-    var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = index.__rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
+    var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = index_es.__rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
     var surface = React.useContext(Surface.Context).surface;
     var _e = React.useState(false), disclousreState = _e[0], setDisclosureState = _e[1];
     var handleOnClick = function () {
         onClick && onClick();
         setDisclosureState(function (prevState) { return !prevState; });
     };
-    return (React__default["default"].createElement("details", index.__assign({ "data-testid": "DisclosureMini", className: index$1.classNames("arc-DisclosureMini", {
+    return (React__default["default"].createElement("details", index_es.__assign({ "data-testid": "DisclosureMini", className: index.classNames("arc-DisclosureMini", {
             "arc-DisclosureMini--onDarkSurface": surface === "dark"
-        }), open: isOpen }, index.filterDataAttrs(props)),
-        React__default["default"].createElement("summary", { "data-testid": "DisclosureMiniSummary", className: index$1.classNames("arc-DisclosureMini-summary arc-DisclosureMini-summary--icon-".concat(iconPosition), {
+        }), open: isOpen }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement("summary", { "data-testid": "DisclosureMiniSummary", className: index.classNames("arc-DisclosureMini-summary arc-DisclosureMini-summary--icon-".concat(iconPosition), {
                 "arc-DisclosureMini-summary--small": size === "s"
             }), onClick: handleOnClick, "aria-expanded": disclousreState },
-            React__default["default"].createElement("div", { className: index$1.classNames("arc-DisclosureMini-summary-icon", {
+            React__default["default"].createElement("div", { className: index.classNames("arc-DisclosureMini-summary-icon", {
                     "arc-DisclosureMini-summary-icon--small": size === "s"
                 }) },
                 React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "disclosureMiniExpand" })),

package/dist/_shared/cjs/Download-08d71049.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var index_es = require('./index.es-b404d2c5.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var Text = require('./Text-f6be8fdd.js');
+var ThemeIcon = require('./ThemeIcon-6b10d20a.js');
+var VerticalSpace = require('./VerticalSpace-3908ae62.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Download = function (_a) {
+    var name = _a.name, onClick = _a.onClick, description = _a.description, href = _a.href, type = _a.type, size = _a.size, _b = _a.icon, icon = _b === void 0 ? "downloadFile" : _b, _c = _a.isCompact, isCompact = _c === void 0 ? false : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? true : _d;
+    var linkProps = href
+        ? {
+            href: href,
+            download: true,
+            target: "_blank",
+            rel: "noreferrer"
+        }
+        : {
+            role: "button"
+        };
+    return (React__default["default"].createElement("a", index_es.__assign({}, linkProps, { className: index.classNames("arc-Download", {
+            "arc-Download--maxContent": !isFullWidth,
+            "arc-Download--compact": isCompact
+        }), "aria-label": name, onClick: onClick }),
+        React__default["default"].createElement("div", { className: "arc-Download-iconContainer" },
+            React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: isCompact ? 40 : 64, icon: icon })),
+        React__default["default"].createElement("div", { className: "arc-Download-contentContainer" },
+            React__default["default"].createElement("span", { className: "arc-Download-name" }, name),
+            React__default["default"].createElement(Text.Text, { tone: "muted", size: "xs" },
+                type,
+                "\u00A0",
+                size && "| ".concat(size)),
+            description && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "4" }),
+                React__default["default"].createElement(Text.Text, { tone: "supporting" }, description))))));
+};
+
+exports.Download = Download;

package/dist/_shared/cjs/{Filter-3b897d92.js → Filter-60b0dd96.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var index$1 = require('./index-df60851b.js');
+var index_es = require('./index.es-b404d2c5.js');
 var React = require('react');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-4bc47dcb.js');
 var index = require('./index-9947ac13.js');
-var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
+var VisuallyHidden = require('./VisuallyHidden-821078c9.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,28 +29,28 @@ var FilterControl = function (_a) {
 };
 
 var FilterControls = function (_a) {
-    var children = _a.children, controlsAlignment = _a.controlsAlignment, props = index$1.__rest(_a, ["children", "controlsAlignment"]);
-    return (React__default["default"].createElement("div", index$1.__assign({ className: index.classNames("arc-FilterControls", {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment;
+    return (React__default["default"].createElement("div", { className: index.classNames("arc-FilterControls", {
             "arc-FilterControls--alignLeft": controlsAlignment === "left",
             "arc-FilterControls--alignRight": controlsAlignment === "right"
-        }) }, index$1.filterDataAttrs(props)), children));
+        }) }, children));
 };
 
 var FilterItem = function (_a) {
-    var children = _a.children, props = index$1.__rest(_a, ["children"]);
-    return (React__default["default"].createElement("div", index$1.__assign({ className: "arc-FilterItem" }, index$1.filterDataAttrs(props)), children));
+    var children = _a.children;
+    return React__default["default"].createElement("div", { className: "arc-FilterItem" }, children);
 };
 
 var FilterItems = function (_a) {
-    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = index$1.__rest(_a, ["children", "error", "displayType"]);
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b;
     return React__default["default"].Children.toArray(children).length > 0 ? (React__default["default"].createElement("div", null,
         React__default["default"].createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React__default["default"].Children.toArray(children).length > 0
             ? "".concat(React__default["default"].Children.toArray(children).length, " records listed.")
             : null),
-        React__default["default"].createElement("div", index$1.__assign({ className: index.classNames("arc-FilterItems", {
+        React__default["default"].createElement("div", { className: index.classNames("arc-FilterItems", {
                 "arc-FilterItems--list": displayType === "list",
                 "arc-FilterItems--grid": displayType === "grid"
-            }) }, index$1.filterDataAttrs(props)), displayType === "list"
+            }) }, displayType === "list"
             ? React__default["default"].Children.toArray(children).map(function (child, index, array) { return (React__default["default"].createElement(React__default["default"].Fragment, { key: index },
                 child,
                 index !== array.length - 1 && (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -60,7 +60,7 @@ var FilterItems = function (_a) {
 
 /** Use `Filter` to filter and categorise page content. */
 var Filter = function (_a) {
-    var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = index$1.__rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
+    var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = index_es.__rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
     var _c = React.useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
     var controls = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === FilterControls; });
     var items = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === FilterItems; });
@@ -85,7 +85,7 @@ var Filter = function (_a) {
             }
         }
         else {
-            var updatedControls = index$1.__spreadArray(index$1.__spreadArray([], selectedControls, true), [clickedControl], false);
+            var updatedControls = index_es.__spreadArray(index_es.__spreadArray([], selectedControls, true), [clickedControl], false);
             setSelectedControls(updatedControls);
             if (onChange) {
                 onChange(updatedControls);
@@ -111,7 +111,7 @@ var Filter = function (_a) {
             });
         }
     });
-    return (React__default["default"].createElement("div", index$1.__assign({ className: "arc-Filter" }, index$1.filterDataAttrs(props)),
+    return (React__default["default"].createElement("div", index_es.__assign({ className: "arc-Filter" }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
             React__default["default"].isValidElement(controls) &&
             React__default["default"].Children.map(controls.props.children, function (control, index) { return (React__default["default"].createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),

package/dist/_shared/cjs/{FormControl-88d48f42.js → FormControl-fa7bb586.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-8599dbe4.js');
-var DisclosureMini = require('./DisclosureMini-c01ecce0.js');
-var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
-var ThemeIcon = require('./ThemeIcon-ee814862.js');
+var Surface = require('./Surface-4bc47dcb.js');
+var DisclosureMini = require('./DisclosureMini-09ee2d12.js');
+var VisuallyHidden = require('./VisuallyHidden-821078c9.js');
+var ThemeIcon = require('./ThemeIcon-6b10d20a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,7 +48,7 @@ var Provider = Context.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = index_es.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = React.useContext(Surface.Context).surface;
     var _g = useAriaDescribedby({
         disclosureText: disclosureText,
@@ -75,25 +75,25 @@ var FormControl = function (_a) {
         ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
         : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React__default["default"].createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React__default["default"].createElement(ElementType, index.__assign({ className: index$1.classNames({
+        React__default["default"].createElement(ElementType, index_es.__assign({ className: index.classNames({
                 "arc-FormControl": true,
                 "arc-FormControl--isDisabled": isDisabled,
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
-            }), id: id }, elementProps, index.filterDataAttrs(props)),
+            }), id: id }, elementProps, index_es.filterDataAttrs(props)),
             hideLabel === true ? (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
-                React__default["default"].createElement(LabelType, index.__assign({ className: index$1.classNames("arc-FormControl-label", {
+                React__default["default"].createElement(LabelType, index_es.__assign({ className: index.classNames("arc-FormControl-label", {
                         "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
                     }) }, labelProps),
                     label,
-                    requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React__default["default"].createElement(LabelType, index.__assign({ className: index$1.classNames("arc-FormControl-label", {
+                    requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React__default["default"].createElement(LabelType, index_es.__assign({ className: index.classNames("arc-FormControl-label", {
                     "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
                 }) }, labelProps),
                 label,
                 requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
             helperUnderLabel && helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
             children,
-            React__default["default"].createElement("div", { className: index$1.classNames("arc-FormControl-info", {
+            React__default["default"].createElement("div", { className: index.classNames("arc-FormControl-info", {
                     "arc-FormControl-info--hasContent": hasInfo
                 }) },
                 ((helper && !helperUnderLabel) ||

package/dist/_shared/cjs/{Grid-9e91fb3d.js → Grid-a50fb206.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
+var index_es = require('./index.es-b404d2c5.js');
 var React = require('react');
-var index$1 = require('./index-9947ac13.js');
-var suffixModifier = require('./suffix-modifier-c8a34402.js');
+var index = require('./index-9947ac13.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,32 +11,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
 
 var Col = function (props) {
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
             var _a;
             var _b, _c, _d;
             var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
             var orderValue = (_b = props.order) === null || _b === void 0 ? void 0 : _b[bp];
             var offsetValue = (_c = props.offset) === null || _c === void 0 ? void 0 : _c[bp];
             var alignValue = (_d = props.align) === null || _d === void 0 ? void 0 : _d[bp];
-            return index.__assign(index.__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a["arc-Grid-align--".concat(bp).concat(alignValue)] = alignValue !== undefined, _a));
-        }, {})) }, index.filterDataAttrs(props)), props.children));
+            return index_es.__assign(index_es.__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a["arc-Grid-align--".concat(bp).concat(alignValue)] = alignValue !== undefined, _a));
+        }, {})) }, index_es.filterDataAttrs(props)), props.children));
 };
 
 var Row = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = index.__rest(_a, ["direction", "align", "justify", "children"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames("arc-Grid-row", "".concat(suffixModifier.suffixModifier("arc-Grid-row--direction", direction)), "".concat(suffixModifier.suffixModifier("arc-Grid-row--justify", justify)), "".concat(suffixModifier.suffixModifier("arc-Grid-row--align", align))) }, index.filterDataAttrs(props)), children));
+    var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = index_es.__rest(_a, ["direction", "align", "justify", "children"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames("arc-Grid-row", "".concat(index_es.suffixModifier("arc-Grid-row--direction", direction)), "".concat(index_es.suffixModifier("arc-Grid-row--justify", justify)), "".concat(index_es.suffixModifier("arc-Grid-row--align", align))) }, index_es.filterDataAttrs(props)), children));
 };
 
 /**
  * Use `Grid` to compose layouts on a 12-column grid.
  */
 var Grid = function (_a) {
-    var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = index.__rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames("arc-Grid", {
+    var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = index_es.__rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames("arc-Grid", {
             "arc-Grid--fluid": isFluid,
             "arc-Grid--debugVisible": isDebugVisible,
             "arc-Grid--gutterless": isGutterless
-        }) }, index.filterDataAttrs(props)),
+        }) }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: "arc-Grid-inner" }, children)));
 };
 Grid.Row = Row;

package/dist/_shared/cjs/{Group-3d5ea240.js → Group-1aba9855.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-4bc47dcb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,26 +14,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Group = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = index.__rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
+    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = index_es.__rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {},
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {},
             _b["arc-Group"] = true,
             _b["arc-Group--grow"] = grow,
             _b["arc-Group--growEqual"] = growEqual,
             _b["arc-Group--gutterBorder"] = gutterBorder,
             _b["arc-Group--noWrap"] = noWrap,
             _b["arc-Group--onDarkSurface"] = surface === "dark",
-            _b)) }, index.filterDataAttrs(props)),
+            _b)) }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: "arc-Group-inner" }, children)));
 };
 var GroupItem = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = index.__rest(_a, ["children", "grow", "isDebugVisible"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {},
+    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = index_es.__rest(_a, ["children", "grow", "isDebugVisible"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {},
             _b["arc-Group-item"] = true,
             _b["arc-Group-item--grow"] = grow,
             _b["arc-Group-item--debugVisible"] = isDebugVisible,
-            _b)) }, index.filterDataAttrs(props)), children));
+            _b)) }, index_es.filterDataAttrs(props)), children));
 };
 Group.Item = GroupItem;
 

package/dist/_shared/cjs/{Heading-fb63844f.js → Heading-cb321adf.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-c8a34402.js');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-4bc47dcb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,21 +14,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Heading = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, id = _a.id, props = index.__rest(_a, ["align", "casing", "children", "color", "level", "size", "id"]);
+    var _c = _a.isInline, isInline = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "left" : _d, _e = _a.casing, casing = _e === void 0 ? "auto" : _e, _f = _a.color, color = _f === void 0 ? "auto" : _f, children = _a.children, level = _a.level, size = _a.size, id = _a.id, props = index_es.__rest(_a, ["isInline", "align", "casing", "color", "children", "level", "size", "id"]);
     var surface = React.useContext(Surface.Context).surface;
     var Element = "span";
     if (level) {
         Element = "h".concat(level);
     }
-    return (React__default["default"].createElement(Element, index.__assign({ id: id, className: index$1.classNames((_b = {
-                "arc-Heading": true
+    return (React__default["default"].createElement(Element, index_es.__assign({ id: id, className: index.classNames((_b = {
+                "arc-Heading": true,
+                "arc-Heading--inline": isInline
             },
-            _b[suffixModifier.suffixModifier("arc-Heading--align", align)] = align && align !== "left",
+            _b[index_es.suffixModifier("arc-Heading--align", align)] = align && align !== "left",
             _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
             _b["arc-Heading--casingNone"] = casing === "none",
             _b["arc-Heading--colorBrand"] = color === "brand",
             _b["arc-Heading--onDarkSurface"] = surface === "dark",
-            _b)) }, index.filterDataAttrs(props)), children));
+            _b)) }, index_es.filterDataAttrs(props)), children));
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;

package/dist/_shared/cjs/{HeroButton-0586a7c4.js → HeroButton-75e1ab78.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
+var index_es = require('./index.es-b404d2c5.js');
 var React = require('react');
-var index$1 = require('./index-9947ac13.js');
-var Icon = require('./Icon-0ec0c1fb.js');
-var Surface = require('./Surface-8599dbe4.js');
-var ArcIconEclipse_esm = require('./ArcIconEclipse.esm-ac777a76.js');
+var index = require('./index-9947ac13.js');
+var Surface = require('./Surface-4bc47dcb.js');
+var Icon = require('./Icon-859c6c00.js');
+var Spinner = require('./Spinner-2a1d9f20.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,14 +16,14 @@ const BtIconArrowAltRight = (props) =>
     "svg",
     Object.assign(
       {
-        xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
       },
       props,
     ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M18.85352,11.64648a.49995.49995,0,0,0-.707.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.49995.49995,0,1,0,.707.707L23.207,16Z",
+      d: "M18.854 11.646C18.7597 11.5549 18.6334 11.5045 18.5023 11.5056C18.3712 11.5068 18.2458 11.5594 18.1531 11.6521C18.0604 11.7448 18.0078 11.8702 18.0067 12.0013C18.0055 12.1324 18.0559 12.2587 18.147 12.353L21.293 15.5H9.5C9.36739 15.5 9.24021 15.5526 9.14645 15.6464C9.05268 15.7402 9 15.8674 9 16C9 16.1326 9.05268 16.2598 9.14645 16.3535C9.24021 16.4473 9.36739 16.5 9.5 16.5H21.293L18.147 19.646C18.0992 19.6921 18.0612 19.7473 18.0349 19.8083C18.0087 19.8693 17.995 19.9349 17.9944 20.0013C17.9938 20.0677 18.0064 20.1335 18.0316 20.1949C18.0567 20.2564 18.0939 20.3122 18.1408 20.3592C18.1877 20.4061 18.2436 20.4432 18.305 20.4684C18.3665 20.4935 18.4323 20.5062 18.4987 20.5056C18.5651 20.505 18.6307 20.4912 18.6917 20.465C18.7527 20.4388 18.8079 20.4007 18.854 20.353L23.207 16L18.854 11.646Z",
       fill: "currentColor",
     }),
   );
@@ -33,14 +33,14 @@ const BtIconArrowAltDown = (props) =>
     "svg",
     Object.assign(
       {
-        xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
       },
       props,
     ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M20.35352,18.14648a.49983.49983,0,0,0-.707,0L16.5,21.293V9.5a.5.5,0,0,0-1,0V21.293l-3.14648-3.14648a.49995.49995,0,1,0-.707.707L16,23.207l4.35352-4.35352A.49982.49982,0,0,0,20.35352,18.14648Z",
+      d: "M20.354 18.146C20.2602 18.0523 20.1331 17.9996 20.0005 17.9996C19.8679 17.9996 19.7408 18.0523 19.647 18.146L16.5 21.293V9.5C16.5 9.36739 16.4473 9.24021 16.3536 9.14645C16.2598 9.05268 16.1326 9 16 9C15.8674 9 15.7402 9.05268 15.6464 9.14645C15.5527 9.24021 15.5 9.36739 15.5 9.5V21.293L12.354 18.147C12.3079 18.0992 12.2527 18.0612 12.1917 18.0349C12.1307 18.0087 12.0651 17.995 11.9987 17.9944C11.9323 17.9938 11.8665 18.0064 11.805 18.0316C11.7436 18.0567 11.6877 18.0939 11.6408 18.1408C11.5939 18.1877 11.5567 18.2436 11.5316 18.305C11.5064 18.3665 11.4938 18.4323 11.4944 18.4987C11.495 18.5651 11.5087 18.6307 11.5349 18.6917C11.5612 18.7527 11.5992 18.8079 11.647 18.854L16 23.207L20.354 18.853C20.4477 18.7592 20.5004 18.6321 20.5004 18.4995C20.5004 18.3669 20.4477 18.2398 20.354 18.146Z",
       fill: "currentColor",
     }),
   );
@@ -85,9 +85,9 @@ const ArcIconWarn = (props) =>
   );
 
 var HeroButton = React.forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = index.__rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = index_es.__rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
     var surface = React.useContext(Surface.Context).surface;
-    var HeroButtonClasses = index$1.classNames("arc-HeroButton", ["arc-HeroButton--".concat(index.camelcase(buttonStyle))], {
+    var HeroButtonClasses = index.classNames("arc-HeroButton", ["arc-HeroButton--".concat(Surface.camelcase(buttonStyle))], {
         "arc-HeroButton--onDarkSurface": surface === "dark",
         "arc-HeroButton--emptyLabel": !label,
         "arc-HeroButton--isLoading": isLoading,
@@ -100,27 +100,27 @@ var HeroButton = React.forwardRef(function (_a, ref) {
         play: ArcIconPlay,
         warning: ArcIconWarn
     };
-    var commonProps = index.__assign({ id: id, onClick: onClick, ref: ref }, index.filterDataAttrs(props));
+    var commonProps = index_es.__assign({ id: id, onClick: onClick, ref: ref }, index_es.filterDataAttrs(props));
     if (href && !isLoading) {
-        return (React__default["default"].createElement("a", index.__assign({}, commonProps, { className: HeroButtonClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React__default["default"].createElement("span", { className: index$1.classNames("arc-HeroButton-inner") },
+        return (React__default["default"].createElement("a", index_es.__assign({}, commonProps, { className: HeroButtonClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
+            React__default["default"].createElement("span", { className: index.classNames("arc-HeroButton-inner") },
                 label && React__default["default"].createElement("span", { className: "arc-HeroButton-label" }, label),
                 isLoading && (React__default["default"].createElement("span", { className: "arc-HeroButton-icon" },
-                    React__default["default"].createElement(Icon.Icon, { size: 48, icon: ArcIconEclipse_esm.ArcIconEclipse }))),
+                    React__default["default"].createElement(Spinner.Spinner, { size: "xxl" }))),
                 icon && !isLoading && (React__default["default"].createElement("span", { className: "arc-HeroButton-icon" },
                     React__default["default"].createElement(Icon.Icon, { size: 48, icon: buttonStyle === "warning"
                             ? HeroButtonIcons["warning"]
                             : HeroButtonIcons[icon] }))))));
     }
-    return (React__default["default"].createElement("button", index.__assign({}, commonProps, { className: HeroButtonClasses, "aria-label": ariaLabel, disabled: isLoading, type: type, form: form }),
-        React__default["default"].createElement("span", { className: index$1.classNames("arc-HeroButton-inner") },
+    return (React__default["default"].createElement("button", index_es.__assign({}, commonProps, { className: HeroButtonClasses, "aria-label": ariaLabel, disabled: isLoading, type: type, form: form }),
+        React__default["default"].createElement("span", { className: index.classNames("arc-HeroButton-inner") },
             label && React__default["default"].createElement("span", { className: "arc-HeroButton-label" }, label),
             icon && !isLoading && (React__default["default"].createElement("span", { className: "arc-HeroButton-icon" },
                 React__default["default"].createElement(Icon.Icon, { size: 48, icon: buttonStyle === "warning"
                         ? HeroButtonIcons["warning"]
                         : HeroButtonIcons[icon] }))),
             isLoading && (React__default["default"].createElement("span", { className: "arc-HeroButton-icon" },
-                React__default["default"].createElement(Icon.Icon, { size: 48, icon: ArcIconEclipse_esm.ArcIconEclipse }))))));
+                React__default["default"].createElement(Spinner.Spinner, { size: "xxl" }))))));
 });
 
 exports.HeroButton = HeroButton;

package/dist/_shared/cjs/Icon-859c6c00.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
+var React = require('react');
+var Surface = require('./Surface-4bc47dcb.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Icon` to display brand iconography.
+ */
+var Icon = function (_a) {
+    var _b;
+    var testId = _a.testId, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isPresentationIcon, isPresentationIcon = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = index_es.__rest(_a, ["testId", "icon", "color", "isInline", "isPresentationIcon", "label", "size"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var presentationIconProps = {
+        role: "presentation",
+        "aria-hidden": true
+    };
+    var renderIcon = function () {
+        if (!icon)
+            return null;
+        var accessibleProps = isPresentationIcon ? presentationIconProps : {};
+        if (typeof icon === "function") {
+            var IconComponent = icon || (function () { return React__default["default"].createElement(React__default["default"].Fragment, null); });
+            return React__default["default"].createElement(IconComponent, index_es.__assign({}, accessibleProps));
+        }
+        if (React__default["default"].isValidElement(icon) && icon.type === "svg") {
+            return React__default["default"].cloneElement(icon, accessibleProps);
+        }
+        return null;
+    };
+    return (React__default["default"].createElement("span", index_es.__assign({ "data-testid": testId, "aria-label": label, className: index.classNames((_b = {},
+            _b["arc-Icon"] = true,
+            _b[index_es.suffixModifier("arc-Icon--color", color)] = color !== "auto",
+            _b["arc-Icon--inline"] = isInline,
+            _b["arc-Icon--onDarkSurface"] = surface === "dark",
+            _b)), role: label ? "img" : undefined, style: {
+            height: size,
+            width: size
+        } }, index_es.filterDataAttrs(props)), renderIcon()));
+};
+
+exports.Icon = Icon;

package/dist/_shared/cjs/{Image-e9a5a326.js → Image-b807e951.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
-var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-b404d2c5.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-c8a34402.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Image = function (_a) {
     var _b;
-    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = index.__rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = index_es.__rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     var _e = React.useState(false), visible = _e[0], setVisible = _e[1];
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
@@ -33,21 +32,21 @@ var Image = function (_a) {
         "arc-Image-img--fade": fadeOnLoad,
         "arc-Image-img--fadeVisible": fadeOnLoad && visible
     };
-    var img = (React__default["default"].createElement("img", { ref: imageRef, className: index$1.classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+    var img = (React__default["default"].createElement("img", { ref: imageRef, className: index.classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
             },
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
-            _b[suffixModifier.suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
-            _b)), style: index.__assign(index.__assign(index.__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, index.filterDataAttrs(props)), children ? (React__default["default"].createElement("picture", null,
+            _b[index_es.suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
+            _b)), style: index_es.__assign(index_es.__assign(index_es.__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, index_es.filterDataAttrs(props)), children ? (React__default["default"].createElement("picture", null,
         children,
         " ",
         img)) : (React__default["default"].createElement(React__default["default"].Fragment, null, img))));
 };
 var ImageSource = function (_a) {
-    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = index.__rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
-    return (React__default["default"].createElement("source", index.__assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, index.filterDataAttrs(props))));
+    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = index_es.__rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
+    return (React__default["default"].createElement("source", index_es.__assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, index_es.filterDataAttrs(props))));
 };
 Image.Source = ImageSource;
 var loadingOptions = ["eager", "lazy"];