@planningcenter/topbar 11.1.0 → 11.1.2-rc.2

package/dist/topbar.umd.js

@@ -375,6 +375,62 @@
     }));
   }
 
+  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;
@@ -430,7 +486,13 @@
       const isPromo = variant === "promo";
       return /*#__PURE__*/React.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.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
         className: styles$b["announcement-content"],
         style: style,