@bikdotai/bik-component-library 0.0.756-beta.9 → 0.0.757-beta.10

package/dist/esm/components/dashboard-review-popup/components/Form.styled.d.ts

@@ -1,27 +1,27 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StarWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Chip: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     selected?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextArea: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/datePicker/DatePicker.styled.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
 export declare const PickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     selectRange: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimePickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimeInputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimeLabel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/discount-modal/DiscountModal.styled.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 export declare const CouponTypeContainerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     selectedDiv: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StaticCouponContainerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DynamicCouponContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDiscountDialogueContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VariablePickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js

@@ -1 +1 @@
-import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useState as r,useEffect as a,useCallback as i}from"react";import s,{ACTIONS as d}from"react-joyride";import"./constants/animations.js";import{SELECTORS as l}from"./constants/selectors.js";import{useFeatureAnnouncements as u}from"./hooks/useFeatureAnnouncements.js";import c from"./MajorUpdatePopup.js";import p from"./MinorUpdatePopup.js";import{VideoModal as f}from"./VideoModal.js";const b=b=>{let{children:m,fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:C,module:S,router:k}=b;var T;const{majorUpdateFeatures:w,minorUpdateFeatures:v,isLoading:B,markFeatureAsViewed:I}=u({fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:C,module:S,router:k}),[F,E]=r(null),[j,N]=r(null),[W,P]=r(!1),[M,O]=r([]),[q,V]=r(!1),[L,R]=r([]),[_,A]=r(!1),[U,$]=r(!1),[z,H]=r([]),[Z,D]=r(!1),[G,J]=r(!1),[K,Q]=r(!1),[X,Y]=r(""),[tt,et]=r(!1),[ot,nt]=r(!1),[rt,at]=r(!1),[it,st]=r(0),[dt,lt]=r(0),[ut,ct]=r(new Set);a((()=>{const t="minor-spotlight-cutout-style";let e=document.getElementById(t);return e||(e=document.createElement("style"),e.id=t,document.head.appendChild(e)),e.textContent="\n\t\t\t.react-joyride__spotlight {\n\t\t\t\ttransition: box-shadow 0.3s ease-in-out !important;\n\t\t\t\twill-change: box-shadow, transform;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__tooltip {\n\t\t\t\twill-change: transform, opacity;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t",()=>{const e=document.getElementById(t);e&&e.remove()}}),[]),a((()=>{st((t=>t+1)),lt((t=>t+1)),nt(!1),at(!1),ct(new Set)}),[null==k?void 0:k.pathname]),a((()=>{if(!(w.length>0)||F||B||_||tt)0!==w.length||B||J(!0);else{J(!1),D(!1),P(!1),O([]),N(null),H([]);let t=0;const e=10,o=()=>{t++;document.querySelector('[data-testid="whats-new-button"]')?pt(w[0]):t<e?setTimeout(o,1e3):J(!0)};o()}}),[w,F,B,_,tt]),a((()=>{var t;const e=null===(t=null==k?void 0:k.query)||void 0===t?void 0:t.featureId;if(!e||B||0===v.length)return;const o=v.find((t=>t.id===e));if(!o||!o.featureTag)return;D(!0),$(!0);let n=0;const r=setInterval((()=>{n++;const t=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(t)){const t=[o];H(t),Ct(o,t),clearInterval(r)}else n>=25&&($(!1),clearInterval(r))}),200);return()=>{clearInterval(r)}}),[v,null===(T=null==k?void 0:k.query)||void 0===T?void 0:T.featureId,B]),a((()=>{var t;if(v.length>0&&!B&&!W&&!U&&!j&&!Z&&G&&!tt){let t=null,e=null,o=null,n=!1;const r=()=>{if(n||U||j||Z||!G)return;const r=v.filter((t=>{if(!t.featureTag||""===t.featureTag.trim())return!1;if(ut.has(t.id))return!1;const e=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`;return null!==document.querySelector(e)}));r.length>0&&(H(r),Ct(r[0],r),t&&(t.disconnect(),t=null),e&&(window.removeEventListener("scroll",e),e=null),o&&(clearTimeout(o),o=null))};return t=new MutationObserver((t=>{let e=!1;for(const o of t){if("childList"===o.type&&o.addedNodes.length>0)for(let t=0;t<o.addedNodes.length;t++){const n=o.addedNodes[t];if(n.nodeType===Node.ELEMENT_NODE){const t=n;if(t.id||t.querySelector("[id]")){e=!0;break}}}if(e)break}W||n||U||j||Z||!G||!e||(o&&clearTimeout(o),o=setTimeout((()=>{n||U||j||Z||!G||r()}),200))})),e=()=>{W||n||U||j||Z||!G||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||U||j||Z||!G||r()}),300)})))},t&&t.observe(document.body,{childList:!0,subtree:!0}),e&&window.addEventListener("scroll",e,{passive:!0}),r(),setTimeout((()=>{n||U||j||Z||!G||r()}),100),setTimeout((()=>{n||U||j||Z||!G||r()}),1e3),setTimeout((()=>{n||U||j||Z||!G||r()}),500),()=>{n=!0,t&&t.disconnect(),e&&window.removeEventListener("scroll",e),o&&clearTimeout(o)}}if(0===v.length||B){(null===(t=null==k?void 0:k.query)||void 0===t?void 0:t.featureId)&&j||(P(!1),O([]),N(null),H([]),D(!1))}}),[v,B,W,U,j,Z,G,I,tt]);const pt=t=>{E(t);const o=w.findIndex((e=>e.id===t.id)),n=w.length,r=[{target:l.WHATS_NEW_BUTTON,content:e(c,{feature:t,currentIndex:o,totalFeatures:n,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(r),V(!0)},ft=i((t=>{(t||F)&&(A(!0),w.forEach((t=>{I(t.id)})),V(!1),E(null),R([]),J(!0),setTimeout((()=>{A(!1)}),500))}),[F,w,I]),bt=i((t=>{A(!0),I(t.id),t.productVideo&&(Y(t.productVideo),Q(!0),et(!0)),V(!1),E(null),R([]);w.findIndex((e=>e.id===t.id))===w.length-1&&J(!0),setTimeout((()=>{A(!1)}),500)}),[w,I]),mt=i((t=>{const o=t||F;if(!o)return;const n=w.findIndex((t=>t.id===o.id));if(n>0){const t=w[n-1];E(t);const o=n-1,r=w.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}}),[F,w]),gt=i((t=>{const o=t||F;if(!o)return;const n=w.findIndex((t=>t.id===o.id));if(n<w.length-1){const t=w[n+1];E(t);const o=n+1,r=w.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}else A(!0),I(o.id),V(!1),E(null),R([]),J(!0),setTimeout((()=>{A(!1)}),500)}),[F,w,I]),ht=()=>{if(w.length>0&&!F){document.querySelector('[data-testid="whats-new-button"]')&&pt(w[0])}};a((()=>(window.showMajorUpdatePopup=ht,()=>{delete window.showMajorUpdatePopup})),[w,F]);const yt=i((t=>{const{action:e}=t;e===d.CLOSE&&(F&&(A(!0),w.forEach((t=>{I(t.id)})),J(!0),setTimeout((()=>{A(!1)}),500)),V(!1),E(null),R([]))}),[F,w,I]),xt=i((t=>{const{action:e}=t;if(e===d.CLOSE){if(j){$(!0),I(j.id);z.findIndex((t=>t.id===j.id))===z.length-1&&D(!0),setTimeout((()=>{$(!1)}),500)}P(!1),N(null),O([])}}),[j,z,I]),Ct=(o,n)=>t(void 0,void 0,void 0,(function*(){N(o);const t=n||z,r=t.findIndex((t=>t.id===o.id)),a=t.length,i=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,s=document.querySelector(i);if(s)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(s,120)}catch(t){}const d=[{target:i,content:e(p,{feature:o,currentIndex:r,totalFeatures:a,onSkip:()=>St(o),onExplore:()=>kt(o),onPrevious:()=>Tt(o),onNext:()=>wt(o),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:o,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(d),P(!0)})),St=i((t=>{const e=t||j;if(e){$(!0),I(e.id),ct((t=>new Set(t).add(e.id))),P(!1),N(null),O([]);const t=z.find((t=>t.id!==e.id&&!ut.has(t.id)));setTimeout((()=>{$(!1),t?Ct(t,z):D(!0)}),500)}}),[j,z,I,ut]),kt=i((t=>{$(!0),I(t.id),ct((e=>new Set(e).add(t.id))),t.productVideo&&(Y(t.productVideo),Q(!0),et(!0)),P(!1),N(null),O([]);const e=z.find((e=>e.id!==t.id&&!ut.has(e.id)));setTimeout((()=>{$(!1),e&&!t.productVideo?Ct(e,z):e||D(!0)}),500)}),[z,I,ut]),Tt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||j;if(!t)return;const n=z.findIndex((e=>e.id===t.id));if(n>0){const t=z[n-1];N(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n-1,i=z.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>St(t),onExplore:()=>kt(t),onPrevious:()=>Tt(t),onNext:()=>wt(t),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(s)}}))),[j,z]),wt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||j;if(!t)return;const n=z.findIndex((e=>e.id===t.id));if(n<z.length-1){const t=z[n+1];N(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n+1,i=z.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>St(t),onExplore:()=>kt(t),onPrevious:()=>Tt(t),onNext:()=>wt(t),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(s)}else $(!0),D(!0),I(t.id),P(!1),N(null),O([]),setTimeout((()=>{$(!1)}),500)}))),[j,z,I]);return o(n,{children:[m,L.length>0&&e(s,{steps:L,run:q,continuous:!1,showProgress:!1,showSkipButton:!1,callback:yt,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:ot?"transparent":"#212121"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",border:"none",boxShadow:"none"},tooltip:{borderRadius:"16px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`major-joyride-${it}`),M.length>0&&e(s,{steps:M,run:W,continuous:!1,showProgress:!1,showSkipButton:!1,callback:xt,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:rt?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:rt?"none":"0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"},tooltip:{borderRadius:"4px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonSkip:{display:"none"},buttonClose:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`minor-joyride-${dt}`),e(f,{isOpen:K,videoUrl:X,onClose:()=>{Q(!1),Y(""),et(!1);const t=z.find((t=>!ut.has(t.id)));t?setTimeout((()=>{Ct(t,z)}),300):D(!0)}})]})};export{b as default};
+import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useState as r,useEffect as a,useCallback as i}from"react";import s,{ACTIONS as d}from"react-joyride";import"./constants/animations.js";import{SELECTORS as l}from"./constants/selectors.js";import{useFeatureAnnouncements as u}from"./hooks/useFeatureAnnouncements.js";import c from"./MajorUpdatePopup.js";import p from"./MinorUpdatePopup.js";import{VideoModal as f}from"./VideoModal.js";const m=m=>{let{children:b,fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:k,module:S,router:C,storeId:T,onAnnouncementShown:v,onAnnouncementInteracted:w}=m;var I;const{majorUpdateFeatures:B,minorUpdateFeatures:F,isLoading:E,markFeatureAsViewed:N}=u({fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:k,module:S,router:C}),[j,P]=r(null),[U,W]=r(null),[V,M]=r(!1),[O,q]=r([]),[_,A]=r(!1),[L,R]=r([]),[$,z]=r(!1),[H,Z]=r(!1),[D,G]=r([]),[J,K]=r(!1),[Q,X]=r(!1),[Y,tt]=r(!1),[et,ot]=r(""),[nt,rt]=r(!1),[at,it]=r(!1),[st,dt]=r(!1),[lt,ut]=r(0),[ct,pt]=r(0),[ft,mt]=r(new Set);a((()=>{const t="minor-spotlight-cutout-style";let e=document.getElementById(t);return e||(e=document.createElement("style"),e.id=t,document.head.appendChild(e)),e.textContent="\n\t\t\t.react-joyride__spotlight {\n\t\t\t\ttransition: box-shadow 0.3s ease-in-out !important;\n\t\t\t\twill-change: box-shadow, transform;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__tooltip {\n\t\t\t\twill-change: transform, opacity;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__floater {\n\t\t\t\tright: 12px !important;\n\t\t\t\tleft: auto !important;\n\t\t\t}\n\t\t",()=>{const e=document.getElementById(t);e&&e.remove()}}),[]),a((()=>{ut((t=>t+1)),pt((t=>t+1)),it(!1),dt(!1),mt(new Set)}),[null==C?void 0:C.pathname]),a((()=>{if(!(B.length>0)||j||E||$||nt)0!==B.length||E||X(!0);else{X(!1),K(!1),M(!1),q([]),W(null),G([]);let t=0;const e=10,o=()=>{t++;document.querySelector('[data-testid="whats-new-button"]')?bt(B[0]):t<e?setTimeout(o,1e3):X(!0)};o()}}),[B,j,E,$,nt]),a((()=>{var t;const e=null===(t=null==C?void 0:C.query)||void 0===t?void 0:t.featureId;if(!e||E||0===F.length)return;const o=F.find((t=>t.id===e));if(!o||!o.featureTag)return;K(!0),Z(!0);let n=0;const r=setInterval((()=>{n++;const t=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(t)){const t=[o];G(t),Tt(o,t),clearInterval(r)}else n>=25&&(Z(!1),clearInterval(r))}),200);return()=>{clearInterval(r)}}),[F,null===(I=null==C?void 0:C.query)||void 0===I?void 0:I.featureId,E]),a((()=>{var t;if(F.length>0&&!E&&!V&&!H&&!U&&!J&&Q&&!nt){let t=null,e=null,o=null,n=!1;const r=()=>{if(n||H||U||J||!Q)return;const r=F.filter((t=>{if(!t.featureTag||""===t.featureTag.trim())return!1;if(ft.has(t.id))return!1;const e=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`;return null!==document.querySelector(e)}));r.length>0&&(G(r),Tt(r[0],r),t&&(t.disconnect(),t=null),e&&(window.removeEventListener("scroll",e),e=null),o&&(clearTimeout(o),o=null))};return t=new MutationObserver((t=>{let e=!1;for(const o of t){if("childList"===o.type&&o.addedNodes.length>0)for(let t=0;t<o.addedNodes.length;t++){const n=o.addedNodes[t];if(n.nodeType===Node.ELEMENT_NODE){const t=n;if(t.id||t.querySelector("[id]")){e=!0;break}}}if(e)break}V||n||H||U||J||!Q||!e||(o&&clearTimeout(o),o=setTimeout((()=>{n||H||U||J||!Q||r()}),200))})),e=()=>{V||n||H||U||J||!Q||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||H||U||J||!Q||r()}),300)})))},t&&t.observe(document.body,{childList:!0,subtree:!0}),e&&window.addEventListener("scroll",e,{passive:!0}),r(),setTimeout((()=>{n||H||U||J||!Q||r()}),100),setTimeout((()=>{n||H||U||J||!Q||r()}),1e3),setTimeout((()=>{n||H||U||J||!Q||r()}),500),()=>{n=!0,t&&t.disconnect(),e&&window.removeEventListener("scroll",e),o&&clearTimeout(o)}}if(0===F.length||E){(null===(t=null==C?void 0:C.query)||void 0===t?void 0:t.featureId)&&U||(M(!1),q([]),W(null),G([]),K(!1))}}),[F,E,V,H,U,J,Q,N,nt]);const bt=t=>{P(t);const o=B.findIndex((e=>e.id===t.id)),n=B.length,r=[{target:l.WHATS_NEW_BUTTON,content:e(c,{feature:t,currentIndex:o,totalFeatures:n,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(r),A(!0),v&&T&&v({storeId:T,announcementId:t.id,announcementTitle:t.title,imageUrl:t.displayImage||t.image,videoUrl:t.productVideo})},gt=i((t=>{const e=t||j;e&&(z(!0),B.forEach((t=>{N(t.id)})),A(!1),P(null),R([]),X(!0),w&&T&&w({storeId:T,announcementId:e.id,announcementTitle:e.title,imageUrl:e.displayImage||e.image,videoUrl:e.productVideo,buttonClicked:"Skip",buttonName:"Skip",buttonUrl:void 0}),setTimeout((()=>{z(!1)}),500))}),[j,B,N]),ht=i((t=>{z(!0),N(t.id),t.productVideo&&(ot(t.productVideo),tt(!0),rt(!0)),A(!1),P(null),R([]);B.findIndex((e=>e.id===t.id))===B.length-1&&X(!0),w&&T&&w({storeId:T,announcementId:t.id,announcementTitle:t.title,imageUrl:t.displayImage||t.image,videoUrl:t.productVideo,buttonClicked:"Primary",buttonName:t.buttonText||"Explore",buttonUrl:t.redirectUrl||t.productVideo}),setTimeout((()=>{z(!1)}),500)}),[B,N]),yt=i((t=>{const o=t||j;if(!o)return;const n=B.findIndex((t=>t.id===o.id));if(n>0){const t=B[n-1];P(t);const o=n-1,r=B.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}}),[j,B]),xt=i((t=>{const o=t||j;if(!o)return;const n=B.findIndex((t=>t.id===o.id));if(n<B.length-1){const t=B[n+1];P(t);const o=n+1,r=B.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}else z(!0),N(o.id),A(!1),P(null),R([]),X(!0),setTimeout((()=>{z(!1)}),500)}),[j,B,N]),kt=()=>{if(B.length>0&&!j){document.querySelector('[data-testid="whats-new-button"]')&&bt(B[0])}};a((()=>(window.showMajorUpdatePopup=kt,()=>{delete window.showMajorUpdatePopup})),[B,j]);const St=i((t=>{const{action:e}=t;e===d.CLOSE&&(j&&(z(!0),B.forEach((t=>{N(t.id)})),X(!0),setTimeout((()=>{z(!1)}),500)),A(!1),P(null),R([]))}),[j,B,N]),Ct=i((t=>{const{action:e}=t;if(e===d.CLOSE){if(U){Z(!0),N(U.id);D.findIndex((t=>t.id===U.id))===D.length-1&&K(!0),setTimeout((()=>{Z(!1)}),500)}M(!1),W(null),q([])}}),[U,D,N]),Tt=(o,n)=>t(void 0,void 0,void 0,(function*(){W(o);const t=n||D,r=t.findIndex((t=>t.id===o.id)),a=t.length,i=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,s=document.querySelector(i);if(s)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(s,120)}catch(t){}const d=[{target:i,content:e(p,{feature:o,currentIndex:r,totalFeatures:a,onSkip:()=>vt(o),onExplore:()=>wt(o),onPrevious:()=>It(o),onNext:()=>Bt(o),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:o,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(d),M(!0)})),vt=i((t=>{const e=t||U;if(e){Z(!0),N(e.id),mt((t=>new Set(t).add(e.id))),M(!1),W(null),q([]);const t=D.find((t=>t.id!==e.id&&!ft.has(t.id)));setTimeout((()=>{Z(!1),t?Tt(t,D):K(!0)}),500)}}),[U,D,N,ft]),wt=i((t=>{Z(!0),N(t.id),mt((e=>new Set(e).add(t.id))),t.productVideo&&(ot(t.productVideo),tt(!0),rt(!0)),M(!1),W(null),q([]);const e=D.find((e=>e.id!==t.id&&!ft.has(e.id)));setTimeout((()=>{Z(!1),e&&!t.productVideo?Tt(e,D):e||K(!0)}),500)}),[D,N,ft]),It=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||U;if(!t)return;const n=D.findIndex((e=>e.id===t.id));if(n>0){const t=D[n-1];W(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n-1,i=D.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>vt(t),onExplore:()=>wt(t),onPrevious:()=>It(t),onNext:()=>Bt(t),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(s)}}))),[U,D]),Bt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||U;if(!t)return;const n=D.findIndex((e=>e.id===t.id));if(n<D.length-1){const t=D[n+1];W(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n+1,i=D.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>vt(t),onExplore:()=>wt(t),onPrevious:()=>It(t),onNext:()=>Bt(t),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(s)}else Z(!0),K(!0),N(t.id),M(!1),W(null),q([]),setTimeout((()=>{Z(!1)}),500)}))),[U,D,N]);return o(n,{children:[b,L.length>0&&e(s,{steps:L,run:_,continuous:!1,showProgress:!1,showSkipButton:!1,callback:St,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:at?"transparent":"#212121"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",border:"none",boxShadow:"none"},tooltip:{borderRadius:"16px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`major-joyride-${lt}`),O.length>0&&e(s,{steps:O,run:V,continuous:!1,showProgress:!1,showSkipButton:!1,callback:Ct,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:st?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:st?"none":"0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"},tooltip:{borderRadius:"4px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonSkip:{display:"none"},buttonClose:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`minor-joyride-${ct}`),e(f,{isOpen:Y,videoUrl:et,onClose:()=>{tt(!1),ot(""),rt(!1);const t=D.find((t=>!ft.has(t.id)));t?setTimeout((()=>{Tt(t,D)}),300):K(!0)}})]})};export{m as default};

package/dist/esm/components/feature-announcements/MajorUpdatePopup.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as s,useEffect as o}from"react";import{TEXT as r}from"./constants/index.js";import{getMajorPopupStyles as i}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as a}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as l,calculateCloseTransform as c,executeAfterAnimation as u}from"./utils/animationHelpers.js";import{findWhatsNewButton as g}from"./utils/elementHelpers.js";const b=b=>{let{feature:p,currentIndex:m,totalFeatures:d,onSkip:j,onExplore:v,onPrevious:y,onNext:O,setIsClosing:T}=b;const[h,E]=n(!1),[f,B]=n(!1),[I,x]=n(""),P=s(null);o((()=>{h&&B(!0)}),[h]);const C=i(f,I);return t("div",Object.assign({ref:P,style:C.container},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{l(P.current);const e=g();if(e&&P.current){const t=c(P.current,e);x(t)}else x("scale(0)");null==T||T(!0),E(!0),u(t)})(j)},style:C.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.skipButton.base)},{children:r.SKIP_BUTTON})),e("div",Object.assign({style:C.imageContainer},{children:p.displayImage?e("img",{src:p.displayImage,alt:p.title,style:C.image,onError:t=>{p.image&&(t.target.src=p.image)}}):e("div",Object.assign({style:C.imagePlaceholder},{children:r.FEATURE_PREVIEW_PLACEHOLDER}))})),t("div",Object.assign({style:C.contentContainer},{children:[t("div",{children:[e("h3",Object.assign({style:C.title},{children:p.title})),e("div",{style:C.content,dangerouslySetInnerHTML:{__html:a(p.content||p.body||"")}}),e("button",Object.assign({onClick:()=>{v(),l(P.current);const t=g();if(t&&P.current){const e=c(P.current,t);x(e)}else x("scale(0)");null==T||T(!0),E(!0)},style:C.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.exploreButton.base)},{children:p.buttonText||r.DEFAULT_BUTTON_TEXT}))]}),d>1&&t("div",Object.assign({style:C.navigationContainer},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),y()},disabled:0===m,style:C.navigationButton(0===m).base,onMouseEnter:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).base)}},{children:r.NAVIGATION_PREVIOUS})),e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:m===d-1,style:C.navigationButton(m===d-1).base,onMouseEnter:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(m===d-1).base)}},{children:r.NAVIGATION_NEXT}))]}))]}))]}))};export{b as default};
+import{jsx as t,jsxs as e,Fragment as n}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as s}from"react";import a from"../../assets/icons/chevronRight2.svg.js";import i from"../../assets/icons/play.svg.js";import{TEXT as l}from"./constants/index.js";import{getMajorPopupStyles as c}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as u}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as d,calculateCloseTransform as p,executeAfterAnimation as g}from"./utils/animationHelpers.js";import{findWhatsNewButton as y}from"./utils/elementHelpers.js";const b=b=>{let{feature:v,currentIndex:h,totalFeatures:m,onSkip:f,onExplore:j,onPrevious:O,onNext:B,setIsClosing:T,onSecondaryAction:k,ratio:x="16:9",padding:M}=b;var E,P,C,L,w;const[U,W]=o(!1),[_,I]=o(!1),[D,H]=o(""),S=r(null),[A,R]=o(!1),[V,F]=o(!0),N=r(null),[z,G]=o(x),K=r(null);s((()=>{U&&I(!0)}),[U]);const X=t=>{var e,n;t.preventDefault(),t.stopPropagation();const o=null===(e=v.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===o){const t=null===(n=v.secondaryButton)||void 0===n?void 0:n.redirectionUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else"Close popup"!==o&&""!==o||k&&k();d(S.current);const r=y();if(r&&S.current){const t=p(S.current,r);H(t)}else H("scale(0)");null==T||T(!0),W(!0)},$=c(_,D,z,M||v.padding,null===(E=v.primaryButton)||void 0===E?void 0:E.style,null===(P=v.secondaryButton)||void 0===P?void 0:P.style);return t("div",Object.assign({style:$.outerWrapper},{children:e("div",Object.assign({ref:S,style:Object.assign(Object.assign({},$.container),{opacity:_?0:1,transition:"opacity 0.2s ease-in-out, transform 0.3s ease"})},{children:[t("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),e("div",Object.assign({style:$.contentWrapper},{children:[t("div",Object.assign({style:$.imageContainer},{children:v.productVideo?e(n,{children:[t("video",{ref:N,src:v.productVideo,style:$.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${v.title}`,onLoadedMetadata:t=>{const e=t.currentTarget,n=e.videoWidth,o=e.videoHeight;if(n&&o){const t=n/o;Math.abs(t-16/9)<.1?G("16:9"):Math.abs(t-1)<.1?G("1:1"):Math.abs(t-4/3)<.1?G("4:3"):G(t>1.5?"16:9":t<.9?"4:3":"1:1")}}}),(A||V)&&t("div",Object.assign({style:$.videoOverlay,onClick:t=>{t.stopPropagation(),N.current&&(N.current.paused?(N.current.play(),R(!1),F(!1)):(N.current.pause(),R(!0),F(!0)))},role:"button",tabIndex:0,"aria-label":A?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),N.current&&(N.current.paused?(N.current.play(),R(!1),F(!1)):(N.current.pause(),R(!0),F(!0))))}},{children:t(i,{width:20,height:20})}))]}):v.displayImage?t("img",{ref:K,src:v.displayImage,alt:v.title,style:$.image,onLoad:t=>{const e=t.currentTarget,n=e.naturalWidth,o=e.naturalHeight;if(n&&o){const t=n/o;Math.abs(t-16/9)<.1?G("16:9"):Math.abs(t-1)<.1?G("1:1"):Math.abs(t-4/3)<.1?G("4:3"):G(t>1.5?"16:9":t<.9?"4:3":"1:1")}},onError:t=>{v.image&&(t.target.src=v.image)}}):t("div",Object.assign({style:$.imagePlaceholder},{children:l.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:$.contentContainer},{children:[t("div",Object.assign({style:$.skipButtonContainer},{children:t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{d(S.current);const e=y();if(e&&S.current){const t=p(S.current,e);H(t)}else H("scale(0)");null==T||T(!0),W(!0),g(t)})(f)},style:$.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t("h3",Object.assign({style:$.title},{children:v.title})),t("div",{"data-popup-content":!0,style:$.content,dangerouslySetInnerHTML:{__html:u(v.content||v.body||"")}}),e("div",Object.assign({style:$.actionsWrapper},{children:[e("div",Object.assign({style:$.buttonsGroup},{children:[t("button",Object.assign({onClick:()=>{var t,e;const n=null===(t=v.primaryButton)||void 0===t?void 0:t.action;if("Play Video"===n)j();else if("Open link"===n){const t=(null===(e=v.primaryButton)||void 0===e?void 0:e.redirectionUrl)||v.redirectUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else j();d(S.current);const o=y();if(o&&S.current){const t=p(S.current,o);H(t)}else H("scale(0)");null==T||T(!0),W(!0)},style:$.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.exploreButton.base)},{children:(null===(C=v.primaryButton)||void 0===C?void 0:C.text)||v.buttonText||l.DEFAULT_BUTTON_TEXT})),(null===(L=v.secondaryButton)||void 0===L?void 0:L.text)&&((null===(w=v.secondaryButton)||void 0===w?void 0:w.redirectionUrl)?t("a",Object.assign({href:v.secondaryButton.redirectionUrl,target:v.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:v.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:X,style:$.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.secondaryButton.base)},{children:v.secondaryButton.text})):t("button",Object.assign({onClick:X,style:$.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.secondaryButton.base)},{children:v.secondaryButton.text})))]})),m>1&&e("div",Object.assign({style:$.navigationContainer},{children:[t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:0===h,style:$.navigationButton(0===h).base,onMouseEnter:t=>{0!==h&&Object.assign(t.currentTarget.style,$.navigationButton(!1).hover)},onMouseLeave:t=>{0!==h&&Object.assign(t.currentTarget.style,$.navigationButton(!1).base)},"aria-label":"Previous feature"},{children:t(a,{style:{transform:"rotate(180deg)"}})})),t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),B()},disabled:h===m-1,style:$.navigationButton(h===m-1).base,onMouseEnter:t=>{h!==m-1&&Object.assign(t.currentTarget.style,$.navigationButton(!1).hover)},onMouseLeave:t=>{h!==m-1&&Object.assign(t.currentTarget.style,$.navigationButton(h===m-1).base)},"aria-label":"Next feature"},{children:t(a,{})}))]}))]}))]}))]}))]}))}))};export{b as default};

package/dist/esm/components/feature-announcements/MinorUpdatePopup.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as s,useRef as n,useEffect as r}from"react";import{TEXT as i}from"./constants/index.js";import"../../constants/Theme.js";import"./constants/animations.js";import{getMinorPopupStyles as a}from"./styles/minorPopup.styles.js";import{decodeHTMLEntities as l}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as o,calculateCloseTransform as c,executeAfterAnimation as d}from"./utils/animationHelpers.js";import{findFeatureTagElement as u}from"./utils/elementHelpers.js";const m=m=>{let{feature:g,currentIndex:p,totalFeatures:f,onSkip:T,onExplore:h,onPrevious:y,onNext:j,setIsClosing:b}=m;const[E,O]=s(!1),[v,x]=s(!1),[_,C]=s(""),I=n(null);r((()=>{E&&x(!0)}),[E]);const W=a(v,_);return e("div",Object.assign({ref:I,style:W.container},{children:[t("div",Object.assign({style:W.imageContainer},{children:g.displayImage?e("div",Object.assign({style:W.imageWrapper},{children:[t("img",{src:g.displayImage,alt:g.title,style:W.image,onError:e=>{g.image&&(e.target.src=g.image)}}),t("div",Object.assign({style:W.badge},{children:t("span",Object.assign({style:W.badgeText},{children:i.NEW_FEATURE_BADGE}))}))]})):t("div",Object.assign({style:W.imagePlaceholder},{children:i.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:W.contentContainer},{children:[e("div",{children:[t("h3",Object.assign({style:W.title},{children:g.title})),t("div",{style:W.content,dangerouslySetInnerHTML:{__html:l(g.content||g.body||"")}})]}),e("div",Object.assign({style:W.actionsContainer},{children:[t("span",Object.assign({onClick:()=>{(e=>{if(o(I.current),I.current&&g.featureTag){const e=u(g.featureTag);if(e){const t=c(I.current,e);C(t)}else C("scale(0)")}else C("scale(0)");null==b||b(!0),O(!0),d(e)})(T)},style:W.understoodText},{children:i.UNDERSTOOD})),g.productVideo&&t("button",Object.assign({onClick:()=>{if(h(),o(I.current),I.current&&g.featureTag){const e=g.featureTag.startsWith("#")||g.featureTag.startsWith(".")||g.featureTag.startsWith("[")?g.featureTag:`#${g.featureTag}`,t=document.querySelector(e);if(t){const e=c(I.current,t);C(e)}else C("scale(0)")}else C("scale(0)");null==b||b(!0),O(!0)},style:W.exploreButton},{children:g.buttonText||i.DEFAULT_BUTTON_TEXT}))]}))]}))]}))};export{m as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r,useEffect as o}from"react";import{TEXT as i}from"./constants/index.js";import"../../constants/Theme.js";import"./constants/animations.js";import{getMinorPopupStyles as s}from"./styles/minorPopup.styles.js";import{decodeHTMLEntities as l}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as a,calculateCloseTransform as c}from"./utils/animationHelpers.js";import{findFeatureTagElement as d}from"./utils/elementHelpers.js";const u=u=>{let{feature:m,currentIndex:p,totalFeatures:f,onSkip:g,onExplore:y,onPrevious:v,onNext:h,setIsClosing:T}=u;var j,b;const[O,x]=n(!1),[B,E]=n(!1),[w,C]=n(""),_=r(null);o((()=>{O&&E(!0)}),[O]);const k=s(B,w);return e("div",Object.assign({ref:_,style:k.container},{children:[t("div",Object.assign({style:k.imageContainer},{children:m.displayImage?t("div",Object.assign({style:k.imageWrapper},{children:t("img",{src:m.displayImage,alt:m.title,style:k.image,onError:e=>{m.image&&(e.target.src=m.image)}})})):t("div",Object.assign({style:k.imagePlaceholder},{children:i.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:k.contentContainer},{children:[e("div",{children:[t("h3",Object.assign({style:k.title},{children:m.title})),t("div",{style:k.content,dangerouslySetInnerHTML:{__html:l(m.content||m.body||"")}})]}),e("div",Object.assign({style:k.actionsContainer},{children:[(null===(j=m.secondaryButton)||void 0===j?void 0:j.text)&&t("span",Object.assign({onClick:()=>{var e,t,n;const r=null===(e=m.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===r){const e=null===(t=m.secondaryButton)||void 0===t?void 0:t.redirectionUrl;if(e){e.startsWith("http")?window.open(e,"_blank","noopener,noreferrer"):window.location.href=e}}else"Close popup"!==r&&""!==r||null===(n=m.secondaryButton)||void 0===n||n.action;if(a(_.current),_.current&&m.featureTag){const e=d(m.featureTag);if(e){const t=c(_.current,e);C(t)}else C("scale(0)")}else C("scale(0)");null==T||T(!0),x(!0)},style:k.understoodText},{children:m.secondaryButton.text})),t("button",Object.assign({onClick:()=>{var e,t;const n=null===(e=m.primaryButton)||void 0===e?void 0:e.action;if("Play Video"===n)y();else if("Open link"===n){const e=(null===(t=m.primaryButton)||void 0===t?void 0:t.redirectionUrl)||m.redirectUrl;if(e){e.startsWith("http")?window.open(e,"_blank","noopener,noreferrer"):window.location.href=e}}else y();if(a(_.current),_.current&&m.featureTag){const e=m.featureTag.startsWith("#")||m.featureTag.startsWith(".")||m.featureTag.startsWith("[")?m.featureTag:`#${m.featureTag}`,t=document.querySelector(e);if(t){const e=c(_.current,t);C(e)}else C("scale(0)")}else C("scale(0)");null==T||T(!0),x(!0)},style:k.exploreButton},{children:(null===(b=m.primaryButton)||void 0===b?void 0:b.text)||m.buttonText||i.DEFAULT_BUTTON_TEXT}))]}))]}))]}))};export{u as default};

package/dist/esm/components/feature-announcements/constants/dimensions.d.ts

@@ -1,16 +1,12 @@
-/**
- * Popup dimension constants
- */
 export declare const POPUP_DIMENSIONS: {
     readonly MAJOR: {
-        readonly width: 959;
-        readonly height: 274;
-        readonly imageWidth: 480;
-        readonly imageHeight: 274;
-        readonly imageInnerWidth: 464;
-        readonly imageInnerHeight: 258;
-        readonly imagePlaceholderWidth: 290;
-        readonly imagePlaceholderHeight: 258;
+        readonly height: 224;
+        readonly textAreaWidth: 398;
+        readonly imageWidth: {
+            readonly '16:9': 398;
+            readonly '1:1': 224;
+            readonly '4:3': 299;
+        };
     };
     readonly MINOR: {
         readonly width: 519;
@@ -20,20 +16,41 @@ export declare const POPUP_DIMENSIONS: {
         readonly badgeHeight: 27;
     };
 };
+export declare const TEXT_LIMITS: {
+    readonly MAJOR: {
+        readonly TITLE: {
+            readonly MAX_LINES: 2;
+        };
+        readonly CONTENT: {
+            readonly MAX_LINES: 4;
+            readonly MAX_CHARS: 360;
+            readonly CHARS_PER_LINE: 72;
+        };
+    };
+};
 /**
  * Spacing constants
  */
 export declare const SPACING: {
     readonly MAJOR: {
-        readonly contentMargin: "0 8px 0 0";
-        readonly imagePadding: "8px";
-        readonly titlePadding: "36px 0 0 0";
-        readonly buttonMarginTop: "16px";
-        readonly skipButtonTop: "10px";
-        readonly skipButtonRight: "10px";
-        readonly navigationBottom: "16px";
-        readonly navigationRight: "16px";
-        readonly navigationGap: "8px";
+        readonly containerPadding: "16px";
+        readonly contentGap: "16px";
+        readonly titleBottom: "0px";
+        readonly listGap: "8px";
+        readonly actionsTop: "16px";
+        readonly headerMarginBottom: "8px";
+        readonly contentMarginLeft: "0px";
+        readonly skipButtonContainerMargin: "8px";
+        readonly contentMargin: "0 0 0 0px";
+        readonly imagePadding: "0px";
+        readonly titlePadding: "0 0 0px 0";
+        readonly buttonMarginTop: "0px";
+        readonly skipButtonPadding: "2px 4px";
+        readonly skipButtonTop: "8px";
+        readonly skipButtonRight: "8px";
+        readonly navigationBottom: "0px";
+        readonly navigationRight: "0px";
+        readonly navigationGap: "4px";
     };
     readonly MINOR: {
         readonly imageMargin: "13px 10px 13px 10px";
@@ -43,14 +60,71 @@ export declare const SPACING: {
         readonly actionsGap: "16px";
     };
 };
-/**
- * Border radius constants
- */
 export declare const BORDER_RADIUS: {
-    readonly POPUP: "4px";
-    readonly IMAGE: "4px";
+    readonly POPUP: "8px";
+    readonly IMAGE: "6px";
     readonly BUTTON: "4px";
     readonly VIDEO_MODAL: "12px";
     readonly CLOSE_BUTTON: "50%";
     readonly SPOTLIGHT: "8px";
 };
+/**
+ * Design tokens - Colors
+ */
+export declare const DESIGN_COLORS: {
+    readonly BACKGROUND: {
+        readonly SURFACE: "#212121";
+        readonly IMAGE: "#F0F0F0";
+    };
+    readonly TEXT: {
+        readonly PRIMARY: "#FFFFFF";
+        readonly SECONDARY: "rgba(255, 255, 255, 0.8)";
+        readonly TERTIARY: "#BDBDBD";
+    };
+    readonly BUTTON: {
+        readonly PRIMARY_TEXT: "#FEC02D";
+        readonly PRIMARY_BORDER: "#FEC02D";
+    };
+    readonly ICON: {
+        readonly DISABLED: "rgba(255, 255, 255, 0.3)";
+        readonly ENABLED: "#FFFFFF";
+    };
+};
+/**
+ * Design tokens - Typography
+ */
+export declare const DESIGN_TYPOGRAPHY: {
+    readonly SKIP_BUTTON: {
+        readonly fontSize: "14px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+    readonly TITLE: {
+        readonly fontSize: "14px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+    readonly CONTENT: {
+        readonly fontSize: "12px";
+        readonly fontWeight: "400";
+        readonly lineHeight: "16px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+    readonly BUTTON: {
+        readonly fontSize: "14px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+};
+/**
+ * Design tokens - Dimensions
+ */
+export declare const DESIGN_DIMENSIONS: {
+    readonly IMAGE_HEIGHT: 224;
+    readonly NAVIGATION_BUTTON_SIZE: 24;
+    readonly BUTTON_HEIGHT: 32;
+    readonly BUTTON_PADDING_HORIZONTAL: "12px";
+};

package/dist/esm/components/feature-announcements/constants/dimensions.js

@@ -1 +1 @@
-const i={MAJOR:{width:959,height:274,imageWidth:480,imageHeight:274,imageInnerWidth:464,imageInnerHeight:258,imagePlaceholderWidth:290,imagePlaceholderHeight:258},MINOR:{width:519,height:160,imageWidth:235,imageHeight:134,badgeHeight:27}},t={MAJOR:{contentMargin:"0 8px 0 0",imagePadding:"8px",titlePadding:"36px 0 0 0",buttonMarginTop:"16px",skipButtonTop:"10px",skipButtonRight:"10px",navigationBottom:"16px",navigationRight:"16px",navigationGap:"8px"},MINOR:{imageMargin:"13px 10px 13px 10px",contentMargin:"13px 13px 13px 3px",actionsBottom:"13px",actionsRight:"10px",actionsGap:"16px"}},p={POPUP:"4px",IMAGE:"4px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"};export{p as BORDER_RADIUS,i as POPUP_DIMENSIONS,t as SPACING};
+const t={MAJOR:{height:224,textAreaWidth:398,imageWidth:{"16:9":398,"1:1":224,"4:3":299}},MINOR:{width:519,height:160,imageWidth:235,imageHeight:134,badgeHeight:27}},i={MAJOR:{containerPadding:"16px",contentGap:"16px",titleBottom:"0px",listGap:"8px",actionsTop:"16px",headerMarginBottom:"8px",contentMarginLeft:"0px",skipButtonContainerMargin:"8px",contentMargin:"0 0 0 0px",imagePadding:"0px",titlePadding:"0 0 0px 0",buttonMarginTop:"0px",skipButtonPadding:"2px 4px",skipButtonTop:"8px",skipButtonRight:"8px",navigationBottom:"0px",navigationRight:"0px",navigationGap:"4px"},MINOR:{imageMargin:"13px 10px 13px 10px",contentMargin:"13px 13px 13px 3px",actionsBottom:"13px",actionsRight:"10px",actionsGap:"16px"}},n={POPUP:"8px",IMAGE:"6px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"},p={BACKGROUND:{SURFACE:"#212121",IMAGE:"#F0F0F0"},TEXT:{PRIMARY:"#FFFFFF",SECONDARY:"rgba(255, 255, 255, 0.8)",TERTIARY:"#BDBDBD"},BUTTON:{PRIMARY_TEXT:"#FEC02D",PRIMARY_BORDER:"#FEC02D"},ICON:{DISABLED:"rgba(255, 255, 255, 0.3)",ENABLED:"#FFFFFF"}},e={SKIP_BUTTON:{fontSize:"14px",fontWeight:"600",lineHeight:"20px",fontFamily:"Inter, sans-serif"},TITLE:{fontSize:"14px",fontWeight:"600",lineHeight:"20px",fontFamily:"Inter, sans-serif"},CONTENT:{fontSize:"12px",fontWeight:"400",lineHeight:"16px",fontFamily:"Inter, sans-serif"},BUTTON:{fontSize:"14px",fontWeight:"600",lineHeight:"20px",fontFamily:"Inter, sans-serif"}},x={IMAGE_HEIGHT:224,NAVIGATION_BUTTON_SIZE:24,BUTTON_HEIGHT:32,BUTTON_PADDING_HORIZONTAL:"12px"};export{n as BORDER_RADIUS,p as DESIGN_COLORS,x as DESIGN_DIMENSIONS,e as DESIGN_TYPOGRAPHY,t as POPUP_DIMENSIONS,i as SPACING};

package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts

@@ -27,7 +27,7 @@ export declare const minorStepStyles: {
     tooltip: {
         padding: number;
         backgroundColor: string;
-        borderRadius: "4px";
+        borderRadius: "8px";
         border: string;
         filter: string;
         boxShadow: string;
@@ -101,7 +101,7 @@ export declare const getMinorJoyrideStyles: (isClosing: boolean) => {
     tooltip: {
         padding: number;
         backgroundColor: string;
-        borderRadius: "4px";
+        borderRadius: "8px";
         border: string;
         filter: string;
         boxShadow: string;

package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts

@@ -1,6 +1,10 @@
 import { CSSProperties } from 'react';
-export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string) => {
+import { ButtonStyle } from '../types/feature.types';
+export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string, ratio?: '16:9' | '1:1' | '4:3', padding?: string, primaryButtonStyle?: ButtonStyle, secondaryButtonStyle?: ButtonStyle) => {
+    outerWrapper: CSSProperties;
     container: CSSProperties;
+    headerContainer: CSSProperties;
+    contentWrapper: CSSProperties;
     skipButton: {
         base: CSSProperties;
         hover: CSSProperties;
@@ -8,13 +12,22 @@ export declare const getMajorPopupStyles: (startAnimation: boolean, transform: s
     imageContainer: CSSProperties;
     image: CSSProperties;
     imagePlaceholder: CSSProperties;
+    videoOverlay: CSSProperties;
+    playIcon: CSSProperties;
     contentContainer: CSSProperties;
+    skipButtonContainer: CSSProperties;
     title: CSSProperties;
     content: CSSProperties;
+    actionsWrapper: CSSProperties;
+    buttonsGroup: CSSProperties;
     exploreButton: {
         base: CSSProperties;
         hover: CSSProperties;
     };
+    secondaryButton: {
+        base: CSSProperties;
+        hover: CSSProperties;
+    };
     navigationContainer: CSSProperties;
     navigationButton: (disabled: boolean) => {
         base: CSSProperties;

package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js

@@ -1 +1 @@
-import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{POPUP_DIMENSIONS as n,BORDER_RADIUS as i,SPACING as o}from"../constants/dimensions.js";import{Z_INDEX as a}from"../constants/zIndex.js";const r=(r,l)=>({container:{width:`${n.MAJOR.width}px`,height:`${n.MAJOR.height}px`,display:"flex",backgroundColor:t.grayscale[900],borderRadius:i.POPUP,overflow:"hidden",position:"relative",transform:r?l:"scale(1)",opacity:r?0:1,transition:e},skipButton:{base:{position:"absolute",top:o.MAJOR.skipButtonTop,right:o.MAJOR.skipButtonRight,background:"transparent",border:"none",color:t.grayscale[400],fontSize:"14px",fontWeight:"500",cursor:"pointer",zIndex:a.SKIP_BUTTON,transition:"all 0.2s"},hover:{backgroundColor:t.grayscale[100],color:t.grayscale[700]}},imageContainer:{backgroundColor:t.grayscale[900],width:`${n.MAJOR.imageWidth}px`,height:`${n.MAJOR.imageHeight}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:o.MAJOR.imagePadding},image:{width:`${n.MAJOR.imageInnerWidth}px`,height:`${n.MAJOR.imageInnerHeight}px`,objectFit:"cover"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:`${n.MAJOR.imagePlaceholderWidth}px`,height:`${n.MAJOR.imagePlaceholderHeight}px`,display:"flex",alignItems:"center",justifyContent:"center"},contentContainer:{flex:1,display:"flex",margin:o.MAJOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:o.MAJOR.titlePadding,color:t.grayscale.white,lineHeight:"1.25",textAlign:"left"},content:{fontSize:"14px",lineHeight:"1.5",color:"rgba(255, 255, 255, 0.8)",textAlign:"left"},exploreButton:{base:{backgroundColor:"transparent",border:`1px solid ${t.warning[500]}`,color:t.warning[500],borderRadius:i.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",marginTop:o.MAJOR.buttonMarginTop},hover:{backgroundColor:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{position:"absolute",bottom:o.MAJOR.navigationBottom,right:o.MAJOR.navigationRight,display:"flex",gap:o.MAJOR.navigationGap,alignItems:"center"},navigationButton:e=>({base:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:e?t.grayscale[700]:t.grayscale.white,fontSize:"20px",cursor:e?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},hover:{color:t.warning[500]}})});export{r as getMajorPopupStyles};
+import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{SPACING as n,POPUP_DIMENSIONS as o,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return o.MAJOR.imageWidth[t]||o.MAJOR.imageWidth["16:9"]},s=(t,e)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==e?void 0:e.textColor)&&{color:e.textColor}),(null==e?void 0:e.backgroundColor)&&{backgroundColor:e.backgroundColor}),(null==e?void 0:e.borderColor)&&{borderColor:e.borderColor}),g=function(g,c){let p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",T=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n.MAJOR.containerPadding,f=arguments.length>4?arguments[4]:void 0,h=arguments.length>5?arguments[5]:void 0;const u=d(p),O=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";const e=d(t);let n;switch(t){case"16:9":n=Math.round(e*(9/16));break;case"1:1":n=e;break;case"4:3":n=Math.round(e*(3/4));break;default:n=l.IMAGE_HEIGHT}return Math.min(n,224)}(p),x=parseInt(T,10)||16,b=x+u+parseInt(n.MAJOR.contentGap,10)+o.MAJOR.textAreaWidth+x,m=O+2*x;return{outerWrapper:{width:`${x+d("16:9")+parseInt(n.MAJOR.contentGap,10)+o.MAJOR.textAreaWidth+x}px`,display:"flex",justifyContent:"flex-end",background:"transparent"},container:{width:`${b}px`,height:"auto",minHeight:`${m}px`,display:"flex",flexDirection:"column",backgroundColor:i.BACKGROUND.SURFACE,borderRadius:r.POPUP,overflow:"hidden",position:"relative",padding:T,transform:g?c:"scale(1)",opacity:g?0:1,transition:e,boxSizing:"border-box"},headerContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.MAJOR.headerMarginBottom,position:"relative"},contentWrapper:{display:"flex",flex:1,gap:n.MAJOR.contentGap},skipButton:{base:{background:"transparent",border:"none",color:i.TEXT.TERTIARY,fontSize:a.SKIP_BUTTON.fontSize,fontWeight:a.SKIP_BUTTON.fontWeight,cursor:"pointer",padding:n.MAJOR.skipButtonPadding,borderRadius:r.BUTTON,fontFamily:a.SKIP_BUTTON.fontFamily,lineHeight:a.SKIP_BUTTON.lineHeight},hover:{backgroundColor:"rgba(255, 255, 255, 0.10)",color:t.grayscale[700]}},imageContainer:{backgroundColor:i.BACKGROUND.IMAGE,width:`${u}px`,height:`${O}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:r.BUTTON,overflow:"hidden",flexShrink:0},image:{width:"100%",height:"100%",objectFit:"cover"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.grayscale[800]},videoOverlay:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.4)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",zIndex:10,transition:"opacity 0.2s"},playIcon:{width:"84px",height:"84px",color:"#060606ff"},contentContainer:{flex:"1 0 auto",width:`${o.MAJOR.textAreaWidth}px`,minWidth:`${o.MAJOR.textAreaWidth}px`,maxWidth:`${o.MAJOR.textAreaWidth}px`,display:"flex",flexDirection:"column",justifyContent:"flex-start",background:"transparent",gap:n.MAJOR.listGap},skipButtonContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.MAJOR.skipButtonContainerMargin},title:{fontSize:a.TITLE.fontSize,fontWeight:a.TITLE.fontWeight,marginBottom:n.MAJOR.titleBottom,padding:0,color:i.TEXT.PRIMARY,lineHeight:a.TITLE.lineHeight,textAlign:"left",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",fontFamily:a.TITLE.fontFamily},content:{fontSize:a.CONTENT.fontSize,lineHeight:a.CONTENT.lineHeight,color:i.TEXT.SECONDARY,textAlign:"left",marginBottom:"auto",fontFamily:a.CONTENT.fontFamily,fontWeight:a.CONTENT.fontWeight},actionsWrapper:{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:"auto",gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.MAJOR.listGap},exploreButton:{base:s({backgroundColor:"transparent",border:`1px solid ${i.BUTTON.PRIMARY_BORDER}`,color:i.BUTTON.PRIMARY_TEXT,borderRadius:r.BUTTON,fontSize:a.BUTTON.fontSize,fontWeight:a.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${l.BUTTON_PADDING_HORIZONTAL}`,height:`${l.BUTTON_HEIGHT}px`,textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight},f),hover:{backgroundColor:"rgba(255, 255, 255, 0.10)"}},secondaryButton:{base:s({backgroundColor:"transparent",color:i.BUTTON.PRIMARY_TEXT,borderRadius:r.BUTTON,fontSize:a.BUTTON.fontSize,fontWeight:a.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${l.BUTTON_PADDING_HORIZONTAL}`,height:`${l.BUTTON_HEIGHT}px`,border:"none",boxShadow:"none",textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight,transition:"none"},h),hover:{backgroundColor:(null==h?void 0:h.backgroundColor)?`${h.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:n.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:`${l.NAVIGATION_BUTTON_SIZE}px`,height:`${l.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:t?i.ICON.DISABLED:i.ICON.ENABLED,fontSize:"16px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:r.BUTTON,padding:0},hover:{backgroundColor:"rgba(255, 255, 255, 0.10)"}})}};export{g as getMajorPopupStyles};

package/dist/esm/components/feature-announcements/styles/minorPopup.styles.d.ts

@@ -4,8 +4,6 @@ export declare const getMinorPopupStyles: (startAnimation: boolean, transform: s
     imageContainer: CSSProperties;
     imageWrapper: CSSProperties;
     image: CSSProperties;
-    badge: CSSProperties;
-    badgeText: CSSProperties;
     imagePlaceholder: CSSProperties;
     contentContainer: CSSProperties;
     title: CSSProperties;

package/dist/esm/components/feature-announcements/styles/minorPopup.styles.js

@@ -1 +1 @@
-import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{POPUP_DIMENSIONS as i,BORDER_RADIUS as o,SPACING as n}from"../constants/dimensions.js";import{Z_INDEX as a}from"../constants/zIndex.js";const r=(r,s)=>({container:{width:`${i.MINOR.width}px`,height:`${i.MINOR.height}px`,display:"flex",backgroundColor:t.grayscale.white,borderRadius:o.POPUP,overflow:"hidden",position:"relative",boxShadow:"0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",transform:r?s:"scale(1)",opacity:r?0:1,transition:e},imageContainer:{backgroundColor:t.grayscale[50],borderRadius:o.IMAGE,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:n.MINOR.imageMargin,width:`${i.MINOR.imageWidth}px`,minWidth:`${i.MINOR.imageWidth}px`,maxWidth:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},imageWrapper:{position:"relative",width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},image:{width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`,objectFit:"cover",borderRadius:o.IMAGE,display:"block"},badge:{position:"absolute",top:"0px",left:"0px",right:"0px",height:`${i.MINOR.badgeHeight}px`,backgroundColor:"rgba(0, 0, 0, 0.26)",borderRadius:`${o.IMAGE} ${o.IMAGE} ${o.IMAGE} ${o.IMAGE}`,display:"flex",alignItems:"center",justifyContent:"center",zIndex:a.IMAGE_BADGE},badgeText:{color:t.grayscale.white,fontWeight:"600",fontSize:"14px"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.grayscale[100],borderRadius:o.IMAGE},contentContainer:{flex:1,display:"flex",margin:n.MINOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:"0 0 0 0",color:t.grayscale[900],lineHeight:"1.25",textAlign:"left"},content:{fontSize:"12px",fontWeight:"400",lineHeight:"1.2",color:t.grayscale[700],textAlign:"left",maxHeight:"48px",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical"},actionsContainer:{position:"absolute",bottom:n.MINOR.actionsBottom,right:n.MINOR.actionsRight,display:"flex",gap:n.MINOR.actionsGap,alignItems:"center"},understoodText:{color:t.brand[800],fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"},exploreButton:{backgroundColor:t.brand[800],border:"none",color:t.grayscale.white,borderRadius:o.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}});export{r as getMinorPopupStyles};
+import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{POPUP_DIMENSIONS as i,BORDER_RADIUS as o,SPACING as n}from"../constants/dimensions.js";const a=(a,r)=>({container:{width:`${i.MINOR.width}px`,height:`${i.MINOR.height}px`,display:"flex",backgroundColor:t.grayscale.white,borderRadius:o.POPUP,overflow:"hidden",position:"relative",boxShadow:"0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",transform:a?r:"scale(1)",opacity:a?0:1,transition:e},imageContainer:{backgroundColor:t.grayscale[50],borderRadius:o.IMAGE,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:n.MINOR.imageMargin,width:`${i.MINOR.imageWidth}px`,minWidth:`${i.MINOR.imageWidth}px`,maxWidth:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},imageWrapper:{position:"relative",width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},image:{width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`,objectFit:"cover",borderRadius:o.IMAGE,display:"block"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.grayscale[100],borderRadius:o.IMAGE},contentContainer:{flex:1,display:"flex",margin:n.MINOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:"0 0 0 0",color:t.grayscale[900],lineHeight:"1.25",textAlign:"left"},content:{fontSize:"12px",fontWeight:"400",lineHeight:"1.2",color:t.grayscale[700],textAlign:"left",maxHeight:"48px",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical"},actionsContainer:{position:"absolute",bottom:n.MINOR.actionsBottom,right:n.MINOR.actionsRight,display:"flex",gap:n.MINOR.actionsGap,alignItems:"center"},understoodText:{color:t.brand[800],fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"},exploreButton:{backgroundColor:t.brand[800],border:"none",color:t.grayscale.white,borderRadius:o.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}});export{a as getMinorPopupStyles};

package/dist/esm/components/feature-announcements/types/feature.types.d.ts

@@ -5,6 +5,32 @@ export interface FirestoreTimestamp {
     seconds: number;
     nanoseconds?: number;
 }
+/**
+ * Button styling configuration
+ */
+export interface ButtonStyle {
+    textColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+/**
+ * Primary button configuration
+ */
+export interface ButtonConfig {
+    text?: string;
+    action?: 'Play Video' | 'Open link';
+    redirectionUrl?: string;
+    style?: ButtonStyle;
+}
+/**
+ * Secondary button configuration
+ */
+export interface SecondaryButtonConfig {
+    text?: string;
+    action?: 'Open link' | 'Close popup' | '';
+    redirectionUrl?: string;
+    style?: ButtonStyle;
+}
 /**
  * Feature announcement data model
  */
@@ -27,6 +53,9 @@ export interface FeatureAnnouncement {
     archived?: boolean;
     createdAt: FirestoreTimestamp;
     expirationDate?: FirestoreTimestamp | string | Date;
+    primaryButton?: ButtonConfig;
+    secondaryButton?: SecondaryButtonConfig;
+    padding?: string;
 }
 /**
  * Store feature progress tracking
@@ -39,3 +68,21 @@ export interface StoreFeatureProgress {
  * Feature update types
  */
 export type FeatureUpdateType = 'Major' | 'Minor';
+/**
+ * Announcement event data (for tracking when announcement is shown)
+ */
+export interface AnnouncementEvent {
+    storeId: string;
+    announcementId: string;
+    announcementTitle: string;
+    imageUrl?: string;
+    videoUrl?: string;
+}
+/**
+ * Announcement interaction event data (for tracking button clicks)
+ */
+export interface AnnouncementInteractionEvent extends AnnouncementEvent {
+    buttonClicked: 'Primary' | 'Secondary' | 'Skip';
+    buttonName: string;
+    buttonUrl?: string;
+}

package/dist/esm/components/feature-announcements/types/props.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FeatureAnnouncement } from './feature.types';
+import { AnnouncementEvent, AnnouncementInteractionEvent, FeatureAnnouncement } from './feature.types';
 import { FeatureAnnouncementRepository } from './repository.types';
 import { RouterProps } from './router.types';
 /**
@@ -14,17 +14,27 @@ export interface PopupBaseProps {
     onPrevious: () => void;
     onNext: () => void;
     setIsClosing?: (isClosing: boolean) => void;
+    onSecondaryAction?: () => void;
 }
 /**
  * Major update popup props
  */
 export interface MajorUpdatePopupProps extends PopupBaseProps {
+    /**
+     * Aspect ratio for the image/video container
+     * @default '16:9'
+     */
+    ratio?: '16:9' | '1:1' | '4:3';
+    /**
+     * Custom padding for the popup container
+     * @default '16px'
+     */
+    padding?: string;
 }
 /**
  * Minor update popup props
  */
-export interface MinorUpdatePopupProps extends PopupBaseProps {
-}
+export type MinorUpdatePopupProps = PopupBaseProps;
 /**
  * Video modal props
  */
@@ -40,4 +50,16 @@ export interface FeatureAnnouncementProviderProps extends FeatureAnnouncementRep
     children: React.ReactNode;
     module?: string;
     router?: RouterProps;
+    /**
+     * Store ID for event tracking
+     */
+    storeId?: string;
+    /**
+     * Callback fired when a major announcement popup is shown
+     */
+    onAnnouncementShown?: (event: AnnouncementEvent) => void;
+    /**
+     * Callback fired when user interacts with an announcement (clicks a button)
+     */
+    onAnnouncementInteracted?: (event: AnnouncementInteractionEvent) => void;
 }