@arc-ui/community-components 3.11.0 → 3.13.0

package/lib/index.d.cts

@@ -673,6 +673,10 @@ interface ActionTileProps {
      * Heading text (required)
      */
     heading: string;
+    /**
+     * Whether to use the compact tile variant
+     */
+    isCompact?: boolean;
     /**
      * Whether the tile is in active/selected state
      */
@@ -691,6 +695,8 @@ interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     href?: string;
     /** Whether to show the arrow icon. Defaults to true */
     showIcon?: boolean;
+    /** Visual tone variant. Defaults to brand */
+    tone?: "brand" | "neutral";
 }
 
 declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;

package/lib/index.d.mts

@@ -673,6 +673,10 @@ interface ActionTileProps {
      * Heading text (required)
      */
     heading: string;
+    /**
+     * Whether to use the compact tile variant
+     */
+    isCompact?: boolean;
     /**
      * Whether the tile is in active/selected state
      */
@@ -691,6 +695,8 @@ interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     href?: string;
     /** Whether to show the arrow icon. Defaults to true */
     showIcon?: boolean;
+    /** Visual tone variant. Defaults to brand */
+    tone?: "brand" | "neutral";
 }
 
 declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;

package/lib/index.mjs

@@ -274,7 +274,7 @@ var HeaderBarNotification = function (_a) {
             localStorage.setItem(localStorageId, "true");
         setShowNotification(false);
     };
-    return (React.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, className: classNames(styles$v.popupNotification, (_b = {}, _b[styles$v.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles$v[s]; })), content: React.createElement("div", { className: styles$v.container },
+    return (React.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, onOpenAutoFocus: function (e) { return e.preventDefault(); }, className: classNames(styles$v.popupNotification, (_b = {}, _b[styles$v.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles$v[s]; })), content: React.createElement("div", { className: styles$v.container },
             React.createElement("div", { className: styles$v.content },
                 (image || icon) && (React.createElement("div", { className: styles$v.image },
                     image && (React.createElement(Image$2, { src: image, alt: heading, fit: "cover", width: 55 })),
@@ -1009,7 +1009,7 @@ var SectionHeading = function (_a) {
 
 /**
  * Do not edit directly
- * Generated on Thu, 21 May 2026 15:46:02 GMT
+ * Generated on Thu, 23 Jul 2026 08:25:27 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -4016,33 +4016,38 @@ var ContentInfoWidget = function (_a) {
             React.createElement(Text, { size: "xs", tone: "muted" }, text))));
 };
 
-var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
+var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--compact":"ActionTile-module_action-tile--compact__wq5Aa","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
 
 var ActionTile = function (_a) {
     var _b, _c;
-    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isActive, isActive = _d === void 0 ? false : _d, onClick = _a.onClick, props = __rest(_a, ["icon", "activeIcon", "heading", "isActive", "onClick"]);
+    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isCompact, isCompact = _d === void 0 ? false : _d, _e = _a.isActive, isActive = _e === void 0 ? false : _e, onClick = _a.onClick, props = __rest(_a, ["icon", "activeIcon", "heading", "isCompact", "isActive", "onClick"]);
     var displayIcon = isActive && activeIcon ? activeIcon : icon;
+    var iconSize = isCompact ? 40 : 48;
     var content = (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames(styles$b["action-tile-content"], (_b = {},
                 _b[styles$b["action-tile-content--without-icon"]] = !displayIcon,
                 _b)) },
             displayIcon && (React.createElement("div", { className: styles$b["action-tile-icon"] },
-                React.createElement(Icon, { icon: displayIcon, size: 48 }))),
+                React.createElement(Icon, { icon: displayIcon, size: iconSize }))),
             React.createElement("span", { className: styles$b["action-tile-heading"] }, heading)),
         isActive && (React.createElement("div", { className: styles$b["action-tile-tick"] },
             React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
     return (React.createElement("button", __assign({ type: "button", className: classNames(styles$b["action-tile"], (_c = {},
             _c[styles$b["action-tile--active"]] = isActive,
+            _c[styles$b["action-tile--compact"]] = isCompact,
             _c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 
-var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
+var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf","link-tile--neutral":"LinkTile-module_link-tile--neutral__T2z5x"};
 
 var LinkTile = function (_a) {
-    var text = _a.text, href = _a.href, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "className"]);
+    var _b;
+    var text = _a.text, href = _a.href, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.tone, tone = _d === void 0 ? "brand" : _d, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "tone", "className"]);
     var Component = href ? "a" : "div";
     var linkProps = href ? { href: href } : {};
-    return (React.createElement(Component, __assign({ className: classNames(styles$a["link-tile"], className) }, linkProps, props), text && (React.createElement("div", { className: styles$a["link-tile-content"] },
+    return (React.createElement(Component, __assign({ className: classNames(styles$a["link-tile"], (_b = {},
+            _b[styles$a["link-tile--neutral"]] = tone === "neutral",
+            _b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$a["link-tile-content"] },
         React.createElement("span", { className: styles$a["link-tile-text"] }, text),
         showIcon && (React.createElement("span", { className: styles$a["link-tile-icon"] },
             React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));