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

package/dist/_shared/cjs/{DisclosureMini-145105a4.js → DisclosureMini-64a1c682.js}

@@ -1,35 +1,32 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var Text = require('./Text-606ca3a2.js');
-var Surface = require('./Surface-038db6e1.js');
-var ThemeIcon = require('./ThemeIcon-9534f091.js');
+var Text = require('./Text-1b3e4fb6.js');
+var Surface = require('./Surface-ca708a8c.js');
+var ThemeIcon = require('./ThemeIcon-cf6ddb34.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
- * Use `DisclosureMini` to display content that is only visible when toggled into
- * an "open" state.
+ * 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 = filterDataAttrs.__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", filterDataAttrs.__assign({ "data-testid": "DisclosureMini", className: index.classNames({
-            "arc-DisclosureMini": true,
+    return (React__default["default"].createElement("details", index_es.__assign({ "data-testid": "DisclosureMini", className: index.classNames("arc-DisclosureMini", {
             "arc-DisclosureMini--onDarkSurface": surface === "dark"
-        }), open: isOpen }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("summary", { "data-testid": "DisclosureMiniSummary", className: index.classNames("arc-DisclosureMini-summary", {
-                "arc-DisclosureMini-summary--icon-left": iconPosition === "left",
-                "arc-DisclosureMini-summary--icon-right": iconPosition === "right"
+        }), 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.classNames("arc-DisclosureMini-summary-icon", {
                     "arc-DisclosureMini-summary-icon--small": size === "s"

package/dist/_shared/cjs/Download-45dc0d20.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var Text = require('./Text-1b3e4fb6.js');
+var ThemeIcon = require('./ThemeIcon-cf6ddb34.js');
+var VerticalSpace = require('./VerticalSpace-a5cf4d4e.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-1bde635c.js → Filter-c93d809e.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var React = require('react');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-ca708a8c.js');
 var index = require('./index-9947ac13.js');
+var VisuallyHidden = require('./VisuallyHidden-c691ea4d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,39 +21,46 @@ var FilterControl = function (_a) {
     return (React__default["default"].createElement("button", { className: index.classNames("arc-FilterControl", {
             "arc-FilterControl--onDarkSurface": surface === "dark",
             "arc-FilterControl--selected": selected
-        }), onClick: onClickHandler, tabIndex: 0 },
-        React__default["default"].createElement("div", { className: "arc-FilterControl-text" }, children)));
+        }), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
+        React__default["default"].createElement("div", { className: "arc-FilterControl-text" },
+            React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null, "Filter by"),
+            " ",
+            children)));
 };
 
 var FilterControls = function (_a) {
-    var children = _a.children, controlsAlignment = _a.controlsAlignment, props = filterDataAttrs.__rest(_a, ["children", "controlsAlignment"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__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"
-        }) }, filterDataAttrs.filterDataAttrs(props)), children));
+        }) }, children));
 };
 
 var FilterItem = function (_a) {
-    var children = _a.children, props = filterDataAttrs.__rest(_a, ["children"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-FilterItem" }, filterDataAttrs.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, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = filterDataAttrs.__rest(_a, ["children", "displayType"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-FilterItems", {
-            "arc-FilterItems--list": displayType === "list",
-            "arc-FilterItems--grid": displayType === "grid"
-        }) }, filterDataAttrs.filterDataAttrs(props)), 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,
-                React__default["default"].createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
-        : children));
+    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", { className: index.classNames("arc-FilterItems", {
+                "arc-FilterItems--list": displayType === "list",
+                "arc-FilterItems--grid": displayType === "grid"
+            }) }, 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,
+                    React__default["default"].createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+            : children))) : (React__default["default"].createElement("div", { "aria-live": "assertive" }, error));
 };
 
