@arc-ui/components 12.0.0-beta.18 → 12.0.0-beta.20

package/lib/InformationCard/InformationCard.cjs

@@ -6,18 +6,18 @@ var React = require('react');
 var index = require('../_shared/cjs/index-CTlXMLug.cjs');
 var debounce = require('../_shared/cjs/debounce-BeIT3oyF.cjs');
 var BtIconArrowRight = require('../_shared/cjs/BtIconArrowRight-Bm5PIn_6.cjs');
-var Icon = require('../_shared/cjs/Icon-KMACQ1i3.cjs');
+var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
 var Badge = require('../_shared/cjs/Badge-CQVEPH9v.cjs');
 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-CRNNZ_nd.cjs');
-var index_es = require('../_shared/cjs/index.es-sqSQUWYg.cjs');
+var ButtonV2 = require('../_shared/cjs/ButtonV2-Bta5SVVY.cjs');
+var index_es = require('../_shared/cjs/index.es-DBEGtWPg.cjs');
 var CardHeading = require('../_shared/cjs/CardHeading-Cl0D1Khp.cjs');
 var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/Spinner-bbrOwxv2.cjs');
-require('../_shared/cjs/Heading-BEMSkLYR.cjs');
 
 /**
  * Provides an object of breakpoints for responsive designs.
@@ -59,6 +59,7 @@ var InformationCard = function (_a) {
         window.addEventListener("resize", checkMinHeight);
         return function () {
             window.removeEventListener("resize", checkMinHeight);
+            checkMinHeight.cancel();
         };
     }, [minHeights, ArcBreakpoints]);
     return (React.createElement("div", filterAttrs.__assign({ style: { minHeight: minHeight ? minHeight : minimumHeight }, className: index.classNames("arc-InformationCard", {
@@ -75,7 +76,8 @@ var InformationCard = function (_a) {
                         React.createElement(Icon.Icon, { testId: "information-card-icon", icon: icon })))),
                 React.createElement("div", { className: "arc-InformationCard-contentContainer" },
                     label && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "arc-InformationCard-label" }, label.toUpperCase()))),
+                        React.createElement("div", { className: "arc-InformationCard-label" },
+                            React.createElement(Heading.Heading, { level: "3", 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

@@ -4,18 +4,18 @@ 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-mCD9-ufA.mjs';
 import { B as BtIconArrowRight } from '../_shared/esm/BtIconArrowRight-DpUmY3g3.mjs';
-import { I as Icon } from '../_shared/esm/Icon-MZfaoOo9.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-2U4PvnpS.mjs';
-import { b as ArcSizeBreakpointsXxl, c as ArcSizeBreakpointsXl, d as ArcSizeBreakpointsL, A as ArcSizeBreakpointsM, a as ArcSizeBreakpointsS, e as ArcSizeBreakpointsXs } from '../_shared/esm/index.es-C3WGtwrW.mjs';
+import { B as ButtonV2 } from '../_shared/esm/ButtonV2-DwYBAojW.mjs';
+import { a as ArcSizeBreakpointsXxl, b as ArcSizeBreakpointsXl, c as ArcSizeBreakpointsL, A as ArcSizeBreakpointsM, d as ArcSizeBreakpointsS, e as ArcSizeBreakpointsXs } from '../_shared/esm/index.es-DCvYtQfu.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/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/Spinner-Cd7LiPTy.mjs';
-import '../_shared/esm/Heading-CxHWefi7.mjs';
 
 /**
  * Provides an object of breakpoints for responsive designs.
@@ -57,6 +57,7 @@ var InformationCard = function (_a) {
         window.addEventListener("resize", checkMinHeight);
         return function () {
             window.removeEventListener("resize", checkMinHeight);
+            checkMinHeight.cancel();
         };
     }, [minHeights, ArcBreakpoints]);
     return (React__default.createElement("div", __assign({ style: { minHeight: minHeight ? minHeight : minimumHeight }, className: classNames("arc-InformationCard", {
@@ -73,7 +74,8 @@ var InformationCard = function (_a) {
                         React__default.createElement(Icon, { testId: "information-card-icon", icon: icon })))),
                 React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
                     label && (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("div", { className: "arc-InformationCard-label" }, label.toUpperCase()))),
+                        React__default.createElement("div", { className: "arc-InformationCard-label" },
+                            React__default.createElement(Heading, { level: "3", 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-18 .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-18 .arc .arc-InformationCard-innerContainer{display:flex;flex-direction:column;height:100%;padding:var(--card-padding-s)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-label{color:var(--card-colors-light-text-default);font:var(--sem-type-body-semi-s)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-fg-hover)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard--outlined .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-0-0-beta-18 .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-18 .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-18 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-img,.arc-v12-0-0-beta-18 .arc .arc-InformationCard-icon{margin-bottom:var(--card-gap-m)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-m);width:auto}.arc-v12-0-0-beta-18 .arc .arc-InformationCard .arc-Icon{height:var(--card-size-icon-m);width:var(--card-size-icon-m)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-contentContainer{display:flex;flex-direction:column;flex-grow:1;gap:var(--card-gap-xs)}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-badgeContainer{display:flex;flex-wrap:wrap;margin:-4px -8px}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-badge{margin-top:8px}.arc-v12-0-0-beta-18 .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-18 .arc .arc-InformationCard-footerItems{align-items:center;display:flex}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-footerButtonContainer{flex:1 1 auto}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-footerLogoContainer .arc-Image-img{max-height:48px;width:auto}.arc-v12-0-0-beta-18 .arc .arc-InformationCard-badgeContainer>.arc-InformationCard-badge{margin:4px 8px}.arc-v12-0-0-beta-18 .arc .arc-InformationCard .arc-Surface{flex:1}@media (min-width:768px){.arc-v12-0-0-beta-18 .arc .arc-InformationCard-contentContainer{gap:var(--card-gap-s)}}@media (min-width:1024px){.arc-v12-0-0-beta-18 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-l)}}@media (min-width:1280px){.arc-v12-0-0-beta-18 .arc .arc-InformationCard-innerContainer{padding:var(--card-padding-m)}}
+.arc-v12-0-0-beta-20 .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-20 .arc .arc-InformationCard-innerContainer{display:flex;flex-direction:column;height:100%;padding:var(--card-padding-s)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-label{color:var(--card-colors-light-text-default)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-fg-hover)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard--outlined .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc-v12-0-0-beta-20 .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-20 .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-20 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-img,.arc-v12-0-0-beta-20 .arc .arc-InformationCard-icon{margin-bottom:var(--card-gap-m)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-m);width:auto}.arc-v12-0-0-beta-20 .arc .arc-InformationCard .arc-Icon{height:var(--card-size-icon-m);width:var(--card-size-icon-m)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-contentContainer{display:flex;flex-direction:column;flex-grow:1;gap:var(--card-gap-xs)}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-badgeContainer{display:flex;flex-wrap:wrap;margin:-4px -8px}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-badge{margin-top:8px}.arc-v12-0-0-beta-20 .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-20 .arc .arc-InformationCard-footerItems{align-items:center;display:flex}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-footerButtonContainer{flex:1 1 auto}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-footerLogoContainer .arc-Image-img{max-height:48px;width:auto}.arc-v12-0-0-beta-20 .arc .arc-InformationCard-badgeContainer>.arc-InformationCard-badge{margin:4px 8px}.arc-v12-0-0-beta-20 .arc .arc-InformationCard .arc-Surface{flex:1}@media (min-width:768px){.arc-v12-0-0-beta-20 .arc .arc-InformationCard-contentContainer{gap:var(--card-gap-s)}}@media (min-width:1024px){.arc-v12-0-0-beta-20 .arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-l)}}@media (min-width:1280px){.arc-v12-0-0-beta-20 .arc .arc-InformationCard-innerContainer{padding:var(--card-padding-m)}}

package/lib/Link/Link.cjs

@@ -5,7 +5,7 @@ var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-CTlXMLug.cjs');
 var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
-var Icon = require('../_shared/cjs/Icon-KMACQ1i3.cjs');
+var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
 var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');

package/lib/Link/Link.mjs

@@ -3,7 +3,7 @@ import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/fil
 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 { I as Icon } from '../_shared/esm/Icon-MZfaoOo9.mjs';
+import { I as Icon } from '../_shared/esm/Icon-CcPOJcQm.mjs';
 import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';

package/lib/Link/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;text-decoration:none}.arc-v12-0-0-beta-18 .arc .arc-Link:focus-visible{outline:none}.arc-v12-0-0-beta-18 .arc .arc-Link-wrapper{display:inline-block}.arc-v12-0-0-beta-18 .arc .arc-Link-text{font-weight:inherit !important}.arc-v12-0-0-beta-18 .arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc-v12-0-0-beta-18 .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-18 .arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-18 .arc .arc-Link--isImplied:focus-visible .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-18 .arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-18 .arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc-v12-0-0-beta-18 .arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc-v12-0-0-beta-18 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-18 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-18 .arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc-v12-0-0-beta-18 .arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-18 .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-18 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-18 .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-18 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-18 .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-18 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc-v12-0-0-beta-18 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-18 .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-18 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-18 .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-18 .arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-18 .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-18 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc-v12-0-0-beta-18 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-18 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc-v12-0-0-beta-18 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}
+.arc-v12-0-0-beta-20 .arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;text-decoration:none}.arc-v12-0-0-beta-20 .arc .arc-Link:focus-visible{outline:none}.arc-v12-0-0-beta-20 .arc .arc-Link-wrapper{display:inline-block}.arc-v12-0-0-beta-20 .arc .arc-Link-text{font-weight:inherit !important}.arc-v12-0-0-beta-20 .arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc-v12-0-0-beta-20 .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-20 .arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-20 .arc .arc-Link--isImplied:focus-visible .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-20 .arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-20 .arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc-v12-0-0-beta-20 .arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc-v12-0-0-beta-20 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-20 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-20 .arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc-v12-0-0-beta-20 .arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-20 .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-20 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-20 .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-20 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-20 .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-20 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc-v12-0-0-beta-20 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-20 .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-20 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-20 .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-20 .arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-20 .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-20 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc-v12-0-0-beta-20 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-20 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc-v12-0-0-beta-20 .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-18 .arc .arc-Markup--measured{max-width:32em}.arc-v12-0-0-beta-18 .arc .arc-Markup blockquote,.arc-v12-0-0-beta-18 .arc .arc-Markup ol,.arc-v12-0-0-beta-18 .arc .arc-Markup p,.arc-v12-0-0-beta-18 .arc .arc-Markup>small,.arc-v12-0-0-beta-18 .arc .arc-Markup ul{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-18 .arc .arc-Markup h1{margin-bottom:var(--sem-space-gap-110);margin-top:0}.arc-v12-0-0-beta-18 .arc .arc-Markup h2,.arc-v12-0-0-beta-18 .arc .arc-Markup h3,.arc-v12-0-0-beta-18 .arc .arc-Markup h4,.arc-v12-0-0-beta-18 .arc .arc-Markup h5,.arc-v12-0-0-beta-18 .arc .arc-Markup h6{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-18 .arc .arc-Markup *+h1,.arc-v12-0-0-beta-18 .arc .arc-Markup *+h2,.arc-v12-0-0-beta-18 .arc .arc-Markup *+h3,.arc-v12-0-0-beta-18 .arc .arc-Markup *+h4,.arc-v12-0-0-beta-18 .arc .arc-Markup *+h5,.arc-v12-0-0-beta-18 .arc .arc-Markup *+h6{margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-18 .arc .arc-Markup hr,.arc-v12-0-0-beta-18 .arc .arc-Markup img,.arc-v12-0-0-beta-18 .arc .arc-Markup pre,.arc-v12-0-0-beta-18 .arc .arc-Markup table{margin-bottom:var(--sem-space-gap-110);margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-18 .arc .arc-Markup>:first-child{margin-top:0}.arc-v12-0-0-beta-18 .arc .arc-Markup>:last-child{margin-bottom:0}.arc-v12-0-0-beta-18 .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-18 .arc .arc-Markup blockquote p{margin-bottom:0;margin-top:0;quotes:"“" "”" "‘" "’"}.arc-v12-0-0-beta-18 .arc .arc-Markup blockquote p:first-child::before{content:open-quote;margin-left:-0.75ch}.arc-v12-0-0-beta-18 .arc .arc-Markup blockquote p:first-child::after{content:close-quote}.arc-v12-0-0-beta-18 .arc .arc-Markup blockquote p+p:last-child{text-align:right}.arc-v12-0-0-beta-18 .arc .arc-Markup h1,.arc-v12-0-0-beta-18 .arc .arc-Markup h2,.arc-v12-0-0-beta-18 .arc .arc-Markup h3{font-weight:var(--sem-font-weight-semi-bold)}.arc-v12-0-0-beta-18 .arc .arc-Markup h6{font:var(--sem-type-mobile-semi-xxs)}.arc-v12-0-0-beta-18 .arc .arc-Markup h5{font:var(--sem-type-mobile-semi-xs)}.arc-v12-0-0-beta-18 .arc .arc-Markup h4{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-18 .arc .arc-Markup h3{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-18 .arc .arc-Markup h2{font:var(--sem-type-mobile-semi-l)}.arc-v12-0-0-beta-18 .arc .arc-Markup h1{font:var(--sem-type-mobile-semi-xxl)}@media (min-width:768px){.arc-v12-0-0-beta-18 .arc .arc-Markup h3{font:var(--sem-type-tablet-semi-m)}.arc-v12-0-0-beta-18 .arc .arc-Markup h2{font:var(--sem-type-tablet-semi-l)}.arc-v12-0-0-beta-18 .arc .arc-Markup h1{font:var(--sem-type-tablet-semi-xxl)}}@media (min-width:1280px){.arc-v12-0-0-beta-18 .arc .arc-Markup h3{font:var(--sem-type-desktop-semi-m)}.arc-v12-0-0-beta-18 .arc .arc-Markup h2{font:var(--sem-type-desktop-semi-l)}.arc-v12-0-0-beta-18 .arc .arc-Markup h1{font:var(--sem-type-desktop-semi-xxl)}}.arc-v12-0-0-beta-18 .arc .arc-Markup img{display:block;max-width:100%}.arc-v12-0-0-beta-18 .arc .arc-Markup ol,.arc-v12-0-0-beta-18 .arc .arc-Markup ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.arc-v12-0-0-beta-18 .arc .arc-Markup ol{counter-reset:list}.arc-v12-0-0-beta-18 .arc .arc-Markup li{padding-left:var(--sem-space-padding-110);position:relative}.arc-v12-0-0-beta-18 .arc .arc-Markup li::before{left:0;position:absolute;text-align:center;width:24px}.arc-v12-0-0-beta-18 .arc .arc-Markup ul>li::before{content:"•"}.arc-v12-0-0-beta-18 .arc .arc-Markup ol>li::before{content:counter(list) ".";counter-increment:list}.arc-v12-0-0-beta-18 .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-18 .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-18 .arc .arc-Markup>small{display:block;font:var(--sem-type-interface-reg-s)}.arc-v12-0-0-beta-18 .arc .arc-Markup table{border-collapse:collapse;max-width:100%}.arc-v12-0-0-beta-18 .arc .arc-Markup td,.arc-v12-0-0-beta-18 .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-18 .arc .arc-Markup--onDarkSurface td,.arc-v12-0-0-beta-18 .arc .arc-Markup--onDarkSurface th{border-color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-18 .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-18 .arc .arc-Markup.arc-Markup--onDarkSurface tbody tr:nth-child(even){background-color:rgba(255,255,255,0.15)}
+.arc-v12-0-0-beta-20 .arc .arc-Markup--measured{max-width:32em}.arc-v12-0-0-beta-20 .arc .arc-Markup blockquote,.arc-v12-0-0-beta-20 .arc .arc-Markup ol,.arc-v12-0-0-beta-20 .arc .arc-Markup p,.arc-v12-0-0-beta-20 .arc .arc-Markup>small,.arc-v12-0-0-beta-20 .arc .arc-Markup ul{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-20 .arc .arc-Markup h1{margin-bottom:var(--sem-space-gap-110);margin-top:0}.arc-v12-0-0-beta-20 .arc .arc-Markup h2,.arc-v12-0-0-beta-20 .arc .arc-Markup h3,.arc-v12-0-0-beta-20 .arc .arc-Markup h4,.arc-v12-0-0-beta-20 .arc .arc-Markup h5,.arc-v12-0-0-beta-20 .arc .arc-Markup h6{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-20 .arc .arc-Markup *+h1,.arc-v12-0-0-beta-20 .arc .arc-Markup *+h2,.arc-v12-0-0-beta-20 .arc .arc-Markup *+h3,.arc-v12-0-0-beta-20 .arc .arc-Markup *+h4,.arc-v12-0-0-beta-20 .arc .arc-Markup *+h5,.arc-v12-0-0-beta-20 .arc .arc-Markup *+h6{margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-20 .arc .arc-Markup hr,.arc-v12-0-0-beta-20 .arc .arc-Markup img,.arc-v12-0-0-beta-20 .arc .arc-Markup pre,.arc-v12-0-0-beta-20 .arc .arc-Markup table{margin-bottom:var(--sem-space-gap-110);margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-20 .arc .arc-Markup>:first-child{margin-top:0}.arc-v12-0-0-beta-20 .arc .arc-Markup>:last-child{margin-bottom:0}.arc-v12-0-0-beta-20 .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-20 .arc .arc-Markup blockquote p{margin-bottom:0;margin-top:0;quotes:"“" "”" "‘" "’"}.arc-v12-0-0-beta-20 .arc .arc-Markup blockquote p:first-child::before{content:open-quote;margin-left:-0.75ch}.arc-v12-0-0-beta-20 .arc .arc-Markup blockquote p:first-child::after{content:close-quote}.arc-v12-0-0-beta-20 .arc .arc-Markup blockquote p+p:last-child{text-align:right}.arc-v12-0-0-beta-20 .arc .arc-Markup h1,.arc-v12-0-0-beta-20 .arc .arc-Markup h2,.arc-v12-0-0-beta-20 .arc .arc-Markup h3{font-weight:var(--sem-font-weight-semi-bold)}.arc-v12-0-0-beta-20 .arc .arc-Markup h6{font:var(--sem-type-mobile-semi-xxs)}.arc-v12-0-0-beta-20 .arc .arc-Markup h5{font:var(--sem-type-mobile-semi-xs)}.arc-v12-0-0-beta-20 .arc .arc-Markup h4{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-20 .arc .arc-Markup h3{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-20 .arc .arc-Markup h2{font:var(--sem-type-mobile-semi-l)}.arc-v12-0-0-beta-20 .arc .arc-Markup h1{font:var(--sem-type-mobile-semi-xxl)}@media (min-width:768px){.arc-v12-0-0-beta-20 .arc .arc-Markup h3{font:var(--sem-type-tablet-semi-m)}.arc-v12-0-0-beta-20 .arc .arc-Markup h2{font:var(--sem-type-tablet-semi-l)}.arc-v12-0-0-beta-20 .arc .arc-Markup h1{font:var(--sem-type-tablet-semi-xxl)}}@media (min-width:1280px){.arc-v12-0-0-beta-20 .arc .arc-Markup h3{font:var(--sem-type-desktop-semi-m)}.arc-v12-0-0-beta-20 .arc .arc-Markup h2{font:var(--sem-type-desktop-semi-l)}.arc-v12-0-0-beta-20 .arc .arc-Markup h1{font:var(--sem-type-desktop-semi-xxl)}}.arc-v12-0-0-beta-20 .arc .arc-Markup img{display:block;max-width:100%}.arc-v12-0-0-beta-20 .arc .arc-Markup ol,.arc-v12-0-0-beta-20 .arc .arc-Markup ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.arc-v12-0-0-beta-20 .arc .arc-Markup ol{counter-reset:list}.arc-v12-0-0-beta-20 .arc .arc-Markup li{padding-left:var(--sem-space-padding-110);position:relative}.arc-v12-0-0-beta-20 .arc .arc-Markup li::before{left:0;position:absolute;text-align:center;width:24px}.arc-v12-0-0-beta-20 .arc .arc-Markup ul>li::before{content:"•"}.arc-v12-0-0-beta-20 .arc .arc-Markup ol>li::before{content:counter(list) ".";counter-increment:list}.arc-v12-0-0-beta-20 .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-20 .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-20 .arc .arc-Markup>small{display:block;font:var(--sem-type-interface-reg-s)}.arc-v12-0-0-beta-20 .arc .arc-Markup table{border-collapse:collapse;max-width:100%}.arc-v12-0-0-beta-20 .arc .arc-Markup td,.arc-v12-0-0-beta-20 .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-20 .arc .arc-Markup--onDarkSurface td,.arc-v12-0-0-beta-20 .arc .arc-Markup--onDarkSurface th{border-color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-20 .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-20 .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,12 +1,10 @@
 'use client';
 'use strict';
 
-var MediaCard = require('../_shared/cjs/MediaCard-kcqfmeue.cjs');
+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/index.es-sqSQUWYg.cjs');
-require('../_shared/cjs/use-media-query-BsUfHjPZ.cjs');
 require('../_shared/cjs/Image-C1pcrfnN.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
@@ -15,8 +13,8 @@ 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-DwE-u0Om.cjs');
-require('../_shared/cjs/Icon-KMACQ1i3.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');
 

package/lib/MediaCard/MediaCard.mjs

@@ -1,10 +1,8 @@
 'use client';
-export { M as MediaCard } from '../_shared/esm/MediaCard-CjTDOvmx.mjs';
+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/index.es-C3WGtwrW.mjs';
-import '../_shared/esm/use-media-query-DmKuIDEM.mjs';
 import '../_shared/esm/Image-Dl8oH1Rn.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
@@ -13,7 +11,7 @@ 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-CgDDDI7Z.mjs';
-import '../_shared/esm/Icon-MZfaoOo9.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';

package/lib/MediaCard/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .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-18 .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-18 .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-18 .arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v12-0-0-beta-18 .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-18 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v12-0-0-beta-18 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v12-0-0-beta-18 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v12-0-0-beta-18 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}
+.arc-v12-0-0-beta-20 .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-20 .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-20 .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-20 .arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v12-0-0-beta-20 .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-20 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v12-0-0-beta-20 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v12-0-0-beta-20 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v12-0-0-beta-20 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}.arc-v12-0-0-beta-20 .arc .arc-MediaCard-label{color:var(--card-colors-light-text-support)}

package/lib/Menu/Menu.cjs

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
 var React = require('react');
-var MenuSubContent = require('../_shared/cjs/MenuSubContent-Bs2_ebS3.cjs');
+var MenuItemMultiLevelContent = require('../_shared/cjs/MenuItemMultiLevelContent-vLr6hSBm.cjs');
 var index = require('../_shared/cjs/index-CTlXMLug.cjs');
-var Icon = require('../_shared/cjs/Icon-KMACQ1i3.cjs');
+var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
 var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
 var Rule = require('../_shared/cjs/Rule-DMQsi2L6.cjs');
 var index$1 = require('../_shared/cjs/index-DXNM3D1d.cjs');
@@ -25,7 +26,7 @@ require('../_shared/cjs/Surface-BFx1yNsq.cjs');
  */
 var Menu = function (_a) {
     var defaultOpen = _a.defaultOpen, open = _a.open, onOpenChange = _a.onOpenChange, _b = _a.modal, modal = _b === void 0 ? false : _b, children = _a.children, props = filterAttrs.__rest(_a, ["defaultOpen", "open", "onOpenChange", "modal", "children"]);
-    return (React.createElement(MenuSubContent.Root2, filterAttrs.__assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs.filterAttrs(props)), children));
+    return (React.createElement(MenuItemMultiLevelContent.Root2, filterAttrs.__assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs.filterAttrs(props)), children));
 };
 
 var MenuItemContentTemplate = function (_a) {
@@ -43,17 +44,17 @@ var MenuItemContentTemplate = function (_a) {
                 React.createElement(Icon.Icon, { icon: trailingIcon, size: 24 }))))) : null));
 };
 
