@arc-ui/community-components 3.10.0 → 3.11.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @arc-ui/community-components@3.10.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 10 months old. Please run:
@@ -7,7 +7,7 @@ Browserslist: browsers data (caniuse-lite) is 10 months old. Please run:
   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 8.2s
+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
@@ -15,10 +15,10 @@ Browserslist: browsers data (caniuse-lite) is 10 months old. Please run:
 @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/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/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/share.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.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/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")
 @arc-ui/components/TypographyCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.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 203ms
+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/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 7.4s
+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/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 6.2s
+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.10.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,11 @@
 # @arc-ui/community-components
 
+## 3.11.0
+
+### Minor Changes
+
+- e30e127: New abandoned cart notification
+
 ## 3.10.0
 
 ### Minor Changes

package/lib/HeaderBarNotification/HeaderBarNotification.cjs

@@ -2,6 +2,7 @@
 
 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');
@@ -20,11 +21,12 @@ var ButtonV2 = require('@arc-ui/components/ButtonV2');
 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 = {"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 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 headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = tslib_es6.__rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
-    var _c = React.useState(isPersistant), showNotification = _c[0], setShowNotification = _c[1];
+    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 () {
@@ -38,7 +40,7 @@ var HeaderBarNotification = function (_a) {
             localStorage.setItem(localStorageId, "true");
         setShowNotification(false);
     };
-    return (React.createElement(Popover.Popover, tslib_es6.__assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React.createElement("div", { className: styles.container },
+    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 })),

package/lib/HeaderBarNotification/HeaderBarNotification.mjs

@@ -1,5 +1,6 @@
 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';
@@ -18,11 +19,12 @@ import { ButtonV2 } from '@arc-ui/components/ButtonV2';
 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 = {"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 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 headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
-    var _c = useState(isPersistant), showNotification = _c[0], setShowNotification = _c[1];
+    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 () {
@@ -36,7 +38,7 @@ var HeaderBarNotification = function (_a) {
             localStorage.setItem(localStorageId, "true");
         setShowNotification(false);
     };
-    return (React__default.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React__default.createElement("div", { className: styles.container },
+    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 })),

package/lib/HeaderBarNotification/styles.css

@@ -1 +1 @@
-.HeaderBarNotification-module_container__18nau{display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border-radius:var(--sem-border-radius-m)}@media (--arc-custom-media-min-width-m-px){.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 (--arc-custom-media-min-width-m-px){.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 (--arc-custom-media-min-width-m-px){.HeaderBarNotification-module_closeButtonContainer__b1UDI{position:relative;right:0;top:0}}
+.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/index.cjs

@@ -132,72 +132,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/**
- * Filters out attributes from the given props object based on a pattern.
- *
- * This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
- * and returns a new object containing only those properties.
- *
- * @param props - The object containing properties to filter.
- * @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
- */
-var attributePrefixes = ["data-", "aria-"];
-var filterAttrs = function (props) {
-    var filteredProps = {};
-    var _loop_1 = function (prop) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
-            filteredProps[prop] = props[prop];
-        }
-    };
-    for (var prop in props) {
-        _loop_1(prop);
-    }
-    return filteredProps;
-};
-
-/**
- * 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$v = {"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 headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
-    var _c = React.useState(isPersistant), showNotification = _c[0], setShowNotification = _c[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, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, 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.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
-                    icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
-                React.createElement("div", { className: styles$v.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$v.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(props)),
-        React.createElement(NavigationHeader.NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
-};
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -291,6 +225,73 @@ function requireClassnames () {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+/**
+ * Filters out attributes from the given props object based on a pattern.
+ *
+ * This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
+ * and returns a new object containing only those properties.
+ *
+ * @param props - The object containing properties to filter.
+ * @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
+ */
+var attributePrefixes = ["data-", "aria-"];
+var filterAttrs = function (props) {
+    var filteredProps = {};
+    var _loop_1 = function (prop) {
+        if (Object.prototype.hasOwnProperty.call(props, prop) &&
+            attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
+            filteredProps[prop] = props[prop];
+        }
+    };
+    for (var prop in props) {
+        _loop_1(prop);
+    }
+    return filteredProps;
+};
+
+/**
+ * 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$v = {"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 = 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, __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 },
+            React.createElement("div", { className: styles$v.content },
+                (image || icon) && (React.createElement("div", { className: styles$v.image },
+                    image && (React.createElement(Image$2.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
+                    icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
+                React.createElement("div", { className: styles$v.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$v.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(props)),
+        React.createElement(NavigationHeader.NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
+};
+
 var styles$u = {"accordion-header":"AccordionHeading-module_accordion-header__8s12f","accordion-header--hasImage":"AccordionHeading-module_accordion-header--hasImage__wbDjW","accordion-header--padded":"AccordionHeading-module_accordion-header--padded__me1JY","accordion-header--headingSizeM":"AccordionHeading-module_accordion-header--headingSizeM__amLfy"};
 
 var AccordionHeading = function (_a) {