@arc-ui/components 11.15.0 → 11.17.0

package/dist/InformationCard/InformationCard.cjs.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
 var React = require('react');
-var index_es = require('../_shared/cjs/index.es-26dd8c5d.js');
+var useMediaQuery = require('../_shared/cjs/use-media-query-e61881d8.js');
+var CardLabel = require('../_shared/cjs/CardLabel-768abf20.js');
 var Icon = require('../_shared/cjs/Icon-a9801f05.js');
 var Tag = require('../_shared/cjs/Tag-42ddca45.js');
 var Image = require('../_shared/cjs/Image-e873b8fc.js');
@@ -21,63 +22,45 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const BtIconArrowRight = (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: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
-      fill: "currentColor",
-    }),
-  );
-
 var InformationCard = function (_a) {
     var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = filterDataAttrs.__rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
-    var isMinWidthArcBreakpointS = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointS, "px)"));
-    var isMinWidthArcBreakpointM = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointM, "px)"));
+    var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointS, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointM, "px)"));
+    var _c = React.useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
     var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
-    var HeadingElement = "h".concat(headingLevel);
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-InformationCard", {
-            "arc-InformationCard--interactive": cardUrl
+            "arc-InformationCard--outlined": cardUrl && showHoverState
         }) }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement(Surface.Surface, { growVertically: true, padding: containerSpacing, background: "white" },
-            image && (React__default["default"].createElement("div", { className: "arc-InformationCard-img" },
-                React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({}, image)),
-                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: assetSpacing }))),
-            icon && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(Icon.Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
-                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: assetSpacing }))),
-            label && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("span", { className: "arc-InformationCard-label" }, label),
-                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }))),
-            React__default["default"].createElement(HeadingElement, { className: "arc-InformationCard-heading" }, cardUrl ? (React__default["default"].createElement("a", { className: "arc-InformationCard-headingLink", href: cardUrl, onClick: onClick }, heading)) : (heading)),
-            React__default["default"].createElement("div", { className: "arc-InformationCard-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),
-                (button || tags || footerLogo) && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
-            tags && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
-                    var text = _a.text, tagProps = filterDataAttrs.__rest(_a, ["text"]);
-                    return (React__default["default"].createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
-                        React__default["default"].createElement(Tag.Tag, filterDataAttrs.__assign({}, tagProps), text)));
-                })),
-                (button || footerLogo) && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
+            React__default["default"].createElement("div", null,
+                image && (React__default["default"].createElement("div", { className: "arc-InformationCard-img" },
+                    React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({}, image)),
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: assetSpacing }))),
+                icon && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Icon.Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: assetSpacing }))),
+                label && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(CardLabel.CardLabel, { color: "supporting", text: label }),
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }))),
+                React__default["default"].createElement(CardLabel.CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+            React__default["default"].createElement("div", { className: "arc-InformationCard-contentContainer" },
+                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),
+                    (button || tags || footerLogo) && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
+                tags && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
+                        var text = _a.text, tagProps = filterDataAttrs.__rest(_a, ["text"]);
+                        return (React__default["default"].createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
+                            React__default["default"].createElement(Tag.Tag, filterDataAttrs.__assign({}, tagProps), text)));
+                    })),
+                    (button || footerLogo) && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
             React__default["default"].createElement("div", { className: "arc-InformationCard-footer" },
                 button && !cardUrl && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
-                    React__default["default"].createElement(Button.Button, filterDataAttrs.__assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: BtIconArrowRight })))),
+                    React__default["default"].createElement(Button.Button, filterDataAttrs.__assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: CardLabel.BtIconArrowRight })))),
                 footerLogo && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
                     React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({}, footerLogo))))))));
 };

package/dist/InformationCard/InformationCard.esm.js

@@ -1,6 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
-import React__default from 'react';
-import { u as useMediaQuery, A as ArcBreakpointS, a as ArcBreakpointM } from '../_shared/esm/index.es-c552c0ea.js';
+import React__default, { useState } from 'react';
+import { u as useMediaQuery, a as ArcBreakpointS, A as ArcBreakpointM } from '../_shared/esm/use-media-query-4c807227.js';
+import { C as CardLabel, a as CardHeading, B as BtIconArrowRight } from '../_shared/esm/CardLabel-d6d71407.js';
 import { I as Icon } from '../_shared/esm/Icon-abd0d990.js';
 import { T as Tag } from '../_shared/esm/Tag-92c088a9.js';
 import { I as Image } from '../_shared/esm/Image-12fbd327.js';
@@ -13,60 +14,42 @@ import '../_shared/esm/suffix-modifier-3d548e45.js';
 import '../_shared/esm/BtIconChevronLeftMid.esm-1ed8330b.js';
 import '../_shared/esm/BtIconChevronRightMid.esm-32268f1a.js';
 