-var MenuCheckboxItem = function (_a) {
+var MenuItemCheckbox = function (_a) {
     var children = _a.children, checked = _a.checked, onCheckedChange = _a.onCheckedChange, isDisabled = _a.isDisabled, onSelect = _a.onSelect, id = _a.id, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, props = filterAttrs.__rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
-    return (React.createElement(MenuSubContent.CheckboxItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuCheckboxItem", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
+    return (React.createElement(MenuItemMultiLevelContent.CheckboxItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuItemCheckbox", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
                 onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
             }
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
         }, id: id }, filterAttrs.filterAttrs(props)),
-        React.createElement("div", { className: index.classNames("arc-MenuCheckboxItem-box", {
-                "arc-MenuCheckboxItem-box--checked": checked,
+        React.createElement("div", { className: index.classNames("arc-MenuItemCheckbox-box", {
+                "arc-MenuItemCheckbox-box--checked": checked,
             }) }, checked && (React.createElement("svg", { style: { width: 14, height: 11 }, viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
         React.createElement(MenuItemContentTemplate, null, children)));
@@ -67,17 +68,9 @@ var MenuFooter = function (_a) {
     return (React.createElement("div", { className: "arc-MenuFooter", style: {
             position: "relative",
         } },
-        React.createElement("div", { style: {
-                height: "12px",
-                background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                position: "absolute",
-                width: "100%",
-                zIndex: 3,
-                top: -12,
-            } }),
         React.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
             React.createElement(Rule.Rule, null)),
-        React.createElement(MenuSubContent.Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+        React.createElement(MenuItemMultiLevelContent.Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
             React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
 };
 
@@ -86,7 +79,7 @@ var MenuFooter = function (_a) {
  */
 var MenuGroup = function (_a) {
     var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
-    return (React.createElement(MenuSubContent.Group2, filterAttrs.__assign({ className: "arc-MenuGroup" }, filterAttrs.filterAttrs(props)), children));
+    return (React.createElement(MenuItemMultiLevelContent.Group2, filterAttrs.__assign({ className: "arc-MenuGroup" }, filterAttrs.filterAttrs(props)), children));
 };
 
 /**
@@ -95,19 +88,12 @@ var MenuGroup = function (_a) {
 var MenuHeader = function (_a) {
     var leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, children = _a.children, onClick = _a.onClick, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel;
     return (React.createElement("div", { className: "arc-MenuHeader" },
-        React.createElement(MenuSubContent.Item2, { className: "arc-MenuItem ", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+        React.createElement(MenuItemMultiLevelContent.Item2, { className: "arc-MenuItem ", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
             React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children)),
         React.createElement("div", { className: "arc-MenuSeparator", style: {
                 paddingBottom: 0,
             } },
-            React.createElement(Rule.Rule, null),
-            React.createElement("div", { style: {
-                    height: "12px",
-                    background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                    position: "absolute",
-                    width: "100%",
-                    zIndex: 3,
-                } }))));
+            React.createElement(Rule.Rule, null))));
 };
 
 /**
@@ -116,7 +102,7 @@ var MenuHeader = function (_a) {
 var MenuItem = function (_a) {
     var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children, onClick = _a.onClick, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, isDisabled = _a.isDisabled, href = _a.href, ariaLabel = _a.ariaLabel, props = filterAttrs.__rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
     var Component = href ? "a" : "div";
-    return (React.createElement(MenuSubContent.Item2, filterAttrs.__assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: onClick, onSelect: function (event) {
+    return (React.createElement(MenuItemMultiLevelContent.Item2, filterAttrs.__assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: onClick, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
             }
@@ -130,7 +116,8 @@ var MenuItem = function (_a) {
  */
 var MenuLabel = function (_a) {
     var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
-    return (React.createElement(MenuSubContent.Label2, filterAttrs.__assign({ className: "arc-MenuLabel" }, filterAttrs.filterAttrs(props)), children));
+    return (React.createElement(MenuItemMultiLevelContent.Item2, filterAttrs.__assign({ asChild: true, className: "arc-MenuLabel", tabIndex: 0, role: "presentation" }, filterAttrs.filterAttrs(props), { style: { pointerEvents: "none" } }),
+        React.createElement("div", null, children)));
 };
 
 /**
@@ -140,15 +127,15 @@ var MenuPortal = function (_a) {
     var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
     var _b = index$1.useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
     return (React.createElement("span", { ref: setThemeElement, style: { display: "none" } },
-        React.createElement(MenuSubContent.Portal2, filterAttrs.__assign({ container: themeElement }, filterAttrs.filterAttrs(props)), children)));
+        React.createElement(MenuItemMultiLevelContent.Portal2, filterAttrs.__assign({ container: themeElement }, filterAttrs.filterAttrs(props)), children)));
 };
 
 /**
  * Groups menu items allowing single selection from multiple options.
  */
-var MenuRadioGroup = function (_a) {
+var MenuGroupSingleSelect = function (_a) {
     var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = filterAttrs.__rest(_a, ["children", "value", "onValueChange"]);
-    return (React.createElement(MenuSubContent.RadioGroup2, filterAttrs.__assign({ className: "arc-MenuRadioGroup", value: value, onValueChange: onValueChange }, filterAttrs.filterAttrs(props)), children));
+    return (React.createElement(MenuItemMultiLevelContent.RadioGroup2, filterAttrs.__assign({ className: "arc-MenuGroupSingleSelect", value: value, onValueChange: onValueChange }, filterAttrs.filterAttrs(props)), children));
 };
 
 /**
@@ -162,9 +149,9 @@ const BtIconTickAlt2Px =
 /**
  * A selectable menu item used within a radio group.
  */
-var MenuRadioItem = function (_a) {
+var MenuItemSingleSelect = function (_a) {
     var children = _a.children, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSelect = _a.onSelect, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, _c = _a.shouldKeepOpen, shouldKeepOpen = _c === void 0 ? true : _c, props = filterAttrs.__rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
-    return (React.createElement(MenuSubContent.RadioItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuRadioItem", value: value, disabled: disabled, onSelect: function (event) {
+    return (React.createElement(MenuItemMultiLevelContent.RadioItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuItemSingleSelect", value: value, disabled: disabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
             }
@@ -201,26 +188,26 @@ var MenuScrollable = function (_a) {
  * Visual separator used to divide groups of menu items.
  */
 var MenuSeparator = function (props) {
-    return (React.createElement(MenuSubContent.Separator2, filterAttrs.__assign({ className: "arc-MenuSeparator" }, filterAttrs.filterAttrs(props)),
+    return (React.createElement(MenuItemMultiLevelContent.Separator2, filterAttrs.__assign({ className: "arc-MenuSeparator" }, filterAttrs.filterAttrs(props)),
         React.createElement(Rule.Rule, null)));
 };
 
 /**
- * Container for submenu content within a dropdown menu.
+ * Container for multi-level menu content within a dropdown menu.
  */
-var MenuSub = function (_a) {
+var MenuItemMultiLevel = function (_a) {
     var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
-    return React.createElement(MenuSubContent.Sub2, filterAttrs.__assign({}, filterAttrs.filterAttrs(props)),
+    return React.createElement(MenuItemMultiLevelContent.Sub2, filterAttrs.__assign({}, filterAttrs.filterAttrs(props)),
         " ",
         children);
 };
 
 /**
- * Trigger element that opens a submenu when selected.
+ * Trigger element that opens a multi-level menu when selected.
  */
-var MenuSubTrigger = function (_a) {
+var MenuItemMultiLevelTrigger = function (_a) {
     var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, props = filterAttrs.__rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel"]);
-    return (React.createElement(MenuSubContent.SubTrigger2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
+    return (React.createElement(MenuItemMultiLevelContent.SubTrigger2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: "arc-MenuItem-content" },
             leadingIcon && (React.createElement("div", { className: "arc-MenuItem-leadingIcon" },
                 React.createElement(Icon.Icon, { icon: leadingIcon, size: 24 }))),
@@ -238,24 +225,24 @@ var MenuSubTrigger = function (_a) {
  */
 var MenuTrigger = function (_a) {
     var children = _a.children, asChild = _a.asChild, props = filterAttrs.__rest(_a, ["children", "asChild"]);
-    return (React.createElement(MenuSubContent.Trigger, filterAttrs.__assign({ className: ".arc-MenuItem arc-MenuTrigger", asChild: asChild }, filterAttrs.filterAttrs(props)), children));
+    return (React.createElement(MenuItemMultiLevelContent.Trigger, filterAttrs.__assign({ className: "arc-MenuTrigger", asChild: asChild }, filterAttrs.filterAttrs(props)), children));
 };
 
-exports.MenuContent = MenuSubContent.MenuContent;
-exports.MenuSubContent = MenuSubContent.MenuSubContent;
+exports.MenuContent = MenuItemMultiLevelContent.MenuContent;
+exports.MenuItemMultiLevelContent = MenuItemMultiLevelContent.MenuItemMultiLevelContent;
 exports.Menu = Menu;
-exports.MenuCheckboxItem = MenuCheckboxItem;
 exports.MenuFooter = MenuFooter;
 exports.MenuGroup = MenuGroup;
+exports.MenuGroupSingleSelect = MenuGroupSingleSelect;
 exports.MenuHeader = MenuHeader;
 exports.MenuItem = MenuItem;
+exports.MenuItemCheckbox = MenuItemCheckbox;
 exports.MenuItemContentTemplate = MenuItemContentTemplate;
+exports.MenuItemMultiLevel = MenuItemMultiLevel;
+exports.MenuItemMultiLevelTrigger = MenuItemMultiLevelTrigger;
+exports.MenuItemSingleSelect = MenuItemSingleSelect;
 exports.MenuLabel = MenuLabel;
 exports.MenuPortal = MenuPortal;
-exports.MenuRadioGroup = MenuRadioGroup;
-exports.MenuRadioItem = MenuRadioItem;
 exports.MenuScrollable = MenuScrollable;
 exports.MenuSeparator = MenuSeparator;
-exports.MenuSub = MenuSub;
-exports.MenuSubTrigger = MenuSubTrigger;
 exports.MenuTrigger = MenuTrigger;

package/lib/Menu/Menu.mjs

@@ -1,9 +1,10 @@
+'use client';
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
 import React__default from 'react';
-import { R as Root2, C as CheckboxItem2, I as Item2, G as Group2, L as Label2, P as Portal2, a as RadioGroup2, b as RadioItem2, S as Separator2, c as Sub2, d as SubTrigger2, T as Trigger } from '../_shared/esm/MenuSubContent-Cv9mSn58.mjs';
-export { M as MenuContent, e as MenuSubContent } from '../_shared/esm/MenuSubContent-Cv9mSn58.mjs';
+import { R as Root2, C as CheckboxItem2, I as Item2, G as Group2, P as Portal2, a as RadioGroup2, b as RadioItem2, S as Separator2, c as Sub2, d as SubTrigger2, T as Trigger } from '../_shared/esm/MenuItemMultiLevelContent-JTOHqpzg.mjs';
+export { M as MenuContent, e as MenuItemMultiLevelContent } from '../_shared/esm/MenuItemMultiLevelContent-JTOHqpzg.mjs';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
-import { I as Icon } from '../_shared/esm/Icon-MZfaoOo9.mjs';
+import { I as Icon } from '../_shared/esm/Icon-CcPOJcQm.mjs';
 import { T as Text } from '../_shared/esm/Text-CBlnm5CT.mjs';
 import { R as Rule } from '../_shared/esm/Rule-3gdMHH-R.mjs';
 import { e as useThemeElement } from '../_shared/esm/index-Bz2JQq34.mjs';
@@ -42,17 +43,17 @@ var MenuItemContentTemplate = function (_a) {
                 React__default.createElement(Icon, { icon: trailingIcon, size: 24 }))))) : null));
 };
 
-var MenuCheckboxItem = function (_a) {
+var MenuItemCheckbox = function (_a) {
     var children = _a.children, checked = _a.checked, onCheckedChange = _a.onCheckedChange, isDisabled = _a.isDisabled, onSelect = _a.onSelect, id = _a.id, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, props = __rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
-    return (React__default.createElement(CheckboxItem2, __assign({ className: "arc-MenuItem arc-MenuCheckboxItem", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
+    return (React__default.createElement(CheckboxItem2, __assign({ className: "arc-MenuItem arc-MenuItemCheckbox", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
                 onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
             }
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
         }, id: id }, filterAttrs(props)),
-        React__default.createElement("div", { className: classNames("arc-MenuCheckboxItem-box", {
-                "arc-MenuCheckboxItem-box--checked": checked,
+        React__default.createElement("div", { className: classNames("arc-MenuItemCheckbox-box", {
+                "arc-MenuItemCheckbox-box--checked": checked,
             }) }, checked && (React__default.createElement("svg", { style: { width: 14, height: 11 }, viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
         React__default.createElement(MenuItemContentTemplate, null, children)));
@@ -66,14 +67,6 @@ var MenuFooter = function (_a) {
     return (React__default.createElement("div", { className: "arc-MenuFooter", style: {
             position: "relative",
         } },
-        React__default.createElement("div", { style: {
-                height: "12px",
-                background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                position: "absolute",
-                width: "100%",
-                zIndex: 3,
-                top: -12,
-            } }),
         React__default.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
             React__default.createElement(Rule, null)),
         React__default.createElement(Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
@@ -99,14 +92,7 @@ var MenuHeader = function (_a) {
         React__default.createElement("div", { className: "arc-MenuSeparator", style: {
                 paddingBottom: 0,
             } },
-            React__default.createElement(Rule, null),
-            React__default.createElement("div", { style: {
-                    height: "12px",
-                    background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                    position: "absolute",
-                    width: "100%",
-                    zIndex: 3,
-                } }))));
+            React__default.createElement(Rule, null))));
 };
 
 /**
@@ -129,7 +115,8 @@ var MenuItem = function (_a) {
  */
 var MenuLabel = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement(Label2, __assign({ className: "arc-MenuLabel" }, filterAttrs(props)), children));
+    return (React__default.createElement(Item2, __assign({ asChild: true, className: "arc-MenuLabel", tabIndex: 0, role: "presentation" }, filterAttrs(props), { style: { pointerEvents: "none" } }),
+        React__default.createElement("div", null, children)));
 };
 
 /**
@@ -145,9 +132,9 @@ var MenuPortal = function (_a) {
 /**
  * Groups menu items allowing single selection from multiple options.
  */
-var MenuRadioGroup = function (_a) {
+var MenuGroupSingleSelect = function (_a) {
     var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["children", "value", "onValueChange"]);
-    return (React__default.createElement(RadioGroup2, __assign({ className: "arc-MenuRadioGroup", value: value, onValueChange: onValueChange }, filterAttrs(props)), children));
+    return (React__default.createElement(RadioGroup2, __assign({ className: "arc-MenuGroupSingleSelect", value: value, onValueChange: onValueChange }, filterAttrs(props)), children));
 };
 
 /**
@@ -161,9 +148,9 @@ const BtIconTickAlt2Px =
 /**
  * A selectable menu item used within a radio group.
  */
-var MenuRadioItem = function (_a) {
+var MenuItemSingleSelect = function (_a) {
     var children = _a.children, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSelect = _a.onSelect, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, _c = _a.shouldKeepOpen, shouldKeepOpen = _c === void 0 ? true : _c, props = __rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
-    return (React__default.createElement(RadioItem2, __assign({ className: "arc-MenuItem arc-MenuRadioItem", value: value, disabled: disabled, onSelect: function (event) {
+    return (React__default.createElement(RadioItem2, __assign({ className: "arc-MenuItem arc-MenuItemSingleSelect", value: value, disabled: disabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
             }
@@ -205,9 +192,9 @@ var MenuSeparator = function (props) {
 };
 
 /**
- * Container for submenu content within a dropdown menu.
+ * Container for multi-level menu content within a dropdown menu.
  */
-var MenuSub = function (_a) {
+var MenuItemMultiLevel = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return React__default.createElement(Sub2, __assign({}, filterAttrs(props)),
         " ",
@@ -215,9 +202,9 @@ var MenuSub = function (_a) {
 };
 
 /**
- * Trigger element that opens a submenu when selected.
+ * Trigger element that opens a multi-level menu when selected.
  */
-var MenuSubTrigger = function (_a) {
+var MenuItemMultiLevelTrigger = function (_a) {
     var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel"]);
     return (React__default.createElement(SubTrigger2, __assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-MenuItem-content" },
@@ -237,7 +224,7 @@ var MenuSubTrigger = function (_a) {
  */
 var MenuTrigger = function (_a) {
     var children = _a.children, asChild = _a.asChild, props = __rest(_a, ["children", "asChild"]);
-    return (React__default.createElement(Trigger, __assign({ className: ".arc-MenuItem arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
+    return (React__default.createElement(Trigger, __assign({ className: "arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
 };
 
-export { Menu, MenuCheckboxItem, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemContentTemplate, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuScrollable, MenuSeparator, MenuSub, MenuSubTrigger, MenuTrigger };
+export { Menu, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, MenuScrollable, MenuSeparator, MenuTrigger };