@arc-ui/components 8.0.0 → 8.2.0

package/dist/index.es.js

@@ -343,6 +343,8 @@ var backgroundsShared = [
     "brand-flat",
     "dark",
     "darker",
+    "coral",
+    "turquoise",
     "light",
     "lighter",
     "white"
@@ -700,7 +702,7 @@ var ButtonIcon = function (_a) {
  */
 var Image = function (_a) {
     var _b;
-    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "fillColor", "fit", "height", "overlay", "sizes", "src", "srcSet", "width"]);
+    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, 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 = __rest(_a, ["alt", "anchor", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
@@ -708,7 +710,7 @@ var Image = function (_a) {
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
             _b)), style: __assign(__assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && { backgroundImage: "url(".concat(src, ")") })), (height && { height: "".concat(height, "px") })), (width && { width: "".concat(width, "px") })) }, filterDataAttrs(props)),
-        React.createElement("img", { className: "arc-Image-img", alt: alt, height: height, sizes: sizes, src: src, srcSet: srcSet, width: width })));
+        React.createElement("img", { className: "arc-Image-img", alt: alt, height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet, width: width })));
 };
 
 /**
@@ -860,14 +862,14 @@ var useNumericInput = function (props) {
  */
 var Card = function (_a) {
     var _b;
-    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, imageHeight = _a.imageHeight, linkData = _a.linkData, minHeight = _a.minHeight, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageSrc", "imageSrcSet", "imageHeight", "linkData", "minHeight", "target", "title", "titleSize"]);
+    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageHeight = _a.imageHeight, imageLoading = _a.imageLoading, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, linkData = _a.linkData, minHeight = _a.minHeight, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "target", "title", "titleSize"]);
     var surface = useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
         return fill === "outlined" || fill === "neutral" ? (React.createElement("div", null, children)) : (React.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
     };
-    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, src: imageSrc, srcSet: imageSrcSet, height: imageHeight }));
+    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Card": true,
                 "arc-Card--onDarkSurface": surface === "dark"
@@ -907,11 +909,11 @@ Card.Block = CardBlock;
  * Internal `Card.Image` component to show an image within a Card.
  */
 var CardImage = function (_a) {
-    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
+    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
     return (React.createElement("div", { className: classNames({
             "arc-Card-image": true
         }) },
-        React.createElement(Image, { alt: alt, fit: "cover", sizes: sizes, src: src, srcSet: srcSet, height: height })));
+        React.createElement(Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -1212,8 +1214,8 @@ UniversalHeaderItem.displayName = "UniversalHeader.Item";
 UniversalHeader.Item = UniversalHeaderItem;
 
 var PosterImage = function (_a) {
-    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "sizes", "src", "srcSet"]);
-    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", 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 = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
+    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
 };
 PosterImage.displayName = "Poster.Image";