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

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index$1 = require('./index-df60851b.js');
 var React = require('react');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-8599dbe4.js');
 var index = require('./index-9947ac13.js');
 var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
 
@@ -29,28 +29,28 @@ var FilterControl = function (_a) {
 };
 
 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, props = index$1.__rest(_a, ["children", "controlsAlignment"]);
+    return (React__default["default"].createElement("div", index$1.__assign({ className: index.classNames("arc-FilterControls", {
             "arc-FilterControls--alignLeft": controlsAlignment === "left",
             "arc-FilterControls--alignRight": controlsAlignment === "right"
-        }) }, filterDataAttrs.filterDataAttrs(props)), children));
+        }) }, index$1.filterDataAttrs(props)), 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, props = index$1.__rest(_a, ["children"]);
+    return (React__default["default"].createElement("div", index$1.__assign({ className: "arc-FilterItem" }, index$1.filterDataAttrs(props)), children));
 };
 
 var FilterItems = function (_a) {
-    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = filterDataAttrs.__rest(_a, ["children", "error", "displayType"]);
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = index$1.__rest(_a, ["children", "error", "displayType"]);
     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", filterDataAttrs.__assign({ className: index.classNames("arc-FilterItems", {
+        React__default["default"].createElement("div", index$1.__assign({ className: index.classNames("arc-FilterItems", {
                 "arc-FilterItems--list": displayType === "list",
                 "arc-FilterItems--grid": displayType === "grid"
-            }) }, filterDataAttrs.filterDataAttrs(props)), displayType === "list"
+            }) }, index$1.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,
@@ -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 = 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$1.__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 = filterDataAttrs.__spreadArray(filterDataAttrs.__spreadArray([], selectedControls, true), [clickedControl], false);
+            var updatedControls = index$1.__spreadArray(index$1.__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", filterDataAttrs.__assign({ className: "arc-Filter" }, filterDataAttrs.filterDataAttrs(props)),
+    return (React__default["default"].createElement("div", index$1.__assign({ className: "arc-Filter" }, index$1.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-68258ce1.js → FormControl-88d48f42.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
-var index = require('./index-9947ac13.js');
+var index = require('./index-df60851b.js');
+var index$1 = require('./index-9947ac13.js');
 var React = require('react');
-var BtIconAlert_esm = require('./BtIconAlert.esm-1a0ff9f0.js');
-var Surface = require('./Surface-038db6e1.js');
-var DisclosureMini = require('./DisclosureMini-09c749e5.js');
+var Surface = require('./Surface-8599dbe4.js');
+var DisclosureMini = require('./DisclosureMini-c01ecce0.js');
 var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
+var ThemeIcon = require('./ThemeIcon-ee814862.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 = filterDataAttrs.__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.__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,
@@ -71,35 +71,38 @@ var FormControl = function (_a) {
     else {
         elementProps["aria-describedby"] = ariaDescribedby;
     }
-    var hasInfo = !helperUnderLabel &&
-        Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
+    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.__assign({ className: index$1.classNames({
                 "arc-FormControl": true,
                 "arc-FormControl--isDisabled": isDisabled,
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
-            }), id: id }, elementProps, filterDataAttrs.filterDataAttrs(props)),
+            }), id: id }, elementProps, index.filterDataAttrs(props)),
             hideLabel === true ? (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
-                React__default["default"].createElement(LabelType, filterDataAttrs.__assign({ className: index.classNames("arc-FormControl-label", {
+                React__default["default"].createElement(LabelType, index.__assign({ className: index$1.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, filterDataAttrs.__assign({ className: index.classNames("arc-FormControl-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", {
                     "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)))),
+            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.classNames("arc-FormControl-info", {
+            React__default["default"].createElement("div", { className: index$1.classNames("arc-FormControl-info", {
                     "arc-FormControl-info--hasContent": hasInfo
                 }) },
-                !helperUnderLabel && (React__default["default"].createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+                ((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(BtIconAlert_esm.BtIconAlert, null)),
-                    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))))),
+                        React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "formControlAlert" })),
+                    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-9e91fb3d.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-df60851b.js');
+var React = require('react');
+var index$1 = require('./index-9947ac13.js');
+var suffixModifier = require('./suffix-modifier-c8a34402.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.__assign({ className: index$1.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));
+};
+
+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));
+};
+
+/**
+ * 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", {
+            "arc-Grid--fluid": isFluid,
+            "arc-Grid--debugVisible": isDebugVisible,
+            "arc-Grid--gutterless": isGutterless
+        }) }, index.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-3d5ea240.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
-var index = require('./index-9947ac13.js');
+var index = require('./index-df60851b.js');
+var index$1 = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-8599dbe4.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.__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.__assign({ className: index$1.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.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.__rest(_a, ["children", "grow", "isDebugVisible"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.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.filterDataAttrs(props)), children));
 };
 Group.Item = GroupItem;
 

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
-var index = require('./index-9947ac13.js');
+var index = require('./index-df60851b.js');
+var index$1 = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
-var Surface = require('./Surface-038db6e1.js');
+var suffixModifier = require('./suffix-modifier-c8a34402.js');
+var Surface = require('./Surface-8599dbe4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,13 +15,13 @@ 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.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 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 = {
+    return (React__default["default"].createElement(Element, index.__assign({ id: id, className: index$1.classNames((_b = {
                 "arc-Heading": true
             },
             _b[suffixModifier.suffixModifier("arc-Heading--align", align)] = align && align !== "left",
@@ -29,7 +29,7 @@ var Heading = function (_a) {
             _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.filterDataAttrs(props)), children));
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;

package/dist/_shared/cjs/HeroButton-0586a7c4.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-df60851b.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');
+
+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.__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))], {
+        "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.__assign({ id: id, onClick: onClick, ref: ref }, index.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") },
+                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 }))),
+                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") },
+            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 }))))));
+});
+
+exports.HeroButton = HeroButton;

package/dist/_shared/cjs/Icon-0ec0c1fb.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-df60851b.js');
+var index$1 = require('./index-9947ac13.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-c8a34402.js');
+var Surface = require('./Surface-8599dbe4.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.__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 = {},
+            _b["arc-Icon"] = true,
+            _b[suffixModifier.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 : {})))));
+};
+
+exports.Icon = Icon;

package/dist/_shared/cjs/Image-e9a5a326.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-df60851b.js');
+var index$1 = 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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+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 _e = React.useState(false), visible = _e[0], setVisible = _e[1];
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== ImageSource) {
+                throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
+            }
+        });
+    }, [children]);
+    var imageRef = function (el) {
+        if (el) {
+            setTimeout(function () { return setVisible(true); }, 1);
+        }
+    };
+    var animationClasses = {
+        "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 = {
+                "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,
+        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))));
+};
+Image.Source = ImageSource;
+var loadingOptions = ["eager", "lazy"];
+
+exports.Image = Image;
+exports.loadingOptions = loadingOptions;

package/dist/_shared/cjs/MediaCard-e1648705.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var index = require('./index-df60851b.js');
+var React = require('react');
+var index$1 = require('./index-9947ac13.js');
+var index_es = require('./index.es-8b018b0d.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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var VideoPlayer = React__default["default"].lazy(function () {
+    return Promise.resolve().then(function () { return require('../../VideoPlayer/VideoPlayer.cjs.js'); }).then(function (_a) {
+        var VideoPlayer = _a.VideoPlayer;
+        return ({
+            "default": VideoPlayer
+        });
+    });
+});
+/**
+ * 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 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 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", {
+            "arc-MediaCard--outlined": url && isContained && showHoverState,
+            "arc-MediaCard--contained": isContained,
+            "arc-MediaCard--onDarkSurface": surface === "dark"
+        }) }, index.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)))),
+            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("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("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),
+                    (url || metaText) && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
+                React__default["default"].createElement(CardFooter.CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
+};
+
+exports.MediaCard = MediaCard;