@bikdotai/bik-component-library 0.0.744-beta.1 → 0.0.744-beta.11

package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.js

@@ -0,0 +1,133 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const o=r.default.div`
+	border-radius: 8px;
+	border: 1px solid #e0e0e0;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	background: ${t.COLORS.surface.standard};
+
+	.accordion__overview {
+		padding: 16px !important;
+		border-bottom: none;
+	}
+`,l=r.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`,n=r.default.div`
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+`;r.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	overflow-y: auto;
+	flex: 1;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: ${t.COLORS.stroke.primary};
+		border-radius: 3px;
+	}
+`,r.default.div`
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px;
+	background: ${e=>e.completed?"#F0F7F4":t.COLORS.surface.standard};
+	border: 1px solid
+		${e=>e.completed?"#D4E9E3":t.COLORS.stroke.primary};
+	border-radius: 6px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: ${e=>e.completed?"#E8F4F0":t.COLORS.background.base};
+	}
+`,r.default.input`
+	width: 18px;
+	height: 18px;
+	margin-top: 2px;
+	cursor: pointer;
+	flex-shrink: 0;
+`,r.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1;
+`,r.default.p`
+	margin: 0;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+	color: ${e=>e.completed?t.COLORS.content.secondary:t.COLORS.content.primary};
+	text-decoration: ${e=>e.completed?"line-through":"none"};
+`,r.default.p`
+	margin: 0;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	color: ${t.COLORS.content.secondary};
+	opacity: ${e=>e.completed?.6:1};
+`;const a=r.default.div`
+	border-radius: 8px;
+	border: 1px solid
+		${e=>e.isActive?t.COLORS.stroke.primary:"#E0E0E0"};
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	background: ${t.COLORS.surface.standard};
+	transition: all 0.2s ease;
+
+	&:hover {
+		border-color: ${e=>e.isActive?t.COLORS.stroke.primary:"#D0D0D0"};
+	}
+`,d=r.default.div`
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	width: 100%;
+`,p=r.default.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+`,s=r.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1;
+`,c=r.default.div`
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 24px;
+	color: ${e=>e.completed?t.COLORS.background.positive.vibrant:e.isActive?t.COLORS.content.primary:t.COLORS.content.placeholder} !important;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+`,x=r.default.div`
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	color: ${e=>e.isActive?t.COLORS.content.secondary:t.COLORS.content.placeholder};
+	margin: 0;
+`,f=r.default.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+`,u=r.default.div`
+	width: 100%;
+	margin-top: 8px;
+`;exports.HeaderSection=l,exports.ProgressBarSection=n,exports.ProgressChecklistContainer=o,exports.SingleChecklistActionWrapper=f,exports.SingleChecklistAlertRow=u,exports.SingleChecklistContent=s,exports.SingleChecklistHeader=c,exports.SingleChecklistIconWrapper=p,exports.SingleChecklistItem=a,exports.SingleChecklistMainRow=d,exports.SingleChecklistSubheader=x;

package/dist/cjs/components/ProgressChecklist/ProgressStepper.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface StepItem {
+    id?: string;
+    text: string;
+    label?: string;
+    onClick?: () => void;
+    isCompleted?: boolean;
+}
+interface ProgressStepperProps {
+    steps?: StepItem[];
+    onStepClick?: (id: string) => void;
+    isStepperActive?: boolean;
+}
+declare const _default: React.NamedExoticComponent<ProgressStepperProps>;
+export default _default;

