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

package/lib/InformationCard/InformationCard.mjs

@@ -1,31 +1,41 @@
 'use client';
-import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext, useState, useEffect } from 'react';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
 import { d as debounce } from '../_shared/esm/debounce-D_Nx5go6.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
 import { B as BtIconArrowRight } from '../_shared/esm/BtIconArrowRight-DpUmY3g3.mjs';
-import { I as Icon } from '../_shared/esm/Icon-CcPOJcQm.mjs';
-import { B as Badge } from '../_shared/esm/Badge-BZ7E0zcQ.mjs';
-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 { C as CardHeading } from '../_shared/esm/CardHeading-_setRRjq.mjs';
-import { C as Context, S as Surface } from '../_shared/esm/Surface-Colbp3Zx.mjs';
+import { I as Icon } from '../_shared/esm/Icon-CCUbr_AO.mjs';
+import { B as Badge } from '../_shared/esm/Badge-C_3PBa0p.mjs';
+import { I as Image } from '../_shared/esm/Image-LemsonUX.mjs';
+import { H as Heading } from '../_shared/esm/Heading-B9cbwfoz.mjs';
+import { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
+import { B as ButtonV2 } from '../_shared/esm/ButtonV2-C4a_kkhh.mjs';
+import { A as ArcBreakpoints } from '../_shared/esm/arc-breakpoints-Bs-at7wk.mjs';
+import { C as CardHeading } from '../_shared/esm/CardHeading-q6k7obu0.mjs';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-C69KVzkY.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/SemanticHeading-1tLcSJYD.mjs';
+import '../_shared/esm/Spinner-DvngCIwx.mjs';
+import '../_shared/esm/index.es-tyrXzvpp.mjs';
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconArrowRightFill =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
 
 /** 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 +69,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" },
@@ -71,7 +81,7 @@ var InformationCard = function (_a) {
                         })))),
                     React__default.createElement("div", { className: "arc-InformationCard-footerItems" },
                         button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
-                            React__default.createElement(ButtonV2, __assign({}, button, { size: "m", iconPosition: "beforeText", buttonStyle: "compact", icon: BtIconArrowRight })))),
+                            React__default.createElement(ButtonV2, __assign({}, button, { size: "m", iconPosition: "beforeText", buttonStyle: "compact", icon: BtIconArrowRight, iconActive: BtIconArrowRightFill })))),
                         footerLogo && (React__default.createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
                             React__default.createElement(Image, __assign({}, footerLogo)))))))))));
 };

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-24 .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-24 .arc .arc-InformationCard-innerContainer{display:flex;flex-direction:column;height:100%;padding:var(--card-padding-s)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-label{color:var(--card-colors-light-text-default)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-fg-hover)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard--outlined .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-0-0-beta-24 .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-24 .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-24 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-img,.arc-v12-0-0-beta-24 .arc .arc-InformationCard-icon{margin-bottom:var(--card-gap-m)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-m);width:auto}.arc-v12-0-0-beta-24 .arc .arc-InformationCard .arc-Icon{height:var(--card-size-icon-m);width:var(--card-size-icon-m)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-contentContainer{display:flex;flex-direction:column;flex-grow:1;gap:var(--card-gap-xs)}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-badgeContainer{display:flex;flex-wrap:wrap;margin:-4px -8px}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-badge{margin-top:8px}.arc-v12-0-0-beta-24 .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-24 .arc .arc-InformationCard-footerItems{align-items:center;display:flex}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-footerButtonContainer{flex:1 1 auto}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-footerLogoContainer .arc-Image-img{max-height:48px;width:auto}.arc-v12-0-0-beta-24 .arc .arc-InformationCard-badgeContainer>.arc-InformationCard-badge{margin:4px 8px}.arc-v12-0-0-beta-24 .arc .arc-InformationCard .arc-Surface{flex:1}@media (min-width:768px){.arc-v12-0-0-beta-24 .arc .arc-InformationCard-contentContainer{gap:var(--card-gap-s)}}@media (min-width:1024px){.arc-v12-0-0-beta-24 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-l)}}@media (min-width:1280px){.arc-v12-0-0-beta-24 .arc .arc-InformationCard-innerContainer{padding:var(--card-padding-m)}}

package/lib/Link/Link.cjs

@@ -1,14 +1,15 @@
 'use client';
 'use strict';
 
-var Link = require('../_shared/cjs/Link-7xUgVf1I.cjs');
-require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var Link = require('../_shared/cjs/Link-PWpx-rRO.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 require('react');
 require('../_shared/cjs/index-CTlXMLug.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
-require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
+require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+require('../_shared/cjs/ThemeIcon-Def4RZfK.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 
 

package/lib/Link/Link.mjs

@@ -1,10 +1,11 @@
 'use client';
-export { L as Link } from '../_shared/esm/Link-Biyg9qBH.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+export { L as Link } from '../_shared/esm/Link-ogbR4K3O.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import 'react';
 import '../_shared/esm/index-5C0-U8cc.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
-import '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
+import '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
+import '../_shared/esm/ThemeIcon-B0SruPZC.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.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-24 .arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;padding:0;text-decoration:none}.arc-v12-0-0-beta-24 .arc .arc-Link:focus-visible{outline:none}.arc-v12-0-0-beta-24 .arc .arc-Link-wrapper{display:inline-block}.arc-v12-0-0-beta-24 .arc .arc-Link-text{font-weight:inherit !important}.arc-v12-0-0-beta-24 .arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc-v12-0-0-beta-24 .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-24 .arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-24 .arc .arc-Link--isImplied:focus-visible .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-24 .arc .arc-Link--isButton{text-align:left}.arc-v12-0-0-beta-24 .arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-24 .arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc-v12-0-0-beta-24 .arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc-v12-0-0-beta-24 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-24 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-24 .arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc-v12-0-0-beta-24 .arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-24 .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-24 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-24 .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-24 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-24 .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-24 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc-v12-0-0-beta-24 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-24 .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-24 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-24 .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-24 .arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-24 .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-24 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc-v12-0-0-beta-24 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-24 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc-v12-0-0-beta-24 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}

package/lib/Markup/Markup.cjs

@@ -1,19 +1,20 @@
 'use client';
 'use strict';
 
-var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-CTlXMLug.cjs');
-var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 
 /**
  * Use `Markup` to display HTML-formatted text.
  */
 var Markup = function (_a) {
-    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = filterAttrs.__rest(_a, ["children", "isMeasured"]);
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = tslib_es6.__rest(_a, ["children", "isMeasured"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames({
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames({
             "arc-Markup": true,
             "arc-Markup--measured": isMeasured,
             "arc-Markup--onDarkSurface": surface === "dark",

package/lib/Markup/Markup.mjs

@@ -1,8 +1,9 @@
 'use client';
-import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext } from 'react';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
-import { C as Context } from '../_shared/esm/Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { C as Context } from '../_shared/esm/Surface-C69KVzkY.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 
 /**

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-24 .arc .arc-Markup--measured{max-width:32em}.arc-v12-0-0-beta-24 .arc .arc-Markup blockquote,.arc-v12-0-0-beta-24 .arc .arc-Markup ol,.arc-v12-0-0-beta-24 .arc .arc-Markup p,.arc-v12-0-0-beta-24 .arc .arc-Markup>small,.arc-v12-0-0-beta-24 .arc .arc-Markup ul{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-24 .arc .arc-Markup h1{margin-bottom:var(--sem-space-gap-110);margin-top:0}.arc-v12-0-0-beta-24 .arc .arc-Markup h2,.arc-v12-0-0-beta-24 .arc .arc-Markup h3,.arc-v12-0-0-beta-24 .arc .arc-Markup h4,.arc-v12-0-0-beta-24 .arc .arc-Markup h5,.arc-v12-0-0-beta-24 .arc .arc-Markup h6{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-24 .arc .arc-Markup *+h1,.arc-v12-0-0-beta-24 .arc .arc-Markup *+h2,.arc-v12-0-0-beta-24 .arc .arc-Markup *+h3,.arc-v12-0-0-beta-24 .arc .arc-Markup *+h4,.arc-v12-0-0-beta-24 .arc .arc-Markup *+h5,.arc-v12-0-0-beta-24 .arc .arc-Markup *+h6{margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-24 .arc .arc-Markup hr,.arc-v12-0-0-beta-24 .arc .arc-Markup img,.arc-v12-0-0-beta-24 .arc .arc-Markup pre,.arc-v12-0-0-beta-24 .arc .arc-Markup table{margin-bottom:var(--sem-space-gap-110);margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-24 .arc .arc-Markup>:first-child{margin-top:0}.arc-v12-0-0-beta-24 .arc .arc-Markup>:last-child{margin-bottom:0}.arc-v12-0-0-beta-24 .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-24 .arc .arc-Markup blockquote p{margin-bottom:0;margin-top:0;quotes:"“" "”" "‘" "’"}.arc-v12-0-0-beta-24 .arc .arc-Markup blockquote p:first-child::before{content:open-quote;margin-left:-0.75ch}.arc-v12-0-0-beta-24 .arc .arc-Markup blockquote p:first-child::after{content:close-quote}.arc-v12-0-0-beta-24 .arc .arc-Markup blockquote p+p:last-child{text-align:right}.arc-v12-0-0-beta-24 .arc .arc-Markup h1,.arc-v12-0-0-beta-24 .arc .arc-Markup h2,.arc-v12-0-0-beta-24 .arc .arc-Markup h3{font-weight:var(--sem-font-weight-semi-bold)}.arc-v12-0-0-beta-24 .arc .arc-Markup h6{font:var(--sem-type-mobile-semi-xxs)}.arc-v12-0-0-beta-24 .arc .arc-Markup h5{font:var(--sem-type-mobile-semi-xs)}.arc-v12-0-0-beta-24 .arc .arc-Markup h4{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-24 .arc .arc-Markup h3{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-24 .arc .arc-Markup h2{font:var(--sem-type-mobile-semi-l)}.arc-v12-0-0-beta-24 .arc .arc-Markup h1{font:var(--sem-type-mobile-semi-xxl)}@media (min-width:768px){.arc-v12-0-0-beta-24 .arc .arc-Markup h3{font:var(--sem-type-tablet-semi-m)}.arc-v12-0-0-beta-24 .arc .arc-Markup h2{font:var(--sem-type-tablet-semi-l)}.arc-v12-0-0-beta-24 .arc .arc-Markup h1{font:var(--sem-type-tablet-semi-xxl)}}@media (min-width:1280px){.arc-v12-0-0-beta-24 .arc .arc-Markup h3{font:var(--sem-type-desktop-semi-m)}.arc-v12-0-0-beta-24 .arc .arc-Markup h2{font:var(--sem-type-desktop-semi-l)}.arc-v12-0-0-beta-24 .arc .arc-Markup h1{font:var(--sem-type-desktop-semi-xxl)}}.arc-v12-0-0-beta-24 .arc .arc-Markup img{display:block;max-width:100%}.arc-v12-0-0-beta-24 .arc .arc-Markup ol,.arc-v12-0-0-beta-24 .arc .arc-Markup ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.arc-v12-0-0-beta-24 .arc .arc-Markup ol{counter-reset:list}.arc-v12-0-0-beta-24 .arc .arc-Markup li{padding-left:var(--sem-space-padding-110);position:relative}.arc-v12-0-0-beta-24 .arc .arc-Markup li::before{left:0;position:absolute;text-align:center;width:24px}.arc-v12-0-0-beta-24 .arc .arc-Markup ul>li::before{content:"•"}.arc-v12-0-0-beta-24 .arc .arc-Markup ol>li::before{content:counter(list) ".";counter-increment:list}.arc-v12-0-0-beta-24 .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-24 .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-24 .arc .arc-Markup>small{display:block;font:var(--sem-type-interface-reg-s)}.arc-v12-0-0-beta-24 .arc .arc-Markup table{border-collapse:collapse;max-width:100%}.arc-v12-0-0-beta-24 .arc .arc-Markup td,.arc-v12-0-0-beta-24 .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-24 .arc .arc-Markup--onDarkSurface td,.arc-v12-0-0-beta-24 .arc .arc-Markup--onDarkSurface th{border-color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-24 .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-24 .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,64 @@
 '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 tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Image = require('../_shared/cjs/Image-CSe0KpDN.cjs');
+var Heading = require('../_shared/cjs/Heading-CoiZ2EmD.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+var CardHeading = require('../_shared/cjs/CardHeading-1-dcxBUr.cjs');
+var CardFooter = require('../_shared/cjs/CardFooter-BPtRFaCy.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/SemanticHeading-BPXN_z49.cjs');
+require('../_shared/cjs/ThemeIcon-Def4RZfK.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 = tslib_es6.__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", tslib_es6.__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, tslib_es6.__assign({}, media)))),
+            media.type === "video" && isClient && (React.createElement(React.Suspense, { fallback: null },
+                React.createElement(VideoPlayer, tslib_es6.__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,62 @@
 '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 } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useContext, useState, useEffect, Suspense } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { I as Image } from '../_shared/esm/Image-LemsonUX.mjs';
+import { H as Heading } from '../_shared/esm/Heading-B9cbwfoz.mjs';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-C69KVzkY.mjs';
+import { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-BLWB02I7.mjs';
+import { C as CardHeading } from '../_shared/esm/CardHeading-q6k7obu0.mjs';
+import { C as CardFooter } from '../_shared/esm/CardFooter-BpVSztgE.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/SemanticHeading-1tLcSJYD.mjs';
+import '../_shared/esm/ThemeIcon-B0SruPZC.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-24 .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-24 .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-24 .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-24 .arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v12-0-0-beta-24 .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-24 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v12-0-0-beta-24 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v12-0-0-beta-24 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v12-0-0-beta-24 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}.arc-v12-0-0-beta-24 .arc .arc-MediaCard-label{color:var(--card-colors-light-text-support)}