@arc-ui/components 12.0.0-beta.22 → 12.0.0-beta.23

package/lib/ImpactCard/ImpactCard.mjs

@@ -15,8 +15,8 @@ import '../_shared/esm/index-Cr6KeQLU.mjs';
 
 /** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
 var ImpactCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.buttonIcon, buttonIcon = _f === void 0 ? "arrow" : _f, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "headingSize", "linkData", "pathway", "headingLevel", "buttonIcon"]);
-    var _g = useState(false), showHoverState = _g[0], setShowHoverState = _g[1];
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.buttonIcon, buttonIcon = _f === void 0 ? "arrow" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "headingSize", "linkData", "pathway", "headingLevel", "buttonIcon", "labelLevel"]);
+    var _h = useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
     var surface = useContext(Context).surface;
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
@@ -30,7 +30,7 @@ var ImpactCard = function (_a) {
             React__default.createElement(Image, __assign({ fit: "cover", alt: "" }, img))),
         React__default.createElement("div", { className: "arc-ImpactCard-contentContainer" },
             label && (React__default.createElement("div", { className: "arc-ImpactCard-label" },
-                React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
+                React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                 React__default.createElement(VerticalSpace, { size: "16" }))),
             React__default.createElement(CardHeading, { heading: heading, size: headingSize, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
         React__default.createElement(CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));

package/lib/ImpactCard/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-ImpactCard{background:var(--surface-colors-bg-light-brand-02);border-radius:var(--card-border-radius-s);box-shadow:0 0 0 2px transparent;color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;padding:var(--card-padding-s);position:relative;transition:all 0.2s ease-in-out}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard-backgroundImageContainer{bottom:0;display:block;left:0;overflow:hidden;position:absolute;right:0;top:0;transition:transform 0.4s ease}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard-label{color:var(--card-colors-light-text-support)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--isHovered .arc-ImpactCard-backgroundImageContainer{transform:scale(1.05)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--darkPathway{background:var(--surface-colors-bg-dark-brand-02);color:var(--card-colors-dark-text-default)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--darkPathway .arc-ImpactCard-label{color:var(--card-colors-dark-text-support)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard-contentContainer{display:flex;flex:1 1 auto;flex-direction:column;margin-bottom:var(--card-gap-xl);z-index:1}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--darkPathway.arc-ImpactCard--outlined{box-shadow:0 0 0 2px var(--card-colors-dark-border-hover)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-border-hover)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--outlined:not(.arc-ImpactCard--darkPathway) .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--outlined[focus-within]{box-shadow:none;outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--outlined:focus-within{box-shadow:none;outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--onDarkSurface.arc-ImpactCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-ImpactCard--onDarkSurface.arc-ImpactCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}@media (min-width:1280px){.arc-v12-0-0-beta-22 .arc .arc-ImpactCard{padding:var(--card-padding-m)}}
+.arc-v12-0-0-beta-23 .arc .arc-ImpactCard{background:var(--surface-colors-bg-light-brand-02);border-radius:var(--card-border-radius-s);box-shadow:0 0 0 2px transparent;color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;padding:var(--card-padding-s);position:relative;transition:all 0.2s ease-in-out}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard-backgroundImageContainer{bottom:0;display:block;left:0;overflow:hidden;position:absolute;right:0;top:0;transition:transform 0.4s ease}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard-label{color:var(--card-colors-light-text-support)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--isHovered .arc-ImpactCard-backgroundImageContainer{transform:scale(1.05)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--darkPathway{background:var(--surface-colors-bg-dark-brand-02);color:var(--card-colors-dark-text-default)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--darkPathway .arc-ImpactCard-label{color:var(--card-colors-dark-text-support)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard-contentContainer{display:flex;flex:1 1 auto;flex-direction:column;margin-bottom:var(--card-gap-xl);z-index:1}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--darkPathway.arc-ImpactCard--outlined{box-shadow:0 0 0 2px var(--card-colors-dark-border-hover)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-border-hover)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--outlined:not(.arc-ImpactCard--darkPathway) .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--outlined[focus-within]{box-shadow:none;outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--outlined:focus-within{box-shadow:none;outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--onDarkSurface.arc-ImpactCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-ImpactCard--onDarkSurface.arc-ImpactCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}@media (min-width:1280px){.arc-v12-0-0-beta-23 .arc .arc-ImpactCard{padding:var(--card-padding-m)}}

package/lib/InformationCard/InformationCard.cjs

@@ -12,22 +12,22 @@ var Image = require('../_shared/cjs/Image-C1pcrfnN.cjs');
 var Heading = require('../_shared/cjs/Heading-BEMSkLYR.cjs');
 var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
 var ButtonV2 = require('../_shared/cjs/ButtonV2-Bta5SVVY.cjs');
-var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-DWUgmeLA.cjs');
+var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-CS8JVk5T.cjs');
 var CardHeading = require('../_shared/cjs/CardHeading-Cl0D1Khp.cjs');
 var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
 require('../_shared/cjs/isSymbol-BGrHFUbV.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/Spinner-bbrOwxv2.cjs');
-require('../_shared/cjs/index.es-DlNskPlN.cjs');
+require('../_shared/cjs/index.es-fkulh7qu.cjs');
 
 /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
 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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = filterAttrs.__rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel"]);
+    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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, props = filterAttrs.__rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel", "labelLevel"]);
     var surface = React.useContext(Surface.Context).surface;
-    var _c = React.useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
+    var _d = React.useState(false), showHoverState = _d[0], setShowHoverState = _d[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    var _d = React.useState(undefined), minimumHeight = _d[0], setMinimumHeight = _d[1];
+    var _e = React.useState(undefined), minimumHeight = _e[0], setMinimumHeight = _e[1];
     var checkMinHeight = debounce.debounce(function () {
         for (var _i = 0, _a = Object.entries(arcBreakpoints.ArcBreakpoints); _i < _a.length; _i++) {
             var _b = _a[_i], key = _b[0], value = _b[1];
@@ -61,7 +61,7 @@ var InformationCard = function (_a) {
                 React.createElement("div", { className: "arc-InformationCard-contentContainer" },
                     label && (React.createElement(React.Fragment, null,
                         React.createElement("div", { className: "arc-InformationCard-label" },
-                            React.createElement(Heading.Heading, { level: "3", fontStyle: "overline" }, label)))),
+                            React.createElement(Heading.Heading, { level: labelLevel, fontStyle: "overline" }, label)))),
                     React.createElement(CardHeading.CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
                     text && React.createElement(Text.Text, null, text)),
                 (button || badges || footerLogo) && (React.createElement("div", { className: "arc-InformationCard-footer" },

package/lib/InformationCard/InformationCard.mjs

@@ -10,22 +10,22 @@ import { I as Image } from '../_shared/esm/Image-Dl8oH1Rn.mjs';
 import { H as Heading } from '../_shared/esm/Heading-CxHWefi7.mjs';
 import { T as Text } from '../_shared/esm/Text-CBlnm5CT.mjs';
 import { B as ButtonV2 } from '../_shared/esm/ButtonV2-DwYBAojW.mjs';
-import { A as ArcBreakpoints } from '../_shared/esm/arc-breakpoints-D5hR5m3t.mjs';
+import { A as ArcBreakpoints } from '../_shared/esm/arc-breakpoints-D7Ie4kBt.mjs';
 import { C as CardHeading } from '../_shared/esm/CardHeading-_setRRjq.mjs';
 import { C as Context, S as Surface } from '../_shared/esm/Surface-Colbp3Zx.mjs';
 import '../_shared/esm/isSymbol-DgWNE2Tm.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/Spinner-Cd7LiPTy.mjs';
-import '../_shared/esm/index.es-C3WqfFKH.mjs';
+import '../_shared/esm/index.es-CtRkzfKP.mjs';
 
 /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
 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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel"]);
+    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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel", "labelLevel"]);
     var surface = useContext(Context).surface;
-    var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
+    var _d = useState(false), showHoverState = _d[0], setShowHoverState = _d[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    var _d = useState(undefined), minimumHeight = _d[0], setMinimumHeight = _d[1];
+    var _e = useState(undefined), minimumHeight = _e[0], setMinimumHeight = _e[1];
     var checkMinHeight = debounce(function () {
         for (var _i = 0, _a = Object.entries(ArcBreakpoints); _i < _a.length; _i++) {
             var _b = _a[_i], key = _b[0], value = _b[1];
@@ -59,7 +59,7 @@ var InformationCard = function (_a) {
                 React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
                     label && (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement("div", { className: "arc-InformationCard-label" },
-                            React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label)))),
+                            React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label)))),
                     React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
                     text && React__default.createElement(Text, null, text)),
                 (button || badges || footerLogo) && (React__default.createElement("div", { className: "arc-InformationCard-footer" },

package/lib/InformationCard/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-InformationCard{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 1px var(--card-colors-light-border-default);color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;position:relative;text-decoration:none;transition:all 0.2s ease-in-out}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-innerContainer{display:flex;flex-direction:column;height:100%;padding:var(--card-padding-s)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-label{color:var(--card-colors-light-text-default)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-fg-hover)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard--outlined .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard--isALink[focus-within]{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard--isALink:focus-within{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-img,.arc-v12-0-0-beta-22 .arc .arc-InformationCard-icon{margin-bottom:var(--card-gap-m)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-m);width:auto}.arc-v12-0-0-beta-22 .arc .arc-InformationCard .arc-Icon{height:var(--card-size-icon-m);width:var(--card-size-icon-m)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-contentContainer{display:flex;flex-direction:column;flex-grow:1;gap:var(--card-gap-xs)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-badgeContainer{display:flex;flex-wrap:wrap;margin:-4px -8px}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-badge{margin-top:8px}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-footer{display:flex;flex-direction:column;gap:var(--card-gap-xl);margin-top:var(--card-gap-xl)}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-footerItems{align-items:center;display:flex}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-footerButtonContainer{flex:1 1 auto}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-footerLogoContainer .arc-Image-img{max-height:48px;width:auto}.arc-v12-0-0-beta-22 .arc .arc-InformationCard-badgeContainer>.arc-InformationCard-badge{margin:4px 8px}.arc-v12-0-0-beta-22 .arc .arc-InformationCard .arc-Surface{flex:1}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-InformationCard-contentContainer{gap:var(--card-gap-s)}}@media (min-width:1024px){.arc-v12-0-0-beta-22 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-l)}}@media (min-width:1280px){.arc-v12-0-0-beta-22 .arc .arc-InformationCard-innerContainer{padding:var(--card-padding-m)}}
+.arc-v12-0-0-beta-23 .arc .arc-InformationCard{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 1px var(--card-colors-light-border-default);color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;position:relative;text-decoration:none;transition:all 0.2s ease-in-out}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-innerContainer{display:flex;flex-direction:column;height:100%;padding:var(--card-padding-s)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-label{color:var(--card-colors-light-text-default)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-fg-hover)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard--outlined .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard--isALink[focus-within]{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard--isALink:focus-within{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-img,.arc-v12-0-0-beta-23 .arc .arc-InformationCard-icon{margin-bottom:var(--card-gap-m)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-m);width:auto}.arc-v12-0-0-beta-23 .arc .arc-InformationCard .arc-Icon{height:var(--card-size-icon-m);width:var(--card-size-icon-m)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-contentContainer{display:flex;flex-direction:column;flex-grow:1;gap:var(--card-gap-xs)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-badgeContainer{display:flex;flex-wrap:wrap;margin:-4px -8px}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-badge{margin-top:8px}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-footer{display:flex;flex-direction:column;gap:var(--card-gap-xl);margin-top:var(--card-gap-xl)}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-footerItems{align-items:center;display:flex}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-footerButtonContainer{flex:1 1 auto}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-footerLogoContainer .arc-Image-img{max-height:48px;width:auto}.arc-v12-0-0-beta-23 .arc .arc-InformationCard-badgeContainer>.arc-InformationCard-badge{margin:4px 8px}.arc-v12-0-0-beta-23 .arc .arc-InformationCard .arc-Surface{flex:1}@media (min-width:768px){.arc-v12-0-0-beta-23 .arc .arc-InformationCard-contentContainer{gap:var(--card-gap-s)}}@media (min-width:1024px){.arc-v12-0-0-beta-23 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-l)}}@media (min-width:1280px){.arc-v12-0-0-beta-23 .arc .arc-InformationCard-innerContainer{padding:var(--card-padding-m)}}

package/lib/Link/Link.cjs

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var Link = require('../_shared/cjs/Link-7xUgVf1I.cjs');
+var Link = require('../_shared/cjs/Link-C3OSQIIk.cjs');
 require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
 require('react');
 require('../_shared/cjs/index-CTlXMLug.cjs');

package/lib/Link/Link.mjs

@@ -1,5 +1,5 @@
 'use client';
-export { L as Link } from '../_shared/esm/Link-Biyg9qBH.mjs';
+export { L as Link } from '../_shared/esm/Link-DxjGH_7f.mjs';
 import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
 import 'react';
 import '../_shared/esm/index-5C0-U8cc.mjs';

package/lib/Link/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;text-decoration:none}.arc-v12-0-0-beta-22 .arc button.arc-Link{padding:0}.arc-v12-0-0-beta-22 .arc .arc-Link:focus-visible{outline:none}.arc-v12-0-0-beta-22 .arc .arc-Link-wrapper{display:inline-block}.arc-v12-0-0-beta-22 .arc .arc-Link-text{font-weight:inherit !important}.arc-v12-0-0-beta-22 .arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc-v12-0-0-beta-22 .arc .arc-Link-iconWrapper{align-items:flex-end;-moz-column-gap:var(--textlink-gap-s);column-gap:var(--textlink-gap-s);display:inline-flex;flex-wrap:nowrap}.arc-v12-0-0-beta-22 .arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-22 .arc .arc-Link--isImplied:focus-visible .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-22 .arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-22 .arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc-v12-0-0-beta-22 .arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc-v12-0-0-beta-22 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-22 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-22 .arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc-v12-0-0-beta-22 .arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-22 .arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-22 .arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-22 .arc a:focus-visible:has(.arc-Link--onLightSurface) .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc-v12-0-0-beta-22 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc-v12-0-0-beta-22 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-22 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc-v12-0-0-beta-22 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}
+.arc-v12-0-0-beta-23 .arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;padding:0;text-decoration:none}.arc-v12-0-0-beta-23 .arc .arc-Link:focus-visible{outline:none}.arc-v12-0-0-beta-23 .arc .arc-Link-wrapper{display:inline-block}.arc-v12-0-0-beta-23 .arc .arc-Link-text{font-weight:inherit !important}.arc-v12-0-0-beta-23 .arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc-v12-0-0-beta-23 .arc .arc-Link-iconWrapper{align-items:flex-end;-moz-column-gap:var(--textlink-gap-s);column-gap:var(--textlink-gap-s);display:inline-flex;flex-wrap:nowrap}.arc-v12-0-0-beta-23 .arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-23 .arc .arc-Link--isImplied:focus-visible .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-23 .arc .arc-Link--isButton{text-align:left}.arc-v12-0-0-beta-23 .arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-23 .arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc-v12-0-0-beta-23 .arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc-v12-0-0-beta-23 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-23 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-23 .arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc-v12-0-0-beta-23 .arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-23 .arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-23 .arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-23 .arc a:focus-visible:has(.arc-Link--onLightSurface) .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc-v12-0-0-beta-23 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc-v12-0-0-beta-23 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-23 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc-v12-0-0-beta-23 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}

package/lib/Markup/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Markup--measured{max-width:32em}.arc-v12-0-0-beta-22 .arc .arc-Markup blockquote,.arc-v12-0-0-beta-22 .arc .arc-Markup ol,.arc-v12-0-0-beta-22 .arc .arc-Markup p,.arc-v12-0-0-beta-22 .arc .arc-Markup>small,.arc-v12-0-0-beta-22 .arc .arc-Markup ul{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-22 .arc .arc-Markup h1{margin-bottom:var(--sem-space-gap-110);margin-top:0}.arc-v12-0-0-beta-22 .arc .arc-Markup h2,.arc-v12-0-0-beta-22 .arc .arc-Markup h3,.arc-v12-0-0-beta-22 .arc .arc-Markup h4,.arc-v12-0-0-beta-22 .arc .arc-Markup h5,.arc-v12-0-0-beta-22 .arc .arc-Markup h6{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-22 .arc .arc-Markup *+h1,.arc-v12-0-0-beta-22 .arc .arc-Markup *+h2,.arc-v12-0-0-beta-22 .arc .arc-Markup *+h3,.arc-v12-0-0-beta-22 .arc .arc-Markup *+h4,.arc-v12-0-0-beta-22 .arc .arc-Markup *+h5,.arc-v12-0-0-beta-22 .arc .arc-Markup *+h6{margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-22 .arc .arc-Markup hr,.arc-v12-0-0-beta-22 .arc .arc-Markup img,.arc-v12-0-0-beta-22 .arc .arc-Markup pre,.arc-v12-0-0-beta-22 .arc .arc-Markup table{margin-bottom:var(--sem-space-gap-110);margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-22 .arc .arc-Markup>:first-child{margin-top:0}.arc-v12-0-0-beta-22 .arc .arc-Markup>:last-child{margin-bottom:0}.arc-v12-0-0-beta-22 .arc .arc-Markup blockquote{margin-bottom:0;margin-left:var(--sem-space-gap-110);margin-right:0;margin-top:0}.arc-v12-0-0-beta-22 .arc .arc-Markup blockquote p{margin-bottom:0;margin-top:0;quotes:"“" "”" "‘" "’"}.arc-v12-0-0-beta-22 .arc .arc-Markup blockquote p:first-child::before{content:open-quote;margin-left:-0.75ch}.arc-v12-0-0-beta-22 .arc .arc-Markup blockquote p:first-child::after{content:close-quote}.arc-v12-0-0-beta-22 .arc .arc-Markup blockquote p+p:last-child{text-align:right}.arc-v12-0-0-beta-22 .arc .arc-Markup h1,.arc-v12-0-0-beta-22 .arc .arc-Markup h2,.arc-v12-0-0-beta-22 .arc .arc-Markup h3{font-weight:var(--sem-font-weight-semi-bold)}.arc-v12-0-0-beta-22 .arc .arc-Markup h6{font:var(--sem-type-mobile-semi-xxs)}.arc-v12-0-0-beta-22 .arc .arc-Markup h5{font:var(--sem-type-mobile-semi-xs)}.arc-v12-0-0-beta-22 .arc .arc-Markup h4{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-22 .arc .arc-Markup h3{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-22 .arc .arc-Markup h2{font:var(--sem-type-mobile-semi-l)}.arc-v12-0-0-beta-22 .arc .arc-Markup h1{font:var(--sem-type-mobile-semi-xxl)}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-Markup h3{font:var(--sem-type-tablet-semi-m)}.arc-v12-0-0-beta-22 .arc .arc-Markup h2{font:var(--sem-type-tablet-semi-l)}.arc-v12-0-0-beta-22 .arc .arc-Markup h1{font:var(--sem-type-tablet-semi-xxl)}}@media (min-width:1280px){.arc-v12-0-0-beta-22 .arc .arc-Markup h3{font:var(--sem-type-desktop-semi-m)}.arc-v12-0-0-beta-22 .arc .arc-Markup h2{font:var(--sem-type-desktop-semi-l)}.arc-v12-0-0-beta-22 .arc .arc-Markup h1{font:var(--sem-type-desktop-semi-xxl)}}.arc-v12-0-0-beta-22 .arc .arc-Markup img{display:block;max-width:100%}.arc-v12-0-0-beta-22 .arc .arc-Markup ol,.arc-v12-0-0-beta-22 .arc .arc-Markup ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.arc-v12-0-0-beta-22 .arc .arc-Markup ol{counter-reset:list}.arc-v12-0-0-beta-22 .arc .arc-Markup li{padding-left:var(--sem-space-padding-110);position:relative}.arc-v12-0-0-beta-22 .arc .arc-Markup li::before{left:0;position:absolute;text-align:center;width:24px}.arc-v12-0-0-beta-22 .arc .arc-Markup ul>li::before{content:"•"}.arc-v12-0-0-beta-22 .arc .arc-Markup ol>li::before{content:counter(list) ".";counter-increment:list}.arc-v12-0-0-beta-22 .arc .arc-Markup hr{background-color:var(--sem-color-border-secondary-light-minimal);border:0;color:var(--sem-color-border-secondary-light-minimal);height:1px;margin-bottom:0;margin-top:0}.arc-v12-0-0-beta-22 .arc .arc-Markup--onDarkSurface hr{background-color:var(--sem-color-border-secondary-dark-minimal);color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-22 .arc .arc-Markup>small{display:block;font:var(--sem-type-interface-reg-s)}.arc-v12-0-0-beta-22 .arc .arc-Markup table{border-collapse:collapse;max-width:100%}.arc-v12-0-0-beta-22 .arc .arc-Markup td,.arc-v12-0-0-beta-22 .arc .arc-Markup th{border:1px solid var(--sem-color-border-secondary-light-minimal);height:calc(4px * 9);padding-left:calc(4px * 4);padding-right:calc(4px * 4);vertical-align:middle}.arc-v12-0-0-beta-22 .arc .arc-Markup--onDarkSurface td,.arc-v12-0-0-beta-22 .arc .arc-Markup--onDarkSurface th{border-color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-22 .arc .arc-Markup th{font-weight:var(--sem-font-weight-semi-bold)}.arc .arc-Markup tbody tr:nth-child(even){background-color:rgba(0,0,0,0.05)}.arc .arc-Markup:not(.arc-Markup--onDarkSurface) tbody tr:nth-child(even){background-color:rgba(42,28,74,0.05)}.arc-v12-0-0-beta-22 .arc .arc-Markup.arc-Markup--onDarkSurface tbody tr:nth-child(even){background-color:rgba(255,255,255,0.15)}
+.arc-v12-0-0-beta-23 .arc .arc-Markup--measured{max-width:32em}.arc-v12-0-0-beta-23 .arc .arc-Markup blockquote,.arc-v12-0-0-beta-23 .arc .arc-Markup ol,.arc-v12-0-0-beta-23 .arc .arc-Markup p,.arc-v12-0-0-beta-23 .arc .arc-Markup>small,.arc-v12-0-0-beta-23 .arc .arc-Markup ul{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-23 .arc .arc-Markup h1{margin-bottom:var(--sem-space-gap-110);margin-top:0}.arc-v12-0-0-beta-23 .arc .arc-Markup h2,.arc-v12-0-0-beta-23 .arc .arc-Markup h3,.arc-v12-0-0-beta-23 .arc .arc-Markup h4,.arc-v12-0-0-beta-23 .arc .arc-Markup h5,.arc-v12-0-0-beta-23 .arc .arc-Markup h6{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-23 .arc .arc-Markup *+h1,.arc-v12-0-0-beta-23 .arc .arc-Markup *+h2,.arc-v12-0-0-beta-23 .arc .arc-Markup *+h3,.arc-v12-0-0-beta-23 .arc .arc-Markup *+h4,.arc-v12-0-0-beta-23 .arc .arc-Markup *+h5,.arc-v12-0-0-beta-23 .arc .arc-Markup *+h6{margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-23 .arc .arc-Markup hr,.arc-v12-0-0-beta-23 .arc .arc-Markup img,.arc-v12-0-0-beta-23 .arc .arc-Markup pre,.arc-v12-0-0-beta-23 .arc .arc-Markup table{margin-bottom:var(--sem-space-gap-110);margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-23 .arc .arc-Markup>:first-child{margin-top:0}.arc-v12-0-0-beta-23 .arc .arc-Markup>:last-child{margin-bottom:0}.arc-v12-0-0-beta-23 .arc .arc-Markup blockquote{margin-bottom:0;margin-left:var(--sem-space-gap-110);margin-right:0;margin-top:0}.arc-v12-0-0-beta-23 .arc .arc-Markup blockquote p{margin-bottom:0;margin-top:0;quotes:"“" "”" "‘" "’"}.arc-v12-0-0-beta-23 .arc .arc-Markup blockquote p:first-child::before{content:open-quote;margin-left:-0.75ch}.arc-v12-0-0-beta-23 .arc .arc-Markup blockquote p:first-child::after{content:close-quote}.arc-v12-0-0-beta-23 .arc .arc-Markup blockquote p+p:last-child{text-align:right}.arc-v12-0-0-beta-23 .arc .arc-Markup h1,.arc-v12-0-0-beta-23 .arc .arc-Markup h2,.arc-v12-0-0-beta-23 .arc .arc-Markup h3{font-weight:var(--sem-font-weight-semi-bold)}.arc-v12-0-0-beta-23 .arc .arc-Markup h6{font:var(--sem-type-mobile-semi-xxs)}.arc-v12-0-0-beta-23 .arc .arc-Markup h5{font:var(--sem-type-mobile-semi-xs)}.arc-v12-0-0-beta-23 .arc .arc-Markup h4{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-23 .arc .arc-Markup h3{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-23 .arc .arc-Markup h2{font:var(--sem-type-mobile-semi-l)}.arc-v12-0-0-beta-23 .arc .arc-Markup h1{font:var(--sem-type-mobile-semi-xxl)}@media (min-width:768px){.arc-v12-0-0-beta-23 .arc .arc-Markup h3{font:var(--sem-type-tablet-semi-m)}.arc-v12-0-0-beta-23 .arc .arc-Markup h2{font:var(--sem-type-tablet-semi-l)}.arc-v12-0-0-beta-23 .arc .arc-Markup h1{font:var(--sem-type-tablet-semi-xxl)}}@media (min-width:1280px){.arc-v12-0-0-beta-23 .arc .arc-Markup h3{font:var(--sem-type-desktop-semi-m)}.arc-v12-0-0-beta-23 .arc .arc-Markup h2{font:var(--sem-type-desktop-semi-l)}.arc-v12-0-0-beta-23 .arc .arc-Markup h1{font:var(--sem-type-desktop-semi-xxl)}}.arc-v12-0-0-beta-23 .arc .arc-Markup img{display:block;max-width:100%}.arc-v12-0-0-beta-23 .arc .arc-Markup ol,.arc-v12-0-0-beta-23 .arc .arc-Markup ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.arc-v12-0-0-beta-23 .arc .arc-Markup ol{counter-reset:list}.arc-v12-0-0-beta-23 .arc .arc-Markup li{padding-left:var(--sem-space-padding-110);position:relative}.arc-v12-0-0-beta-23 .arc .arc-Markup li::before{left:0;position:absolute;text-align:center;width:24px}.arc-v12-0-0-beta-23 .arc .arc-Markup ul>li::before{content:"•"}.arc-v12-0-0-beta-23 .arc .arc-Markup ol>li::before{content:counter(list) ".";counter-increment:list}.arc-v12-0-0-beta-23 .arc .arc-Markup hr{background-color:var(--sem-color-border-secondary-light-minimal);border:0;color:var(--sem-color-border-secondary-light-minimal);height:1px;margin-bottom:0;margin-top:0}.arc-v12-0-0-beta-23 .arc .arc-Markup--onDarkSurface hr{background-color:var(--sem-color-border-secondary-dark-minimal);color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-23 .arc .arc-Markup>small{display:block;font:var(--sem-type-interface-reg-s)}.arc-v12-0-0-beta-23 .arc .arc-Markup table{border-collapse:collapse;max-width:100%}.arc-v12-0-0-beta-23 .arc .arc-Markup td,.arc-v12-0-0-beta-23 .arc .arc-Markup th{border:1px solid var(--sem-color-border-secondary-light-minimal);height:calc(4px * 9);padding-left:calc(4px * 4);padding-right:calc(4px * 4);vertical-align:middle}.arc-v12-0-0-beta-23 .arc .arc-Markup--onDarkSurface td,.arc-v12-0-0-beta-23 .arc .arc-Markup--onDarkSurface th{border-color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-23 .arc .arc-Markup th{font-weight:var(--sem-font-weight-semi-bold)}.arc .arc-Markup tbody tr:nth-child(even){background-color:rgba(0,0,0,0.05)}.arc .arc-Markup:not(.arc-Markup--onDarkSurface) tbody tr:nth-child(even){background-color:rgba(42,28,74,0.05)}.arc-v12-0-0-beta-23 .arc .arc-Markup.arc-Markup--onDarkSurface tbody tr:nth-child(even){background-color:rgba(255,255,255,0.15)}

package/lib/MediaCard/MediaCard.cjs

@@ -1,23 +1,62 @@
 'use client';
 'use strict';
 
-var MediaCard = require('../_shared/cjs/MediaCard-BEZFbiYO.cjs');
-require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
-require('react');
-require('../_shared/cjs/index-CTlXMLug.cjs');
-require('../_shared/cjs/Image-C1pcrfnN.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var Image = require('../_shared/cjs/Image-C1pcrfnN.cjs');
+var Heading = require('../_shared/cjs/Heading-BEMSkLYR.cjs');
+var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
+var CardHeading = require('../_shared/cjs/CardHeading-Cl0D1Khp.cjs');
+var CardFooter = require('../_shared/cjs/CardFooter-ChphRFHe.cjs');
+var ConditionalWrapper = require('../_shared/cjs/ConditionalWrapper-C09Kw6EG.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/Heading-BEMSkLYR.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
-require('../_shared/cjs/Text-Cr5nmYmx.cjs');
-require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
-require('../_shared/cjs/CardHeading-Cl0D1Khp.cjs');
-require('../_shared/cjs/CardFooter-ChphRFHe.cjs');
 require('../_shared/cjs/Icon-CzhyKqMd.cjs');
 require('../_shared/cjs/index-BLRjGROQ.cjs');
-require('../_shared/cjs/ConditionalWrapper-C09Kw6EG.cjs');
 
+var VideoPlayer = React.lazy(function () {
+    return Promise.resolve().then(function () { return require('../VideoPlayer/VideoPlayer.cjs'); }).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, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _c = _a.buttonIcon, buttonIcon = _c === void 0 ? "arrow" : _c, _d = _a.isContained, isContained = _d === void 0 ? true : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = filterAttrs.__rest(_a, ["media", "url", "onClick", "heading", "label", "labelLevel", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _f = React.useState(false), isClient = _f[0], setIsClient = _f[1];
+    var _g = React.useState(false), showHoverState = _g[0], setShowHoverState = _g[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    React.useEffect(function () {
+        setIsClient(true);
+    }, []);
+    return (React.createElement("div", filterAttrs.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-MediaCard", {
+            "arc-MediaCard--outlined": url && isContained && showHoverState,
+            "arc-MediaCard--contained": isContained,
+            "arc-MediaCard--onDarkSurface": surface === "dark",
+        }) }, filterAttrs.filterAttrs(props)),
+        React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React.createElement(Surface.Surface, { growVertically: true, background: "light-white" }, children)); } },
+            media.type === "img" && (React.createElement("div", { className: "arc-MediaCard-imgContainer" },
+                React.createElement(Image.Image, filterAttrs.__assign({}, media)))),
+            media.type === "video" && isClient && (React.createElement(React.Suspense, { fallback: null },
+                React.createElement(VideoPlayer, filterAttrs.__assign({ isSupportingTextHidden: true }, media)))),
+            React.createElement("div", { className: "arc-MediaCard-content" },
+                label && (React.createElement("div", { className: "arc-MediaCard-label" },
+                    React.createElement(Heading.Heading, { level: labelLevel, fontStyle: "overline" }, label),
+                    React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))),
+                React.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.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React.createElement(React.Fragment, null,
+                    React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                    React.createElement(Text.Text, null, text),
+                    (url || metaText) && React.createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
+                React.createElement(CardFooter.CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
+};
 
-
-exports.MediaCard = MediaCard.MediaCard;
+exports.MediaCard = MediaCard;

package/lib/MediaCard/MediaCard.mjs

@@ -1,17 +1,60 @@
 'use client';
-export { M as MediaCard } from '../_shared/esm/MediaCard-DqMaNWsE.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
-import 'react';
-import '../_shared/esm/index-5C0-U8cc.mjs';
-import '../_shared/esm/Image-Dl8oH1Rn.mjs';
+import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default, { useContext, useState, useEffect, Suspense } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { I as Image } from '../_shared/esm/Image-Dl8oH1Rn.mjs';
+import { H as Heading } from '../_shared/esm/Heading-CxHWefi7.mjs';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-Colbp3Zx.mjs';
+import { T as Text } from '../_shared/esm/Text-CBlnm5CT.mjs';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-Duhm0zXP.mjs';
+import { C as CardHeading } from '../_shared/esm/CardHeading-_setRRjq.mjs';
+import { C as CardFooter } from '../_shared/esm/CardFooter-fsAY4cc6.mjs';
+import { C as ConditionalWrapper } from '../_shared/esm/ConditionalWrapper-WoJxFYwS.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/Heading-CxHWefi7.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
-import '../_shared/esm/Text-CBlnm5CT.mjs';
-import '../_shared/esm/VerticalSpace-Duhm0zXP.mjs';
-import '../_shared/esm/CardHeading-_setRRjq.mjs';
-import '../_shared/esm/CardFooter-fsAY4cc6.mjs';
 import '../_shared/esm/Icon-CcPOJcQm.mjs';
 import '../_shared/esm/index-Cr6KeQLU.mjs';
-import '../_shared/esm/ConditionalWrapper-WoJxFYwS.mjs';
+
+var VideoPlayer = React__default.lazy(function () {
+    return import('../VideoPlayer/VideoPlayer.mjs').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, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _c = _a.buttonIcon, buttonIcon = _c === void 0 ? "arrow" : _c, _d = _a.isContained, isContained = _d === void 0 ? true : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["media", "url", "onClick", "heading", "label", "labelLevel", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var surface = useContext(Context).surface;
+    var _f = useState(false), isClient = _f[0], setIsClient = _f[1];
+    var _g = useState(false), showHoverState = _g[0], setShowHoverState = _g[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    useEffect(function () {
+        setIsClient(true);
+    }, []);
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-MediaCard", {
+            "arc-MediaCard--outlined": url && isContained && showHoverState,
+            "arc-MediaCard--contained": isContained,
+            "arc-MediaCard--onDarkSurface": surface === "dark",
+        }) }, filterAttrs(props)),
+        React__default.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default.createElement(Surface, { growVertically: true, background: "light-white" }, children)); } },
+            media.type === "img" && (React__default.createElement("div", { className: "arc-MediaCard-imgContainer" },
+                React__default.createElement(Image, __assign({}, media)))),
+            media.type === "video" && isClient && (React__default.createElement(Suspense, { fallback: null },
+                React__default.createElement(VideoPlayer, __assign({ isSupportingTextHidden: true }, media)))),
+            React__default.createElement("div", { className: "arc-MediaCard-content" },
+                label && (React__default.createElement("div", { className: "arc-MediaCard-label" },
+                    React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
+                    React__default.createElement(VerticalSpace, { size: "16" }))),
+                React__default.createElement(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.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: "16" }),
+                    React__default.createElement(Text, null, text),
+                    (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
+                React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
+};
+
+export { MediaCard };

package/lib/MediaCard/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-MediaCard{color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:4px;overflow:hidden;position:relative;transition:all 0.2s ease-in-out}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--contained{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 var(--card-border-weight-s) var(--card-colors-light-border-default)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--outlined{box-shadow:0 0 0 var(--card-border-weight-m) var(--card-colors-light-border-hover)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v12-0-0-beta-22 .arc .arc-MediaCard-content{display:flex;flex:1 1 auto;flex-direction:column;padding:var(--card-padding-s) var(--card-padding-xs) 0 var(--card-padding-xs)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v12-0-0-beta-22 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v12-0-0-beta-22 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v12-0-0-beta-22 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}.arc-v12-0-0-beta-22 .arc .arc-MediaCard-label{color:var(--card-colors-light-text-support)}
+.arc-v12-0-0-beta-23 .arc .arc-MediaCard{color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:4px;overflow:hidden;position:relative;transition:all 0.2s ease-in-out}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--contained{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 var(--card-border-weight-s) var(--card-colors-light-border-default)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--outlined{box-shadow:0 0 0 var(--card-border-weight-m) var(--card-colors-light-border-hover)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v12-0-0-beta-23 .arc .arc-MediaCard-content{display:flex;flex:1 1 auto;flex-direction:column;padding:var(--card-padding-s) var(--card-padding-xs) 0 var(--card-padding-xs)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v12-0-0-beta-23 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v12-0-0-beta-23 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v12-0-0-beta-23 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}.arc-v12-0-0-beta-23 .arc .arc-MediaCard-label{color:var(--card-colors-light-text-support)}