package/dist/cjs/components/ProgressChecklist/ProgressStepper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),l=require("../button/Button.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(t);const s=n=>{let{steps:s=[],onStepClick:o,isStepperActive:r}=n;var a,c;const u=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[x,h]=t.useState(null!==(c=null===(a=u[0])||void 0===a?void 0:a.id)&&void 0!==c?c:null);return e.jsx("div",Object.assign({style:{paddingLeft:52}},{children:e.jsx("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:u.map(((t,n)=>{var s,a,c,p,v,g,C;return e.jsxs(d.default.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var i;const l=(0===n||(null===(i=u[n-1])||void 0===i?void 0:i.isCompleted))&&!0===r;return!0===t.isCompleted?e.jsx("div",Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsxs("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",fill:"#EFE6F9"}),e.jsx("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",stroke:"#4B1583"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.8047 7.52851C18.0651 7.78886 18.0651 8.21097 17.8047 8.47132L10.4714 15.8047C10.2111 16.065 9.78894 16.065 9.5286 15.8047L6.19526 12.4713C5.93491 12.211 5.93491 11.7889 6.19526 11.5285C6.45561 11.2682 6.87772 11.2682 7.13807 11.5285L10 14.3904L16.8619 7.52851C17.1223 7.26816 17.5444 7.26816 17.8047 7.52851Z",fill:"#4B1583"})]}))})):e.jsx("div",Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:l?"#4B1583":"transparent",color:l?"#FFFFFF":"#BDBDBD",border:"1px solid "+(l?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:n+1}))}))})(),e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(a=null!==(s=t.label)&&void 0!==s?s:t.text)&&void 0!==a?a:`step ${n+1}`}`},{children:e.jsx(l.Button,{buttonText:null!==(p=null!==(c=t.label)&&void 0!==c?c:t.text)&&void 0!==p?p:`Step ${n+1}`,buttonType:"text",buttonTextColor:t.isCompleted?i.COLORS.text.secondary:0!==n&&!0!==(null===(v=u[n-1])||void 0===v?void 0:v.isCompleted)||!r?i.COLORS.content.inactive:i.COLORS.stroke.brand,matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,i;h(null!==(e=t.id)&&void 0!==e?e:x),t.isCompleted||!r||0!==n&&!0!==(null===(i=u[n-1])||void 0===i?void 0:i.isCompleted)||(t.onClick?t.onClick():t.id&&(null==o||o(t.id)))}})})),!t.isCompleted&&(0===n||!0===(null===(g=u[n-1])||void 0===g?void 0:g.isCompleted))&&r&&e.jsx("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center"},"aria-hidden":!0,onClick:e=>{var i,l;h(null!==(i=t.id)&&void 0!==i?i:x),t.isCompleted||!r||0!==n&&!0!==(null===(l=u[n-1])||void 0===l?void 0:l.isCompleted)||(t.onClick?t.onClick():t.id&&(null==o||o(t.id)))}},{children:e.jsx("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.83333 6.66667C5.3731 6.66667 5 6.29357 5 5.83333C5 5.3731 5.3731 5 5.83333 5H14.1667C14.6269 5 15 5.3731 15 5.83333V14.1667C15 14.6269 14.6269 15 14.1667 15C13.7064 15 13.3333 14.6269 13.3333 14.1667V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H5.83333Z",fill:"#4B1583"})}))}))]})),n!==u.length-1&&e.jsx("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(C=t.id)&&void 0!==C?C:`step-${n}`)}))}))}))};var o=d.default.memo(s);exports.default=o;

package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface TagProps {
+    tagText: string | number;
+    variant?: 'regular' | 'circle' | 'compressed';
+    type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+    theme?: 'light' | 'dark';
+}
+interface SimpleChecklistItemProps {
+    header: string;
+    subheader?: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    completedIcon?: React.ReactNode;
+    isActive?: boolean;
+    isCompleted?: boolean;
+    tag?: TagProps;
+}
+declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
+export default SimpleChecklistItem;

package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/ActiveChecklistIcon.js"),t=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js"),c=require("../tag/Tag.js"),l=require("./ProgressChecklist.style.js");exports.default=n=>{let{header:r,subheader:a,icon:o,activeIcon:h,completedIcon:d,isActive:j,isCompleted:g,tag:u}=n;return e.jsx("div",{children:e.jsxs(l.SingleChecklistMainRow,{children:[e.jsx(l.SingleChecklistIconWrapper,{children:g?null!=d?d:e.jsx(t.CompletedChecklistIcon,{}):j?null!=h?h:e.jsx(s.ActiveChecklistIcon,{}):null!=o?o:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(l.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(l.SingleChecklistHeader,Object.assign({completed:g,isActive:j},{children:r})),(null==u?void 0:u.tagText)&&e.jsx(c.Tag,{tagText:u.tagText,variant:u.variant,type:u.type,theme:u.theme})]})),a&&e.jsx(l.SingleChecklistSubheader,Object.assign({isActive:j},{children:a}))]})]})})};

package/dist/cjs/components/ProgressChecklist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressChecklist } from './ProgressChecklist';
+export type { ChecklistItemType } from './ProgressChecklist';

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),n=require("./constants/index.js"),r=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var s=require("./utils/htmlHelpers.js"),o=require("./utils/animationHelpers.js"),a=require("./utils/elementHelpers.js");exports.default=i=>{let{feature:l,currentIndex:c,totalFeatures:u,onSkip:d,onExplore:g,onPrevious:p,onNext:y,setIsClosing:j,onSecondaryAction:b,ratio:h="16:9",padding:x}=i;const[v,f]=e.useState(!1),[B,T]=e.useState(!1),[O,k]=e.useState(""),m=e.useRef(null),[w,E]=e.useState(!1),[L,C]=e.useState(!0),M=e.useRef(null);e.useEffect((()=>{v&&T(!0)}),[v]);const P=()=>{g(),o.hideJoyrideArrow(m.current);const t=a.findWhatsNewButton();if(t&&m.current){const e=o.calculateCloseTransform(m.current,t);k(e)}else k("scale(0)");null==j||j(!0),f(!0)},U=t=>{if(t.preventDefault(),t.stopPropagation(),l.secondaryButtonUrl){l.secondaryButtonUrl.startsWith("http")?window.open(l.secondaryButtonUrl,"_blank","noopener,noreferrer"):window.location.href=l.secondaryButtonUrl}b&&b(),o.hideJoyrideArrow(m.current);const e=a.findWhatsNewButton();if(e&&m.current){const t=o.calculateCloseTransform(m.current,e);k(t)}else k("scale(0)");null==j||j(!0),f(!0)},_=r.getMajorPopupStyles(B,O,h,x||l.padding,l.primaryButtonStyle,l.secondaryButtonStyle),W=t=>{t.stopPropagation(),M.current&&(M.current.paused?(M.current.play(),E(!1),C(!1)):(M.current.pause(),E(!0),C(!0)))};return t.jsxs("div",Object.assign({ref:m,style:_.container},{children:[t.jsx("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"}),t.jsxs("div",Object.assign({style:_.contentWrapper},{children:[t.jsx("div",Object.assign({style:_.imageContainer},{children:l.productVideo?t.jsxs(t.Fragment,{children:[t.jsx("video",{ref:M,src:l.productVideo,style:_.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,onClick:W,onPlay:()=>{C(!1)},onPause:()=>{C(!0)},"aria-label":`Product video for ${l.title}`}),(w||L)&&t.jsx("div",Object.assign({style:_.videoOverlay,onClick:W,role:"button",tabIndex:0,"aria-label":w?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),M.current&&(M.current.paused?(M.current.play(),E(!1),C(!1)):(M.current.pause(),E(!0),C(!0))))}},{children:t.jsx((()=>t.jsxs("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",stroke:"currentColor",strokeWidth:"0",strokeLinecap:"round",strokeLinejoin:"round",style:_.playIcon},{children:[t.jsx("circle",{cx:"12",cy:"12",r:"10",fill:"rgba(0,0,0,0.5)",stroke:"none"}),t.jsx("polygon",{points:"10 8 16 12 10 16 10 8",fill:"#fff",stroke:"none"})]}))),{})}))]}):l.displayImage?t.jsx("img",{src:l.displayImage,alt:l.title,style:_.image,onError:t=>{l.image&&(t.target.src=l.image)}}):t.jsx("div",Object.assign({style:_.imagePlaceholder},{children:n.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),t.jsxs("div",Object.assign({style:_.contentContainer},{children:[t.jsx("div",Object.assign({style:_.skipButtonContainer},{children:t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{o.hideJoyrideArrow(m.current);const e=a.findWhatsNewButton();if(e&&m.current){const t=o.calculateCloseTransform(m.current,e);k(t)}else k("scale(0)");null==j||j(!0),f(!0),o.executeAfterAnimation(t)})(d)},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.jsx("h3",Object.assign({style:_.title},{children:l.title})),t.jsx("div",{"data-popup-content":!0,style:_.content,dangerouslySetInnerHTML:{__html:s.decodeHTMLEntities(l.content||l.body||"")}}),t.jsxs("div",Object.assign({style:_.actionsWrapper},{children:[t.jsxs("div",Object.assign({style:_.buttonsGroup},{children:[l.redirectUrl?t.jsx("a",Object.assign({href:l.redirectUrl,target:l.redirectUrl.startsWith("http")?"_blank":"_self",rel:l.redirectUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:P,style:_.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,_.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,_.exploreButton.base)},{children:l.buttonText||n.TEXT.DEFAULT_BUTTON_TEXT})):t.jsx("button",Object.assign({onClick:P,style:_.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,_.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,_.exploreButton.base)},{children:l.buttonText||n.TEXT.DEFAULT_BUTTON_TEXT})),l.secondaryButtonText&&(l.secondaryButtonUrl?t.jsx("a",Object.assign({href:l.secondaryButtonUrl,target:l.secondaryButtonUrl.startsWith("http")?"_blank":"_self",rel:l.secondaryButtonUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:U,style:_.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,_.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,_.secondaryButton.base)},{children:l.secondaryButtonText})):t.jsx("button",Object.assign({onClick:U,style:_.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,_.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,_.secondaryButton.base)},{children:l.secondaryButtonText})))]})),u>1&&t.jsxs("div",Object.assign({style:_.navigationContainer},{children:[t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),p()},disabled:0===c,style:_.navigationButton(0===c).base,onMouseEnter:t=>{0!==c&&Object.assign(t.currentTarget.style,_.navigationButton(!1).hover)},onMouseLeave:t=>{0!==c&&Object.assign(t.currentTarget.style,_.navigationButton(!1).base)}},{children:t.jsx("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:t.jsx("path",{d:"M15 18L9 12L15 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}))})),t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),y()},disabled:c===u-1,style:_.navigationButton(c===u-1).base,onMouseEnter:t=>{c!==u-1&&Object.assign(t.currentTarget.style,_.navigationButton(!1).hover)},onMouseLeave:t=>{c!==u-1&&Object.assign(t.currentTarget.style,_.navigationButton(c===u-1).base)}},{children:t.jsx("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:t.jsx("path",{d:"M9 18L15 12L9 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}))}))]}))]}))]}))]}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("./constants/index.js"),n=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var r=require("./utils/htmlHelpers.js"),a=require("./utils/animationHelpers.js"),i=require("./utils/elementHelpers.js");exports.default=o=>{let{feature:l,currentIndex:u,totalFeatures:c,onSkip:g,onExplore:j,onPrevious:d,onNext:b,setIsClosing:T}=o;const[y,p]=t.useState(!1),[v,x]=t.useState(!1),[O,h]=t.useState(""),E=t.useRef(null);t.useEffect((()=>{y&&x(!0)}),[y]);const m=n.getMajorPopupStyles(v,O);return e.jsxs("div",Object.assign({ref:E,style:m.container},{children:[e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),(e=>{a.hideJoyrideArrow(E.current);const t=i.findWhatsNewButton();if(t&&E.current){const e=a.calculateCloseTransform(E.current,t);h(e)}else h("scale(0)");null==T||T(!0),p(!0),a.executeAfterAnimation(e)})(g)},style:m.skipButton.base,onMouseEnter:e=>Object.assign(e.currentTarget.style,m.skipButton.hover),onMouseLeave:e=>Object.assign(e.currentTarget.style,m.skipButton.base)},{children:s.TEXT.SKIP_BUTTON})),e.jsx("div",Object.assign({style:m.imageContainer},{children:l.displayImage?e.jsx("img",{src:l.displayImage,alt:l.title,style:m.image,onError:e=>{l.image&&(e.target.src=l.image)}}):e.jsx("div",Object.assign({style:m.imagePlaceholder},{children:s.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),e.jsxs("div",Object.assign({style:m.contentContainer},{children:[e.jsxs("div",{children:[e.jsx("h3",Object.assign({style:m.title},{children:l.title})),e.jsx("div",{style:m.content,dangerouslySetInnerHTML:{__html:r.decodeHTMLEntities(l.content||l.body||"")}}),e.jsx("button",Object.assign({onClick:()=>{j(),a.hideJoyrideArrow(E.current);const e=i.findWhatsNewButton();if(e&&E.current){const t=a.calculateCloseTransform(E.current,e);h(t)}else h("scale(0)");null==T||T(!0),p(!0)},style:m.exploreButton.base,onMouseEnter:e=>Object.assign(e.currentTarget.style,m.exploreButton.hover),onMouseLeave:e=>Object.assign(e.currentTarget.style,m.exploreButton.base)},{children:l.buttonText||s.TEXT.DEFAULT_BUTTON_TEXT}))]}),c>1&&e.jsxs("div",Object.assign({style:m.navigationContainer},{children:[e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),d()},disabled:0===u,style:m.navigationButton(0===u).base,onMouseEnter:e=>{0!==u&&Object.assign(e.currentTarget.style,m.navigationButton(!1).hover)},onMouseLeave:e=>{0!==u&&Object.assign(e.currentTarget.style,m.navigationButton(!1).base)}},{children:s.TEXT.NAVIGATION_PREVIOUS})),e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),b()},disabled:u===c-1,style:m.navigationButton(u===c-1).base,onMouseEnter:e=>{u!==c-1&&Object.assign(e.currentTarget.style,m.navigationButton(!1).hover)},onMouseLeave:e=>{u!==c-1&&Object.assign(e.currentTarget.style,m.navigationButton(u===c-1).base)}},{children:s.TEXT.NAVIGATION_NEXT}))]}))]}))]}))};

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

