@bikdotai/bik-component-library 0.0.736-beta.7 → 0.0.736-beta.9

package/dist/esm/components/whats-new/WhatsNew.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { WhatsNewContent } from './WhatsNew.types';
+interface WhatsNewProps {
+    title?: string;
+    tooltip?: string;
+    searchPlaceholder?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    noResultsText?: string;
+    width?: string;
+    onContentClick?: (content: WhatsNewContent) => void;
+    renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
+    buttonTestId?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    customIcon?: React.ComponentType<{
+        width?: number;
+        height?: number;
+        color?: string;
+    }>;
+}
+export declare const WhatsNew: React.FC<WhatsNewProps>;
+export {};

package/dist/esm/components/whats-new/WhatsNew.js

@@ -1 +1 @@
-import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const a=({title:a="What's new",tooltip:c="What's new",searchPlaceholder:h="Search posts",emptyStateTitle:m="Nothing new!",emptyStateDescription:l="There are no new updates or features at the moment. Check back soon!",noResultsText:p="Sorry, no results found.",width:d="480px",onContentClick:u,renderCustomContent:C,buttonTestId:w="whats-new-button",iconWidth:f=32,iconHeight:W=32,customIcon:g})=>{const[S,T]=n(!1),{whatsNewContent:k,isLoading:x,newContentCount:y}=r();return t(e,{children:[o(i,{onClick:()=>T(!0),newContentCount:y,isOpen:S,isLoading:x,tooltip:c,testId:w,iconWidth:f,iconHeight:W,customIcon:g}),o(s,{isOpen:S,onClose:()=>T(!1),content:k,isLoading:x,title:a,searchPlaceholder:h,emptyStateTitle:m,emptyStateDescription:l,noResultsText:p,width:d,onContentClick:t=>{u&&u(t)},renderCustomContent:C})]})};export{a as WhatsNew};
+import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const a=a=>{let{title:c="What's new",tooltip:h="What's new",searchPlaceholder:m="Search posts",emptyStateTitle:l="Nothing new!",emptyStateDescription:p="There are no new updates or features at the moment. Check back soon!",noResultsText:d="Sorry, no results found.",width:u="480px",onContentClick:C,renderCustomContent:w,buttonTestId:f="whats-new-button",iconWidth:W=32,iconHeight:g=32,customIcon:S}=a;const[T,k]=n(!1),{whatsNewContent:x,isLoading:y,newContentCount:N}=r();return t(e,{children:[o(i,{onClick:()=>k(!0),newContentCount:N,isOpen:T,isLoading:y,tooltip:h,testId:f,iconWidth:W,iconHeight:g,customIcon:S}),o(s,{isOpen:T,onClose:()=>k(!1),content:x,isLoading:y,title:c,searchPlaceholder:m,emptyStateTitle:l,emptyStateDescription:p,noResultsText:d,width:u,onContentClick:t=>{C&&C(t)},renderCustomContent:w})]})};export{a as WhatsNew};

package/dist/esm/components/whats-new/WhatsNew.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const WhatsNewIconContainer: import("styled-components").StyledComponent<"div", any, {
+    count?: number | undefined;
+}, never>;
+export declare const WhatsNewWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackgroundImageContainer: import("styled-components").StyledComponent<"div", any, {
+    imageUrl: string;
+    height?: string | undefined;
+    width?: string | undefined;
+}, never>;

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

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+export interface WhatsNewContent {
+    id: string;
+    title: string;
+    body: string;
+    content: string;
+    image: string;
+    buttonText: string;
+    redirectUrl: string;
+    productVideo?: string;
+    docId?: string;
+    createdAt: any;
+    module: string[];
+    visibility: boolean;
+}
+export interface WhatsNewProviderProps {
+    children: React.ReactNode;
+    fetchWhatsNewContent: () => Promise<[Error | null, WhatsNewContent[] | null]>;
+    markContentAsViewed?: (contentId: string) => Promise<void>;
+    module?: string;
+    isLoading?: boolean;
+}
+export interface WhatsNewButtonProps {
+    onClick?: () => void;
+    newContentCount?: number;
+    isOpen?: boolean;
+    isLoading?: boolean;
+    tooltip?: string;
+    testId?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    customIcon?: React.ComponentType<{
+        width?: number;
+        height?: number;
+        color?: string;
+    }>;
+}
+export interface WhatsNewPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    content: WhatsNewContent[];
+    isLoading?: boolean;
+    title?: string;
+    searchPlaceholder?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    noResultsText?: string;
+    width?: string;
+    onContentClick?: (content: WhatsNewContent) => void;
+    renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
+}
+export interface WhatsNewHookReturn {
+    whatsNewContent: WhatsNewContent[];
+    isLoading: boolean;
+    newContentCount: number;
+    markAsViewed: (contentId: string) => Promise<void>;
+    refreshContent: () => Promise<void>;
+}

