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

package/lib/Alert/Alert.cjs

@@ -1,36 +1,41 @@
 '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 index_es = require('../_shared/cjs/index.es-DlNskPlN.cjs');
-var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
-var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
-var Link = require('../_shared/cjs/Link-7xUgVf1I.cjs');
-var Heading = require('../_shared/cjs/Heading-BEMSkLYR.cjs');
-var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
-var useMediaQuery = require('../_shared/cjs/use-media-query-BsUfHjPZ.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
+var Icon = require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-Def4RZfK.cjs');
+var Link = require('../_shared/cjs/Link-PWpx-rRO.cjs');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+var SemanticHeading = require('../_shared/cjs/SemanticHeading-BPXN_z49.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
 
 /** Use `Alert` to inform the user of important changes or actions. */
 var Alert = function (_a) {
-    var _b, _c;
-    var heading = _a.heading, headingLevel = _a.headingLevel, description = _a.description, links = _a.links, _d = _a.status, status = _d === void 0 ? "general" : _d, isDismissable = _a.isDismissable, onDismiss = _a.onDismiss, icon = _a.icon, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.autoFocusOnMount, autoFocusOnMount = _f === void 0 ? false : _f, props = filterAttrs.__rest(_a, ["heading", "headingLevel", "description", "links", "status", "isDismissable", "onDismiss", "icon", "isMeasured", "autoFocusOnMount"]);
-    var _g = React.useState(false), isDismissed = _g[0], setIsDismissed = _g[1];
+    var _b;
+    var heading = _a.heading, headingLevel = _a.headingLevel, description = _a.description, links = _a.links, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, onDismiss = _a.onDismiss, icon = _a.icon, _d = _a.isMeasured, isMeasured = _d === void 0 ? false : _d, _e = _a.autoFocusOnMount, autoFocusOnMount = _e === void 0 ? false : _e, _f = _a.role, role = _f === void 0 ? "alert" : _f, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "description", "links", "status", "isDismissable", "onDismiss", "icon", "isMeasured", "autoFocusOnMount", "role"]);
+    var headingId = React.useId();
+    var descriptionId = React.useId();
     var alertRef = React.useRef(null);
+    var _g = React.useState(false), isDismissed = _g[0], setIsDismissed = _g[1];
     React.useEffect(function () {
         var _a;
         autoFocusOnMount && ((_a = alertRef.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [autoFocusOnMount]);
-    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
     var onDismissHandler = function () {
         setIsDismissed(true);
         onDismiss && onDismiss();
     };
+    var handleLinkClick = function (e, link) {
+        var _a;
+        e.preventDefault();
+        (_a = link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e);
+    };
     var statusIcons = {
         general: "alertGeneral",
         error: "alertError",
@@ -40,35 +45,31 @@ var Alert = function (_a) {
     if (isDismissed) {
         return null;
     }
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames("arc-Alert", (_b = {},
-            _b["arc-Alert--".concat(status)] = status !== "general",
-            _b)), role: "alert", tabIndex: -1, "aria-labelledby": "alertHeading", "aria-describedby": "alertDescription", ref: alertRef }, filterAttrs.filterAttrs(props)),
-        React.createElement("div", { className: "arc-Alert-icon" }, icon ? (React.createElement(Icon.Icon, { size: 24, icon: icon })) : (React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: statusIcons[status] }))),
-        React.createElement("div", { className: "arc-Alert-content" },
-            React.createElement("div", { className: index.classNames("arc-Alert-heading", (_c = {},
-                    _c["arc-Alert-heading--isDismissable"] = isDismissable,
-                    _c)) },
-                React.createElement(Heading.Heading, { level: headingLevel, id: "alertHeading", size: isMinWidthArcBreakpointM ? "s" : "xs" },
+    return (React.createElement(Surface.Surface, { background: "light-brand-01", isTransparent: true },
+        React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-Alert", (_b = {},
+                _b["arc-Alert--".concat(status)] = status !== "general",
+                _b)), role: role, tabIndex: -1, "aria-labelledby": headingId, "aria-describedby": descriptionId, ref: alertRef }, filterAttrs.filterAttrs(props)),
+            isDismissable && (React.createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler, tabIndex: 0 },
+                React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "alertDismiss" }))),
+            React.createElement("div", { className: "arc-Alert-icon" }, icon ? (React.createElement(Icon.Icon, { size: 24, icon: icon })) : (React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: statusIcons[status] }))),
+            React.createElement("div", { className: "arc-Alert-content" },
+                React.createElement(SemanticHeading.SemanticHeading, { className: index.classNames("arc-Alert-heading", {
+                        "arc-Alert-heading--isDismissable": isDismissable,
+                    }), id: headingId, level: headingLevel },
                     React.createElement(VisuallyHidden.VisuallyHidden, null,
                         status,
                         " alert."),
-                    heading)),
-            description ? (React.isValidElement(description) ? (React.createElement("div", { className: "arc-Alert-description", id: "alertDescription" }, description)) : (React.createElement("div", { className: "arc-Alert-description" },
-                React.createElement(Text.Text, { isMeasured: isMeasured, size: "s", id: "alertDescription" }, description)))) : null,
-            React.createElement("div", { className: "arc-Alert-links" },
-                React.createElement("ul", null, links === null || links === void 0 ? void 0 : links.map(function (link, index) {
+                    heading),
+                description ? (React.isValidElement(description) ? (React.createElement("div", { className: "arc-Alert-description", id: descriptionId }, description)) : (React.createElement("div", { className: "arc-Alert-description" },
+                    React.createElement(Text.Text, { isMeasured: isMeasured, size: "s", id: descriptionId }, description)))) : null,
+                React.createElement("ul", { className: "arc-Alert-links" }, links === null || links === void 0 ? void 0 : links.map(function (link, index) {
                     var _a;
-                    return (React.createElement("li", { key: index },
-                        React.createElement(Link.Link, filterAttrs.__assign({ href: link.href, "aria-label": link.screenReaderText, target: link.target, size: "s" }, (link.onClick && {
-                            onClick: function (e) {
-                                e.preventDefault();
-                                link.onClick && link.onClick(e);
-                            },
+                    return (React.createElement("li", { key: index, className: "arc-Alert-link" },
+                        React.createElement(Link.Link, tslib_es6.__assign({ href: link.href, "aria-label": link.screenReaderText, target: link.target, size: "s" }, (link.onClick && {
+                            onClick: function (e) { return handleLinkClick(e, link); },
                             isButton: true,
                         })), (_a = link.children) !== null && _a !== void 0 ? _a : "")));
-                })))),
-        isDismissable && (React.createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler, tabIndex: 0 },
-            React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "alertDismiss" })))));
+                }))))));
 };
 
 exports.Alert = Alert;

