@planningcenter/topbar 11.1.0 → 11.1.2-rc.2

package/dist/topbar.module.js

@@ -364,6 +364,62 @@ function AnnouncementIcon() {
   }));
 }
 
+const promoBackgroundSvg = `
+  <svg width="1724" height="1080" viewBox="0 0 1724 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_f_154_9174)">
+      <rect 
+        x="606.744" 
+        y="1062.82" 
+        width="649.488" 
+        height="964.695" 
+        rx="324.744" 
+        transform="rotate(-120 606.744 1062.82)" 
+        fill="url(#paint0_linear_154_9174)" 
+        fill-opacity="0.5"
+      />
+    </g>
+    <defs>
+      <filter 
+        id="filter0_f_154_9174" 
+        x="0.810547" 
+        y="-263.19" 
+        width="1722.57" 
+        height="1607.2" 
+        filterUnits="userSpaceOnUse" 
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood 
+          flood-opacity="0" 
+          result="BackgroundImageFix"
+        />
+        <feBlend 
+          mode="normal" 
+          in="SourceGraphic" 
+          in2="BackgroundImageFix" 
+          result="shape"
+        />
+        <feGaussianBlur 
+          stdDeviation="200" 
+          result="effect1_foregroundBlur_154_9174"
+        />
+      </filter>
+      <linearGradient 
+        id="paint0_linear_154_9174" 
+        x1="1040.11" 
+        y1="1031.29" 
+        x2="1407.11" 
+        y2="1806.85" 
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.21875" stop-color="#FFD748"/>
+        <stop offset="0.541667" stop-color="#FF4242"/>
+        <stop offset="0.84375" stop-color="#657CF1"/>
+      </linearGradient>
+    </defs>
+  </svg>
+`;
+
+const promoBackgroundUrl = `url("data:image/svg+xml,${encodeURIComponent(promoBackgroundSvg)}")`;
 const entries = function (obj) {
   const ownProps = Object.keys(obj);
   let i = ownProps.length;
@@ -419,7 +475,13 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
     const isPromo = variant === "promo";
     return /*#__PURE__*/React__default.createElement("div", {
       className: classnames(styles$b["announcement"], styles$b[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
-      "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform"
+      "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
+      style: isPromo ? {
+        backgroundImage: promoBackgroundUrl,
+        backgroundPosition: "center center",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover"
+      } : undefined
     }, !isPromo && /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
       className: styles$b["announcement-content"],
       style: style,