package/dist/esm/components/whats-new/WhatsNewButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhatsNewButtonProps } from './WhatsNew.types';
+export declare const WhatsNewButton: React.FC<WhatsNewButtonProps>;

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

@@ -1 +1 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";import n from"../../assets/icons/whatsNew.svg.js";import{COLORS as o}from"../../constants/Theme.js";import{Tooltip as e}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as s}from"./WhatsNew.styles.js";const r=({onClick:r,newContentCount:c=0,isOpen:a=!1,isLoading:d=!1,tooltip:l="What's new",testId:h="whats-new-button",iconWidth:m=32,iconHeight:p=32,customIcon:f})=>d?t("div",{style:{margin:"0px 8px"},children:[i("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),i("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"})]}):i(s,{count:c,children:t("div",{className:"main-icon-class "+(a?"icon-active":""),style:{color:a?o.content.brand:o.content.primary},onClick:r,"data-testid":h,children:[i(e,{body:l,children:i("div",{children:f?i(f,{width:m,height:p,color:a?o.content.brand:o.content.primary}):i(n,{width:m,height:p})})}),c>0&&i("div",{className:"notification--count",children:i("div",{className:"count--text",children:c})})]})});export{r as WhatsNewButton};
+import{jsxs as t,jsx as i}from"react/jsx-runtime";import n from"../../assets/icons/whatsNew.svg.js";import{COLORS as e}from"../../constants/Theme.js";import{Tooltip as s}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as o}from"./WhatsNew.styles.js";const r=r=>{let{onClick:c,newContentCount:a=0,isOpen:d=!1,isLoading:l=!1,tooltip:h="What's new",testId:m="whats-new-button",iconWidth:p=32,iconHeight:g=32,customIcon:b}=r;return l?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[i("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),i("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"})]})):i(o,Object.assign({count:a},{children:t("div",Object.assign({className:"main-icon-class "+(d?"icon-active":""),style:{color:d?e.content.brand:e.content.primary},onClick:c,"data-testid":m},{children:[i(s,Object.assign({body:h},{children:i("div",{children:b?i(b,{width:p,height:g,color:d?e.content.brand:e.content.primary}):i(n,{width:p,height:g})})})),a>0&&i("div",Object.assign({className:"notification--count"},{children:i("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};export{r as WhatsNewButton};

package/dist/esm/components/whats-new/WhatsNewPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhatsNewPanelProps } from './WhatsNew.types';
+export declare const WhatsNewPanel: React.FC<WhatsNewPanelProps>;

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

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

package/dist/esm/components/whats-new/WhatsNewProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { WhatsNewProviderProps } from './WhatsNew.types';
+export declare const WhatsNewProvider: React.FC<WhatsNewProviderProps>;
+export declare const useWhatsNewContext: () => import("./WhatsNew.types").WhatsNewHookReturn;

package/dist/esm/components/whats-new/WhatsNewProvider.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useContext as t,createContext as r}from"react";import{useWhatsNew as o}from"./useWhatsNew.js";const n=r(null),s=({children:t,fetchWhatsNewContent:r,markContentAsViewed:s,module:i})=>{const m=o({fetchWhatsNewContent:r,markContentAsViewed:s,module:i});return e(n.Provider,{value:m,children:t})},i=()=>{const e=t(n);if(!e)throw new Error("useWhatsNewContext must be used within a WhatsNewProvider");return e};export{s as WhatsNewProvider,i as useWhatsNewContext};
+import{jsx as e}from"react/jsx-runtime";import{useContext as t,createContext as r}from"react";import{useWhatsNew as n}from"./useWhatsNew.js";const o=r(null),s=t=>{let{children:r,fetchWhatsNewContent:s,markContentAsViewed:i,module:a}=t;const m=n({fetchWhatsNewContent:s,markContentAsViewed:i,module:a});return e(o.Provider,Object.assign({value:m},{children:r}))},i=()=>{const e=t(o);if(!e)throw new Error("useWhatsNewContext must be used within a WhatsNewProvider");return e};export{s as WhatsNewProvider,i as useWhatsNewContext};