package/lib/Alert/Alert.mjs

@@ -1,34 +1,39 @@
 'use client';
-import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
-import React__default, { useState, useRef, useEffect } from 'react';
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useId, useRef, useState, useEffect } from 'react';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
-import { A as ArcSizeBreakpointsM } from '../_shared/esm/index.es-C3WqfFKH.mjs';
-import { T as Text } from '../_shared/esm/Text-CBlnm5CT.mjs';
-import { I as Icon } from '../_shared/esm/Icon-CcPOJcQm.mjs';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
-import { L as Link } from '../_shared/esm/Link-Biyg9qBH.mjs';
-import { H as Heading } from '../_shared/esm/Heading-CxHWefi7.mjs';
-import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
-import { u as useMediaQuery } from '../_shared/esm/use-media-query-DmKuIDEM.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
+import { I as Icon } from '../_shared/esm/Icon-CCUbr_AO.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-B0SruPZC.mjs';
+import { L as Link } from '../_shared/esm/Link-ogbR4K3O.mjs';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
+import { S as Surface } from '../_shared/esm/Surface-C69KVzkY.mjs';
+import { S as SemanticHeading } from '../_shared/esm/SemanticHeading-1tLcSJYD.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
 
 /** Use `Alert` to inform the user of important changes or actions. */
 var Alert = function (_a) {
-    var _b, _c;
-    var heading = _a.heading, headingLevel = _a.headingLevel, description = _a.description, links = _a.links, _d = _a.status, status = _d === void 0 ? "general" : _d, isDismissable = _a.isDismissable, onDismiss = _a.onDismiss, icon = _a.icon, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.autoFocusOnMount, autoFocusOnMount = _f === void 0 ? false : _f, props = __rest(_a, ["heading", "headingLevel", "description", "links", "status", "isDismissable", "onDismiss", "icon", "isMeasured", "autoFocusOnMount"]);
-    var _g = useState(false), isDismissed = _g[0], setIsDismissed = _g[1];
+    var _b;
+    var heading = _a.heading, headingLevel = _a.headingLevel, description = _a.description, links = _a.links, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, onDismiss = _a.onDismiss, icon = _a.icon, _d = _a.isMeasured, isMeasured = _d === void 0 ? false : _d, _e = _a.autoFocusOnMount, autoFocusOnMount = _e === void 0 ? false : _e, _f = _a.role, role = _f === void 0 ? "alert" : _f, props = __rest(_a, ["heading", "headingLevel", "description", "links", "status", "isDismissable", "onDismiss", "icon", "isMeasured", "autoFocusOnMount", "role"]);
+    var headingId = useId();
+    var descriptionId = useId();
     var alertRef = useRef(null);
+    var _g = useState(false), isDismissed = _g[0], setIsDismissed = _g[1];
     useEffect(function () {
         var _a;
         autoFocusOnMount && ((_a = alertRef.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [autoFocusOnMount]);
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     var onDismissHandler = function () {
         setIsDismissed(true);
         onDismiss && onDismiss();
     };
+    var handleLinkClick = function (e, link) {
+        var _a;
+        e.preventDefault();
+        (_a = link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e);
+    };
     var statusIcons = {
         general: "alertGeneral",
         error: "alertError",
@@ -38,35 +43,31 @@ var Alert = function (_a) {
     if (isDismissed) {
         return null;
     }
-    return (React__default.createElement("div", __assign({ className: classNames("arc-Alert", (_b = {},
-            _b["arc-Alert--".concat(status)] = status !== "general",
-            _b)), role: "alert", tabIndex: -1, "aria-labelledby": "alertHeading", "aria-describedby": "alertDescription", ref: alertRef }, filterAttrs(props)),
-        React__default.createElement("div", { className: "arc-Alert-icon" }, icon ? (React__default.createElement(Icon, { size: 24, icon: icon })) : (React__default.createElement(ThemeIcon, { size: 24, icon: statusIcons[status] }))),
-        React__default.createElement("div", { className: "arc-Alert-content" },
-            React__default.createElement("div", { className: classNames("arc-Alert-heading", (_c = {},
-                    _c["arc-Alert-heading--isDismissable"] = isDismissable,
-                    _c)) },
-                React__default.createElement(Heading, { level: headingLevel, id: "alertHeading", size: isMinWidthArcBreakpointM ? "s" : "xs" },
+    return (React__default.createElement(Surface, { background: "light-brand-01", isTransparent: true },
+        React__default.createElement("div", __assign({ className: classNames("arc-Alert", (_b = {},
+                _b["arc-Alert--".concat(status)] = status !== "general",
+                _b)), role: role, tabIndex: -1, "aria-labelledby": headingId, "aria-describedby": descriptionId, ref: alertRef }, filterAttrs(props)),
+            isDismissable && (React__default.createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler, tabIndex: 0 },
+                React__default.createElement(ThemeIcon, { size: 24, icon: "alertDismiss" }))),
+            React__default.createElement("div", { className: "arc-Alert-icon" }, icon ? (React__default.createElement(Icon, { size: 24, icon: icon })) : (React__default.createElement(ThemeIcon, { size: 24, icon: statusIcons[status] }))),
+            React__default.createElement("div", { className: "arc-Alert-content" },
+                React__default.createElement(SemanticHeading, { className: classNames("arc-Alert-heading", {
+                        "arc-Alert-heading--isDismissable": isDismissable,
+                    }), id: headingId, level: headingLevel },
                     React__default.createElement(VisuallyHidden, null,
                         status,
                         " alert."),
-                    heading)),
-            description ? (React__default.isValidElement(description) ? (React__default.createElement("div", { className: "arc-Alert-description", id: "alertDescription" }, description)) : (React__default.createElement("div", { className: "arc-Alert-description" },
-                React__default.createElement(Text, { isMeasured: isMeasured, size: "s", id: "alertDescription" }, description)))) : null,
-            React__default.createElement("div", { className: "arc-Alert-links" },
-                React__default.createElement("ul", null, links === null || links === void 0 ? void 0 : links.map(function (link, index) {
+                    heading),
+                description ? (React__default.isValidElement(description) ? (React__default.createElement("div", { className: "arc-Alert-description", id: descriptionId }, description)) : (React__default.createElement("div", { className: "arc-Alert-description" },
+                    React__default.createElement(Text, { isMeasured: isMeasured, size: "s", id: descriptionId }, description)))) : null,
+                React__default.createElement("ul", { className: "arc-Alert-links" }, links === null || links === void 0 ? void 0 : links.map(function (link, index) {
                     var _a;
-                    return (React__default.createElement("li", { key: index },
+                    return (React__default.createElement("li", { key: index, className: "arc-Alert-link" },
                         React__default.createElement(Link, __assign({ href: link.href, "aria-label": link.screenReaderText, target: link.target, size: "s" }, (link.onClick && {
-                            onClick: function (e) {
-                                e.preventDefault();
-                                link.onClick && link.onClick(e);
-                            },
+                            onClick: function (e) { return handleLinkClick(e, link); },
                             isButton: true,
                         })), (_a = link.children) !== null && _a !== void 0 ? _a : "")));
-                })))),
-        isDismissable && (React__default.createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler, tabIndex: 0 },
-            React__default.createElement(ThemeIcon, { size: 24, icon: "alertDismiss" })))));
+                }))))));
 };
 
 export { Alert };

package/lib/Alert/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Alert{background-color:var(--alert-colors-status-light-bg-subtle-default);border-color:var(--alert-colors-status-light-border-default);border-radius:var(--alert-border-radius-s);border-style:solid;border-width:var(--alert-border-width-s) var(--alert-border-width-s) var(--alert-border-width-s) var(--alert-border-width-m);display:flex;padding:calc(var(--alert-padding-xs) - var(--alert-border-width-s));padding-bottom:calc(var(--alert-padding-s) - var(--alert-border-width-s));position:relative}.arc-v12-0-0-beta-22 .arc .arc-Alert:focus{outline:none}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-Alert{border-radius:var(--alert-border-radius-m);padding:calc(var(--alert-padding-s) - var(--alert-border-width-s)) calc(var(--alert-padding-l) - var(--alert-border-width-s)) calc(var(--alert-padding-m) - var(--alert-border-width-s)) calc(var(--alert-padding-s) - var(--alert-border-width-s))}}.arc-v12-0-0-beta-22 .arc .arc-Alert-icon{color:var(--alert-colors-status-light-text-default)}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-Alert-icon{padding-top:var(--alert-padding-xxs)}}.arc-v12-0-0-beta-22 .arc .arc-Alert-content{display:flex;flex-direction:column;gap:var(--alert-gap-xs);padding-left:var(--alert-gap-s)}.arc-v12-0-0-beta-22 .arc-Alert-heading--isDismissable{padding-right:var(--alert-size-icon-s)}.arc-v12-0-0-beta-22 .arc .arc-Alert-description{color:var(--alert-colors-status-light-text-default);font:var(--sem-type-body-reg-s);white-space:wrap}.arc-v12-0-0-beta-22 .arc .arc-Alert-dismiss{align-self:flex-start;background-color:transparent;border:none;color:var(--alert-colors-status-light-text-default);padding:0;position:absolute;right:calc(8px - var(--alert-border-width-s));top:calc(8px - var(--alert-border-width-s))}@media (min-width:768px){.arc-v12-0-0-beta-22 .arc .arc-Alert-dismiss{right:calc(12px - var(--alert-border-width-s));top:calc(12px - var(--alert-border-width-s))}}.arc-v12-0-0-beta-22 .arc .arc-Alert-links ul,.arc-v12-0-0-beta-22 li{font:var(--sem-type-body-reg-s);list-style:none;margin:0;padding:0}.arc-v12-0-0-beta-22 .arc .arc-Alert-links li:not(:last-child){margin-bottom:var(--alert-gap-xs)}.arc-v12-0-0-beta-22 .arc .arc-Alert-dismiss:hover{cursor:pointer}.arc-v12-0-0-beta-22 .arc .arc-Alert-dismiss:focus-visible{border-radius:var(--focus-border-radius-s);height:24px;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px;width:24px}.arc-v12-0-0-beta-22 .arc .arc-Alert--error{background-color:var(--alert-colors-status-light-bg-subtle-error);border-color:var(--alert-colors-status-light-border-error)}.arc-v12-0-0-beta-22 .arc .arc-Alert--warning{background-color:var(--alert-colors-status-light-bg-subtle-warning);border-color:var(--alert-colors-status-light-border-warning)}.arc-v12-0-0-beta-22 .arc .arc-Alert--success{background-color:var(--alert-colors-status-light-bg-subtle-success);border-color:var(--alert-colors-status-light-border-success)}.arc-v12-0-0-beta-22 .arc .arc-Alert--error .arc-Alert-icon{color:var(--alert-colors-status-light-icon-error)}.arc-v12-0-0-beta-22 .arc .arc-Alert--warning .arc-Alert-icon{color:var(--alert-colors-status-light-icon-warning)}.arc-v12-0-0-beta-22 .arc .arc-Alert--success .arc-Alert-icon{color:var(--alert-colors-status-light-icon-success)}
+.arc-v12-0-0-beta-24 .arc .arc-Alert{background-color:var(--alert-colors-status-light-bg-subtle-default);border-color:var(--alert-colors-status-light-border-default);border-radius:var(--alert-border-radius-s);border-style:solid;border-width:var(--alert-border-width-s) var(--alert-border-width-s) var(--alert-border-width-s) var(--alert-border-width-m);display:flex;padding:calc(var(--alert-padding-xs) - var(--alert-border-width-s));padding-bottom:calc(var(--alert-padding-s) - var(--alert-border-width-s));position:relative}.arc-v12-0-0-beta-24 .arc .arc-Alert:focus{outline:none}@media (min-width:768px){.arc-v12-0-0-beta-24 .arc .arc-Alert{border-radius:var(--alert-border-radius-m);padding:calc(var(--alert-padding-s) - var(--alert-border-width-s)) calc(var(--alert-padding-l) - var(--alert-border-width-s)) calc(var(--alert-padding-m) - var(--alert-border-width-s)) calc(var(--alert-padding-s) - var(--alert-border-width-s))}}.arc-v12-0-0-beta-24 .arc .arc-Alert-icon{color:var(--alert-colors-status-light-text-default)}@media (min-width:768px){.arc-v12-0-0-beta-24 .arc .arc-Alert-icon{padding-top:var(--alert-padding-xxs)}}.arc-v12-0-0-beta-24 .arc .arc-Alert-content{display:flex;flex-direction:column;gap:var(--alert-gap-xs);padding-left:var(--alert-gap-s)}.arc-v12-0-0-beta-24 .arc .arc-Alert-heading{font:var(--sem-type-mobile-semi-xs)}.arc-v12-0-0-beta-24 .arc .arc-Alert-heading--isDismissable{padding-right:var(--alert-size-icon-s)}.arc-v12-0-0-beta-24 .arc .arc-Alert-description{color:var(--alert-colors-status-light-text-default);font:var(--sem-type-body-reg-s);white-space:wrap}.arc-v12-0-0-beta-24 .arc .arc-Alert-dismiss{align-self:flex-start;background-color:transparent;border:none;color:var(--alert-colors-status-light-text-default);padding:0;position:absolute;right:calc(8px - var(--alert-border-width-s));top:calc(8px - var(--alert-border-width-s))}@media (min-width:768px){.arc-v12-0-0-beta-24 .arc .arc-Alert-dismiss{right:calc(12px - var(--alert-border-width-s));top:calc(12px - var(--alert-border-width-s))}.arc-v12-0-0-beta-24 .arc .arc-Alert-heading{font:var(--sem-type-mobile-semi-s)}}.arc-v12-0-0-beta-24 .arc .arc-Alert-links,.arc-v12-0-0-beta-24 .arc .arc-Alert-link{font:var(--sem-type-body-reg-s);list-style:none;margin:0;padding:0}.arc-v12-0-0-beta-24 .arc .arc-Alert-link:not(:last-child){margin-bottom:var(--alert-gap-xs)}.arc-v12-0-0-beta-24 .arc .arc-Alert-dismiss:hover{cursor:pointer}.arc-v12-0-0-beta-24 .arc .arc-Alert-dismiss:focus-visible{border-radius:var(--focus-border-radius-s);height:24px;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px;width:24px}.arc-v12-0-0-beta-24 .arc .arc-Alert--error{background-color:var(--alert-colors-status-light-bg-subtle-error);border-color:var(--alert-colors-status-light-border-error)}.arc-v12-0-0-beta-24 .arc .arc-Alert--warning{background-color:var(--alert-colors-status-light-bg-subtle-warning);border-color:var(--alert-colors-status-light-border-warning)}.arc-v12-0-0-beta-24 .arc .arc-Alert--success{background-color:var(--alert-colors-status-light-bg-subtle-success);border-color:var(--alert-colors-status-light-border-success)}.arc-v12-0-0-beta-24 .arc .arc-Alert--error .arc-Alert-icon{color:var(--alert-colors-status-light-icon-error)}.arc-v12-0-0-beta-24 .arc .arc-Alert--warning .arc-Alert-icon{color:var(--alert-colors-status-light-icon-warning)}.arc-v12-0-0-beta-24 .arc .arc-Alert--success .arc-Alert-icon{color:var(--alert-colors-status-light-icon-success)}

package/lib/Align/Align.cjs

@@ -1,9 +1,10 @@
 '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 suffixModifier = require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 
 /**
@@ -11,9 +12,9 @@ require('../_shared/cjs/index-DR8Rkav9.cjs');
  */
 var Align = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.horizontal, horizontal = _c === void 0 ? "left" : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, _e = _a.vertical, vertical = _e === void 0 ? "top" : _e, props = filterAttrs.__rest(_a, ["children", "horizontal", "isDebugVisible", "vertical"]);
+    var children = _a.children, _c = _a.horizontal, horizontal = _c === void 0 ? "left" : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, _e = _a.vertical, vertical = _e === void 0 ? "top" : _e, props = tslib_es6.__rest(_a, ["children", "horizontal", "isDebugVisible", "vertical"]);
     var wrappedChildren = React.Children.map(children, function (child, i) { return (React.createElement(AlignItem, { key: i }, child)); });
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {},
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {},
             _b["arc-Align"] = true,
             _b[suffixModifier.suffixModifier("arc-Align--horizontal", horizontal)] = horizontal !== "left",
             _b["arc-Align--debugVisible"] = isDebugVisible,

package/lib/Align/Align.mjs

@@ -1,7 +1,8 @@
-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 from 'react';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
 import { s as suffixModifier } from '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 
 /**

package/lib/Align/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Align{align-items:flex-start;display:flex;flex-direction:column}.arc-v12-0-0-beta-22 .arc .arc-Align--horizontalCenter{align-items:center}.arc-v12-0-0-beta-22 .arc .arc-Align--horizontalRight{align-items:flex-end}.arc-v12-0-0-beta-22 .arc .arc-Align--verticalBottom{height:100%;justify-content:flex-end}.arc-v12-0-0-beta-22 .arc .arc-Align--verticalCenter{height:100%;justify-content:center}.arc-v12-0-0-beta-22 .arc .arc-Align-item{position:relative}.arc-v12-0-0-beta-22 .arc .arc-Align--debugVisible .arc-Align-item::before{align-items:center;background:rgba(207,58,138,0.5);bottom:0;content:"Align";display:flex;justify-content:center;left:0;outline:1px dashed #cf3a8a;outline-offset:-1px;position:absolute;right:0;top:0}
+.arc-v12-0-0-beta-24 .arc .arc-Align{align-items:flex-start;display:flex;flex-direction:column}.arc-v12-0-0-beta-24 .arc .arc-Align--horizontalCenter{align-items:center}.arc-v12-0-0-beta-24 .arc .arc-Align--horizontalRight{align-items:flex-end}.arc-v12-0-0-beta-24 .arc .arc-Align--verticalBottom{height:100%;justify-content:flex-end}.arc-v12-0-0-beta-24 .arc .arc-Align--verticalCenter{height:100%;justify-content:center}.arc-v12-0-0-beta-24 .arc .arc-Align-item{position:relative}.arc-v12-0-0-beta-24 .arc .arc-Align--debugVisible .arc-Align-item::before{align-items:center;background:rgba(207,58,138,0.5);bottom:0;content:"Align";display:flex;justify-content:center;left:0;outline:1px dashed #cf3a8a;outline-offset:-1px;position:absolute;right:0;top:0}

package/lib/AppButton/AppButton.cjs

@@ -1,8 +1,9 @@
 '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 VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
 
 var GooglePlayIcon = function () { return (React.createElement("svg", { "aria-hidden": true, role: "presentation", xmlns: "http://www.w3.org/2000/svg", id: "artwork", version: "1.1", height: "48", width: "162", viewBox: "0 0 135 40" },
     React.createElement("defs", null,
@@ -54,13 +55,13 @@ var AppStoreIcon = function () { return (React.createElement("svg", { "aria-hidd
                 React.createElement("path", { d: "M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z", style: { fill: "#fff" } })))))); };
 
 var AppButton = function (_a) {
-    var type = _a.type, url = _a.url, screenReaderText = _a.screenReaderText, props = filterAttrs.__rest(_a, ["type", "url", "screenReaderText"]);
+    var type = _a.type, url = _a.url, screenReaderText = _a.screenReaderText, props = tslib_es6.__rest(_a, ["type", "url", "screenReaderText"]);
     var logos = {
         "google-play": GooglePlayIcon,
         "apple-app-store": AppStoreIcon,
     };
     var Logo = logos[type];
-    return (React.createElement("a", filterAttrs.__assign({ className: "arc-AppButton", href: url }, filterAttrs.filterAttrs(props)),
+    return (React.createElement("a", tslib_es6.__assign({ className: "arc-AppButton", href: url }, filterAttrs.filterAttrs(props)),
         React.createElement(Logo, null),
         React.createElement(VisuallyHidden.VisuallyHidden, null, screenReaderText)));
 };

package/lib/AppButton/AppButton.mjs

@@ -1,6 +1,7 @@
-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 from 'react';
-import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
 
 var GooglePlayIcon = function () { return (React__default.createElement("svg", { "aria-hidden": true, role: "presentation", xmlns: "http://www.w3.org/2000/svg", id: "artwork", version: "1.1", height: "48", width: "162", viewBox: "0 0 135 40" },
     React__default.createElement("defs", null,

package/lib/AppButton/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-AppButton{display:block;line-height:0;width:-moz-max-content;width:max-content}.arc-v12-0-0-beta-22 .arc .arc-AppButton:focus-visible{outline:var(--buttons-border-weight-s) solid var(--sem-color-border-primary-light-emphasis);outline-offset:var(--buttons-border-weight-s)}
+.arc-v12-0-0-beta-24 .arc .arc-AppButton{display:block;line-height:0;width:-moz-max-content;width:max-content}.arc-v12-0-0-beta-24 .arc .arc-AppButton:focus-visible{outline:var(--buttons-border-weight-s) solid var(--sem-color-border-primary-light-emphasis);outline-offset:var(--buttons-border-weight-s)}

package/lib/Avatar/Avatar.cjs

@@ -1,18 +1,20 @@
 'use client';
 'use strict';
 
-var Avatar = require('../_shared/cjs/Avatar-CrUioj_6.cjs');
-require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var Avatar = require('../_shared/cjs/Avatar-CecZTQdk.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 require('react');
 require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
 require('../_shared/cjs/ConditionalWrapper-C09Kw6EG.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');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
-require('../_shared/cjs/Image-C1pcrfnN.cjs');
-require('../_shared/cjs/Heading-BEMSkLYR.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('../_shared/cjs/Image-CSe0KpDN.cjs');
+require('../_shared/cjs/Heading-CoiZ2EmD.cjs');
+require('../_shared/cjs/SemanticHeading-BPXN_z49.cjs');
 
 
 

package/lib/Avatar/Avatar.mjs

@@ -1,13 +1,15 @@
 'use client';
-export { A as Avatar } from '../_shared/esm/Avatar-Fb1E5MA9.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+export { A as Avatar } from '../_shared/esm/Avatar-Cyqjgj85.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import 'react';
 import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';
 import '../_shared/esm/ConditionalWrapper-WoJxFYwS.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';
 import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
-import '../_shared/esm/Image-Dl8oH1Rn.mjs';
-import '../_shared/esm/Heading-CxHWefi7.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+import '../_shared/esm/Image-LemsonUX.mjs';
+import '../_shared/esm/Heading-B9cbwfoz.mjs';
+import '../_shared/esm/SemanticHeading-1tLcSJYD.mjs';

package/lib/Avatar/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Avatar{align-items:center;background:var(--avatar-colors-light-bg-default);border-radius:50%;color:var(--avatar-colors-light-text-default-alt);display:block;display:flex;justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:0.4s ease background-color}.arc-v12-0-0-beta-22 .arc a.arc-Avatar:hover{color:var(--avatar-colors-light-text-default-alt)}.arc-v12-0-0-beta-22 .arc a.arc-Avatar:focus,.arc-v12-0-0-beta-22 .arc a.arc-Avatar:focus-visible{border-radius:50%;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc a.arc-Avatar--img::before{background:transparent;bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0;transition:0.4s ease background-color}.arc-v12-0-0-beta-22 .arc .arc-Avatar--s{height:var(--avatar-size-s);width:var(--avatar-size-s)}.arc-v12-0-0-beta-22 .arc .arc-Avatar--m{height:var(--avatar-size-m);width:var(--avatar-size-m)}.arc-v12-0-0-beta-22 .arc .arc-Avatar--l{height:var(--avatar-size-l);width:var(--avatar-size-l)}.arc-v12-0-0-beta-22 .arc .arc-Avatar--xl{height:var(--avatar-size-xl);width:var(--avatar-size-xl)}
+.arc-v12-0-0-beta-24 .arc .arc-Avatar{align-items:center;background:var(--avatar-colors-light-bg-default);border-radius:50%;color:var(--avatar-colors-light-text-default-alt);display:block;display:flex;justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:0.4s ease background-color}.arc-v12-0-0-beta-24 .arc a.arc-Avatar:hover{color:var(--avatar-colors-light-text-default-alt)}.arc-v12-0-0-beta-24 .arc a.arc-Avatar:focus,.arc-v12-0-0-beta-24 .arc a.arc-Avatar:focus-visible{border-radius:50%;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-24 .arc a.arc-Avatar--img::before{background:transparent;bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0;transition:0.4s ease background-color}.arc-v12-0-0-beta-24 .arc .arc-Avatar--s{height:var(--avatar-size-s);width:var(--avatar-size-s)}.arc-v12-0-0-beta-24 .arc .arc-Avatar--m{height:var(--avatar-size-m);width:var(--avatar-size-m)}.arc-v12-0-0-beta-24 .arc .arc-Avatar--l{height:var(--avatar-size-l);width:var(--avatar-size-l)}.arc-v12-0-0-beta-24 .arc .arc-Avatar--xl{height:var(--avatar-size-xl);width:var(--avatar-size-xl)}

package/lib/AvatarGroup/AvatarGroup.cjs

@@ -1,35 +1,37 @@
 '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 Avatar = require('../_shared/cjs/Avatar-CrUioj_6.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Avatar = require('../_shared/cjs/Avatar-CecZTQdk.cjs');
 var ConditionalWrapper = require('../_shared/cjs/ConditionalWrapper-C09Kw6EG.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');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
-require('../_shared/cjs/Image-C1pcrfnN.cjs');
-require('../_shared/cjs/Heading-BEMSkLYR.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('../_shared/cjs/Image-CSe0KpDN.cjs');
+require('../_shared/cjs/Heading-CoiZ2EmD.cjs');
+require('../_shared/cjs/SemanticHeading-BPXN_z49.cjs');
 
 var getAvatars = function (avatars, max) {
     var maxAvatars = avatars.slice(0, max);
     var hasHiddenAvatars = maxAvatars.length < avatars.length;
-    return filterAttrs.__spreadArray(filterAttrs.__spreadArray([], maxAvatars, true), (hasHiddenAvatars && max
+    return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], maxAvatars, true), (hasHiddenAvatars && max
         ? [{ initials: "+".concat(avatars.length - max) }]
         : []), true);
 };
 
 /** Use `AvatarGroup` to visually represent a group of users. */
 var AvatarGroup = function (_a) {
-    var title = _a.title, ariaLabel = _a.ariaLabel, href = _a.href, avatars = _a.avatars, onClick = _a.onClick, max = _a.max, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = filterAttrs.__rest(_a, ["title", "ariaLabel", "href", "avatars", "onClick", "max", "size"]);
+    var title = _a.title, ariaLabel = _a.ariaLabel, href = _a.href, avatars = _a.avatars, onClick = _a.onClick, max = _a.max, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = tslib_es6.__rest(_a, ["title", "ariaLabel", "href", "avatars", "onClick", "max", "size"]);
     var id = React.useId();
-    var wrapperAttrs = filterAttrs.__assign({ className: "arc-AvatarGroup" }, filterAttrs.filterAttrs(props));
-    return (React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React.createElement("a", filterAttrs.__assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React.createElement("div", filterAttrs.__assign({}, wrapperAttrs), children); } },
+    var wrapperAttrs = tslib_es6.__assign({ className: "arc-AvatarGroup" }, filterAttrs.filterAttrs(props));
+    return (React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React.createElement("a", tslib_es6.__assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React.createElement("div", tslib_es6.__assign({}, wrapperAttrs), children); } },
         React.createElement("div", { className: "arc-AvatarGroup-avatarContainer" }, getAvatars(avatars, max).map(function (props, i) { return (React.createElement("div", { key: "".concat(id, "-avatar-").concat(i), className: index.classNames("arc-AvatarGroup-avatar", "arc-AvatarGroup-avatar--".concat(size)) },
-            React.createElement(Avatar.Avatar, filterAttrs.__assign({ size: size }, props)))); }))));
+            React.createElement(Avatar.Avatar, tslib_es6.__assign({ size: size }, props)))); }))));
 };
 
 exports.AvatarGroup = AvatarGroup;

