@arc-ui/community-components 3.9.0 → 3.11.0

package/.turbo/turbo-build.log

@@ -1,21 +1,22 @@
 
-> @arc-ui/community-components@3.9.0 build /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.11.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 9 months old. Please run:
+Browserslist: browsers data (caniuse-lite) is 10 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 5.1s
+created lib/index.cjs, lib/index.mjs in 7.8s
 
 ./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/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/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/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")
@@ -30,17 +31,17 @@ Browserslist: browsers data (caniuse-lite) is 9 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 130ms
+created lib/index.d.mts, lib/index.d.cts in 212ms
 
-./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/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 5.9s
+./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
 
-./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/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 5.1s
-Browserslist: browsers data (caniuse-lite) is 9 months old. Please run:
+./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:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
-> @arc-ui/community-components@3.9.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.11.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,25 @@
 # @arc-ui/community-components
 
+## 3.11.0
+
+### Minor Changes
+
+- e30e127: New abandoned cart notification
+
+## 3.10.0
+
+### Minor Changes
+
+- 7a1af63: Update storybook to show and hide icon
+- 7d5d2ae: New abandoned cart notification
+- 7a1af63: re add filterAttrs
+- 7a1af63: use classNames utility to conditionally render title class
+- 7a1af63: Updated ActionTile to behave more like a native button, with improved keyboard activation, visible focus styling, and full-width layout while preserving a 230px minimum width. The component props were tightened by removing arbitrary attribute forwarding and custom className support, and tests were added for keyboard interaction and sizing. Storybook now wraps the tile in a 230px container to reflect the intended layout.
+
+### Patch Changes
+
+- b05ab9d: fix: fixed storybook version selector
+
 ## 3.9.0
 
 ### Minor Changes

package/generate-versions.js

@@ -1,5 +1,6 @@
 import path from "node:path";
 import fs from "node:fs";
+import { execSync } from "node:child_process";
 
 import semverRsort from "semver/functions/rsort.js";
 
@@ -10,10 +11,56 @@ let contents = changelog.toString().split("\n");
 const regexp =
   /^##\s(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/g;
 
+// We extract versions from the changelog rather than relying solely on git tags
+// because some versions don't have deployments. This keeps the data true to our changelog.
 const versions = contents
   .filter((line) => line && regexp.test(line))
   .map((v) => v.replace("## ", "v"));
 