package/dist/esm/components/whats-new/index.d.ts

@@ -0,0 +1,7 @@
+export * from './WhatsNew.types';
+export * from './WhatsNew.styles';
+export * from './WhatsNewButton';
+export * from './WhatsNewPanel';
+export * from './WhatsNewProvider';
+export * from './WhatsNew';
+export * from './useWhatsNew';

package/dist/esm/components/whats-new/useWhatsNew.d.ts

@@ -0,0 +1,9 @@
+import { WhatsNewContent, WhatsNewHookReturn } from './WhatsNew.types';
+interface UseWhatsNewProps {
+    fetchWhatsNewContent: () => Promise<[Error | null, WhatsNewContent[] | null]>;
+    markContentAsViewed?: (contentId: string) => Promise<void>;
+    module?: string;
+    newContentThresholdDays?: number;
+}
+export declare const useWhatsNew: ({ fetchWhatsNewContent, markContentAsViewed, module, newContentThresholdDays, }: UseWhatsNewProps) => WhatsNewHookReturn;
+export {};

package/dist/esm/components/whats-new/useWhatsNew.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{differenceInBusinessDays as t}from"date-fns";import{useState as o,useRef as r,useEffect as n,useCallback as a}from"react";const i=({fetchWhatsNewContent:i,markContentAsViewed:c,module:d,newContentThresholdDays:s=7})=>{const[l,u]=o([]),[f,w]=o(!0),v=r(i),m=r(c);n(()=>{v.current=i},[i]),n(()=>{m.current=c},[c]);const A=a(()=>e(void 0,void 0,void 0,function*(){w(!0);try{const[e,t]=yield v.current();if(e)console.error("Failed to fetch what's new content:",e),u([]);else if(t){let e=t;d&&(e=t.filter(e=>Array.isArray(e.module)?e.module.includes(d):e.module===d)),e.sort((e,t)=>{var o,r;const n=(null===(o=e.createdAt)||void 0===o?void 0:o.toDate)?e.createdAt.toDate():new Date(e.createdAt);return((null===(r=t.createdAt)||void 0===r?void 0:r.toDate)?t.createdAt.toDate():new Date(t.createdAt)).getTime()-n.getTime()}),u(e)}else u([])}catch(e){console.error("Failed to fetch what's new content:",e),u([])}finally{w(!1)}}),[d]);n(()=>{A()},[A]);const h=a(e=>{if(!e.createdAt)return!1;const o=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t(new Date,o)<s},[s]),D=l.reduce((e,t)=>h(t)?e+1:e,0);return{whatsNewContent:l,isLoading:f,newContentCount:D,markAsViewed:a(t=>e(void 0,void 0,void 0,function*(){if(m.current)try{yield m.current(t)}catch(e){console.warn("Failed to mark content as viewed:",e)}}),[]),refreshContent:a(()=>e(void 0,void 0,void 0,function*(){yield A()}),[A])}};export{i as useWhatsNew};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{differenceInBusinessDays as t}from"date-fns";import{useState as o,useRef as r,useEffect as n,useCallback as a}from"react";const i=i=>{let{fetchWhatsNewContent:c,markContentAsViewed:d,module:s,newContentThresholdDays:l=7}=i;const[u,f]=o([]),[w,v]=o(!0),m=r(c),A=r(d);n((()=>{m.current=c}),[c]),n((()=>{A.current=d}),[d]);const h=a((()=>e(void 0,void 0,void 0,(function*(){v(!0);try{const[e,t]=yield m.current();if(e)console.error("Failed to fetch what's new content:",e),f([]);else if(t){let e=t;s&&(e=t.filter((e=>Array.isArray(e.module)?e.module.includes(s):e.module===s))),e.sort(((e,t)=>{var o,r;const n=(null===(o=e.createdAt)||void 0===o?void 0:o.toDate)?e.createdAt.toDate():new Date(e.createdAt);return((null===(r=t.createdAt)||void 0===r?void 0:r.toDate)?t.createdAt.toDate():new Date(t.createdAt)).getTime()-n.getTime()})),f(e)}else f([])}catch(e){console.error("Failed to fetch what's new content:",e),f([])}finally{v(!1)}}))),[s]);n((()=>{h()}),[h]);const D=a((e=>{if(!e.createdAt)return!1;const o=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t(new Date,o)<l}),[l]),y=u.reduce(((e,t)=>D(t)?e+1:e),0);return{whatsNewContent:u,isLoading:w,newContentCount:y,markAsViewed:a((t=>e(void 0,void 0,void 0,(function*(){if(A.current)try{yield A.current(t)}catch(e){console.warn("Failed to mark content as viewed:",e)}}))),[]),refreshContent:a((()=>e(void 0,void 0,void 0,(function*(){yield h()}))),[h])}};export{i as useWhatsNew};

