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

package/dist/_shared/cjs/Grid-3d3f06a9.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.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-8a729fcb.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-3783ed64.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-02d149ba.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-f2eed7bd.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-3783ed64.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-02d149ba.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-ad7a81c8.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var Surface = require('./Surface-02d149ba.js');
+var Icon = require('./Icon-dbdd25ab.js');
+var Spinner = require('./Spinner-8fae4614.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-dbdd25ab.js

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

package/dist/_shared/cjs/Image-27b46f1d.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var index = require('./index-9947ac13.js');
+var React = require('react');
+
+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_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) {
+            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.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[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_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"];
+
+exports.Image = Image;
+exports.loadingOptions = loadingOptions;

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var index_es$1 = require('./index.es-73f966b4.js');
+var useMediaQuery = require('./use-media-query-d34c83b9.js');
+var Image = require('./Image-27b46f1d.js');
+var Heading = require('./Heading-f2eed7bd.js');
+var Surface = require('./Surface-02d149ba.js');
+var Text = require('./Text-f55e4793.js');
+var VerticalSpace = require('./VerticalSpace-082c293c.js');
+var CardHeading = require('./CardHeading-5c4c3b21.js');
+var CardFooter = require('./CardFooter-17b3e04c.js');
+var ConditionalWrapper = require('./ConditionalWrapper-bf944594.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_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$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_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_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_es.__assign({}, media)))),
+            media.type === "video" && isClient && (React__default["default"].createElement(React.Suspense, { fallback: null },
+                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(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),
+                    (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;

package/dist/_shared/cjs/{Poster-499b78da.js → Poster-c4591bcf.js}

@@ -1,42 +1,41 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-3783ed64.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var Surface = require('./Surface-038db6e1.js');
-var Image = require('./Image-e873b8fc.js');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
+var Surface = require('./Surface-02d149ba.js');
+var Image = require('./Image-27b46f1d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var PosterImage = function (_a) {
-    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = filterDataAttrs.__rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
-    return (React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
+    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = index_es.__rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
+    return (React__default["default"].createElement(Image.Image, index_es.__assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, index_es.filterDataAttrs(props))));
 };
 
 var PosterVideo = function (_a) {
     var _b;
-    var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = filterDataAttrs.__rest(_a, ["anchor", "autoPlay", "children", "loop"]);
-    return (React__default["default"].createElement("video", filterDataAttrs.__assign({ className: index.classNames((_b = {
+    var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = index_es.__rest(_a, ["anchor", "autoPlay", "children", "loop"]);
+    return (React__default["default"].createElement("video", index_es.__assign({ className: index.classNames((_b = {
                 "arc-PosterVideo": true
             },
-            _b[suffixModifier.suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
-            _b)), autoPlay: autoPlay, muted: true, loop: loop }, filterDataAttrs.filterDataAttrs(props)), children));
+            _b[index_es.suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
+            _b)), autoPlay: autoPlay, muted: true, loop: loop }, index_es.filterDataAttrs(props)), children));
 };
 
 /**
  * Use `Poster` to compose content on an image or video background. BT Brand Only.
  */
 var Poster = function (_a) {
-    var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = filterDataAttrs.__rest(_a, ["background", "children", "overlay", "surface"]);
+    var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "dark-neutral-02" : _c, props = index_es.__rest(_a, ["background", "children", "overlay", "surface"]);
     return (React__default["default"].createElement(Surface.Surface, { background: surface },
-        React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
+        React__default["default"].createElement("div", index_es.__assign({ className: index.classNames({
                 "arc-Poster": true,
                 "arc-Poster--overlay": overlay,
-                "arc-Poster--overlayLight": surface === "lighter"
-            }) }, filterDataAttrs.filterDataAttrs(props)),
+                "arc-Poster--overlayLight": surface === "light-neutral-01"
+            }) }, index_es.filterDataAttrs(props)),
             React__default["default"].createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
             React__default["default"].createElement("div", { className: "arc-Poster-body" }, children))));
 };