+const sorted = semverRsort(versions);
+
+// Build version-to-date mapping from git tags
+const dateMap = {};
+try {
+  const tags = execSync("git tag --sort=-creatordate", { encoding: "utf-8" })
+    .trim()
+    .split("\n")
+    .filter(Boolean);
+
+  for (const tag of tags) {
+    try {
+      // For each tag (e.g. "2026-05-22"), retrieve the CHANGELOG.md as it existed
+      // at that tag, find the first version heading (## X.Y.Z), and map that
+      // version to the tag name — giving us a version-to-release-date mapping.
+      const changelogAtTag = execSync(
+        `git show ${tag}:packages/components/CHANGELOG.md`,
+        { encoding: "utf-8" },
+      );
+      const firstVersion = changelogAtTag
+        .split("\n")
+        .find((line) => /^## \d/.test(line));
+      if (firstVersion) {
+        const version = "v" + firstVersion.replace("## ", "");
+        dateMap[version] = tag;
+      }
+    } catch {
+      // tag may not have the file, skip
+    }
+  }
+} catch {
+  console.warn("Warning: could not read git tags for version-date mapping");
+}
+
+// Output as array of { version, date } objects
+const versionsWithDates = sorted.map((version) => ({
+  version,
+  date: dateMap[version] || null,
+}));
+
 const versionsPath = path.join("./versions.json");
 
-fs.writeFileSync(versionsPath, JSON.stringify(semverRsort(versions)));
+fs.writeFileSync(versionsPath, JSON.stringify(versionsWithDates));
+
+console.log(versionsWithDates);
+
+console.log(`versions.json written with ${versionsWithDates.length} versions`);

package/lib/ActionTile/ActionTile.cjs

@@ -3,10 +3,10 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
-var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.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-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--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
 
 /**
  * Do not edit directly
@@ -17,20 +17,21 @@ const BtIconTickAlt2Px =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m13.5 21.914-4.707-4.707a1 1 0 0 1 0-1.414 1.024 1.024 0 0 1 1.414 0l3.293 3.293 8.293-8.293a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
 
 var ActionTile = function (_a) {
-    var _b;
-    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, className = _a.className, props = tslib_es6.__rest(_a, ["icon", "activeIcon", "heading", "isActive", "onClick", "className"]);
-    var tileClasses = index.classNames(styles["action-tile"], (_b = {},
-        _b[styles["action-tile--active"]] = isActive,
-        _b), className);
+    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 displayIcon = isActive && activeIcon ? activeIcon : icon;
     var content = (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles["action-tile-content"] },
+        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("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: tileClasses, onClick: onClick, "aria-pressed": isActive }, filterAttrs.filterAttrs(props)), content));
+    return (React.createElement("button", tslib_es6.__assign({ type: "button", className: index.classNames(styles["action-tile"], (_c = {},
+            _c[styles["action-tile--active"]] = isActive,
+            _c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs.filterAttrs(props)), content));
 };
 
 exports.ActionTile = ActionTile;

package/lib/ActionTile/ActionTile.mjs

@@ -1,10 +1,10 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
-import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.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-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--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
 
 /**
  * Do not edit directly
@@ -15,20 +15,21 @@ const BtIconTickAlt2Px =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m13.5 21.914-4.707-4.707a1 1 0 0 1 0-1.414 1.024 1.024 0 0 1 1.414 0l3.293 3.293 8.293-8.293a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
 
 var ActionTile = function (_a) {
-    var _b;
-    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, className = _a.className, props = __rest(_a, ["icon", "activeIcon", "heading", "isActive", "onClick", "className"]);
-    var tileClasses = classNames(styles["action-tile"], (_b = {},
-        _b[styles["action-tile--active"]] = isActive,
-        _b), className);
+    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 displayIcon = isActive && activeIcon ? activeIcon : icon;
     var content = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: styles["action-tile-content"] },
+        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("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: tileClasses, onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
+    return (React__default.createElement("button", __assign({ type: "button", className: classNames(styles["action-tile"], (_c = {},
+            _c[styles["action-tile--active"]] = isActive,
+            _c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 
 export { ActionTile };

package/lib/ActionTile/styles.css

@@ -1 +1 @@
-.ActionTile-module_action-tile__JPwGb{box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;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;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-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}.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{-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)}

package/lib/HeaderBarNotification/HeaderBarNotification.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
+var NavigationHeader = require('@arc-ui/components/NavigationHeader');
+var Popover = require('@arc-ui/components/Popover');
+var Icon = require('@arc-ui/components/Icon');
+var Image = require('@arc-ui/components/Image');
+var Heading = require('@arc-ui/components/Heading');
+var Text = require('@arc-ui/components/Text');
+var Tooltip = require('@arc-ui/components/Tooltip');
+var ButtonV2 = require('@arc-ui/components/ButtonV2');
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCrossAlt =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
+
+var styles = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
+
+var HeaderBarNotification = function (_a) {
+    var _b;
+    var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _c = _a.isPersistant, isPersistant = _c === void 0 ? false : _c, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, showAtSize = _a.showAtSize, props = tslib_es6.__rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button", "showAtSize"]);
+    var _d = React.useState(isPersistant), showNotification = _d[0], setShowNotification = _d[1];
+    var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
+    // Check to see if the notication has been hidden or not and show it if so
+    React.useEffect(function () {
+        if (typeof window !== "undefined" && !isPersistant) {
+            setShowNotification(!localStorage.getItem(localStorageId));
+        }
+    }, []);
+    // Handle the closure of the notification, store it in the session so we don't keep showing it.
+    var handleClosePopup = function () {
+        if (!isPersistant)
+            localStorage.setItem(localStorageId, "true");
+        setShowNotification(false);
+    };
+    return (React.createElement(Popover.Popover, tslib_es6.__assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, className: index.classNames(styles.popupNotification, (_b = {}, _b[styles.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles[s]; })), content: React.createElement("div", { className: styles.container },
+            React.createElement("div", { className: styles.content },
+                (image || icon) && (React.createElement("div", { className: styles.image },
+                    image && (React.createElement(Image.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
+                    icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
+                React.createElement("div", { className: styles.details },
+                    tagline && (React.createElement(Text.Text, { size: "m", tone: "muted" }, tagline)),
+                    React.createElement(Heading.Heading, { size: "s", level: "3" }, heading),
+                    children)),
+            button && (React.createElement(ButtonV2.ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
+            React.createElement("div", { className: styles.closeButtonContainer },
+                React.createElement(Tooltip.Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
+                    React.createElement(ButtonV2.ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs.filterAttrs(props)),
+        React.createElement(NavigationHeader.NavigationHeaderAction, tslib_es6.__assign({ isAttention: true }, headerActionProps))));
+};
+
+exports.HeaderBarNotification = HeaderBarNotification;

package/lib/HeaderBarNotification/HeaderBarNotification.mjs

@@ -0,0 +1,57 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
+import React__default, { useState, useEffect } from 'react';
+import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
+import { NavigationHeaderAction } from '@arc-ui/components/NavigationHeader';
+import { Popover } from '@arc-ui/components/Popover';
+import { Icon } from '@arc-ui/components/Icon';
+import { Image } from '@arc-ui/components/Image';
+import { Heading } from '@arc-ui/components/Heading';
+import { Text } from '@arc-ui/components/Text';
+import { Tooltip } from '@arc-ui/components/Tooltip';
+import { ButtonV2 } from '@arc-ui/components/ButtonV2';
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCrossAlt =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
+
+var styles = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
+
+var HeaderBarNotification = function (_a) {
+    var _b;
+    var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _c = _a.isPersistant, isPersistant = _c === void 0 ? false : _c, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, showAtSize = _a.showAtSize, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button", "showAtSize"]);
+    var _d = useState(isPersistant), showNotification = _d[0], setShowNotification = _d[1];
+    var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
+    // Check to see if the notication has been hidden or not and show it if so
+    useEffect(function () {
+        if (typeof window !== "undefined" && !isPersistant) {
+            setShowNotification(!localStorage.getItem(localStorageId));
+        }
+    }, []);
+    // Handle the closure of the notification, store it in the session so we don't keep showing it.
+    var handleClosePopup = function () {
+        if (!isPersistant)
+            localStorage.setItem(localStorageId, "true");
+        setShowNotification(false);
+    };
+    return (React__default.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, className: classNames(styles.popupNotification, (_b = {}, _b[styles.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles[s]; })), content: React__default.createElement("div", { className: styles.container },
+            React__default.createElement("div", { className: styles.content },
+                (image || icon) && (React__default.createElement("div", { className: styles.image },
+                    image && (React__default.createElement(Image, { src: image, alt: heading, fit: "cover", width: 55 })),
+                    icon && React__default.createElement(Icon, { icon: icon, size: 35 }))),
+                React__default.createElement("div", { className: styles.details },
+                    tagline && (React__default.createElement(Text, { size: "m", tone: "muted" }, tagline)),
+                    React__default.createElement(Heading, { size: "s", level: "3" }, heading),
+                    children)),
+            button && (React__default.createElement(ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
+            React__default.createElement("div", { className: styles.closeButtonContainer },
+                React__default.createElement(Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
+                    React__default.createElement(ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
+        React__default.createElement(NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
+};
+
+export { HeaderBarNotification };

package/lib/HeaderBarNotification/styles.css

@@ -0,0 +1 @@
+.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_hiddenByDefault__JHbUy{display:none}.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_s__HofMM{display:block}@media (min-width:768px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_s__HofMM{display:none}}@media (min-width:768px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_m__ZUdjq{display:block}}@media (min-width:1024px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_m__ZUdjq{display:none}}@media (min-width:1024px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_l__wlZ1Z{display:block}}@media (min-width:1280px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_l__wlZ1Z{display:none}}@media (min-width:1280px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_xl__z7DBP{display:block}}.HeaderBarNotification-module_container__18nau{display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border-radius:var(--sem-border-radius-m)}@media (min-width:768px){.HeaderBarNotification-module_container__18nau{flex-direction:row;align-items:center}}.HeaderBarNotification-module_content__SUo-l{display:flex;align-items:center;gap:16px;width:100%;min-width:55%;max-width:70vw;margin-right:24px}@media (min-width:768px){.HeaderBarNotification-module_content__SUo-l{width:400px;margin-right:16px}}.HeaderBarNotification-module_image__uV-nD{flex-shrink:0}.HeaderBarNotification-module_details__S5Rrx{display:flex;flex-direction:column;width:100%}.HeaderBarNotification-module_closeButtonContainer__b1UDI{position:absolute;right:20px;top:20px;margin:0}@media (min-width:768px){.HeaderBarNotification-module_closeButtonContainer__b1UDI{position:relative;right:0;top:0}}

package/lib/ProductNavigation/ProductNavigation.cjs

@@ -67,23 +67,23 @@ var ProductNavigation = function (_a) {
             return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
                 React.createElement(InformationCard.InformationCard, tslib_es6.__assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
         })),
-        React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-        React.createElement("div", { style: { display: "flex" } },
-            !hideButton && !hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
-                    ? "Show more"
-                    : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
-            hideButton ||
-                (displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: index.classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
-                    React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
-            React.createElement(VisuallyHidden.VisuallyHidden, null,
-                React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
-                    React.createElement("p", null,
-                        "Total products listed ",
-                        displayList.length,
-                        ". Total products hidden",
-                        " ",
-                        productList.length - displayList.length,
-                        "."))))));
+        !hideButton &&
+            !(defaultExpanded && displayList.length === productList.length) && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+            React.createElement("div", { style: { display: "flex" } },
+                !hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
+                        ? "Show more"
+                        : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
+                displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: index.classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
+                    React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
+                React.createElement(VisuallyHidden.VisuallyHidden, null,
+                    React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
+                        React.createElement("p", null,
+                            "Total products listed ",
+                            displayList.length,
+                            ". Total products hidden ",
+                            productList.length - displayList.length,
+                            "."))))))));
 };
 
 exports.ProductNavigation = ProductNavigation;

package/lib/ProductNavigation/ProductNavigation.mjs

@@ -65,23 +65,23 @@ var ProductNavigation = function (_a) {
             return (React__default.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
                 React__default.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
         })),
-        React__default.createElement(VerticalSpace, { size: "40" }),
-        React__default.createElement("div", { style: { display: "flex" } },
-            !hideButton && !hideLessButton && (React__default.createElement(ButtonV2, { label: displayList.length < productList.length
-                    ? "Show more"
-                    : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
-            hideButton ||
-                (displaySkipButton && displayList.length > cardsToDisplay && (React__default.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
-                    React__default.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
-            React__default.createElement(VisuallyHidden, null,
-                React__default.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
-                    React__default.createElement("p", null,
-                        "Total products listed ",
-                        displayList.length,
-                        ". Total products hidden",
-                        " ",
-                        productList.length - displayList.length,
-                        "."))))));
+        !hideButton &&
+            !(defaultExpanded && displayList.length === productList.length) && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(VerticalSpace, { size: "40" }),
+            React__default.createElement("div", { style: { display: "flex" } },
+                !hideLessButton && (React__default.createElement(ButtonV2, { label: displayList.length < productList.length
+                        ? "Show more"
+                        : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
+                displaySkipButton && displayList.length > cardsToDisplay && (React__default.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
+                    React__default.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
+                React__default.createElement(VisuallyHidden, null,
+                    React__default.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
+                        React__default.createElement("p", null,
+                            "Total products listed ",
+                            displayList.length,
+                            ". Total products hidden ",
+                            productList.length - displayList.length,
+                            "."))))))));
 };
 
 export { ProductNavigation };