@@ -1,12 +1,16 @@
+/**
+ * Popup dimension constants
+ */
 export declare const POPUP_DIMENSIONS: {
     readonly MAJOR: {
-        readonly height: 224;
-        readonly textAreaWidth: 398;
-        readonly imageWidth: {
-            readonly '16:9': 398;
-            readonly '1:1': 224;
-            readonly '4:3': 299;
-        };
+        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 MINOR: {
         readonly width: 519;
@@ -16,41 +20,20 @@ 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 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 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 MINOR: {
         readonly imageMargin: "13px 10px 13px 10px";
@@ -60,71 +43,14 @@ export declare const SPACING: {
         readonly actionsGap: "16px";
     };
 };
+/**
+ * Border radius constants
+ */
 export declare const BORDER_RADIUS: {
-    readonly POPUP: "8px";
-    readonly IMAGE: "6px";
+    readonly POPUP: "4px";
+    readonly IMAGE: "4px";
     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/cjs/components/feature-announcements/constants/dimensions.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.BORDER_RADIUS={POPUP:"8px",IMAGE:"6px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"},exports.DESIGN_COLORS={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"}},exports.DESIGN_DIMENSIONS={IMAGE_HEIGHT:224,NAVIGATION_BUTTON_SIZE:24,BUTTON_HEIGHT:32,BUTTON_PADDING_HORIZONTAL:"12px"},exports.DESIGN_TYPOGRAPHY={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"}},exports.POPUP_DIMENSIONS={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}},exports.SPACING={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"}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.BORDER_RADIUS={POPUP:"4px",IMAGE:"4px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"},exports.POPUP_DIMENSIONS={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}},exports.SPACING={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"}};

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

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

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

@@ -1,9 +1,6 @@
 import { CSSProperties } from 'react';
-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) => {
+export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string) => {
     container: CSSProperties;
-    headerContainer: CSSProperties;
-    contentWrapper: CSSProperties;
     skipButton: {
         base: CSSProperties;
         hover: CSSProperties;
@@ -11,29 +8,16 @@ 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;
-        hover: {
-            backgroundColor: string;
-        } | {
-            backgroundColor?: undefined;
-        };
+        hover: CSSProperties;
     };
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../../constants/Theme.js"),e=require("../constants/animations.js"),n=require("../constants/dimensions.js");const o=(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});exports.getMajorPopupStyles=function(i,r){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n.SPACING.MAJOR.containerPadding,O=arguments.length>4?arguments[4]:void 0,I=arguments.length>5?arguments[5]:void 0;const N=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return n.POPUP_DIMENSIONS.MAJOR.imageWidth[t]||n.POPUP_DIMENSIONS.MAJOR.imageWidth["16:9"]}(a),S=parseInt(l,10)||16,s=n.DESIGN_DIMENSIONS.IMAGE_HEIGHT+2*S;return{container:{width:`${S+N+parseInt(n.SPACING.MAJOR.contentGap,10)+n.POPUP_DIMENSIONS.MAJOR.textAreaWidth+S}px`,height:"auto",minHeight:`${s}px`,display:"flex",flexDirection:"column",backgroundColor:n.DESIGN_COLORS.BACKGROUND.SURFACE,borderRadius:n.BORDER_RADIUS.BUTTON,overflow:"hidden",position:"relative",padding:l,transform:i?r:"scale(1)",opacity:i?0:1,transition:e.POPUP_TRANSITION,boxSizing:"border-box"},headerContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.SPACING.MAJOR.headerMarginBottom,position:"relative"},contentWrapper:{display:"flex",flex:1,gap:n.SPACING.MAJOR.contentGap},skipButton:{base:{background:"transparent",border:"none",color:n.DESIGN_COLORS.TEXT.TERTIARY,fontSize:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.fontWeight,cursor:"pointer",transition:"all 0.2s",padding:n.SPACING.MAJOR.skipButtonPadding,borderRadius:n.BORDER_RADIUS.BUTTON,fontFamily:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.fontFamily,lineHeight:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.lineHeight},hover:{backgroundColor:"rgba(255, 255, 255, 0.1)",color:n.DESIGN_COLORS.TEXT.PRIMARY}},imageContainer:{backgroundColor:n.DESIGN_COLORS.BACKGROUND.IMAGE,width:`${N}px`,height:`${n.DESIGN_DIMENSIONS.IMAGE_HEIGHT}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:n.BORDER_RADIUS.BUTTON,overflow:"hidden",flexShrink:0},image:{width:"100%",height:"100%",objectFit:"cover"},imagePlaceholder:{color:t.BASE_COLORS.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.BASE_COLORS.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,display:"flex",marginLeft:n.SPACING.MAJOR.contentMarginLeft,flexDirection:"column",justifyContent:"flex-start",background:"transparent",maxWidth:`${n.POPUP_DIMENSIONS.MAJOR.textAreaWidth}px`,gap:n.SPACING.MAJOR.listGap},skipButtonContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.SPACING.MAJOR.skipButtonContainerMargin},title:{fontSize:n.DESIGN_TYPOGRAPHY.TITLE.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.TITLE.fontWeight,marginBottom:n.SPACING.MAJOR.titleBottom,padding:0,color:n.DESIGN_COLORS.TEXT.PRIMARY,lineHeight:n.DESIGN_TYPOGRAPHY.TITLE.lineHeight,textAlign:"left",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",fontFamily:n.DESIGN_TYPOGRAPHY.TITLE.fontFamily},content:{fontSize:n.DESIGN_TYPOGRAPHY.CONTENT.fontSize,lineHeight:n.DESIGN_TYPOGRAPHY.CONTENT.lineHeight,color:n.DESIGN_COLORS.TEXT.SECONDARY,textAlign:"left",marginBottom:"auto",fontFamily:n.DESIGN_TYPOGRAPHY.CONTENT.fontFamily,fontWeight:n.DESIGN_TYPOGRAPHY.CONTENT.fontWeight},actionsWrapper:{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:n.SPACING.MAJOR.actionsTop,gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.SPACING.MAJOR.listGap},exploreButton:{base:o({backgroundColor:"transparent",border:`1px solid ${n.DESIGN_COLORS.BUTTON.PRIMARY_BORDER}`,color:n.DESIGN_COLORS.BUTTON.PRIMARY_TEXT,borderRadius:n.BORDER_RADIUS.BUTTON,fontSize:n.DESIGN_TYPOGRAPHY.BUTTON.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${n.DESIGN_DIMENSIONS.BUTTON_PADDING_HORIZONTAL}`,height:`${n.DESIGN_DIMENSIONS.BUTTON_HEIGHT}px`,transition:"all 0.2s",textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:n.DESIGN_TYPOGRAPHY.BUTTON.fontFamily,lineHeight:n.DESIGN_TYPOGRAPHY.BUTTON.lineHeight},O),hover:{backgroundColor:(null==O?void 0:O.backgroundColor)?`${O.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},secondaryButton:{base:o({backgroundColor:"transparent",color:n.DESIGN_COLORS.BUTTON.PRIMARY_TEXT,borderRadius:n.BORDER_RADIUS.BUTTON,fontSize:n.DESIGN_TYPOGRAPHY.BUTTON.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${n.DESIGN_DIMENSIONS.BUTTON_PADDING_HORIZONTAL}`,height:`${n.DESIGN_DIMENSIONS.BUTTON_HEIGHT}px`,transition:"all 0.2s",textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:n.DESIGN_TYPOGRAPHY.BUTTON.fontFamily,lineHeight:n.DESIGN_TYPOGRAPHY.BUTTON.lineHeight},I),hover:{backgroundColor:(null==I?void 0:I.backgroundColor)?`${I.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:n.SPACING.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:`${n.DESIGN_DIMENSIONS.NAVIGATION_BUTTON_SIZE}px`,height:`${n.DESIGN_DIMENSIONS.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:t?n.DESIGN_COLORS.ICON.DISABLED:n.DESIGN_COLORS.ICON.ENABLED,fontSize:"16px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s",borderRadius:n.BORDER_RADIUS.BUTTON,padding:0},hover:t?{}:{backgroundColor:"rgba(255, 255, 255, 0.1)"}})}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),t=require("../constants/animations.js"),n=require("../constants/dimensions.js"),i=require("../constants/zIndex.js");exports.getMajorPopupStyles=(o,r)=>({container:{width:`${n.POPUP_DIMENSIONS.MAJOR.width}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.height}px`,display:"flex",backgroundColor:e.BASE_COLORS.grayscale[900],borderRadius:n.BORDER_RADIUS.POPUP,overflow:"hidden",position:"relative",transform:o?r:"scale(1)",opacity:o?0:1,transition:t.POPUP_TRANSITION},skipButton:{base:{position:"absolute",top:n.SPACING.MAJOR.skipButtonTop,right:n.SPACING.MAJOR.skipButtonRight,background:"transparent",border:"none",color:e.BASE_COLORS.grayscale[400],fontSize:"14px",fontWeight:"500",cursor:"pointer",zIndex:i.Z_INDEX.SKIP_BUTTON,transition:"all 0.2s"},hover:{backgroundColor:e.BASE_COLORS.grayscale[100],color:e.BASE_COLORS.grayscale[700]}},imageContainer:{backgroundColor:e.BASE_COLORS.grayscale[900],width:`${n.POPUP_DIMENSIONS.MAJOR.imageWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imageHeight}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:n.SPACING.MAJOR.imagePadding},image:{width:`${n.POPUP_DIMENSIONS.MAJOR.imageInnerWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imageInnerHeight}px`,objectFit:"cover"},imagePlaceholder:{color:e.BASE_COLORS.grayscale[500],fontSize:"14px",textAlign:"center",width:`${n.POPUP_DIMENSIONS.MAJOR.imagePlaceholderWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imagePlaceholderHeight}px`,display:"flex",alignItems:"center",justifyContent:"center"},contentContainer:{flex:1,display:"flex",margin:n.SPACING.MAJOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:n.SPACING.MAJOR.titlePadding,color:e.BASE_COLORS.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 ${e.BASE_COLORS.warning[500]}`,color:e.BASE_COLORS.warning[500],borderRadius:n.BORDER_RADIUS.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",marginTop:n.SPACING.MAJOR.buttonMarginTop},hover:{backgroundColor:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{position:"absolute",bottom:n.SPACING.MAJOR.navigationBottom,right:n.SPACING.MAJOR.navigationRight,display:"flex",gap:n.SPACING.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:t?e.BASE_COLORS.grayscale[700]:e.BASE_COLORS.grayscale.white,fontSize:"20px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},hover:{color:e.BASE_COLORS.warning[500]}})});

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

@@ -5,14 +5,6 @@ export interface FirestoreTimestamp {
     seconds: number;
     nanoseconds?: number;
 }
-/**
- * Button styling configuration
- */
-export interface ButtonStyle {
-    textColor?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-}
 /**
  * Feature announcement data model
  */
@@ -35,11 +27,6 @@ export interface FeatureAnnouncement {
     archived?: boolean;
     createdAt: FirestoreTimestamp;
     expirationDate?: FirestoreTimestamp | string | Date;
-    primaryButtonStyle?: ButtonStyle;
-    secondaryButtonText?: string;
-    secondaryButtonUrl?: string;
-    secondaryButtonStyle?: ButtonStyle;
-    padding?: string;
 }
 /**
  * Store feature progress tracking

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

@@ -14,27 +14,17 @@ 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 type MinorUpdatePopupProps = PopupBaseProps;
+export interface MinorUpdatePopupProps extends PopupBaseProps {
+}
 /**
  * Video modal props
  */

package/dist/cjs/components/post-live-checklist/PostLiveChecklist.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface ChecklistItem {
+    id: string;
+    isCompleted: boolean;
+    isOpen?: boolean;
+    header: string;
+    image?: string;
+    subHeader?: string;
+}
+export interface ButtonGroupItem {
+    id: string;
+    title: string;
+    icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+export interface PostLiveChecklistProps {
+    title?: string;
+    subtitle?: string;
+    marketingChecklist?: ChecklistItem[];
+    supportChecklist?: ChecklistItem[];
+    onChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;
+    useCaseType?: 'marketing' | 'support' | 'both' | string;
+}
+export declare const PostLiveChecklist: React.FC<PostLiveChecklistProps>;

package/dist/cjs/components/post-live-checklist/PostLiveChecklist.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../buttonGroup/ButtonGroup.js"),i=require("../post-live-checklist-item/PostLiveChecklistItem.js"),r=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.PostLiveChecklist=o=>{let{title:a="Boost Performance",subtitle:l="Enable these features to make your assistant smarter",marketingChecklist:d=[],supportChecklist:u=[],onChecklistSetup:c,useCaseType:p}=o;var m,g;const[h,b]=t.useState("marketing"),[j,C]=t.useState("none"),[k,x]=t.useState("marketing");t.useEffect((()=>{const e=d.filter((e=>!e.isCompleted)).length,t=u.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?C("tabs"):(C("list"),e>0&&x("marketing"),t>0&&x("support")):C("none")}),[d,u]);const O=(()=>{const e=[{id:"marketing",title:"Marketing"},{id:"support",title:"Support"}];if(!p)return e;return"support"===String(p).toLowerCase()?[e[1],e[0]]:e})();t.useEffect((()=>{"tabs"===j&&O.length>0&&b(O[0].id)}),[j,p]);const v=e=>e.toUpperCase(),f=(e,t)=>{c&&c(e,t)};if("none"===j)return null;const y="tabs"===j?"marketing"===h?d:u:"marketing"===k?d:u;return e.jsxs("div",Object.assign({style:{padding:16,border:`1px solid ${n.COLORS.stroke.primary}`,backgroundColor:n.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",{children:[e.jsx(r.TitleRegular,Object.assign({color:(null===(m=n.COLORS.background)||void 0===m?void 0:m.brand)||"#4B1583"},{children:a})),e.jsx(r.BodySecondary,Object.assign({color:(null===(g=n.COLORS.content)||void 0===g?void 0:g.secondary)||"#666666"},{children:l}))]}),e.jsx("div",Object.assign({style:{marginTop:12}},{children:"tabs"===j?e.jsxs(e.Fragment,{children:[e.jsx(s.ButtonGroup,{size:"medium",gap:"12px",onButtonClick:e=>b(e),activeButtonId:h,buttonGroup:O}),e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:y.map((t=>e.jsx(i.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>f(t.id,v(h))},t.id)))}))]}):e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:y.map((t=>e.jsx(i.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>f(t.id,v(k))},t.id)))}))}))]}))};

package/dist/cjs/components/post-live-checklist/PostLiveChecklist.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export default _default;
+export declare const Default: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const WithBothChecklists: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const SupportFirstOrdering: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const ListModeSupport: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const ListModeMarketing: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const AllCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const CustomTitles: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const WithSomeCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;

package/dist/cjs/components/post-live-checklist/index.d.ts

@@ -0,0 +1,2 @@
+export { PostLiveChecklist } from './PostLiveChecklist';
+export type { PostLiveChecklistProps, ChecklistItem, } from './PostLiveChecklist';

package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PostLiveChecklistItemProps {
+    isCompleted: boolean;
+    header: string;
+    subHeader?: string;
+    isOpen?: boolean;
+    onSetup?: () => void;
+    image?: string;
+}
+export declare const PostLiveChecklistItem: React.FC<PostLiveChecklistItemProps>;

package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/CheckIndicatorIcon.js"),t=require("../../assets/icons/chevronDown.svg.js"),i=require("../../assets/icons/chevronUpOutline.svg.js"),r=require("react"),n=require("../button/Button.js"),c=require("../TypographyStyle.js"),o=require("../../constants/Theme.js");exports.PostLiveChecklistItem=l=>{const{isCompleted:d,header:a,subHeader:u,isOpen:j=!1}=l,{onSetup:x}=l,[h,p]=r.useState(j);return r.useEffect((()=>{p(j)}),[j]),e.jsxs("div",Object.assign({style:{backgroundColor:h?o.COLORS.surface.subdued:o.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",Object.assign({style:{color:o.COLORS.surface.standard,padding:16,display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",cursor:d?"default":"pointer"},onClick:()=>!d&&p(!h)},{children:[e.jsx(c.TitleSmall,Object.assign({color:h?"#4B1583":o.COLORS.content.primary},{children:a})),d?e.jsx(s.CheckIndicatorIcon,{}):h?e.jsx(i.default,{width:24,height:24,color:o.COLORS.content.secondary}):e.jsx(t.default,{width:24,height:24,color:o.COLORS.content.secondary})]})),e.jsx("div",{children:h&&e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:e.jsxs("div",Object.assign({style:{padding:16,paddingTop:0,gap:16,display:"flex",flexDirection:"column"}},{children:[e.jsx("div",Object.assign({style:{height:200,backgroundColor:"#EFE6F9",borderRadius:8,overflow:"hidden"}},{children:e.jsx("img",{src:l.image,alt:"checklist item",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{flex:2}},{children:e.jsx(c.BodySecondary,Object.assign({color:o.COLORS.content.primary,numberOfLines:3},{children:u}))})),e.jsx("div",Object.assign({style:{flex:1,display:"flex",justifyContent:"flex-end"}},{children:e.jsx(n.Button,{buttonType:"primary",size:"small",buttonText:"Setup",onClick:()=>{x&&x()}})}))]}))]}))}))})]}))};

package/dist/cjs/components/post-live-checklist-item/index.d.ts

@@ -0,0 +1 @@
+export * from './PostLiveChecklistItem';

package/dist/cjs/hooks/useWindowSize.d.ts

@@ -0,0 +1,2 @@
+export declare const useWindowSize: () => boolean;
+export declare const useWindowWidth: () => number;

package/dist/cjs/hooks/useWindowSize.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useWindowSize=()=>{var n;const[t,i]=e.useState("undefined"!=typeof window&&(null===(n=null===window||void 0===window?void 0:window.document)||void 0===n?void 0:n.body.clientWidth)<767||!1);let d;return d="undefined"==typeof window?e.useEffect:e.useLayoutEffect,d((()=>{function e(){i(window.document.body.clientWidth<767)}return window.addEventListener("resize",e),e(),()=>window.removeEventListener("resize",e)}),[]),t};

package/dist/cjs/index.d.ts

@@ -101,4 +101,8 @@ export * from './components/dot-pulse';
 export * from './components/bik-chatbot';
 export * from './components/banner';
 export * from './components/feature-announcements';
+export * from './components/post-live-checklist-item';
+export * from './components/post-live-checklist';
+export * from './components/ProgressChecklist';
+export * from './components/BikGiftedChat';
 export * from './components/markdown';