@bikdotai/bik-component-library 0.0.721-beta.42 → 0.0.721-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/dist/cjs/components/states/StateComponent.d.ts +1 -0
  2. package/dist/cjs/components/states/StateComponent.js +1 -1
  3. package/dist/cjs/index.d.ts +0 -2
  4. package/dist/cjs/index.js +1 -1
  5. package/dist/esm/components/states/StateComponent.d.ts +1 -0
  6. package/dist/esm/components/states/StateComponent.js +1 -1
  7. package/dist/esm/index.d.ts +0 -2
  8. package/dist/esm/index.js +1 -1
  9. package/package.json +1 -2
  10. package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.d.ts +0 -4
  11. package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +0 -1
  12. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.d.ts +0 -4
  13. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +0 -1
  14. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.d.ts +0 -4
  15. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +0 -1
  16. package/dist/cjs/components/feature-announcements/VideoModal.d.ts +0 -3
  17. package/dist/cjs/components/feature-announcements/VideoModal.js +0 -1
  18. package/dist/cjs/components/feature-announcements/constants/animations.d.ts +0 -27
  19. package/dist/cjs/components/feature-announcements/constants/animations.js +0 -1
  20. package/dist/cjs/components/feature-announcements/constants/dimensions.d.ts +0 -56
  21. package/dist/cjs/components/feature-announcements/constants/dimensions.js +0 -1
  22. package/dist/cjs/components/feature-announcements/constants/index.d.ts +0 -19
  23. package/dist/cjs/components/feature-announcements/constants/index.js +0 -1
  24. package/dist/cjs/components/feature-announcements/constants/localStorageKeys.d.ts +0 -18
  25. package/dist/cjs/components/feature-announcements/constants/localStorageKeys.js +0 -1
  26. package/dist/cjs/components/feature-announcements/constants/selectors.d.ts +0 -21
  27. package/dist/cjs/components/feature-announcements/constants/selectors.js +0 -1
  28. package/dist/cjs/components/feature-announcements/constants/zIndex.d.ts +0 -10
  29. package/dist/cjs/components/feature-announcements/constants/zIndex.js +0 -1
  30. package/dist/cjs/components/feature-announcements/hooks/index.d.ts +0 -1
  31. package/dist/cjs/components/feature-announcements/hooks/useFeatureAnnouncements.d.ts +0 -13
  32. package/dist/cjs/components/feature-announcements/hooks/useFeatureAnnouncements.js +0 -1
  33. package/dist/cjs/components/feature-announcements/index.d.ts +0 -7
  34. package/dist/cjs/components/feature-announcements/styles/index.d.ts +0 -4
  35. package/dist/cjs/components/feature-announcements/styles/joyride.styles.d.ts +0 -125
  36. package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.d.ts +0 -23
  37. package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +0 -1
  38. package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.d.ts +0 -16
  39. package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.js +0 -1
  40. package/dist/cjs/components/feature-announcements/styles/videoModal.styles.d.ts +0 -13
  41. package/dist/cjs/components/feature-announcements/styles/videoModal.styles.js +0 -1
  42. package/dist/cjs/components/feature-announcements/types/feature.types.d.ts +0 -40
  43. package/dist/cjs/components/feature-announcements/types/index.d.ts +0 -4
  44. package/dist/cjs/components/feature-announcements/types/props.types.d.ts +0 -43
  45. package/dist/cjs/components/feature-announcements/types/repository.types.d.ts +0 -11
  46. package/dist/cjs/components/feature-announcements/types/router.types.d.ts +0 -7
  47. package/dist/cjs/components/feature-announcements/useFeatureAnnouncements.d.ts +0 -13
  48. package/dist/cjs/components/feature-announcements/utils/animationHelpers.d.ts +0 -18
  49. package/dist/cjs/components/feature-announcements/utils/animationHelpers.js +0 -1
  50. package/dist/cjs/components/feature-announcements/utils/elementHelpers.d.ts +0 -30
  51. package/dist/cjs/components/feature-announcements/utils/elementHelpers.js +0 -1
  52. package/dist/cjs/components/feature-announcements/utils/htmlHelpers.d.ts +0 -18
  53. package/dist/cjs/components/feature-announcements/utils/htmlHelpers.js +0 -1
  54. package/dist/cjs/components/feature-announcements/utils/index.d.ts +0 -3
  55. package/dist/cjs/components/whats-new/WhatsNew.d.ts +0 -23
  56. package/dist/cjs/components/whats-new/WhatsNew.js +0 -1
  57. package/dist/cjs/components/whats-new/WhatsNew.styles.d.ts +0 -11
  58. package/dist/cjs/components/whats-new/WhatsNew.styles.js +0 -185
  59. package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +0 -58
  60. package/dist/cjs/components/whats-new/WhatsNewButton.d.ts +0 -3
  61. package/dist/cjs/components/whats-new/WhatsNewButton.js +0 -1
  62. package/dist/cjs/components/whats-new/WhatsNewPanel.d.ts +0 -3
  63. package/dist/cjs/components/whats-new/WhatsNewPanel.js +0 -1
  64. package/dist/cjs/components/whats-new/WhatsNewProvider.d.ts +0 -4
  65. package/dist/cjs/components/whats-new/WhatsNewProvider.js +0 -1
  66. package/dist/cjs/components/whats-new/index.d.ts +0 -7
  67. package/dist/cjs/components/whats-new/useWhatsNew.d.ts +0 -9
  68. package/dist/cjs/components/whats-new/useWhatsNew.js +0 -1
  69. package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.d.ts +0 -4
  70. package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +0 -1
  71. package/dist/esm/components/feature-announcements/MajorUpdatePopup.d.ts +0 -4
  72. package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +0 -1
  73. package/dist/esm/components/feature-announcements/MinorUpdatePopup.d.ts +0 -4
  74. package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +0 -1
  75. package/dist/esm/components/feature-announcements/VideoModal.d.ts +0 -3
  76. package/dist/esm/components/feature-announcements/VideoModal.js +0 -1
  77. package/dist/esm/components/feature-announcements/constants/animations.d.ts +0 -27
  78. package/dist/esm/components/feature-announcements/constants/animations.js +0 -1
  79. package/dist/esm/components/feature-announcements/constants/dimensions.d.ts +0 -56
  80. package/dist/esm/components/feature-announcements/constants/dimensions.js +0 -1
  81. package/dist/esm/components/feature-announcements/constants/index.d.ts +0 -19
  82. package/dist/esm/components/feature-announcements/constants/index.js +0 -1
  83. package/dist/esm/components/feature-announcements/constants/localStorageKeys.d.ts +0 -18
  84. package/dist/esm/components/feature-announcements/constants/localStorageKeys.js +0 -1
  85. package/dist/esm/components/feature-announcements/constants/selectors.d.ts +0 -21
  86. package/dist/esm/components/feature-announcements/constants/selectors.js +0 -1
  87. package/dist/esm/components/feature-announcements/constants/zIndex.d.ts +0 -10
  88. package/dist/esm/components/feature-announcements/constants/zIndex.js +0 -1
  89. package/dist/esm/components/feature-announcements/hooks/index.d.ts +0 -1
  90. package/dist/esm/components/feature-announcements/hooks/useFeatureAnnouncements.d.ts +0 -13
  91. package/dist/esm/components/feature-announcements/hooks/useFeatureAnnouncements.js +0 -1
  92. package/dist/esm/components/feature-announcements/index.d.ts +0 -7
  93. package/dist/esm/components/feature-announcements/styles/index.d.ts +0 -4
  94. package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts +0 -125
  95. package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts +0 -23
  96. package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +0 -1
  97. package/dist/esm/components/feature-announcements/styles/minorPopup.styles.d.ts +0 -16
  98. package/dist/esm/components/feature-announcements/styles/minorPopup.styles.js +0 -1
  99. package/dist/esm/components/feature-announcements/styles/videoModal.styles.d.ts +0 -13
  100. package/dist/esm/components/feature-announcements/styles/videoModal.styles.js +0 -1
  101. package/dist/esm/components/feature-announcements/types/feature.types.d.ts +0 -40
  102. package/dist/esm/components/feature-announcements/types/index.d.ts +0 -4
  103. package/dist/esm/components/feature-announcements/types/props.types.d.ts +0 -43
  104. package/dist/esm/components/feature-announcements/types/repository.types.d.ts +0 -11
  105. package/dist/esm/components/feature-announcements/types/router.types.d.ts +0 -7
  106. package/dist/esm/components/feature-announcements/useFeatureAnnouncements.d.ts +0 -13
  107. package/dist/esm/components/feature-announcements/utils/animationHelpers.d.ts +0 -18
  108. package/dist/esm/components/feature-announcements/utils/animationHelpers.js +0 -1
  109. package/dist/esm/components/feature-announcements/utils/elementHelpers.d.ts +0 -30
  110. package/dist/esm/components/feature-announcements/utils/elementHelpers.js +0 -1
  111. package/dist/esm/components/feature-announcements/utils/htmlHelpers.d.ts +0 -18
  112. package/dist/esm/components/feature-announcements/utils/htmlHelpers.js +0 -1
  113. package/dist/esm/components/feature-announcements/utils/index.d.ts +0 -3
  114. package/dist/esm/components/whats-new/WhatsNew.d.ts +0 -23
  115. package/dist/esm/components/whats-new/WhatsNew.js +0 -1
  116. package/dist/esm/components/whats-new/WhatsNew.styles.d.ts +0 -11
  117. package/dist/esm/components/whats-new/WhatsNew.styles.js +0 -185
  118. package/dist/esm/components/whats-new/WhatsNew.types.d.ts +0 -58
  119. package/dist/esm/components/whats-new/WhatsNewButton.d.ts +0 -3
  120. package/dist/esm/components/whats-new/WhatsNewButton.js +0 -1
  121. package/dist/esm/components/whats-new/WhatsNewPanel.d.ts +0 -3
  122. package/dist/esm/components/whats-new/WhatsNewPanel.js +0 -1
  123. package/dist/esm/components/whats-new/WhatsNewProvider.d.ts +0 -4
  124. package/dist/esm/components/whats-new/WhatsNewProvider.js +0 -1
  125. package/dist/esm/components/whats-new/index.d.ts +0 -7
  126. package/dist/esm/components/whats-new/useWhatsNew.d.ts +0 -9
  127. package/dist/esm/components/whats-new/useWhatsNew.js +0 -1
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.LOCAL_STORAGE_KEYS={STORE_ID:"storeId",BIK_STORE_ID:"Bik/StoreId",CURRENT_STORE:"currentStore",STORE:"store",CURRENT_USER:"Bik/CurrentUser",QUERY_PARAM:"storeId"},exports.QUERY_PARAMS={FEATURE_ID:"featureId",STORE_ID:"storeId"};
@@ -1,21 +0,0 @@
1
- /**
2
- * CSS selectors for feature announcements
3
- */
4
- export declare const SELECTORS: {
5
- readonly WHATS_NEW_BUTTON: "[data-testid=\"whats-new-button\"]";
6
- readonly MAIN_ICON_CLASS: ".main-icon-class";
7
- readonly SVG_VIEWBOX: "svg[viewBox=\"0 0 32 32\"]";
8
- readonly CLIPPATH_PATTERN: "clipPath[id*=\"clip\"]";
9
- readonly JOYRIDE_TOOLTIP: "[class*=\"react-joyride__tooltip\"]";
10
- readonly JOYRIDE_ARROW: "[class*=\"react-joyride__arrow\"]";
11
- readonly JOYRIDE_SPOTLIGHT: ".react-joyride__spotlight";
12
- };
13
- /**
14
- * Data test IDs
15
- */
16
- export declare const TEST_IDS: {
17
- readonly WHATS_NEW_BUTTON: "whats-new-button";
18
- readonly MAJOR_POPUP: "major-update-popup";
19
- readonly MINOR_POPUP: "minor-update-popup";
20
- readonly VIDEO_MODAL: "video-modal";
21
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.SELECTORS={WHATS_NEW_BUTTON:'[data-testid="whats-new-button"]',MAIN_ICON_CLASS:".main-icon-class",SVG_VIEWBOX:'svg[viewBox="0 0 32 32"]',CLIPPATH_PATTERN:'clipPath[id*="clip"]',JOYRIDE_TOOLTIP:'[class*="react-joyride__tooltip"]',JOYRIDE_ARROW:'[class*="react-joyride__arrow"]',JOYRIDE_SPOTLIGHT:".react-joyride__spotlight"};
@@ -1,10 +0,0 @@
1
- /**
2
- * Z-index constants
3
- */
4
- export declare const Z_INDEX: {
5
- readonly JOYRIDE: 10000;
6
- readonly VIDEO_MODAL: 2000;
7
- readonly SKIP_BUTTON: 10;
8
- readonly IMAGE_BADGE: 10;
9
- readonly CLOSE_BUTTON: 10;
10
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.Z_INDEX={JOYRIDE:1e4,VIDEO_MODAL:2e3,SKIP_BUTTON:10,IMAGE_BADGE:10,CLOSE_BUTTON:10};
@@ -1 +0,0 @@
1
- export { useFeatureAnnouncements } from './useFeatureAnnouncements';
@@ -1,13 +0,0 @@
1
- import { FeatureAnnouncement, FeatureAnnouncementRepository, RouterProps } from '../types';
2
- export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, module, router, }: FeatureAnnouncementRepository & {
3
- module?: string | undefined;
4
- router?: RouterProps | undefined;
5
- }) => {
6
- features: FeatureAnnouncement[];
7
- majorUpdateFeatures: FeatureAnnouncement[];
8
- minorUpdateFeatures: FeatureAnnouncement[];
9
- isLoading: boolean;
10
- error: string | null;
11
- markFeatureAsViewed: (featureId: string) => Promise<void>;
12
- refetch: () => Promise<void>;
13
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react"),r=require("../constants/animations.js"),a=require("../constants/localStorageKeys.js");exports.useFeatureAnnouncements=o=>{let{fetchVisibleFeatures:n,getStoreFeatureProgress:i,fetchFeatureById:l,markFeatureAsViewedForStore:u,isFeatureApplicableToCurrentPage:s,module:c,router:d}=o;var f;const p=(()=>{const[e,r]=t.useState(null);return t.useEffect((()=>{if("undefined"!=typeof window){let e=null;try{if(e=localStorage.getItem(a.LOCAL_STORAGE_KEYS.STORE_ID)||localStorage.getItem(a.LOCAL_STORAGE_KEYS.BIK_STORE_ID)||localStorage.getItem(a.LOCAL_STORAGE_KEYS.CURRENT_STORE)||localStorage.getItem(a.LOCAL_STORAGE_KEYS.STORE),!e){const t=localStorage.getItem(a.LOCAL_STORAGE_KEYS.CURRENT_USER);t&&(e=JSON.parse(t).storeId)}e||(e=new URLSearchParams(window.location.search).get(a.LOCAL_STORAGE_KEYS.QUERY_PARAM))}catch(e){console.error("FeatureAnnouncements: Failed to get store ID",e)}r(e)}}),[]),e})(),[A,S]=t.useState([]),[_,g]=t.useState([]),[v,y]=t.useState([]),[E,m]=t.useState(!1),[R,w]=t.useState(null),F=t.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(p){m(!0),w(null);try{const[e,t]=yield n(c);if(e||!t)return console.error("FeatureAnnouncements: Failed to fetch features",e),void w("Failed to fetch features");const[a,o]=yield i(p);a&&console.warn("FeatureAnnouncements: Progress fetch failed, treating all features as new",a);const l=new Date,u="undefined"!=typeof window?window.location.pathname:"",d=e=>{if(!e.expirationDate)return!0;let t;return"object"==typeof e.expirationDate&&null!==e.expirationDate&&("seconds"in e.expirationDate||"nanoseconds"in e.expirationDate)?t=new Date(1e3*e.expirationDate.seconds):"string"==typeof e.expirationDate?t=new Date(e.expirationDate):e.expirationDate instanceof Date&&(t=e.expirationDate),!(!t||isNaN(t.getTime()))&&l<t},f=e=>{if("Major"===e.featureUpdateType){let t=[];return Array.isArray(e.pageUrls)?t=e.pageUrls:"object"==typeof e.pageUrls&&null!==e.pageUrls&&"length"in e.pageUrls&&(t=Array.from(e.pageUrls)),t.includes(u)}return!0},A=t.filter((e=>{var t;return!((null===(t=null==o?void 0:o.viewedFeatures)||void 0===t?void 0:t[e.id])||!1)&&s(e)&&d(e)&&f(e)})),_=A.filter((e=>"Major"===e.featureUpdateType)),v=A.filter((e=>"Minor"===e.featureUpdateType));S(A),g(_),setTimeout((()=>{y(v)}),r.ANIMATION_TIMING.MINOR_POPUP_DELAY)}catch(e){console.error("FeatureAnnouncements: Unexpected error in fetchFeatures",e),w("An unexpected error occurred")}finally{m(!1)}}}))),[p,n,i,s,c]),T=t.useCallback((t=>e.__awaiter(void 0,void 0,void 0,(function*(){m(!0),w(null);try{const[e,r]=yield l(t);if(e||!r)return void w("Failed to fetch feature by ID");"Major"===r.featureUpdateType?g([r]):y([r]),S([r])}catch(e){w("An unexpected error occurred while fetching by ID")}finally{m(!1)}}))),[l]),U=t.useCallback((t=>e.__awaiter(void 0,void 0,void 0,(function*(){if(!p)return;const[e]=yield u(p,t);e?(console.warn("FeatureAnnouncements: Failed to mark feature as viewed, removing from local state anyway",e),S((e=>e.filter((e=>e.id!==t)))),g((e=>e.filter((e=>e.id!==t)))),y((e=>e.filter((e=>e.id!==t))))):(S((e=>e.filter((e=>e.id!==t)))),g((e=>e.filter((e=>e.id!==t)))),y((e=>e.filter((e=>e.id!==t)))))}))),[p,u]);return t.useEffect((()=>{var e;const t=null===(e=null==d?void 0:d.query)||void 0===e?void 0:e[a.QUERY_PARAMS.FEATURE_ID];t&&d?T(t):F()}),[null==d?void 0:d.pathname,null===(f=null==d?void 0:d.query)||void 0===f?void 0:f[a.QUERY_PARAMS.FEATURE_ID],p,F,T,d]),{features:A,majorUpdateFeatures:_,minorUpdateFeatures:v,isLoading:E,error:R,markFeatureAsViewed:U,refetch:F}};
@@ -1,7 +0,0 @@
1
- export { default as FeatureAnnouncementProvider } from './FeatureAnnouncementProvider';
2
- export { default as MajorUpdatePopup } from './MajorUpdatePopup';
3
- export { default as MinorUpdatePopup } from './MinorUpdatePopup';
4
- export { VideoModal } from './VideoModal';
5
- export { useFeatureAnnouncements } from './hooks/useFeatureAnnouncements';
6
- export * from './types';
7
- export { TEXT, ANIMATION_TIMING, POPUP_DIMENSIONS } from './constants';
@@ -1,4 +0,0 @@
1
- export * from './majorPopup.styles';
2
- export * from './minorPopup.styles';
3
- export * from './videoModal.styles';
4
- export * from './joyride.styles';
@@ -1,125 +0,0 @@
1
- export declare const majorStepStyles: {
2
- tooltip: {
3
- padding: number;
4
- backgroundColor: string;
5
- borderRadius: string;
6
- border: string;
7
- filter: string;
8
- boxShadow: string;
9
- };
10
- tooltipContent: {
11
- padding: number;
12
- };
13
- buttonNext: {
14
- display: string;
15
- };
16
- buttonBack: {
17
- display: string;
18
- };
19
- buttonClose: {
20
- display: string;
21
- };
22
- buttonSkip: {
23
- display: string;
24
- };
25
- };
26
- export declare const minorStepStyles: {
27
- tooltip: {
28
- padding: number;
29
- backgroundColor: string;
30
- borderRadius: "4px";
31
- border: string;
32
- filter: string;
33
- boxShadow: string;
34
- };
35
- tooltipContent: {
36
- padding: number;
37
- };
38
- buttonNext: {
39
- display: string;
40
- };
41
- buttonBack: {
42
- display: string;
43
- };
44
- buttonClose: {
45
- display: string;
46
- };
47
- buttonSkip: {
48
- display: string;
49
- };
50
- };
51
- export declare const getMajorJoyrideStyles: (isClosing: boolean) => {
52
- options: {
53
- arrowColor: string;
54
- backgroundColor: string;
55
- overlayColor: string;
56
- primaryColor: string;
57
- textColor: string;
58
- zIndex: 10000;
59
- };
60
- tooltip: {
61
- padding: number;
62
- backgroundColor: string;
63
- borderRadius: string;
64
- border: string;
65
- filter: string;
66
- boxShadow: string;
67
- position: "fixed";
68
- top: string;
69
- left: string;
70
- transform: string;
71
- };
72
- tooltipContent: {
73
- padding: number;
74
- };
75
- buttonNext: {
76
- display: string;
77
- };
78
- buttonBack: {
79
- display: string;
80
- };
81
- buttonClose: {
82
- display: string;
83
- };
84
- buttonSkip: {
85
- display: string;
86
- };
87
- };
88
- export declare const getMinorJoyrideStyles: (isClosing: boolean) => {
89
- options: {
90
- arrowColor: string;
91
- backgroundColor: string;
92
- overlayColor: string;
93
- primaryColor: string;
94
- textColor: string;
95
- zIndex: 10000;
96
- };
97
- spotlight: {
98
- boxShadow: string;
99
- borderRadius: "8px";
100
- };
101
- tooltip: {
102
- padding: number;
103
- backgroundColor: string;
104
- borderRadius: "4px";
105
- border: string;
106
- filter: string;
107
- boxShadow: string;
108
- maxWidth: string;
109
- };
110
- tooltipContent: {
111
- padding: number;
112
- };
113
- buttonNext: {
114
- display: string;
115
- };
116
- buttonBack: {
117
- display: string;
118
- };
119
- buttonClose: {
120
- display: string;
121
- };
122
- buttonSkip: {
123
- display: string;
124
- };
125
- };
@@ -1,23 +0,0 @@
1
- import { CSSProperties } from 'react';
2
- export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string) => {
3
- container: CSSProperties;
4
- skipButton: {
5
- base: CSSProperties;
6
- hover: CSSProperties;
7
- };
8
- imageContainer: CSSProperties;
9
- image: CSSProperties;
10
- imagePlaceholder: CSSProperties;
11
- contentContainer: CSSProperties;
12
- title: CSSProperties;
13
- content: CSSProperties;
14
- exploreButton: {
15
- base: CSSProperties;
16
- hover: CSSProperties;
17
- };
18
- navigationContainer: CSSProperties;
19
- navigationButton: (disabled: boolean) => {
20
- base: CSSProperties;
21
- hover: CSSProperties;
22
- };
23
- };
@@ -1 +0,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]}})});
@@ -1,16 +0,0 @@
1
- import { CSSProperties } from 'react';
2
- export declare const getMinorPopupStyles: (startAnimation: boolean, transform: string) => {
3
- container: CSSProperties;
4
- imageContainer: CSSProperties;
5
- imageWrapper: CSSProperties;
6
- image: CSSProperties;
7
- badge: CSSProperties;
8
- badgeText: CSSProperties;
9
- imagePlaceholder: CSSProperties;
10
- contentContainer: CSSProperties;
11
- title: CSSProperties;
12
- content: CSSProperties;
13
- actionsContainer: CSSProperties;
14
- understoodText: CSSProperties;
15
- exploreButton: CSSProperties;
16
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),t=require("../constants/animations.js"),i=require("../constants/dimensions.js"),o=require("../constants/zIndex.js");exports.getMinorPopupStyles=(n,a)=>({container:{width:`${i.POPUP_DIMENSIONS.MINOR.width}px`,height:`${i.POPUP_DIMENSIONS.MINOR.height}px`,display:"flex",backgroundColor:e.BASE_COLORS.grayscale.white,borderRadius:i.BORDER_RADIUS.POPUP,overflow:"hidden",position:"relative",boxShadow:"0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",transform:n?a:"scale(1)",opacity:n?0:1,transition:t.POPUP_TRANSITION},imageContainer:{backgroundColor:e.BASE_COLORS.grayscale[50],borderRadius:i.BORDER_RADIUS.IMAGE,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:i.SPACING.MINOR.imageMargin,width:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,minWidth:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,maxWidth:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,height:`${i.POPUP_DIMENSIONS.MINOR.imageHeight}px`},imageWrapper:{position:"relative",width:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,height:`${i.POPUP_DIMENSIONS.MINOR.imageHeight}px`},image:{width:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,height:`${i.POPUP_DIMENSIONS.MINOR.imageHeight}px`,objectFit:"cover",borderRadius:i.BORDER_RADIUS.IMAGE,display:"block"},badge:{position:"absolute",top:"0px",left:"0px",right:"0px",height:`${i.POPUP_DIMENSIONS.MINOR.badgeHeight}px`,backgroundColor:"rgba(0, 0, 0, 0.26)",borderRadius:`${i.BORDER_RADIUS.IMAGE} ${i.BORDER_RADIUS.IMAGE} ${i.BORDER_RADIUS.IMAGE} ${i.BORDER_RADIUS.IMAGE}`,display:"flex",alignItems:"center",justifyContent:"center",zIndex:o.Z_INDEX.IMAGE_BADGE},badgeText:{color:e.BASE_COLORS.grayscale.white,fontWeight:"600",fontSize:"14px"},imagePlaceholder:{color:e.BASE_COLORS.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:e.BASE_COLORS.grayscale[100],borderRadius:i.BORDER_RADIUS.IMAGE},contentContainer:{flex:1,display:"flex",margin:i.SPACING.MINOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:"0 0 0 0",color:e.BASE_COLORS.grayscale[900],lineHeight:"1.25",textAlign:"left"},content:{fontSize:"12px",fontWeight:"400",lineHeight:"1.2",color:e.BASE_COLORS.grayscale[700],textAlign:"left",maxHeight:"48px",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical"},actionsContainer:{position:"absolute",bottom:i.SPACING.MINOR.actionsBottom,right:i.SPACING.MINOR.actionsRight,display:"flex",gap:i.SPACING.MINOR.actionsGap,alignItems:"center"},understoodText:{color:e.BASE_COLORS.brand[800],fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"},exploreButton:{backgroundColor:e.BASE_COLORS.brand[800],border:"none",color:e.BASE_COLORS.grayscale.white,borderRadius:i.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"}});
@@ -1,13 +0,0 @@
1
- import { CSSProperties } from 'react';
2
- export declare const videoModalStyles: {
3
- backdrop: CSSProperties;
4
- container: CSSProperties;
5
- closeButton: {
6
- base: CSSProperties;
7
- hover: CSSProperties;
8
- };
9
- videoWrapper: CSSProperties;
10
- iframe: CSSProperties;
11
- video: CSSProperties;
12
- noVideoMessage: CSSProperties;
13
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../constants/animations.js");var e=require("../constants/dimensions.js"),t=require("../constants/zIndex.js");const o={backdrop:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.9)",zIndex:t.Z_INDEX.VIDEO_MODAL,display:"flex",justifyContent:"center",alignItems:"center",padding:"20px"},container:{position:"relative",width:"90vw",height:"90vh",maxWidth:"1200px",maxHeight:"800px",backgroundColor:"black",borderRadius:e.BORDER_RADIUS.VIDEO_MODAL,overflow:"hidden",boxShadow:"0 25px 50px rgba(0, 0, 0, 0.8)"},closeButton:{base:{position:"absolute",top:"20px",right:"20px",background:"rgba(0, 0, 0, 0.7)",border:"none",color:"white",fontSize:"24px",width:"40px",height:"40px",borderRadius:e.BORDER_RADIUS.CLOSE_BUTTON,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",zIndex:t.Z_INDEX.CLOSE_BUTTON,transition:"background-color 0.2s"},hover:{backgroundColor:"rgba(0, 0, 0, 0.9)"}},videoWrapper:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},iframe:{borderRadius:e.BORDER_RADIUS.VIDEO_MODAL},video:{width:"100%",height:"100%",objectFit:"contain",borderRadius:e.BORDER_RADIUS.VIDEO_MODAL},noVideoMessage:{color:"white",fontSize:"18px",textAlign:"center"}};exports.videoModalStyles=o;
@@ -1,40 +0,0 @@
1
- /**
2
- * Firestore Timestamp type
3
- */
4
- export interface FirestoreTimestamp {
5
- seconds: number;
6
- nanoseconds?: number;
7
- }
8
- /**
9
- * Feature announcement data model
10
- */
11
- export interface FeatureAnnouncement {
12
- id: string;
13
- title: string;
14
- body: string;
15
- content: string;
16
- buttonText: string;
17
- displayImage: string;
18
- featureTag: string;
19
- featureUpdateType: 'Major' | 'Minor';
20
- image: string;
21
- module: string[];
22
- pageUrls: string[];
23
- productVideo: string;
24
- redirectUrl: string;
25
- updates: string;
26
- visibility: boolean;
27
- createdAt: FirestoreTimestamp;
28
- expirationDate?: FirestoreTimestamp | string | Date;
29
- }
30
- /**
31
- * Store feature progress tracking
32
- */
33
- export interface StoreFeatureProgress {
34
- storeId: string;
35
- viewedFeatures: Record<string, boolean>;
36
- }
37
- /**
38
- * Feature update types
39
- */
40
- export type FeatureUpdateType = 'Major' | 'Minor';
@@ -1,4 +0,0 @@
1
- export * from './feature.types';
2
- export * from './props.types';
3
- export * from './repository.types';
4
- export * from './router.types';
@@ -1,43 +0,0 @@
1
- /// <reference types="react" />
2
- import { FeatureAnnouncement } from './feature.types';
3
- import { FeatureAnnouncementRepository } from './repository.types';
4
- import { RouterProps } from './router.types';
5
- /**
6
- * Base popup component props
7
- */
8
- export interface PopupBaseProps {
9
- feature: FeatureAnnouncement;
10
- currentIndex: number;
11
- totalFeatures: number;
12
- onSkip: () => void;
13
- onExplore: () => void;
14
- onPrevious: () => void;
15
- onNext: () => void;
16
- setIsClosing?: (isClosing: boolean) => void;
17
- }
18
- /**
19
- * Major update popup props
20
- */
21
- export interface MajorUpdatePopupProps extends PopupBaseProps {
22
- }
23
- /**
24
- * Minor update popup props
25
- */
26
- export interface MinorUpdatePopupProps extends PopupBaseProps {
27
- }
28
- /**
29
- * Video modal props
30
- */
31
- export interface VideoModalProps {
32
- isOpen: boolean;
33
- videoUrl: string;
34
- onClose: () => void;
35
- }
36
- /**
37
- * Feature announcement provider props
38
- */
39
- export interface FeatureAnnouncementProviderProps extends FeatureAnnouncementRepository {
40
- children: React.ReactNode;
41
- module?: string;
42
- router?: RouterProps;
43
- }
@@ -1,11 +0,0 @@
1
- import { FeatureAnnouncement, StoreFeatureProgress } from './feature.types';
2
- /**
3
- * Repository function types for dependency injection
4
- */
5
- export interface FeatureAnnouncementRepository {
6
- fetchVisibleFeatures: (module?: string) => Promise<[Error | null, FeatureAnnouncement[] | null]>;
7
- getStoreFeatureProgress: (storeId: string) => Promise<[Error | null, StoreFeatureProgress | null]>;
8
- fetchFeatureById: (featureId: string) => Promise<[Error | null, FeatureAnnouncement | null]>;
9
- markFeatureAsViewedForStore: (storeId: string, featureId: string) => Promise<[Error | null]>;
10
- isFeatureApplicableToCurrentPage: (feature: FeatureAnnouncement) => boolean;
11
- }
@@ -1,7 +0,0 @@
1
- /**
2
- * Router properties
3
- */
4
- export interface RouterProps {
5
- pathname: string;
6
- query: Record<string, string | string[] | undefined>;
7
- }
@@ -1,13 +0,0 @@
1
- import { FeatureAnnouncement, FeatureAnnouncementRepository, RouterProps } from './types';
2
- export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, module, router, }: FeatureAnnouncementRepository & {
3
- module?: string | undefined;
4
- router?: RouterProps | undefined;
5
- }) => {
6
- features: FeatureAnnouncement[];
7
- majorUpdateFeatures: FeatureAnnouncement[];
8
- minorUpdateFeatures: FeatureAnnouncement[];
9
- isLoading: boolean;
10
- error: string | null;
11
- markFeatureAsViewed: (featureId: string) => Promise<void>;
12
- refetch: () => Promise<void>;
13
- };
@@ -1,18 +0,0 @@
1
- /**
2
- * Calculate transform for closing animation
3
- * @param popupElement - Popup element reference
4
- * @param targetElement - Target element to animate towards
5
- * @returns Transform CSS string
6
- */
7
- export declare const calculateCloseTransform: (popupElement: HTMLElement, targetElement: Element) => string;
8
- /**
9
- * Hide Joyride arrow element
10
- * @param popupRef - Reference to popup element
11
- */
12
- export declare const hideJoyrideArrow: (popupRef: HTMLElement | null) => void;
13
- /**
14
- * Execute callback after animation completes
15
- * @param callback - Function to execute
16
- * @param delay - Optional delay override
17
- */
18
- export declare const executeAfterAnimation: (callback: () => void, delay?: number) => void;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../constants/animations.js");exports.calculateCloseTransform=(e,t)=>{const i=e.getBoundingClientRect(),o=t.getBoundingClientRect();return`translate(${o.left+o.width/2-(i.left+i.width/2)}px, ${o.top+o.height/2-(i.top+i.height/2)}px) scale(0)`},exports.executeAfterAnimation=function(t){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.ANIMATION_TIMING.CLOSE_DURATION;setTimeout(t,i)},exports.hideJoyrideArrow=e=>{if(!e)return;const t=e.closest('[class*="react-joyride__tooltip"]');if(!t)return;const i=t.querySelector('[class*="react-joyride__arrow"]');i&&(i.style.display="none",i.style.visibility="hidden",i.style.opacity="0")};
@@ -1,30 +0,0 @@
1
- /**
2
- * Find What's New button using multiple strategies
3
- * @returns Element or null
4
- */
5
- export declare const findWhatsNewButton: () => Element | null;
6
- /**
7
- * Find target element for minor update
8
- * @param featureTag - Feature tag selector
9
- * @returns Element or null
10
- */
11
- export declare const findFeatureTagElement: (featureTag: string) => Element | null;
12
- /**
13
- * Normalize selector string
14
- * @param selector - Selector string
15
- * @returns Normalized selector
16
- */
17
- export declare const normalizeSelector: (selector: string) => string;
18
- /**
19
- * Check if element is fully visible in viewport
20
- * @param element - Element to check
21
- * @returns True if element is fully visible
22
- */
23
- export declare const isElementInViewport: (element: Element) => boolean;
24
- /**
25
- * Scroll to element smoothly with offset
26
- * @param element - Element to scroll to
27
- * @param offset - Offset from top (default 120px for popup space)
28
- * @returns Promise that resolves when scroll completes
29
- */
30
- export declare const scrollToElementSmooth: (element: Element, offset?: number) => Promise<void>;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../constants/animations.js");var e=require("../constants/selectors.js");const t=e=>{const t=e.getBoundingClientRect(),o=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth,r=t.top>=120&&t.bottom<=o,s=t.left>=0&&t.right<=n;return r&&s};exports.findFeatureTagElement=e=>{const t=e.startsWith("#")||e.startsWith(".")||e.startsWith("[")?e:`#${e}`;return document.querySelector(t)},exports.findWhatsNewButton=()=>{let t=document.querySelector(e.SELECTORS.WHATS_NEW_BUTTON);if(t)return t;if(t=document.querySelector(e.SELECTORS.MAIN_ICON_CLASS),t)return t;const o=document.querySelector(e.SELECTORS.SVG_VIEWBOX);if(o){if(o.querySelector(e.SELECTORS.CLIPPATH_PATTERN))return o.closest(e.SELECTORS.WHATS_NEW_BUTTON)||o.parentElement}return null},exports.isElementInViewport=t,exports.normalizeSelector=e=>e.startsWith("#")||e.startsWith(".")||e.startsWith("[")?e:`#${e}`,exports.scrollToElementSmooth=function(e){let o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:120;return new Promise((n=>{if(t(e))return void n();const r=e.getBoundingClientRect().top+window.pageYOffset-o;let s;window.scrollTo({top:r,behavior:"smooth"});const i=()=>{clearTimeout(s),s=setTimeout((()=>{window.removeEventListener("scroll",i),setTimeout((()=>n()),100)}),100)};window.addEventListener("scroll",i,{passive:!0}),setTimeout((()=>{window.removeEventListener("scroll",i),n()}),1e3)}))};
@@ -1,18 +0,0 @@
1
- /**
2
- * Decode HTML entities in text
3
- * @param text - Text containing HTML entities
4
- * @returns Decoded text
5
- */
6
- export declare const decodeHTMLEntities: (text: string) => string;
7
- /**
8
- * Format video URL for embedding
9
- * @param videoUrl - Original video URL
10
- * @returns Formatted video URL
11
- */
12
- export declare const formatVideoUrl: (videoUrl: string) => string;
13
- /**
14
- * Check if URL is a YouTube video
15
- * @param videoUrl - Video URL to check
16
- * @returns True if YouTube video
17
- */
18
- export declare const isYouTubeVideo: (videoUrl: string) => boolean;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.decodeHTMLEntities=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},exports.formatVideoUrl=e=>e.replace("watch?v=","embed/").replace("youtu.be/","youtube.com/embed/"),exports.isYouTubeVideo=e=>e.includes("youtube.com")||e.includes("youtu.be");
@@ -1,3 +0,0 @@
1
- export * from './htmlHelpers';
2
- export * from './animationHelpers';
3
- export * from './elementHelpers';
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
- import { WhatsNewContent } from './WhatsNew.types';
3
- interface WhatsNewProps {
4
- title?: string;
5
- tooltip?: string;
6
- searchPlaceholder?: string;
7
- emptyStateTitle?: string;
8
- emptyStateDescription?: string;
9
- noResultsText?: string;
10
- width?: string;
11
- onContentClick?: (content: WhatsNewContent) => void;
12
- renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
13
- buttonTestId?: string;
14
- iconWidth?: number;
15
- iconHeight?: number;
16
- customIcon?: React.ComponentType<{
17
- width?: number;
18
- height?: number;
19
- color?: string;
20
- }>;
21
- }
22
- export declare const WhatsNew: React.FC<WhatsNewProps>;
23
- export {};
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../node_modules/react/jsx-runtime.js"),e=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=r=>{let{title:i="What's new",tooltip:a="What's new",searchPlaceholder:u="Search posts",emptyStateTitle:c="Nothing new!",emptyStateDescription:h="There are no new updates or features at the moment. Check back soon!",noResultsText:l="Sorry, no results found.",width:d="480px",onContentClick:p,renderCustomContent:w,buttonTestId:x="whats-new-button",iconWidth:m=32,iconHeight:C=32,customIcon:j}=r;const[W,N]=e.useState(!1),{whatsNewContent:g,isLoading:S,newContentCount:y}=s.useWhatsNewContext();return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(n.WhatsNewButton,{onClick:()=>N(!0),newContentCount:y,isOpen:W,isLoading:S,tooltip:a,testId:x,iconWidth:m,iconHeight:C,customIcon:j}),t.jsxRuntimeExports.jsx(o.WhatsNewPanel,{isOpen:W,onClose:()=>N(!1),content:g,isLoading:S,title:i,searchPlaceholder:u,emptyStateTitle:c,emptyStateDescription:h,noResultsText:l,width:d,onContentClick:t=>{p&&p(t)},renderCustomContent:w})]})};
@@ -1,11 +0,0 @@
1
- export declare const WhatsNewIconContainer: import("styled-components").StyledComponent<"div", any, {
2
- count?: number | undefined;
3
- }, never>;
4
- export declare const WhatsNewWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const MainCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare const BackgroundImageContainer: import("styled-components").StyledComponent<"div", any, {
8
- imageUrl: string;
9
- height?: string | undefined;
10
- width?: string | undefined;
11
- }, never>;