package/dist/esm/components/zeroState/ZeroState.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonProps } from '../button/model';
+export declare const ZeroState: React.FC<{
+    isLoading?: boolean;
+    title: string;
+    subTitle?: string;
+    IconHolderStyle?: React.CSSProperties;
+    style?: React.CSSProperties /** now this component is extendable through styled-component */;
+    actionButton?: ButtonProps;
+    buttonWidth?: number;
+    Icon?: React.ReactNode;
+    containerWidth?: string;
+}>;

package/dist/esm/components/zeroState/ZeroState.js

@@ -1,11 +1,11 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as o}from"react/jsx-runtime";import n from"styled-components";import{Spinner as i}from"../spinner/Spinner.js";import{BodyCaption as r,TitleRegular as l,TitleSmall as s}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";import d from"../../assets/icons/alert.svg.js";import{Button as a}from"../button/Button.js";const u=n.div`
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import i from"styled-components";import{Spinner as o}from"../spinner/Spinner.js";import{BodyCaption as r,TitleRegular as l,TitleSmall as s}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";import a from"../../assets/icons/alert.svg.js";import{Button as d}from"../button/Button.js";const u=i.div`
 	background: ${c.surface.standard};
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`,m=n.div`
+`,m=i.div`
 	background: ${c.background.base};
 	width: 48px;
 	height: 48px;
@@ -14,4 +14,4 @@ import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as o}from
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`,p=n=>{var{subTitle:p,title:h,IconHolderStyle:y,style:f,isLoading:g,containerWidth:b}=n,x=t(n,["subTitle","title","IconHolderStyle","style","isLoading","containerWidth"]);let v=l;const j=b?parseFloat(b):0;return j&&!isNaN(j)&&j<=150&&(v=s),e(u,{style:null!=f?f:{},children:[g?o(i,{size:"large",color:c.stroke.brand}):o(m,{style:null!=y?y:{},children:(null==x?void 0:x.Icon)||o(d,{color:c.content.placeholder,height:24,width:24})}),o(v,{style:{marginTop:8,color:c.content.primary},children:g?"Loading...":h||"No results found"}),!!p&&!g&&o(r,{style:{marginTop:4,color:c.content.secondary,textAlign:"center",maxWidth:184},children:p}),!!(null==x?void 0:x.actionButton)&&o("div",{style:(null==x?void 0:x.buttonWidth)?{width:null==x?void 0:x.buttonWidth,display:"flex"}:{},children:o(a,Object.assign({},null==x?void 0:x.actionButton))})]})};export{p as ZeroState};
+`,p=i=>{var{subTitle:p,title:g,IconHolderStyle:h,style:y,isLoading:b,containerWidth:f}=i,j=t(i,["subTitle","title","IconHolderStyle","style","isLoading","containerWidth"]);let x=l;const v=f?parseFloat(f):0;return v&&!isNaN(v)&&v<=150&&(x=s),e(u,Object.assign({style:null!=y?y:{}},{children:[b?n(o,{size:"large",color:c.stroke.brand}):n(m,Object.assign({style:null!=h?h:{}},{children:(null==j?void 0:j.Icon)||n(a,{color:c.content.placeholder,height:24,width:24})})),n(x,Object.assign({style:{marginTop:8,color:c.content.primary}},{children:b?"Loading...":g||"No results found"})),!!p&&!b&&n(r,Object.assign({style:{marginTop:4,color:c.content.secondary,textAlign:"center",maxWidth:184}},{children:p})),!!(null==j?void 0:j.actionButton)&&n("div",Object.assign({style:(null==j?void 0:j.buttonWidth)?{width:null==j?void 0:j.buttonWidth,display:"flex"}:{}},{children:n(d,Object.assign({},null==j?void 0:j.actionButton))}))]}))};export{p as ZeroState};