@arc-ui/community-components 3.11.0 → 3.12.0

package/.turbo/turbo-build.log

@@ -1,23 +1,23 @@
 
-> @arc-ui/community-components@3.11.0 build /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.12.0 build /builds/enterprise/frontend/arc-community/packages/components
 > rimraf lib dist && rollup -c && generate-subpath-css && pnpm run build:clean
 
-Browserslist: browsers data (caniuse-lite) is 10 months old. Please run:
+Browserslist: browsers data (caniuse-lite) is 11 months old. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
 src/index.ts → lib/index.cjs, lib/index.mjs...
-created lib/index.cjs, lib/index.mjs in 7.8s
+created lib/index.cjs, lib/index.mjs in 13.9s
 
 ./lib/types/index.d.ts → lib/index.d.mts, lib/index.d.cts...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @arc-ui/components/NavigationHeader (imported by "lib/types/components/HeaderBarNotification/HeaderBarNotification.d.ts")
 @arc-ui/components/MediaCard (imported by "lib/types/components/ArticleCarousel/ArticleCarousel.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
-@arc-ui/components/Download (imported by "lib/types/components/DownloadList/DownloadList.d.ts")
+@arc-ui/components/Avatar (imported by "lib/types/components/Author/Author.d.ts")
 @arc-ui/components/Heading (imported by "lib/types/components/CopyLead/CopyLead.d.ts", "lib/types/components/FeaturePost/FeaturePost.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/Summary/Summary.d.ts", "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts", "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/ArticleSidebar/types/text-section.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.d.ts", "lib/types/components/ArticleSidebar/types/share.d.ts" and "lib/types/components/PartnerBrandLogos/components/PartnerLogoSubgroup/PartnerLogoSubgroup.d.ts")
 @arc-ui/components/VideoPlayer (imported by "lib/types/components/CopyLead/CopyLead.d.ts" and "lib/types/components/FeaturePost/FeaturePost.d.ts")
-@arc-ui/components/Avatar (imported by "lib/types/components/Author/Author.d.ts")
+@arc-ui/components/Download (imported by "lib/types/components/DownloadList/DownloadList.d.ts")
 @arc-ui/components/ButtonV2 (imported by "lib/types/components/Highlights/Highlights.d.ts" and "lib/types/components/PromoListing/PromoListing.d.ts")
 @arc-ui/components/ImpactCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts")
 @arc-ui/components/InformationCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts" and "lib/types/components/ProductNavigation/types/product-list.d.ts")
@@ -31,17 +31,17 @@ Browserslist: browsers data (caniuse-lite) is 10 months old. Please run:
 @arc-ui/components/AppButton (imported by "lib/types/components/FeaturePost/types/feature-post-app-button-footer.d.ts")
 react-player/types (imported by "lib/types/internal/VideoCardPlayer/VideoCardPlayer.d.ts" and "lib/types/internal/VideoCardPlayer/types/player-props.d.ts")
 @arc-ui/components/Visible (imported by "lib/types/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.d.ts")
-created lib/index.d.mts, lib/index.d.cts in 212ms
+created lib/index.d.mts, lib/index.d.cts in 406ms
 
 ./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
-created lib in 9.1s
+created lib in 20s
 
 ./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
-created lib in 8s
-Browserslist: browsers data (caniuse-lite) is 10 months old. Please run:
+created lib in 17s
+Browserslist: browsers data (caniuse-lite) is 11 months old. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
-> @arc-ui/community-components@3.11.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.12.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
 > rimraf ./lib/types ./lib/styles.js ./lib/index.js ./lib/index.js.map
 

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @arc-ui/community-components
 
+## 3.12.0
+
+### Minor Changes
+
+- 0cf14aa: Add a neutral tone prop variant to LinkTile.
+- 3563378: Add an isCompact prop variant to ActionTile.
+- 3563378: Update ActionTile to use isCompact prop
+
 ## 3.11.0
 
 ### Minor Changes

package/lib/ActionTile/ActionTile.cjs

@@ -6,7 +6,7 @@ var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var Icon = require('@arc-ui/components/Icon');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 
-var styles = {"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 = {"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"};
 
 /**
  * Do not edit directly
@@ -18,19 +18,21 @@ const BtIconTickAlt2Px =
 
 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 = tslib_es6.__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 = tslib_es6.__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: index.classNames(styles["action-tile-content"], (_b = {},
                 _b[styles["action-tile-content--without-icon"]] = !displayIcon,
                 _b)) },
             displayIcon && (React.createElement("div", { className: styles["action-tile-icon"] },
-                React.createElement(Icon.Icon, { icon: displayIcon, size: 48 }))),
+                React.createElement(Icon.Icon, { icon: displayIcon, size: iconSize }))),
             React.createElement("span", { className: styles["action-tile-heading"] }, heading)),
         isActive && (React.createElement("div", { className: styles["action-tile-tick"] },
             React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
     return (React.createElement("button", tslib_es6.__assign({ type: "button", className: index.classNames(styles["action-tile"], (_c = {},
             _c[styles["action-tile--active"]] = isActive,
+            _c[styles["action-tile--compact"]] = isCompact,
             _c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs.filterAttrs(props)), content));
 };
 

package/lib/ActionTile/ActionTile.mjs

@@ -4,7 +4,7 @@ import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { Icon } from '@arc-ui/components/Icon';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 
-var styles = {"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 = {"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"};
 
 /**
  * Do not edit directly
@@ -16,19 +16,21 @@ const BtIconTickAlt2Px =
 
 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__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: classNames(styles["action-tile-content"], (_b = {},
                 _b[styles["action-tile-content--without-icon"]] = !displayIcon,
                 _b)) },
             displayIcon && (React__default.createElement("div", { className: styles["action-tile-icon"] },
-                React__default.createElement(Icon, { icon: displayIcon, size: 48 }))),
+                React__default.createElement(Icon, { icon: displayIcon, size: iconSize }))),
             React__default.createElement("span", { className: styles["action-tile-heading"] }, heading)),
         isActive && (React__default.createElement("div", { className: styles["action-tile-tick"] },
             React__default.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
     return (React__default.createElement("button", __assign({ type: "button", className: classNames(styles["action-tile"], (_c = {},
             _c[styles["action-tile--active"]] = isActive,
+            _c[styles["action-tile--compact"]] = isCompact,
             _c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 

package/lib/ActionTile/styles.css

@@ -1 +1 @@
-.ActionTile-module_action-tile__JPwGb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;min-width:230px;height:164px;min-height:132px;padding:var(--sem-space-padding-110);gap:var(--sem-space-padding-70);border-radius:var(--sem-border-radius-xl);border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;font:inherit;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;transition:border-color 0.2s ease,box-shadow 0.2s ease;position:relative;isolation:isolate;overflow:visible}.ActionTile-module_action-tile-content__ZkgHc{display:flex;flex-direction:column;gap:var(--sem-space-padding-60);flex:1;align-items:flex-start;align-self:stretch}.ActionTile-module_action-tile-content--without-icon__7F5xj{justify-content:center}.ActionTile-module_action-tile-icon__PY1EN{display:flex;align-items:center;justify-content:flex-start;width:48px;height:48px;color:var(--sem-color-fg-secondary-light-default);transition:color 0.2s ease}.ActionTile-module_action-tile-heading__Uxdu9{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-125);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-m);letter-spacing:0;color:var(--sem-color-fg-secondary-light-default);margin:0;transition:color 0.2s ease;width:100%;word-wrap:break-word;word-wrap:break-word;align-self:stretch;flex-grow:1;text-align:left}.ActionTile-module_action-tile-content--without-icon__7F5xj .ActionTile-module_action-tile-heading__Uxdu9{flex-grow:0}.ActionTile-module_action-tile--active__-aWze{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:none}.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile-tick__vhsJE{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--sem-border-radius-l);background:var(--sem-color-fg-primary-light-minimal);color:var(--sem-color-fg-secondary-light-alt);flex-shrink:0;position:absolute;top:-4px;right:-4px;z-index:1}.ActionTile-module_action-tile__JPwGb:hover{border-color:var(--button-v2-colors-light-text-hover);box-shadow:0 0 0 1px var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile--active__-aWze:hover{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:0 0 0 1px var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile__JPwGb:focus-visible{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}
+.ActionTile-module_action-tile__JPwGb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;min-width:230px;height:164px;min-height:132px;padding:var(--sem-space-padding-110);gap:var(--sem-space-padding-70);border-radius:var(--sem-border-radius-xl);border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;font:inherit;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;transition:border-color 0.2s ease,box-shadow 0.2s ease;position:relative;isolation:isolate;overflow:visible}.ActionTile-module_action-tile-content__ZkgHc{display:flex;flex-direction:column;gap:var(--sem-space-padding-60);flex:1;align-items:flex-start;align-self:stretch}.ActionTile-module_action-tile-content--without-icon__7F5xj{justify-content:center}.ActionTile-module_action-tile-icon__PY1EN{display:flex;align-items:center;justify-content:flex-start;width:48px;height:48px;color:var(--sem-color-fg-secondary-light-default);transition:color 0.2s ease}.ActionTile-module_action-tile-heading__Uxdu9{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-125);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-m);letter-spacing:0;color:var(--sem-color-fg-secondary-light-default);margin:0;transition:color 0.2s ease;width:100%;word-wrap:break-word;word-wrap:break-word;align-self:stretch;flex-grow:1;text-align:left}.ActionTile-module_action-tile--compact__wq5Aa .ActionTile-module_action-tile-icon__PY1EN{width:40px;height:40px}.ActionTile-module_action-tile--compact__wq5Aa .ActionTile-module_action-tile-heading__Uxdu9{font-size:16px;line-height:24px}.ActionTile-module_action-tile-content--without-icon__7F5xj .ActionTile-module_action-tile-heading__Uxdu9{flex-grow:0}.ActionTile-module_action-tile--active__-aWze{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:none}.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile-tick__vhsJE{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--sem-border-radius-l);background:var(--sem-color-fg-primary-light-minimal);color:var(--sem-color-fg-secondary-light-alt);flex-shrink:0;position:absolute;top:-4px;right:-4px;z-index:1}.ActionTile-module_action-tile__JPwGb:hover{border-color:var(--button-v2-colors-light-text-hover);box-shadow:0 0 0 1px var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile--active__-aWze:hover{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:0 0 0 1px var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile__JPwGb:focus-visible{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}

package/lib/LinkTile/LinkTile.cjs

@@ -6,13 +6,16 @@ var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var Icon = require('@arc-ui/components/Icon');
 var BtIconArrowAltRight = require('../_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs');
 
-var styles = {"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 = {"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 = tslib_es6.__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 = tslib_es6.__rest(_a, ["text", "href", "showIcon", "tone", "className"]);
     var Component = href ? "a" : "div";
     var linkProps = href ? { href: href } : {};
-    return (React.createElement(Component, tslib_es6.__assign({ className: index.classNames(styles["link-tile"], className) }, linkProps, props), text && (React.createElement("div", { className: styles["link-tile-content"] },
+    return (React.createElement(Component, tslib_es6.__assign({ className: index.classNames(styles["link-tile"], (_b = {},
+            _b[styles["link-tile--neutral"]] = tone === "neutral",
+            _b), className) }, linkProps, props), text && (React.createElement("div", { className: styles["link-tile-content"] },
         React.createElement("span", { className: styles["link-tile-text"] }, text),
         showIcon && (React.createElement("span", { className: styles["link-tile-icon"] },
             React.createElement(Icon.Icon, { icon: BtIconArrowAltRight.BtIconArrowAltRight, size: 32 })))))));

package/lib/LinkTile/LinkTile.mjs

@@ -4,13 +4,16 @@ import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { Icon } from '@arc-ui/components/Icon';
 import { B as BtIconArrowAltRight } from '../_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs';
 
-var styles = {"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 = {"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__default.createElement(Component, __assign({ className: classNames(styles["link-tile"], className) }, linkProps, props), text && (React__default.createElement("div", { className: styles["link-tile-content"] },
+    return (React__default.createElement(Component, __assign({ className: classNames(styles["link-tile"], (_b = {},
+            _b[styles["link-tile--neutral"]] = tone === "neutral",
+            _b), className) }, linkProps, props), text && (React__default.createElement("div", { className: styles["link-tile-content"] },
         React__default.createElement("span", { className: styles["link-tile-text"] }, text),
         showIcon && (React__default.createElement("span", { className: styles["link-tile-icon"] },
             React__default.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));

package/lib/LinkTile/styles.css

@@ -1 +1 @@
-.LinkTile-module_link-tile__xVUP3{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:306px;height:144px;min-height:144px;max-height:144px;border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);border-radius:var(--sem-border-radius-xl);padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;transition:border-color 0.2s ease;flex:none;align-self:stretch;position:relative;overflow:hidden;flex-grow:1}.LinkTile-module_link-tile-content__H-QN8{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--sem-space-padding-40);width:100%;min-height:48px;flex:none;align-self:stretch}.LinkTile-module_link-tile-icon__kTMfH{display:flex;width:32px;height:32px;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:none;flex-shrink:0;order:1}.LinkTile-module_link-tile-text__0K6zf{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-100);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-xs);letter-spacing:0;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:1;order:0}.LinkTile-module_link-tile-icon__kTMfH svg,.LinkTile-module_link-tile__xVUP3 .LinkTile-module_link-tile-content__H-QN8 svg{color:inherit;transition:color 0.2s ease}.LinkTile-module_link-tile__xVUP3[\:not-has\(svg\)]{padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:not(:has(svg)){padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:active{border-radius:var(--sem-border-radius-xl)}@media (min-width:1024px){.LinkTile-module_link-tile__xVUP3{padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110)}}.LinkTile-module_link-tile__xVUP3:hover{border-color:transparent;box-shadow:inset 0 0 0 2px var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-text__0K6zf{color:var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-icon__kTMfH{color:var(--button-v2-colors-light-text-hover)}
+.LinkTile-module_link-tile__xVUP3{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:306px;height:144px;min-height:144px;max-height:144px;border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);border-radius:var(--sem-border-radius-xl);padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;transition:border-color 0.2s ease;flex:none;align-self:stretch;position:relative;overflow:hidden;flex-grow:1}.LinkTile-module_link-tile-content__H-QN8{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--sem-space-padding-40);width:100%;min-height:48px;flex:none;align-self:stretch}.LinkTile-module_link-tile-icon__kTMfH{display:flex;width:32px;height:32px;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:none;flex-shrink:0;order:1}.LinkTile-module_link-tile-text__0K6zf{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-100);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-xs);letter-spacing:0;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:1;order:0}.LinkTile-module_link-tile--neutral__T2z5x .LinkTile-module_link-tile-text__0K6zf,.LinkTile-module_link-tile--neutral__T2z5x .LinkTile-module_link-tile-icon__kTMfH{color:var(--sem-color-fg-secondary-light-default)}.LinkTile-module_link-tile-icon__kTMfH svg,.LinkTile-module_link-tile__xVUP3 .LinkTile-module_link-tile-content__H-QN8 svg{color:inherit;transition:color 0.2s ease}.LinkTile-module_link-tile__xVUP3[\:not-has\(svg\)]{padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:not(:has(svg)){padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:active{border-radius:var(--sem-border-radius-xl)}@media (min-width:1024px){.LinkTile-module_link-tile__xVUP3{padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110)}}.LinkTile-module_link-tile__xVUP3:hover{border-color:transparent;box-shadow:inset 0 0 0 2px var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-text__0K6zf{color:var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-icon__kTMfH{color:var(--button-v2-colors-light-text-hover)}

package/lib/index.cjs

@@ -4018,33 +4018,38 @@ var ContentInfoWidget = function (_a) {
             React.createElement(Text.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, { icon: displayIcon, size: 48 }))),
+                React.createElement(Icon.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, { 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, { icon: BtIconArrowAltRight, size: 32 })))))));