package/lib/AvatarGroup/AvatarGroup.mjs

@@ -1,16 +1,18 @@
 'use client';
-import { b as __spreadArray, _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import { b as __spreadArray, _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useId } from 'react';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
-import { A as Avatar } from '../_shared/esm/Avatar-Fb1E5MA9.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { A as Avatar } from '../_shared/esm/Avatar-Cyqjgj85.mjs';
 import { C as ConditionalWrapper } from '../_shared/esm/ConditionalWrapper-WoJxFYwS.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';
 import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
-import '../_shared/esm/Image-Dl8oH1Rn.mjs';
-import '../_shared/esm/Heading-CxHWefi7.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+import '../_shared/esm/Image-LemsonUX.mjs';
+import '../_shared/esm/Heading-B9cbwfoz.mjs';
+import '../_shared/esm/SemanticHeading-1tLcSJYD.mjs';
 
 var getAvatars = function (avatars, max) {
     var maxAvatars = avatars.slice(0, max);

package/lib/AvatarGroup/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup{display:block;position:relative;text-decoration:none;width:-moz-max-content;width:max-content}.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup:focus-visible{border-radius:40px;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup-avatarContainer{align-items:center;display:flex;position:relative}.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup-avatar{border:var(--avatar-border-weight-s) solid var(--avatar-colors-light-border-subtle);border-radius:50%;position:relative}.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup-avatar--s:not(:last-of-type){margin-right:calc((var(--avatar-size-s)/2) - var(--avatar-size-s))}.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup-avatar--m:not(:last-of-type){margin-right:calc((var(--avatar-size-m)/2) - var(--avatar-size-m))}.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup-avatar--l:not(:last-of-type){margin-right:calc((var(--avatar-size-l)/2) - var(--avatar-size-l))}.arc-v12-0-0-beta-22 .arc .arc-AvatarGroup-avatar--xl:not(:last-of-type){margin-right:calc((var(--avatar-size-xl)/2) - var(--avatar-size-xl))}
+.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup{display:block;position:relative;text-decoration:none;width:-moz-max-content;width:max-content}.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup:focus-visible{border-radius:40px;outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup-avatarContainer{align-items:center;display:flex;position:relative}.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup-avatar{border:var(--avatar-border-weight-s) solid var(--avatar-colors-light-border-subtle);border-radius:50%;position:relative}.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup-avatar--s:not(:last-of-type){margin-right:calc((var(--avatar-size-s)/2) - var(--avatar-size-s))}.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup-avatar--m:not(:last-of-type){margin-right:calc((var(--avatar-size-m)/2) - var(--avatar-size-m))}.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup-avatar--l:not(:last-of-type){margin-right:calc((var(--avatar-size-l)/2) - var(--avatar-size-l))}.arc-v12-0-0-beta-24 .arc .arc-AvatarGroup-avatar--xl:not(:last-of-type){margin-right:calc((var(--avatar-size-xl)/2) - var(--avatar-size-xl))}

package/lib/Badge/Badge.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
-var Badge = require('../_shared/cjs/Badge-CQVEPH9v.cjs');
-require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var Badge = require('../_shared/cjs/Badge-DX5PjtiZ.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 require('react');
 require('../_shared/cjs/index-CTlXMLug.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
 
 
 

package/lib/Badge/Badge.mjs

@@ -1,6 +1,7 @@
-export { B as Badge } from '../_shared/esm/Badge-BZ7E0zcQ.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+export { B as Badge } from '../_shared/esm/Badge-C_3PBa0p.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import 'react';
 import '../_shared/esm/index-5C0-U8cc.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';

package/lib/Badge/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-22 .arc .arc-Badge{align-items:center;border-radius:var(--badge-border-radius-s);display:flex;font:var(--sem-type-interface-semi-xs);height:var(--badge-size-s);padding:0 var(--badge-padding-s);width:-moz-fit-content;width:fit-content}.arc-v12-0-0-beta-22 .arc .arc-Badge--stateDefault{background-color:var(--badge-colors-bg-default);color:var(--badge-colors-text-default)}.arc-v12-0-0-beta-22 .arc .arc-Badge--stateError{background-color:var(--badge-colors-bg-error);color:var(--badge-colors-text-error)}.arc-v12-0-0-beta-22 .arc .arc-Badge--stateWarning{background-color:var(--badge-colors-bg-warning);color:var(--badge-colors-text-warning)}.arc-v12-0-0-beta-22 .arc .arc-Badge--stateSuccess{background-color:var(--badge-colors-bg-success);color:var(--badge-colors-text-success)}
+.arc-v12-0-0-beta-24 .arc .arc-Badge{align-items:center;border-radius:var(--badge-border-radius-s);display:flex;font:var(--sem-type-interface-semi-xs);height:var(--badge-size-s);padding:0 var(--badge-padding-s);width:-moz-fit-content;width:fit-content}.arc-v12-0-0-beta-24 .arc .arc-Badge--stateDefault{background-color:var(--badge-colors-bg-default);color:var(--badge-colors-text-default)}.arc-v12-0-0-beta-24 .arc .arc-Badge--stateError{background-color:var(--badge-colors-bg-error);color:var(--badge-colors-text-error)}.arc-v12-0-0-beta-24 .arc .arc-Badge--stateWarning{background-color:var(--badge-colors-bg-warning);color:var(--badge-colors-text-warning)}.arc-v12-0-0-beta-24 .arc .arc-Badge--stateSuccess{background-color:var(--badge-colors-bg-success);color:var(--badge-colors-text-success)}

package/lib/Banner/Banner.cjs

@@ -1,23 +1,25 @@
 '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 TemplateBanner = require('../_shared/cjs/TemplateBanner-CImrJ9ON.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var TemplateBanner = require('../_shared/cjs/TemplateBanner-BlmWfDQD.cjs');
 require('../_shared/cjs/index-CTlXMLug.cjs');
-require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
-require('../_shared/cjs/Box-COPXU1Jf.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+require('../_shared/cjs/Box-Va2g7Gdp.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/Heading-BEMSkLYR.cjs');
+require('../_shared/cjs/Heading-CoiZ2EmD.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
-require('../_shared/cjs/GridRow-BW2ZGtND.cjs');
-require('../_shared/cjs/BannerImage-kdAKagG-.cjs');
-require('../_shared/cjs/Image-C1pcrfnN.cjs');
-require('../_shared/cjs/Visible-vchtZSfm.cjs');
+require('../_shared/cjs/SemanticHeading-BPXN_z49.cjs');
+require('../_shared/cjs/GridRow-l_SePUqV.cjs');
+require('../_shared/cjs/BannerImage-qK8-w9rt.cjs');
+require('../_shared/cjs/Image-CSe0KpDN.cjs');
+require('../_shared/cjs/Visible-DZWtZ5qG.cjs');
 
 var Banner = function (_a) {
-    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, props = filterAttrs.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
-    return (React.createElement(TemplateBanner.TemplateBanner, filterAttrs.__assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, filterAttrs.filterAttrs(props)), children));
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, props = tslib_es6.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
+    return (React.createElement(TemplateBanner.TemplateBanner, tslib_es6.__assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, filterAttrs.filterAttrs(props)), children));
 };
 
 exports.Banner = Banner;