@bikdotai/bik-component-library 0.0.754-beta.12 → 0.0.754-beta.3

package/dist/cjs/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;
 }

package/dist/cjs/components/input/Input.styled.d.ts

@@ -2,7 +2,7 @@
 import { InputStateI, InputTypeI, InputVariant } from "./Input";
 export declare const InputWrapper: 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;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: 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;
 } & {
     isLeft?: boolean | undefined;
     iconSize?: string | undefined;
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
 }, {}, {}>;
 export declare const InputHeader: 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;
 } & {
     invalid?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 export declare const RootContainer: 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;
 } & {
     width?: string | undefined;
     height?: string | undefined;

package/dist/cjs/components/keywords-input/KeywordsInput.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const ChipStyle: 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/cjs/components/list-item/ListItem.styled.d.ts

@@ -2,7 +2,7 @@
 import type { Variant } from './ListItem';
 export declare const ListItem: 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;
 } & {
     variant: Variant;
     borderBottom?: string | undefined;

package/dist/cjs/components/modals/modal.styled.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 export declare const RootContainer: 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;
 } & {
     zIndex?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CentralContainer: 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;
 } & {
     width?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CloseButtonContainer: 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 CloseButtonWithTimer: 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;
 } & {
     timerExists?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/pagination/Pagination.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const Pagination: 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/cjs/components/plans/DurationSelectorStyles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const DurationSelectorStyled: 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/cjs/components/plans/SubscriptionPlanSelector.d.ts

@@ -30,11 +30,11 @@ type Props = {
 };
 export declare const HeaderWrapper: 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 BottomWrapper: 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 defaultTabs: {
     key: string;

package/dist/cjs/components/plans/SubscriptionPlanStyled.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const SubscriptionPlanStyled: 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;
 } & {
     isSelected: boolean;
     isManifestPlan?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const NewSubscriptionStyled: 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;
 } & {
     showMostPopularChip: boolean;
     height?: string | undefined;

package/dist/cjs/components/product-picker/ProductPicker.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const StyledZeroState: 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 StyledProductPickerContainer: 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/cjs/components/progress-bar/ProgressBarComponent.d.ts

@@ -8,7 +8,7 @@ export interface ProgressBarProps {
 export declare const ProgressBarComponent: (props: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ProgressCompletedBar: 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;
 } & {
     color: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/radioList/RadioList.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const RadioListStyled: 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/cjs/components/sample-button/SampleButton.styled.d.ts

@@ -2,7 +2,7 @@
 import type { Color, Variant } from './SampleButton';
 export declare const SampleButton: 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;
 } & {
     $color: Color;
     variant: Variant;

package/dist/cjs/components/shimmer/ShimmerComponent/ShimmerStyled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const ShimmerStyled: 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;
 } & {
     isBrand?: boolean | undefined;
     direction?: "row" | "column" | undefined;
@@ -9,7 +9,7 @@ export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ShimmerComponentStyled: 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;
 } & {
     isBrand?: boolean | undefined;
     height: number;

package/dist/cjs/components/switch/Switch.d.ts

@@ -3,7 +3,7 @@ import { SwitchColorProps, SwitchProps } from './Switch.d';
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SwitchContainer: 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;
 } & {
     trackLength: number;
     trackHeight: number;
@@ -16,7 +16,7 @@ export declare const SwitchContainer: import("@emotion/styled").StyledComponent<
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Thumb: 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;
 } & {
     value: boolean;
     duration: number;
@@ -24,7 +24,7 @@ export declare const Thumb: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Loader: 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;
 } & {
     value: boolean;
     trackColor: SwitchColorProps;

package/dist/cjs/components/tabs/Tabs.styles.d.ts

@@ -2,17 +2,17 @@
 import { TabItemProps, TabItemTextProps } from './Tabs.model';
 export declare const TabHeader: 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;
 } & {
     bgColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TabItem: 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;
 } & TabItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TrailingNumberContainer: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -30,9 +30,9 @@ export declare const TabItemText: import("@emotion/styled").StyledComponent<{
 } & TabItemTextProps, {}, {}>;
 export declare const EmptyTab: 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 RightComponent: 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/cjs/components/tag/Tag.styled.d.ts

@@ -2,7 +2,7 @@
 import { TagTheme, TagType, TagVariant } from './model';
 export declare const Tag: 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;
 } & {
     theme: TagTheme;
     type: TagType;

package/dist/cjs/components/testimonial-card/TestimonialCard.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const TestimonialCardStyle: 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;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -9,35 +9,35 @@ export declare const TestimonialCardStyle: import("@emotion/styled").StyledCompo
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TestimonialProfileCard: 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 TestimonialProfileInfo2: 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 Logo: 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").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const TestimonialProfileInfo: 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 TestimonialProfileFooter: 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;
 } & {
     width?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FooterText: 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<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FooterStat: 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<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FooterArrow: 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<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/cjs/components/toaster/Toaster.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/alert_triangle.svg.js"),e=require("../../assets/icons/check.svg.js"),n=require("../../assets/icons/cross.svg.js"),s=require("../../assets/icons/errorInfo.svg.js"),i=require("../../assets/icons/info.svg.js"),r=require("react"),l=require("react-dom"),u=require("react-toastify"),d=require("../button/Button.js"),c=require("./Toaster.styled.js"),a=require("../TypographyStyle.js"),x=require("../../constants/Theme.js");function h(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=h(r),y=h(l);const g=o=>t.jsxs(a.BodySecondary,Object.assign({color:"#9E9E9E",customStyles:{fontWeight:600,fontSize:14,width:25}},{children:[o.duration,"s"]})),v=o=>{const e="default"===o.type?x.COLORS.content.primary:"success"===o.type?x.COLORS.content.positive:"error"===o.type?x.COLORS.content.negative:"warning"===o.type?x.COLORS.content.warning:x.COLORS.content.brand,[s,i]=r.useState(o.duration||-1);r.useEffect((()=>{if(!o.duration||o.duration<=0)return void i(-1);i(o.duration);const t=setInterval((()=>{i((o=>{const e=o-1;return e<=0?(clearInterval(t),-1):e}))}),1e3);return()=>clearInterval(t)}),[o.duration]);const l=(!o.blocking||-1!==s)&&(o.blocking&&s>0);return t.jsx("div",Object.assign({tabIndex:l?-1:0,role:"button",style:{width:s>0?25:20,display:"flex",cursor:l?"not-allowed":"pointer",alignSelf:""+(o.alignTop?"flex-start":"center"),opacity:l?.5:1},onClick:()=>{!l&&o.closeToast&&o.closeToast()},onKeyDown:t=>{"Enter"===t.key&&!l&&o.closeToast&&o.closeToast()}},{children:s>0?t.jsx(g,{duration:s}):t.jsx(n.default,{height:20,width:20,color:e})}))},f=o=>{var e,n;const s=x.COLORS.content.placeholder,{toasterText:i}=r.useContext(b);return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:32,display:"flex",alignItems:"center"}},{children:t.jsxs("div",{children:[o.subText?t.jsx(a.TitleSmall,Object.assign({color:"inherit"},{children:null!==(e=o.toastText)&&void 0!==e?e:i})):t.jsx(a.BodySecondary,Object.assign({color:"inherit"},{children:null!==(n=o.toastText)&&void 0!==n?n:i})),o.subText&&t.jsx("div",Object.assign({style:{marginTop:2}},{children:t.jsx(a.BodyCaption,Object.assign({color:x.COLORS.content.secondary},{children:o.subText}))}))]})})),o.showButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px",marginRight:{showSecondButton:4,showButton:0}[o.showSecondButton?"showSecondButton":"showButton"]}},{children:t.jsx(d.Button,{buttonText:o.buttonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:o.onButtonClick})})),o.showSecondButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px"}},{children:t.jsx(d.Button,{buttonText:o.secondButtonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:o.onSecondButtonClick})})),o.showButton||o.showSecondButton?t.jsx("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${s}`,borderRadius:1}}):null]}))})},b=p.default.createContext({toasterText:""});exports.Toaster=n=>{const l=r.useRef(n.toastId||"default-toast"),[d,a]=r.useState(n.text),h=u.cssTransition({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),p="default"===n.type?null:"success"===n.type?t.jsx(e.default,{width:20,height:20,color:x.COLORS.content.positive}):"error"===n.type?t.jsx(s.default,{width:20,height:20,color:x.COLORS.content.negative}):"warning"===n.type?t.jsx(o.default,{width:20,height:20,color:x.COLORS.content.warning}):t.jsx(i.default,{width:20,height:20,color:x.COLORS.content.brand});r.useEffect((()=>{l.current&&l.current===n.toastId?(a(n.text),u.toast.update(l.current,{autoClose:n.autoClose})):l.current&&l.current!==n.toastId&&g(n.text)}),[n.toastId,n.text]);const g=o=>{var e,s,i,r,d,c,a,x,y,g,b,j,T,B,O,C;void 0!==n.hideLeftIcon||n.leftIcon?u.toast(t.jsx(f,{toastText:o,type:n.type||"info",buttonText:null===(e=n.buttonProps)||void 0===e?void 0:e.buttonText,secondButtonText:null===(s=n.secondButtonProps)||void 0===s?void 0:s.buttonText,showButton:null===(i=n.buttonProps)||void 0===i?void 0:i.showButton,showSecondButton:null===(r=n.secondButtonProps)||void 0===r?void 0:r.showButton,onButtonClick:null===(d=n.buttonProps)||void 0===d?void 0:d.onButtonClick,onSecondButtonClick:null===(c=n.secondButtonProps)||void 0===c?void 0:c.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),icon:!0!==n.hideLeftIcon&&(n.leftIcon?n.leftIcon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p}))),type:n.type,closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(a=n.buttonProps)||void 0===a?void 0:a.showButton)||(null===(x=n.secondButtonProps)||void 0===x?void 0:x.showButton)),blocking:n.blocking,duration:n.duration}),toastId:n.toastId||"default-toast",transition:h}):l.current=u.toast(t.jsx(f,{toastText:o,type:n.type||"info",buttonText:null===(y=n.buttonProps)||void 0===y?void 0:y.buttonText,secondButtonText:null===(g=n.secondButtonProps)||void 0===g?void 0:g.buttonText,showButton:null===(b=n.buttonProps)||void 0===b?void 0:b.showButton,showSecondButton:null===(j=n.secondButtonProps)||void 0===j?void 0:j.showButton,onButtonClick:null===(T=n.buttonProps)||void 0===T?void 0:T.onButtonClick,onSecondButtonClick:null===(B=n.secondButtonProps)||void 0===B?void 0:B.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),type:n.type,icon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p})),closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(O=n.buttonProps)||void 0===O?void 0:O.showButton)||(null===(C=n.secondButtonProps)||void 0===C?void 0:C.showButton)),blocking:n.blocking,duration:n.duration}),toastId:n.toastId||"default-toast",transition:h})};return r.useEffect((()=>{g()}),[]),y.default.createPortal(t.jsx(c.ToasterStyled,Object.assign({width:n.width,height:n.height,zIndex:n.zIndex,isSubTextIncluded:!!n.subText,type:n.type},{children:t.jsx(b.Provider,Object.assign({value:{toasterText:d}},{children:t.jsx(u.ToastContainer,{position:n.position||"top-right",closeOnClick:n.closeOnClick||!1,hideProgressBar:n.hideProgressBar||!1,draggable:!1,autoClose:n.autoClose||!1,theme:"colored"})}))})),document.body)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/alert_triangle.svg.js"),o=require("../../assets/icons/check.svg.js"),n=require("../../assets/icons/cross.svg.js"),s=require("../../assets/icons/errorInfo.svg.js"),i=require("../../assets/icons/info.svg.js"),r=require("react"),l=require("react-dom"),u=require("react-toastify"),c=require("../button/Button.js"),a=require("./Toaster.styled.js"),d=require("../TypographyStyle.js"),x=require("../../constants/Theme.js");function h(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=h(r),y=h(l);const g=e=>t.jsxs(d.BodySecondary,Object.assign({color:"#9E9E9E",customStyles:{fontWeight:600,fontSize:14,width:25}},{children:[e.duration,"s"]})),v=e=>{const o="default"===e.type?x.COLORS.content.primary:"success"===e.type?x.COLORS.content.positive:"error"===e.type?x.COLORS.content.negative:"warning"===e.type?x.COLORS.content.warning:x.COLORS.content.brand,{timerValue:s}=r.useContext(b),i=(!e.blocking||-1!==s)&&(e.blocking&&s>0);return t.jsx("div",Object.assign({tabIndex:i?-1:0,role:"button",style:{width:s>0?25:20,display:"flex",cursor:i?"not-allowed":"pointer",alignSelf:""+(e.alignTop?"flex-start":"center"),opacity:i?.5:1},onClick:()=>{!i&&e.closeToast&&e.closeToast()},onKeyDown:t=>{"Enter"===t.key&&!i&&e.closeToast&&e.closeToast()}},{children:s>0?t.jsx(g,{duration:s}):t.jsx(n.default,{height:20,width:20,color:o})}))},f=e=>{var o,n;const s=x.COLORS.content.placeholder,{toasterText:i}=r.useContext(b);return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:32,display:"flex",alignItems:"center"}},{children:t.jsxs("div",{children:[e.subText?t.jsx(d.TitleSmall,Object.assign({color:"inherit"},{children:null!==(o=e.toastText)&&void 0!==o?o:i})):t.jsx(d.BodySecondary,Object.assign({color:"inherit"},{children:null!==(n=e.toastText)&&void 0!==n?n:i})),e.subText&&t.jsx("div",Object.assign({style:{marginTop:2}},{children:t.jsx(d.BodyCaption,Object.assign({color:x.COLORS.content.secondary},{children:e.subText}))}))]})})),e.showButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px",marginRight:{showSecondButton:4,showButton:0}[e.showSecondButton?"showSecondButton":"showButton"]}},{children:t.jsx(c.Button,{buttonText:e.buttonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:e.onButtonClick})})),e.showSecondButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px"}},{children:t.jsx(c.Button,{buttonText:e.secondButtonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:e.onSecondButtonClick})})),e.showButton||e.showSecondButton?t.jsx("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${s}`,borderRadius:1}}):null]}))})},b=p.default.createContext({toasterText:"",timerValue:-1});exports.Toaster=n=>{const l=r.useRef(n.toastId||"default-toast"),[c,d]=r.useState(n.text),[h,p]=r.useState(n.duration||-1),g=u.cssTransition({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),j="default"===n.type?null:"success"===n.type?t.jsx(o.default,{width:20,height:20,color:x.COLORS.content.positive}):"error"===n.type?t.jsx(s.default,{width:20,height:20,color:x.COLORS.content.negative}):"warning"===n.type?t.jsx(e.default,{width:20,height:20,color:x.COLORS.content.warning}):t.jsx(i.default,{width:20,height:20,color:x.COLORS.content.brand});r.useEffect((()=>{l.current&&l.current===n.toastId?(d(n.text),u.toast.update(l.current,{autoClose:n.autoClose})):l.current&&l.current!==n.toastId&&T(n.text)}),[n.toastId,n.text]),r.useEffect((()=>{if(!n.duration)return;p(n.duration);const t=setInterval((()=>{p((e=>{const o=e-1;return o<=0?(clearInterval(t),-1):o}))}),1e3);return()=>clearInterval(t)}),[n.duration,n.toastId]);const T=e=>{var o,s,i,r,c,a,d,x,h,p,y,b,T,B,C,O;void 0!==n.hideLeftIcon||n.leftIcon?u.toast(t.jsx(f,{toastText:e,type:n.type||"info",buttonText:null===(o=n.buttonProps)||void 0===o?void 0:o.buttonText,secondButtonText:null===(s=n.secondButtonProps)||void 0===s?void 0:s.buttonText,showButton:null===(i=n.buttonProps)||void 0===i?void 0:i.showButton,showSecondButton:null===(r=n.secondButtonProps)||void 0===r?void 0:r.showButton,onButtonClick:null===(c=n.buttonProps)||void 0===c?void 0:c.onButtonClick,onSecondButtonClick:null===(a=n.secondButtonProps)||void 0===a?void 0:a.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),icon:!0!==n.hideLeftIcon&&(n.leftIcon?n.leftIcon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:j}))),type:n.type,closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(d=n.buttonProps)||void 0===d?void 0:d.showButton)||(null===(x=n.secondButtonProps)||void 0===x?void 0:x.showButton)),blocking:n.blocking}),toastId:n.toastId||"default-toast",transition:g}):l.current=u.toast(t.jsx(f,{toastText:e,type:n.type||"info",buttonText:null===(h=n.buttonProps)||void 0===h?void 0:h.buttonText,secondButtonText:null===(p=n.secondButtonProps)||void 0===p?void 0:p.buttonText,showButton:null===(y=n.buttonProps)||void 0===y?void 0:y.showButton,showSecondButton:null===(b=n.secondButtonProps)||void 0===b?void 0:b.showButton,onButtonClick:null===(T=n.buttonProps)||void 0===T?void 0:T.onButtonClick,onSecondButtonClick:null===(B=n.secondButtonProps)||void 0===B?void 0:B.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),type:n.type,icon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:j})),closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(C=n.buttonProps)||void 0===C?void 0:C.showButton)||(null===(O=n.secondButtonProps)||void 0===O?void 0:O.showButton)),blocking:n.blocking}),toastId:n.toastId||"default-toast",transition:g})};return r.useEffect((()=>{T()}),[]),y.default.createPortal(t.jsx(a.ToasterStyled,Object.assign({width:n.width,height:n.height,zIndex:n.zIndex,isSubTextIncluded:!!n.subText,type:n.type},{children:t.jsx(b.Provider,Object.assign({value:{toasterText:c,timerValue:h}},{children:t.jsx(u.ToastContainer,{position:n.position||"top-right",closeOnClick:n.closeOnClick||!1,hideProgressBar:n.hideProgressBar||!1,draggable:!1,autoClose:n.autoClose||!1,theme:"colored"})}))})),document.body)};

package/dist/cjs/components/toaster/Toaster.styled.d.ts

@@ -2,7 +2,7 @@
 import { TypeOptions } from 'react-toastify';
 export declare const ToasterStyled: 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;
 } & {
     width?: string | undefined;
     height?: string | undefined;

package/dist/cjs/components/vertical-full-screen-modal/component.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { VerticalFullScreenModalProps } from './types';
+/**
+ * VerticalFullScreenModal - A reusable full-screen modal component
+ *
+ * This component provides a common full-screen modal structure with:
+ * - Fixed height (100vh)
+ * - Header section with close button
+ * - Scrollable body content
+ * - Dynamic footer with configurable buttons
+ *
+ * @example
+ * <VerticalFullScreenModal
+ *   headerText="My Modal"
+ *   body={<div>Modal content here</div>}
+ *   primaryButtonTitle="Save"
+ *   onSave={handleSave}
+ *   secondaryButtonTitle="Cancel"
+ *   secondaryButtonClick={handleCancel}
+ *   onClose={handleClose}
+ * />
+ */
+declare const VerticalFullScreenModal: React.FC<VerticalFullScreenModalProps>;
+export default VerticalFullScreenModal;

package/dist/cjs/components/vertical-full-screen-modal/component.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/cross.svg.js"),o=require("../button/Button.js"),s=require("../icon-button/IconButton.js"),n=require("../TypographyStyle.js"),r=require("./styles.js");exports.default=i=>{let{headerText:a,body:l,primaryButtonTitle:c,onSave:d,secondaryButtonTitle:u="Cancel",secondaryButtonClick:j,hideSecondaryButton:x=!1,disablePrimaryButton:p=!1,onClose:y,width:b,className:h,modalOffsetPx:g}=i;const B=j||y;return t.jsx("div",Object.assign({style:{position:"fixed",top:0,right:g?`${g}px`:"-424px",bottom:0}},{children:t.jsxs(r.VerticalModalContainer,Object.assign({onClick:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation(),width:b,className:h},{children:[t.jsxs(r.VerticalModalHeader,{children:[t.jsx(n.TitleRegular,{children:a}),t.jsx(s.IconButton,{Icon:e.default,onClick:y})]}),t.jsx(r.VerticalModalContent,{children:l}),t.jsxs(r.VerticalModalFooter,Object.assign({addGap:!x},{children:[!x&&t.jsx(o.Button,{buttonText:u,buttonType:"tertiaryGray",onClick:B}),t.jsx(o.Button,{style:{marginRight:12},buttonText:c,onClick:d,disabled:p})]}))]}))}))};

package/dist/cjs/components/vertical-full-screen-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VerticalFullScreenModal } from './component';
+export * from './types';

package/dist/cjs/components/vertical-full-screen-modal/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const VerticalModalContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare const VerticalModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalModalFooter: import("styled-components").StyledComponent<"div", any, {
+    addGap?: boolean | undefined;
+}, never>;

package/dist/cjs/components/vertical-full-screen-modal/styles.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=o(e);const d=t.default.div`
+	background-color: ${r.COLORS.surface.standard};
+	border-radius: 0px;
+	padding: 0;
+	width: ${e=>e.width||"424px"};
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	border-left: 1px solid ${r.COLORS.stroke.primary};
+`,a=t.default.div`
+	padding: 16px 24px;
+	border-bottom: 1px solid ${r.COLORS.stroke.primary};
+	background-color: ${r.COLORS.surface.subdued};
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-shrink: 0;
+	height: 60px;
+`,i=t.default.div`
+	padding: 16px;
+	background-color: ${r.COLORS.surface.standard};
+	flex: 1;
+	overflow-x: hidden;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+`,l=t.default.div`
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	justify-content: flex-end;
+	background: ${r.COLORS.surface.standard};
+	height: 56px;
+	border-top: 1px solid #${r.COLORS.stroke.primary};
+	align-items: center;
+	padding: 0 24px;
+	flex-shrink: 0;
+	gap: ${e=>e.addGap?"16px":"0px"};
+`;exports.VerticalModalContainer=d,exports.VerticalModalContent=i,exports.VerticalModalFooter=l,exports.VerticalModalHeader=a;

package/dist/cjs/components/vertical-full-screen-modal/types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface VerticalFullScreenModalProps {
+    /** Content text to display in the modal header */
+    headerText: string;
+    /** Content to display in the modal body */
+    body: React.ReactNode;
+    /** Title for the primary action button */
+    primaryButtonTitle: string;
+    /** Callback when primary button is clicked */
+    onSave: () => void;
+    /** Optional title for the secondary button */
+    secondaryButtonTitle?: string;
+    /** Optional callback when secondary button is clicked */
+    secondaryButtonClick?: () => void;
+    /** Hide the secondary button if true */
+    hideSecondaryButton?: boolean;
+    /** Disable the primary button */
+    disablePrimaryButton?: boolean;
+    /** Callback when modal is closed */
+    onClose: () => void;
+    /** Optional custom width (default: 424px) */
+    width?: string;
+    /** Optional className for custom styling */
+    className?: string;
+    /** Optional offset for modal positioning */
+    modalOffsetPx?: number;
+}

package/dist/cjs/components/whats-new/WhatsNew.types.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { ButtonConfig, SecondaryButtonConfig } from '../feature-announcements/types/feature.types';
+export type { ButtonConfig, SecondaryButtonConfig };
 export interface WhatsNewContent {
     id: string;
     title: string;
@@ -12,6 +14,10 @@ export interface WhatsNewContent {
     createdAt: any;
     module: string[];
     visibility: boolean;
+    primaryButton?: ButtonConfig;
+    secondaryButton?: SecondaryButtonConfig;
+    featureUpdateType?: 'Major' | 'Minor';
+    displayImage?: string;
 }
 export interface WhatsNewProviderProps {
     children: React.ReactNode;

package/dist/cjs/components/whats-new/WhatsNewButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),s=require("../../constants/Theme.js"),i=require("../tooltips/Tooltip.js"),n=require("./WhatsNew.styles.js");exports.WhatsNewButton=o=>{let{onClick:r,newContentCount:a=0,isOpen:c=!1,isLoading:d=!1,tooltip:l="What's new",testId:h="whats-new-button",iconWidth:j=32,iconHeight:u=32,customIcon:x}=o;return d?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsx(n.WhatsNewIconContainer,Object.assign({count:a},{children:t.jsxs("div",Object.assign({className:"main-icon-class "+(c?"icon-active":""),style:{color:c?s.COLORS.content.brand:s.COLORS.content.primary},onClick:r,"data-testid":h},{children:[t.jsx(i.Tooltip,Object.assign({body:l},{children:t.jsx("div",{children:x?t.jsx(x,{width:j,height:u,color:c?s.COLORS.content.brand:s.COLORS.content.primary}):t.jsx(e.default,{width:j,height:u})})})),a>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),s=require("../../constants/Theme.js"),n=require("../tooltips/Tooltip.js"),i=require("./WhatsNew.styles.js");exports.WhatsNewButton=o=>{let{onClick:r,newContentCount:a=0,isOpen:c=!1,isLoading:d=!1,tooltip:l="What's new",testId:h="whats-new-button",iconWidth:j=32,iconHeight:u=32,customIcon:x}=o;return d?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsx(i.WhatsNewIconContainer,Object.assign({count:a},{children:t.jsxs("div",Object.assign({className:"main-icon-class "+(c?"icon-active":""),style:{color:c?s.COLORS.content.brand:s.COLORS.content.primary},onClick:r,"data-testid":h},{children:[t.jsx(n.Tooltip,Object.assign({body:l,placement:"bottom"},{children:t.jsx("div",{children:x?t.jsx(x,{width:j,height:u,color:c?s.COLORS.content.brand:s.COLORS.content.primary}):t.jsx(e.default,{width:j,height:u})})})),a>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};

package/dist/cjs/components/whats-new/WhatsNewPanel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("date-fns"),s=require("react"),a=require("../../assets/icons/searchIcon.svg.js"),r=require("../../assets/icons/whatsNew.svg.js"),n=require("../../constants/Theme.js"),i=require("../button/Button.js"),o=require("../feature-announcements/VideoModal.js"),c=require("../searchBar/searchBar.js"),d=require("../side-modal/SideModal.js"),l=require("../TypographyStyle.js"),h=require("./WhatsNew.styles.js");exports.WhatsNewPanel=u=>{let{isOpen:j,onClose:m,content:x,isLoading:g=!1,title:w="What's new on BIK",searchPlaceholder:b="Search posts",emptyStateTitle:p="Nothing new!",emptyStateDescription:C="There are no new updates or features at the moment. Check back soon!",noResultsText:O="Sorry, no results found.",width:y="480px",onContentClick:f,renderCustomContent:N}=u;const[S,v]=s.useState(""),[M,q]=s.useState(!1),[L,T]=s.useState(""),k=e=>{if(!e.createdAt)return!1;const s=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t.differenceInBusinessDays(new Date,s)<7},B=s.useMemo((()=>{if(!S.trim())return x;const e=S.toLowerCase();return x.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[x,S]),D=0===x.length,A=0===B.length;return j?e.jsxs(d.SideModal,Object.assign({width:y,onClose:m,header:"",headerCustomComponent:e.jsx(l.TitleMedium,Object.assign({color:n.COLORS.background.inverse},{children:w})),headerStyle:{background:n.COLORS.background.brandLight},hideFooter:!0},{children:[e.jsxs(h.MainContainer,{children:[e.jsx("div",Object.assign({className:"mt-8"},{children:e.jsx(c.SearchBar,{width:"100%",isEnabled:!D,onChange:e=>{v(e)},onEnter:e=>{v(e)},placeholder:b,variant:"default",searchValue:S,onClickCross:()=>{v("")}})})),e.jsx(h.WhatsNewWrapper,{children:D||A?e.jsxs("div",Object.assign({className:"no--data--found"},{children:[e.jsx("div",Object.assign({className:"icon--wrapper"},{children:D?e.jsx(r.default,{width:32,height:32}):e.jsx(a.default,{width:32,height:32})})),D?e.jsxs(e.Fragment,{children:[e.jsx(l.TitleRegular,{children:p}),e.jsx(l.BodyPrimary,Object.assign({color:n.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:C}))]}):A?e.jsx(l.BodyPrimary,Object.assign({color:n.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:O})):null]})):e.jsx("div",Object.assign({className:"scroller"},{children:B.map(((s,a)=>N?N(s):e.jsxs(h.MainCardContainer,Object.assign({className:"padding--16 mb-mt-8"},{children:[e.jsx(h.BackgroundImageContainer,{imageUrl:s.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e.jsx("div",Object.assign({className:"mt-20 full--width"},{children:e.jsxs("div",Object.assign({className:"created--at flex flex--row"},{children:[k(s)?e.jsx("div",Object.assign({className:"new--content--tag"},{children:e.jsx(l.Caption,{children:"New"})})):e.jsx(e.Fragment,{}),e.jsx(l.Caption,Object.assign({style:{color:n.COLORS.content.placeholder}},{children:s.createdAt?t.format(s.createdAt.toDate?s.createdAt.toDate():new Date(s.createdAt),"dd MMMM yyyy"):""}))]}))})),e.jsx("div",Object.assign({className:"mt--8"},{children:e.jsx(l.TitleSmall,{children:s.title})})),e.jsx("div",{dangerouslySetInnerHTML:{__html:s.body},className:"card--desc mt--12"}),e.jsx("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e.jsx(i.Button,{buttonText:s.buttonText||"Explore the feature",onClick:()=>(e=>{e.productVideo?(T(e.productVideo),q(!0)):e.redirectUrl&&window.open(e.redirectUrl,"_blank"),f&&f(e)})(s),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${a}`)))}))})]}),e.jsx(o.VideoModal,{isOpen:M,videoUrl:L,onClose:()=>{q(!1)}})]})):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("date-fns"),s=require("react"),r=require("../../assets/icons/searchIcon.svg.js"),a=require("../../assets/icons/whatsNew.svg.js"),n=require("../../constants/Theme.js"),i=require("../button/Button.js"),o=require("../feature-announcements/VideoModal.js"),d=require("../searchBar/searchBar.js"),c=require("../side-modal/SideModal.js"),l=require("../TypographyStyle.js"),h=require("./WhatsNew.styles.js");exports.WhatsNewPanel=u=>{let{isOpen:j,onClose:m,content:x,isLoading:g=!1,title:p="What's new on BIK",searchPlaceholder:w="Search posts",emptyStateTitle:b="Nothing new!",emptyStateDescription:y="There are no new updates or features at the moment. Check back soon!",noResultsText:C="Sorry, no results found.",width:O="480px",onContentClick:f,renderCustomContent:v}=u;const[N,S]=s.useState(""),[M,q]=s.useState(!1),[B,L]=s.useState(""),T=e=>{if(!e.createdAt)return!1;const s=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t.differenceInBusinessDays(new Date,s)<7},k=s.useMemo((()=>{if(!N.trim())return x;const e=N.toLowerCase();return x.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[x,N]),D=0===x.length,A=0===k.length;return j?e.jsxs(c.SideModal,Object.assign({width:O,onClose:m,header:"",headerCustomComponent:e.jsx(l.TitleMedium,Object.assign({color:n.COLORS.background.inverse},{children:p})),headerStyle:{background:n.COLORS.background.brandLight},hideFooter:!0},{children:[e.jsxs(h.MainContainer,{children:[e.jsx("div",Object.assign({className:"mt-8"},{children:e.jsx(d.SearchBar,{width:"100%",isEnabled:!D,onChange:e=>{S(e)},onEnter:e=>{S(e)},placeholder:w,variant:"default",searchValue:N,onClickCross:()=>{S("")}})})),e.jsx(h.WhatsNewWrapper,{children:D||A?e.jsxs("div",Object.assign({className:"no--data--found"},{children:[e.jsx("div",Object.assign({className:"icon--wrapper"},{children:D?e.jsx(a.default,{width:32,height:32}):e.jsx(r.default,{width:32,height:32})})),D?e.jsxs(e.Fragment,{children:[e.jsx(l.TitleRegular,{children:b}),e.jsx(l.BodyPrimary,Object.assign({color:n.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:y}))]}):A?e.jsx(l.BodyPrimary,Object.assign({color:n.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:C})):null]})):e.jsx("div",Object.assign({className:"scroller"},{children:k.map(((s,r)=>{var a;return v?v(s):e.jsxs(h.MainCardContainer,Object.assign({className:"padding--16 mb-mt-8"},{children:[e.jsx(h.BackgroundImageContainer,{imageUrl:s.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e.jsx("div",Object.assign({className:"mt-20 full--width"},{children:e.jsxs("div",Object.assign({className:"created--at flex flex--row"},{children:[T(s)?e.jsx("div",Object.assign({className:"new--content--tag"},{children:e.jsx(l.Caption,{children:"New"})})):e.jsx(e.Fragment,{}),e.jsx(l.Caption,Object.assign({style:{color:n.COLORS.content.placeholder}},{children:s.createdAt?t.format(s.createdAt.toDate?s.createdAt.toDate():new Date(s.createdAt),"dd MMMM yyyy"):""}))]}))})),e.jsx("div",Object.assign({className:"mt--8"},{children:e.jsx(l.TitleSmall,{children:s.title})})),e.jsx("div",{dangerouslySetInnerHTML:{__html:s.body},className:"card--desc mt--12"}),e.jsx("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e.jsx(i.Button,{buttonText:(null===(a=s.primaryButton)||void 0===a?void 0:a.text)||s.buttonText||"Explore the feature",onClick:()=>(e=>{var t;if(e.productVideo)L(e.productVideo),q(!0);else{const s=(null===(t=e.primaryButton)||void 0===t?void 0:t.redirectionUrl)||e.redirectUrl;s&&window.open(s,"_blank","noopener,noreferrer")}f&&f(e)})(s),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${r}`)}))}))})]}),e.jsx(o.VideoModal,{isOpen:M,videoUrl:B,onClose:()=>{q(!1)}})]})):e.jsx(e.Fragment,{})};

package/dist/cjs/index.d.ts

@@ -103,3 +103,4 @@ export * from './components/banner';
 export * from './components/feature-announcements';
 export * from './components/BikGiftedChat';
 export * from './components/markdown';
+export * from './components/vertical-full-screen-modal';