-const BtIconArrowRight = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
-      fill: "currentColor",
-    }),
-  );
-
 var InformationCard = function (_a) {
     var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
     var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
-    var HeadingElement = "h".concat(headingLevel);
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     return (React__default.createElement("div", __assign({ className: classNames("arc-InformationCard", {
-            "arc-InformationCard--interactive": cardUrl
+            "arc-InformationCard--outlined": cardUrl && showHoverState
         }) }, filterDataAttrs(props)),
         React__default.createElement(Surface, { growVertically: true, padding: containerSpacing, background: "white" },
-            image && (React__default.createElement("div", { className: "arc-InformationCard-img" },
-                React__default.createElement(Image, __assign({}, image)),
-                React__default.createElement(VerticalSpace, { size: assetSpacing }))),
-            icon && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
-                React__default.createElement(VerticalSpace, { size: assetSpacing }))),
-            label && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("span", { className: "arc-InformationCard-label" }, label),
-                React__default.createElement(VerticalSpace, { size: headingSpacing }))),
-            React__default.createElement(HeadingElement, { className: "arc-InformationCard-heading" }, cardUrl ? (React__default.createElement("a", { className: "arc-InformationCard-headingLink", href: cardUrl, onClick: onClick }, heading)) : (heading)),
-            React__default.createElement("div", { className: "arc-InformationCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(VerticalSpace, { size: headingSpacing }),
-                React__default.createElement(Text, null, text),
-                (button || tags || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" })))),
-            tags && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
-                    var text = _a.text, tagProps = __rest(_a, ["text"]);
-                    return (React__default.createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
-                        React__default.createElement(Tag, __assign({}, tagProps), text)));
-                })),
-                (button || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" }))),
+            React__default.createElement("div", null,
+                image && (React__default.createElement("div", { className: "arc-InformationCard-img" },
+                    React__default.createElement(Image, __assign({}, image)),
+                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
+                icon && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
+                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
+                label && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(CardLabel, { color: "supporting", text: label }),
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
+                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+            React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
+                text && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
+                    React__default.createElement(Text, null, text),
+                    (button || tags || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" }))),
+                tags && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
+                        var text = _a.text, tagProps = __rest(_a, ["text"]);
+                        return (React__default.createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
+                            React__default.createElement(Tag, __assign({}, tagProps), text)));
+                    })),
+                    (button || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" })))),
             React__default.createElement("div", { className: "arc-InformationCard-footer" },
                 button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
                     React__default.createElement(Button, __assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: BtIconArrowRight })))),

package/dist/MediaCard/MediaCard.cjs.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var useMediaQuery = require('../_shared/cjs/use-media-query-e61881d8.js');
+var CardLabel = require('../_shared/cjs/CardLabel-768abf20.js');
+var CardFooter = require('../_shared/cjs/CardFooter-43c32239.js');
+var Image = require('../_shared/cjs/Image-e873b8fc.js');
+var Surface = require('../_shared/cjs/Surface-038db6e1.js');
+var Text = require('../_shared/cjs/Text-606ca3a2.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-dc53bb70.js');
+require('../_shared/cjs/suffix-modifier-64dcd338.js');
+require('../_shared/cjs/BtIconArrowRightFill.esm-435cf4bd.js');
+require('../_shared/cjs/Icon-a9801f05.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConditionalWrapper = function (_a) {
+    var condition = _a.condition, wrapper = _a.wrapper, children = _a.children;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, condition ? wrapper(children) : children));
+};
+
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+var MediaCard = function (_a) {
+    var img = _a.img, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, _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 = filterDataAttrs.__rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "buttonIcon", "isContained", "headingLevel"]);
+    var _e = React.useState(false), showHoverState = _e[0], setShowHoverState = _e[1];
+    var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointS, "px)"));
+    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-MediaCard", {
+            "arc-MediaCard--outlined": url && isContained && showHoverState,
+            "arc-MediaCard--contained": isContained
+        }) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default["default"].createElement(Surface.Surface, { growVertically: true, background: "white" }, children)); } },
+            React__default["default"].createElement("div", { className: "arc-MediaCard-imgContainer" },
+                React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({}, img))),
+            React__default["default"].createElement("div", { className: "arc-MediaCard-content" },
+                label && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(CardLabel.CardLabel, { text: label }),
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }))),
+                React__default["default"].createElement(CardLabel.CardHeading, { heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, 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, { showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) })))));
+};
+
+exports.MediaCard = MediaCard;

package/dist/MediaCard/MediaCard.esm.js

@@ -0,0 +1,48 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import React__default, { useState } from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { u as useMediaQuery, a as ArcBreakpointS } from '../_shared/esm/use-media-query-4c807227.js';
+import { C as CardLabel, a as CardHeading } from '../_shared/esm/CardLabel-d6d71407.js';
+import { C as CardFooter } from '../_shared/esm/CardFooter-dd8d4000.js';
+import { I as Image } from '../_shared/esm/Image-12fbd327.js';
+import { S as Surface } from '../_shared/esm/Surface-0ca6817d.js';
+import { T as Text } from '../_shared/esm/Text-14f586ac.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-43cd9138.js';
+import '../_shared/esm/suffix-modifier-3d548e45.js';
+import '../_shared/esm/BtIconArrowRightFill.esm-99019d1a.js';
+import '../_shared/esm/Icon-abd0d990.js';
+
+var ConditionalWrapper = function (_a) {
+    var condition = _a.condition, wrapper = _a.wrapper, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null, condition ? wrapper(children) : children));
+};
+
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+var MediaCard = function (_a) {
+    var img = _a.img, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, _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 = __rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "buttonIcon", "isContained", "headingLevel"]);
+    var _e = useState(false), showHoverState = _e[0], setShowHoverState = _e[1];
+    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
+    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-MediaCard", {
+            "arc-MediaCard--outlined": url && isContained && showHoverState,
+            "arc-MediaCard--contained": isContained
+        }) }, filterDataAttrs(props)),
+        React__default.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default.createElement(Surface, { growVertically: true, background: "white" }, children)); } },
+            React__default.createElement("div", { className: "arc-MediaCard-imgContainer" },
+                React__default.createElement(Image, __assign({}, img))),
+            React__default.createElement("div", { className: "arc-MediaCard-content" },
+                label && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(CardLabel, { text: label }),
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
+                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                React__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
+                    React__default.createElement(Text, null, text),
+                    (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
+                React__default.createElement(CardFooter, { showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) })))));
+};
+
+export { MediaCard };

package/dist/MediaCard/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/mediacard",
+  "types": "../types/components/MediaCard/index.d.ts",
+  "main": "./MediaCard.cjs.js",
+  "module": "./MediaCard.esm.js",
+  "private": true
+}