-/** use `Filter` for interactive elements that filter and categorise page content. */
+/** 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 = filterDataAttrs.__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; });
@@ -77,7 +85,7 @@ var Filter = function (_a) {
             }
         }
         else {
-            var updatedControls = filterDataAttrs.__spreadArray(filterDataAttrs.__spreadArray([], selectedControls, true), [clickedControl], false);
+            var updatedControls = index_es.__spreadArray(index_es.__spreadArray([], selectedControls, true), [clickedControl], false);
             setSelectedControls(updatedControls);
             if (onChange) {
                 onChange(updatedControls);
@@ -103,11 +111,11 @@ var Filter = function (_a) {
             });
         }
     });
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-Filter" }, filterDataAttrs.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)); })),
-        filteredItems.length === 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, error)) : (React__default["default"].createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+        React__default["default"].createElement(FilterItems, { displayType: displayType, error: error }, filteredItems.map(function (item) { return item.props.children; }))));
 };
 Filter.Controls = FilterControls;
 Filter.Control = FilterControl;

package/dist/_shared/cjs/{FormControl-30f2330f.js → FormControl-09c28bbb.js}

@@ -1,11 +1,12 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-038db6e1.js');
-var DisclosureMini = require('./DisclosureMini-145105a4.js');
-var ThemeIcon = require('./ThemeIcon-9534f091.js');
+var Surface = require('./Surface-ca708a8c.js');
+var DisclosureMini = require('./DisclosureMini-64a1c682.js');
+var VisuallyHidden = require('./VisuallyHidden-c691ea4d.js');
+var ThemeIcon = require('./ThemeIcon-cf6ddb34.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,14 +48,14 @@ 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, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = filterDataAttrs.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "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 _f = useAriaDescribedby({
+    var _g = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id
-    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
+    }), ariaDescribedby = _g.ariaDescribedby, idError = _g.idError, idHelper = _g.idHelper, idDisclosure = _g.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -70,24 +71,38 @@ var FormControl = function (_a) {
     else {
         elementProps["aria-describedby"] = ariaDescribedby;
     }
+    var hasInfo = helperUnderLabel
+        ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
+        : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React__default["default"].createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React__default["default"].createElement(ElementType, filterDataAttrs.__assign({ className: index.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, filterDataAttrs.filterDataAttrs(props)),
-            React__default["default"].createElement(LabelType, filterDataAttrs.__assign({ className: "arc-FormControl-label" }, labelProps),
+            }), id: id }, elementProps, index_es.filterDataAttrs(props)),
+            hideLabel === true ? (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                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_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 && (React__default["default"].createElement(React__default["default"].Fragment, null, helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
+                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: "arc-FormControl-info" },
-                !helperUnderLabel && (React__default["default"].createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+            React__default["default"].createElement("div", { className: index.classNames("arc-FormControl-info", {
+                    "arc-FormControl-info--hasContent": hasInfo
+                }) },
+                ((helper && !helperUnderLabel) ||
+                    errorMessage ||
+                    disclosureTitle) && (React__default["default"].createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
                     React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
                         React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "formControlAlert" })),
-                    errorMessage)) : disclosureTitle ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(DisclosureMini.DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))),
+                    errorMessage)) : (!helperUnderLabel &&
+                    (disclosureTitle ? (React__default["default"].createElement(DisclosureMini.DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
                 supplementaryInfo && (React__default["default"].createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 

package/dist/_shared/cjs/Grid-102905c8.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
+
+var Col = function (props) {
+    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_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_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_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_es.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-Grid-inner" }, children)));
+};
+Grid.Row = Row;
+Grid.Col = Col;
+
+exports.Grid = Grid;

package/dist/_shared/cjs/{Group-0429741a.js → Group-33f84a2f.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,33 +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 = filterDataAttrs.__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;
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== Group.Item) {
-                throw new Error("Illegal child passed to <Group />. Ensure to only use <Group.Item />.");
-            }
-        });
-    }, [children]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.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)) }, filterDataAttrs.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 = filterDataAttrs.__rest(_a, ["children", "grow", "isDebugVisible"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.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)) }, filterDataAttrs.filterDataAttrs(props)), children));
+            _b)) }, index_es.filterDataAttrs(props)), children));
 };
 Group.Item = GroupItem;
 

package/dist/_shared/cjs/{Heading-27cba320.js → Heading-b4b65724.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-ca708a8c.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 = filterDataAttrs.__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, filterDataAttrs.__assign({ id: id, className: index.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)) }, filterDataAttrs.filterDataAttrs(props)), children));
+            _b)) }, index_es.filterDataAttrs(props)), children));
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;

package/dist/_shared/cjs/HeroButton-db55ff2a.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var Surface = require('./Surface-ca708a8c.js');
+var Icon = require('./Icon-5dd78f2b.js');
+var Spinner = require('./Spinner-0f578e7f.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const BtIconArrowAltRight = (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: "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",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconArrowAltDown = (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: "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",
+      fill: "currentColor",
+    }),
+  );
+
+const ArcIconPlay = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 56 56",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M36.4683 26.3206L23.9068 19.0686C23.6123 18.8984 23.2783 18.8088 22.9382 18.8086C22.5981 18.8084 22.264 18.8978 21.9694 19.0677C21.6748 19.2376 21.4301 19.4821 21.26 19.7765C21.0898 20.071 21.0001 20.4051 21 20.7451V35.2491C20.9985 35.5899 21.087 35.9251 21.2566 36.2207C21.4263 36.5162 21.671 36.7617 21.9661 36.9323C22.2612 37.1028 22.5961 37.1923 22.9369 37.1918C23.2777 37.1912 23.6123 37.1006 23.9068 36.9291L36.4683 29.6754C36.7626 29.5053 37.007 29.2608 37.1769 28.9664C37.3469 28.6719 37.4363 28.338 37.4363 27.998C37.4363 27.6581 37.3469 27.3241 37.1769 27.0297C37.007 26.7352 36.7626 26.4907 36.4683 26.3206ZM35.5933 28.1599L23.0318 35.4136C23.0035 35.4306 22.9711 35.4396 22.9381 35.4396C22.9052 35.4396 22.8728 35.4306 22.8445 35.4136C22.815 35.3977 22.7906 35.3739 22.7739 35.3448C22.7572 35.3158 22.7489 35.2826 22.75 35.2491V20.7451C22.7494 20.7122 22.7579 20.6797 22.7745 20.6513C22.7912 20.6229 22.8154 20.5996 22.8445 20.5841C22.8727 20.567 22.9051 20.5579 22.9381 20.5579C22.9712 20.5579 23.0036 20.567 23.0318 20.5841L35.5933 27.8344C35.6226 27.8505 35.647 27.8743 35.6637 27.9034C35.6803 27.9324 35.6887 27.9654 35.6878 27.9989C35.6882 28.0318 35.6796 28.0642 35.663 28.0926C35.6463 28.121 35.6222 28.1442 35.5933 28.1599Z",
+      fill: "currentColor",
+    }),
+  );
+
+const ArcIconWarn = (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("path", {
+      className: "cls-1",
+      fill: "currentColor",
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      className: "cls-1",
+      d: "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      fill: "currentColor",
+    }),
+  );
+
+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_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.classNames("arc-HeroButton", ["arc-HeroButton--".concat(Surface.camelcase(buttonStyle))], {
+        "arc-HeroButton--onDarkSurface": surface === "dark",
+        "arc-HeroButton--emptyLabel": !label,
+        "arc-HeroButton--isLoading": isLoading,
+        "arc-HeroButton--withIcon": icon,
+        "arc-HeroButton--hasGradient": buttonStyle.includes("-gradient")
+    });
+    var HeroButtonIcons = {
+        "arrow-right": BtIconArrowAltRight,
+        "arrow-down": BtIconArrowAltDown,
+        play: ArcIconPlay,
+        warning: ArcIconWarn
+    };
+    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_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(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_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(Spinner.Spinner, { size: "xxl" }))))));
+});
+
+exports.HeroButton = HeroButton;

package/dist/_shared/cjs/Icon-5dd78f2b.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var index = require('./index-9947ac13.js');
+var React = require('react');
+var Surface = require('./Surface-ca708a8c.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;