@arc-ui/components 12.0.0-beta.4 → 12.0.0-beta.6

package/dist/_shared/cjs/{DisclosureMini-c01ecce0.js → DisclosureMini-c730c24d.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-c26e8978.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-284a7314.js');
+var Surface = require('./Surface-7500f314.js');
+var ThemeIcon = require('./ThemeIcon-c3dc056d.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/{Filter-3b897d92.js → Filter-c42eee70.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var index$1 = require('./index-df60851b.js');
+var index_es = require('./index.es-c26e8978.js');
 var React = require('react');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-7500f314.js');
 var index = require('./index-9947ac13.js');
-var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
+var VisuallyHidden = require('./VisuallyHidden-25393f58.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-5c963e6e.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-c26e8978.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-7500f314.js');
+var DisclosureMini = require('./DisclosureMini-c730c24d.js');
+var VisuallyHidden = require('./VisuallyHidden-25393f58.js');
+var ThemeIcon = require('./ThemeIcon-c3dc056d.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-69ed0e5c.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
+var index_es = require('./index.es-c26e8978.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-5233a907.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-c26e8978.js');
+var index = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-8599dbe4.js');
+var Surface = require('./Surface-7500f314.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-14378b72.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-c26e8978.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-7500f314.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,21 +14,21 @@ 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.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_es.__rest(_a, ["align", "casing", "children", "color", "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 = {
+    return (React__default["default"].createElement(Element, index_es.__assign({ id: id, className: index.classNames((_b = {
                 "arc-Heading": true
             },
-            _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-db7d03d6.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
+var index_es = require('./index.es-c26e8978.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 index = require('./index-9947ac13.js');
+var Surface = require('./Surface-7500f314.js');
+var Icon = require('./Icon-7f1e8a19.js');
 var ArcIconEclipse_esm = require('./ArcIconEclipse.esm-ac777a76.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -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,10 +100,10 @@ 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 }))),
@@ -112,8 +112,8 @@ var HeroButton = React.forwardRef(function (_a, ref) {
                             ? 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"

package/dist/_shared/cjs/{Icon-0ec0c1fb.js → Icon-7f1e8a19.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-c26e8978.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-7500f314.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,23 +14,23 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 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.__rest(_a, ["testId", "icon", "color", "isInline", "isPresentationIcon", "label", "size"]);
+    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 Icon = icon || (function () { return React__default["default"].createElement(React__default["default"].Fragment, null); });
     var presentationIconProps = {
         role: "presentation",
         "aria-hidden": true
     };
-    return (React__default["default"].createElement("span", index.__assign({ "data-testid": testId, "aria-label": label, className: index$1.classNames((_b = {},
+    return (React__default["default"].createElement("span", index_es.__assign({ "data-testid": testId, "aria-label": label, className: index.classNames((_b = {},
             _b["arc-Icon"] = true,
-            _b[suffixModifier.suffixModifier("arc-Icon--color", color)] = color !== "auto",
+            _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.filterDataAttrs(props)),
-        React__default["default"].createElement(Icon, index.__assign({}, (isPresentationIcon ? presentationIconProps : {})))));
+        } }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(Icon, index_es.__assign({}, (isPresentationIcon ? presentationIconProps : {})))));
 };
 
 exports.Icon = Icon;

package/dist/_shared/cjs/{Image-e9a5a326.js → Image-c8969ad9.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-c26e8978.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"];

package/dist/_shared/cjs/{MediaCard-4ccbb3ee.js → MediaCard-4ff9f5c0.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-df60851b.js');
+var index_es = require('./index.es-c26e8978.js');
 var React = require('react');
-var index$1 = require('./index-9947ac13.js');
-var index_es = require('./index.es-1299e41d.js');
+var index = require('./index-9947ac13.js');
+var index_es$1 = require('./index.es-ba095ee5.js');
 var useMediaQuery = require('./use-media-query-d34c83b9.js');
-var BtIconArrowRight_esm = require('./BtIconArrowRight.esm-5989f2ca.js');
-var CardFooter = require('./CardFooter-5414bc4f.js');
-var ConditionalWrapper = require('./ConditionalWrapper-be3b2625.js');
-var Image = require('./Image-e9a5a326.js');
-var Heading = require('./Heading-fb63844f.js');
-var Surface = require('./Surface-8599dbe4.js');
-var Text = require('./Text-1c1110a4.js');
-var VerticalSpace = require('./VerticalSpace-e128ec68.js');
+var Image = require('./Image-c8969ad9.js');
+var Heading = require('./Heading-14378b72.js');
+var Surface = require('./Surface-7500f314.js');
+var Text = require('./Text-284a7314.js');
+var VerticalSpace = require('./VerticalSpace-973deefe.js');
+var CardHeading = require('./CardHeading-3ddcf774.js');
+var CardFooter = require('./CardFooter-a1bb3ded.js');
+var ConditionalWrapper = require('./ConditionalWrapper-bf944594.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,31 +30,31 @@ var VideoPlayer = React__default["default"].lazy(function () {
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 var MediaCard = function (_a) {
-    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = index.__rest(_a, ["media", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = index_es.__rest(_a, ["media", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
     var surface = React.useContext(Surface.Context).surface;
     var _e = React.useState(false), isClient = _e[0], setIsClient = _e[1];
     var _f = React.useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
-    var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsS, ")"));
+    var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es$1.SemSizeBreakpointsS, ")"));
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     React.useEffect(function () {
         setIsClient(true);
     }, []);
-    return (React__default["default"].createElement("div", index.__assign({ style: { minHeight: minHeight }, className: index$1.classNames("arc-MediaCard", {
+    return (React__default["default"].createElement("div", index_es.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-MediaCard", {
             "arc-MediaCard--outlined": url && isContained && showHoverState,
             "arc-MediaCard--contained": isContained,
             "arc-MediaCard--onDarkSurface": surface === "dark"
-        }) }, index.filterDataAttrs(props)),
+        }) }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement(ConditionalWrapper.ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default["default"].createElement(Surface.Surface, { growVertically: true, background: "light-white" }, children)); } },
             media.type === "img" && (React__default["default"].createElement("div", { className: "arc-MediaCard-imgContainer" },
-                React__default["default"].createElement(Image.Image, index.__assign({}, media)))),
+                React__default["default"].createElement(Image.Image, index_es.__assign({}, media)))),
             media.type === "video" && isClient && (React__default["default"].createElement(React.Suspense, { fallback: null },
-                React__default["default"].createElement(VideoPlayer, index.__assign({ isSupportingTextHidden: true }, media)))),
+                React__default["default"].createElement(VideoPlayer, index_es.__assign({ isSupportingTextHidden: true }, media)))),
             React__default["default"].createElement("div", { className: "arc-MediaCard-content" },
                 label && (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(Heading.Heading, { size: "xxs" }, label.toUpperCase()),
                     React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }))),
-                React__default["default"].createElement(BtIconArrowRight_esm.CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                React__default["default"].createElement(CardHeading.CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
                 React__default["default"].createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }),
                     React__default["default"].createElement(Text.Text, null, text),