@saasquatch/squatch-js 2.8.3-3 → 2.8.3-30

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 (46) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/babelregister.js +0 -1
  3. package/coverage/base.css +224 -0
  4. package/coverage/block-navigation.js +87 -0
  5. package/coverage/clover.xml +996 -0
  6. package/coverage/coverage-final.json +26 -0
  7. package/coverage/favicon.png +0 -0
  8. package/coverage/prettify.css +1 -0
  9. package/coverage/prettify.js +2 -0
  10. package/coverage/sort-arrow-sprite.png +0 -0
  11. package/coverage/sorter.js +210 -0
  12. package/demo/perf-benchmark.ts +363 -0
  13. package/demo/perf-compare.html +870 -0
  14. package/demo/perf-deploy/vercel.json +17 -0
  15. package/demo/perf-frame.html +417 -0
  16. package/demo/perf-server.ts +131 -0
  17. package/dist/ErrorTemplate-DUNm11h9.js +124 -0
  18. package/dist/ErrorTemplate-DUNm11h9.js.map +1 -0
  19. package/dist/ErrorTemplate-DumOlC5f.cjs +109 -0
  20. package/dist/ErrorTemplate-DumOlC5f.cjs.map +1 -0
  21. package/dist/SkeletonTemplate-B3Bk4NFu.cjs +243 -0
  22. package/dist/SkeletonTemplate-B3Bk4NFu.cjs.map +1 -0
  23. package/dist/SkeletonTemplate-Day_0iMM.js +246 -0
  24. package/dist/SkeletonTemplate-Day_0iMM.js.map +1 -0
  25. package/dist/squatch.cjs.js +33 -2523
  26. package/dist/squatch.cjs.js.map +1 -1
  27. package/dist/squatch.esm.js +928 -1956
  28. package/dist/squatch.esm.js.map +1 -1
  29. package/dist/squatch.js +227 -2373
  30. package/dist/squatch.js.map +1 -1
  31. package/dist/squatch.min.js +4 -5
  32. package/dist/types.d.ts +134 -1
  33. package/dist/utils/cookieUtils.d.ts +1 -0
  34. package/dist/utils/logger.d.ts +23 -0
  35. package/dist/widgets/EmbedWidget.d.ts +1 -1
  36. package/dist/widgets/ErrorTemplate.d.ts +9 -0
  37. package/dist/widgets/PopupWidget.d.ts +3 -5
  38. package/dist/widgets/SkeletonTemplate.d.ts +1 -4
  39. package/dist/widgets/Widget.d.ts +29 -2
  40. package/dist/widgets/declarative/DeclarativeWidget.d.ts +9 -1
  41. package/dist/widgets/declarative/DeclarativeWidgets.d.ts +0 -6
  42. package/package.json +11 -15
  43. package/vite-env.d.ts +2 -1
  44. package/vite.config.ts +17 -0
  45. package/babel.config.js +0 -8
  46. package/jest.config.ts +0 -200
package/dist/ErrorTemplate-DUNm11h9.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ErrorTemplate-DUNm11h9.js","sources":["../src/widgets/ErrorTemplate.ts"],"sourcesContent":["export interface ErrorTemplateOptions {\n rsCode?: string;\n apiErrorCode?: string;\n statusCode?: number;\n message?: string;\n mode?: string;\n style?: string;\n}\n\nexport function getErrorTemplate(options: ErrorTemplateOptions = {}): string {\n const {\n rsCode,\n apiErrorCode,\n statusCode,\n message,\n mode = \"modal\",\n style = \"\",\n } = options;\n\n // Escape values using the browser's built-in HTML encoding\n const tmp = document.createElement(\"span\");\n const esc = (s: string) => ((tmp.textContent = s), tmp.innerHTML);\n\n // Build error details items\n const detailItems: string[] = [];\n\n if (statusCode !== undefined) {\n detailItems.push(`<dt>Status Code</dt><dd>${esc(String(statusCode))}</dd>`);\n }\n if (apiErrorCode) {\n detailItems.push(`<dt>API Error Code</dt><dd>${esc(apiErrorCode)}</dd>`);\n }\n if (rsCode) {\n detailItems.push(`<dt>RS Code</dt><dd>${esc(rsCode)}</dd>`);\n }\n if (message) {\n detailItems.push(`<dt>Message</dt><dd>${esc(message)}</dd>`);\n }\n\n // Build the error details section\n const errorDetailsHtml =\n detailItems.length > 0\n ? `<dl class=\"error-details\">${detailItems.join(\"\\n \")}</dl>`\n : \"\";\n\n return `<!DOCTYPE html>\n <!--[if IE 7]><html class=\"ie7 oldie\" lang=\"en\"><![endif]-->\n <!--[if IE 8]><html class=\"ie8 oldie\" lang=\"en\"><![endif]-->\n <!--[if gt IE 8]><!--><html lang=\"en\"><!--<![endif]-->\n <head>\n <style>\n ${style}\n body {\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n line-height: 20px;\n }\n h3 {\n text-align: center;\n }\n .errortitle {\n margin: 0;\n font-size: 14px;\n }\n .errorbody p {\n text-align: center;\n font-size: 12px;\n margin: 0 0 10px;\n }\n h4 {\n font-size: 17.5px;\n text-align: center;\n margin: 10px 0;\n }\n .embed {\n width: 100%;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n }\n .errorbody {\n padding: 15px;\n position: relative;\n height: auto;\n }\n p {\n text-align: center;\n font-size: 12px;\n }\n .sadface {\n padding: 10px;\n }\n .sadface img {\n display: block;\n margin: auto;\n height: 100px;\n }\n .modal-disable-overlay {\n display: none;\n position: absolute;\n top: 50px;\n width: 100%;\n height: 85%;\n background: rgba(255, 255, 255, 0.4);\n }\n\n .right-align {\n text-align: right;\n }\n .errtxt {\n color: #CCC9C9;\n }\n .error-details {\n margin-top: 16px;\n padding: 12px;\n background: #f8f8f8;\n border-radius: 4px;\n text-align: left;\n font-size: 13px;\n color: #666;\n display: block;\n overflow: visible;\n }\n .error-details dt {\n display: block;\n font-weight: 600;\n color: #333;\n margin-top: 8px;\n }\n .error-details dt:first-child {\n margin-top: 0;\n }\n .error-details dd {\n display: block;\n margin: 4px 0 0 0;\n word-break: break-word;\n }\n </style>\n </head>\n <body>\n\n <div class=\"squatch-container ${mode}\" style=\"width:100%;background:#FFF;\">\n <div class=\"errorbody\">\n <div class=\"sadface\"><img src=\"https://fast.ssqt.io/assets/images/whoops-error-image.png\"></div>\n <h4>Our referral program is temporarily unavailable.</h4>\n <p>Please reload the page or check back later.</p>\n <p>If the problem persists please contact our support team.</p>\n\n ${errorDetailsHtml}\n </div>\n </div>\n </body>\n </html>`;\n}\n"],"names":["getErrorTemplate","options","rsCode","apiErrorCode","statusCode","message","mode","style","tmp","esc","s","detailItems","errorDetailsHtml"],"mappings":"AASgB,SAAAA,EAAiBC,IAAgC,IAAY;AACrE,QAAA;AAAA,IACJ,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,EAAA,IACNN,GAGEO,IAAM,SAAS,cAAc,MAAM,GACnCC,IAAM,CAACC,OAAgBF,EAAI,cAAcE,GAAIF,EAAI,YAGjDG,IAAwB,CAAC;AAE/B,EAAIP,MAAe,UACjBO,EAAY,KAAK,2BAA2BF,EAAI,OAAOL,CAAU,CAAC,CAAC,OAAO,GAExED,KACFQ,EAAY,KAAK,8BAA8BF,EAAIN,CAAY,CAAC,OAAO,GAErED,KACFS,EAAY,KAAK,uBAAuBF,EAAIP,CAAM,CAAC,OAAO,GAExDG,KACFM,EAAY,KAAK,uBAAuBF,EAAIJ,CAAO,CAAC,OAAO;AAIvD,QAAAO,IACJD,EAAY,SAAS,IACjB,6BAA6BA,EAAY,KAAK;AAAA,aAAgB,CAAC,UAC/D;AAEC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMCJ,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAyFuBD,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAO9BM,CAAgB;AAAA;AAAA;AAAA;AAAA;AAK5B;"}
package/dist/ErrorTemplate-DumOlC5f.cjs ADDED
@@ -0,0 +1,109 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function c(s={}){const{rsCode:r,apiErrorCode:i,statusCode:a,message:o,mode:l="modal",style:n=""}=s,d=document.createElement("span"),t=g=>(d.textContent=g,d.innerHTML),e=[];a!==void 0&&e.push(`<dt>Status Code</dt><dd>${t(String(a))}</dd>`),i&&e.push(`<dt>API Error Code</dt><dd>${t(i)}</dd>`),r&&e.push(`<dt>RS Code</dt><dd>${t(r)}</dd>`),o&&e.push(`<dt>Message</dt><dd>${t(o)}</dd>`);const p=e.length>0?`<dl class="error-details">${e.join(`
2
+ `)}</dl>`:"";return`<!DOCTYPE html>
3
+ <!--[if IE 7]><html class="ie7 oldie" lang="en"><![endif]-->
4
+ <!--[if IE 8]><html class="ie8 oldie" lang="en"><![endif]-->
5
+ <!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
6
+ <head>
7
+ <style>
8
+ ${n}
9
+ body {
10
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
11
+ line-height: 20px;
12
+ }
13
+ h3 {
14
+ text-align: center;
15
+ }
16
+ .errortitle {
17
+ margin: 0;
18
+ font-size: 14px;
19
+ }
20
+ .errorbody p {
21
+ text-align: center;
22
+ font-size: 12px;
23
+ margin: 0 0 10px;
24
+ }
25
+ h4 {
26
+ font-size: 17.5px;
27
+ text-align: center;
28
+ margin: 10px 0;
29
+ }
30
+ .embed {
31
+ width: 100%;
32
+ max-width: 500px;
33
+ margin-left: auto;
34
+ margin-right: auto;
35
+ }
36
+ .errorbody {
37
+ padding: 15px;
38
+ position: relative;
39
+ height: auto;
40
+ }
41
+ p {
42
+ text-align: center;
43
+ font-size: 12px;
44
+ }
45
+ .sadface {
46
+ padding: 10px;
47
+ }
48
+ .sadface img {
49
+ display: block;
50
+ margin: auto;
51
+ height: 100px;
52
+ }
53
+ .modal-disable-overlay {
54
+ display: none;
55
+ position: absolute;
56
+ top: 50px;
57
+ width: 100%;
58
+ height: 85%;
59
+ background: rgba(255, 255, 255, 0.4);
60
+ }
61
+
62
+ .right-align {
63
+ text-align: right;
64
+ }
65
+ .errtxt {
66
+ color: #CCC9C9;
67
+ }
68
+ .error-details {
69
+ margin-top: 16px;
70
+ padding: 12px;
71
+ background: #f8f8f8;
72
+ border-radius: 4px;
73
+ text-align: left;
74
+ font-size: 13px;
75
+ color: #666;
76
+ display: block;
77
+ overflow: visible;
78
+ }
79
+ .error-details dt {
80
+ display: block;
81
+ font-weight: 600;
82
+ color: #333;
83
+ margin-top: 8px;
84
+ }
85
+ .error-details dt:first-child {
86
+ margin-top: 0;
87
+ }
88
+ .error-details dd {
89
+ display: block;
90
+ margin: 4px 0 0 0;
91
+ word-break: break-word;
92
+ }
93
+ </style>
94
+ </head>
95
+ <body>
96
+
97
+ <div class="squatch-container ${l}" style="width:100%;background:#FFF;">
98
+ <div class="errorbody">
99
+ <div class="sadface"><img src="https://fast.ssqt.io/assets/images/whoops-error-image.png"></div>
100
+ <h4>Our referral program is temporarily unavailable.</h4>
101
+ <p>Please reload the page or check back later.</p>
102
+ <p>If the problem persists please contact our support team.</p>
103
+
104
+ ${p}
105
+ </div>
106
+ </div>
107
+ </body>
108
+ </html>`}exports.getErrorTemplate=c;
109
+ //# sourceMappingURL=ErrorTemplate-DumOlC5f.cjs.map
package/dist/ErrorTemplate-DumOlC5f.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ErrorTemplate-DumOlC5f.cjs","sources":["../src/widgets/ErrorTemplate.ts"],"sourcesContent":["export interface ErrorTemplateOptions {\n rsCode?: string;\n apiErrorCode?: string;\n statusCode?: number;\n message?: string;\n mode?: string;\n style?: string;\n}\n\nexport function getErrorTemplate(options: ErrorTemplateOptions = {}): string {\n const {\n rsCode,\n apiErrorCode,\n statusCode,\n message,\n mode = \"modal\",\n style = \"\",\n } = options;\n\n // Escape values using the browser's built-in HTML encoding\n const tmp = document.createElement(\"span\");\n const esc = (s: string) => ((tmp.textContent = s), tmp.innerHTML);\n\n // Build error details items\n const detailItems: string[] = [];\n\n if (statusCode !== undefined) {\n detailItems.push(`<dt>Status Code</dt><dd>${esc(String(statusCode))}</dd>`);\n }\n if (apiErrorCode) {\n detailItems.push(`<dt>API Error Code</dt><dd>${esc(apiErrorCode)}</dd>`);\n }\n if (rsCode) {\n detailItems.push(`<dt>RS Code</dt><dd>${esc(rsCode)}</dd>`);\n }\n if (message) {\n detailItems.push(`<dt>Message</dt><dd>${esc(message)}</dd>`);\n }\n\n // Build the error details section\n const errorDetailsHtml =\n detailItems.length > 0\n ? `<dl class=\"error-details\">${detailItems.join(\"\\n \")}</dl>`\n : \"\";\n\n return `<!DOCTYPE html>\n <!--[if IE 7]><html class=\"ie7 oldie\" lang=\"en\"><![endif]-->\n <!--[if IE 8]><html class=\"ie8 oldie\" lang=\"en\"><![endif]-->\n <!--[if gt IE 8]><!--><html lang=\"en\"><!--<![endif]-->\n <head>\n <style>\n ${style}\n body {\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n line-height: 20px;\n }\n h3 {\n text-align: center;\n }\n .errortitle {\n margin: 0;\n font-size: 14px;\n }\n .errorbody p {\n text-align: center;\n font-size: 12px;\n margin: 0 0 10px;\n }\n h4 {\n font-size: 17.5px;\n text-align: center;\n margin: 10px 0;\n }\n .embed {\n width: 100%;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n }\n .errorbody {\n padding: 15px;\n position: relative;\n height: auto;\n }\n p {\n text-align: center;\n font-size: 12px;\n }\n .sadface {\n padding: 10px;\n }\n .sadface img {\n display: block;\n margin: auto;\n height: 100px;\n }\n .modal-disable-overlay {\n display: none;\n position: absolute;\n top: 50px;\n width: 100%;\n height: 85%;\n background: rgba(255, 255, 255, 0.4);\n }\n\n .right-align {\n text-align: right;\n }\n .errtxt {\n color: #CCC9C9;\n }\n .error-details {\n margin-top: 16px;\n padding: 12px;\n background: #f8f8f8;\n border-radius: 4px;\n text-align: left;\n font-size: 13px;\n color: #666;\n display: block;\n overflow: visible;\n }\n .error-details dt {\n display: block;\n font-weight: 600;\n color: #333;\n margin-top: 8px;\n }\n .error-details dt:first-child {\n margin-top: 0;\n }\n .error-details dd {\n display: block;\n margin: 4px 0 0 0;\n word-break: break-word;\n }\n </style>\n </head>\n <body>\n\n <div class=\"squatch-container ${mode}\" style=\"width:100%;background:#FFF;\">\n <div class=\"errorbody\">\n <div class=\"sadface\"><img src=\"https://fast.ssqt.io/assets/images/whoops-error-image.png\"></div>\n <h4>Our referral program is temporarily unavailable.</h4>\n <p>Please reload the page or check back later.</p>\n <p>If the problem persists please contact our support team.</p>\n\n ${errorDetailsHtml}\n </div>\n </div>\n </body>\n </html>`;\n}\n"],"names":["getErrorTemplate","options","rsCode","apiErrorCode","statusCode","message","mode","style","tmp","esc","s","detailItems","errorDetailsHtml"],"mappings":"gFASgB,SAAAA,EAAiBC,EAAgC,GAAY,CACrE,KAAA,CACJ,OAAAC,EACA,aAAAC,EACA,WAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EAAQ,EAAA,EACNN,EAGEO,EAAM,SAAS,cAAc,MAAM,EACnCC,EAAOC,IAAgBF,EAAI,YAAcE,EAAIF,EAAI,WAGjDG,EAAwB,CAAC,EAE3BP,IAAe,QACjBO,EAAY,KAAK,2BAA2BF,EAAI,OAAOL,CAAU,CAAC,CAAC,OAAO,EAExED,GACFQ,EAAY,KAAK,8BAA8BF,EAAIN,CAAY,CAAC,OAAO,EAErED,GACFS,EAAY,KAAK,uBAAuBF,EAAIP,CAAM,CAAC,OAAO,EAExDG,GACFM,EAAY,KAAK,uBAAuBF,EAAIJ,CAAO,CAAC,OAAO,EAIvD,MAAAO,EACJD,EAAY,OAAS,EACjB,6BAA6BA,EAAY,KAAK;AAAA,aAAgB,CAAC,QAC/D,GAEC,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMCJ,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAyFuBD,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAO9BM,CAAgB;AAAA;AAAA;AAAA;AAAA,YAK5B"}
package/dist/SkeletonTemplate-B3Bk4NFu.cjs ADDED
@@ -0,0 +1,243 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=({type:s="verified-access"})=>`
2
+ <style>
3
+ * {
4
+ box-sizing: border-box;
5
+ padding: 0;
6
+ margin: 0;
7
+ }
8
+
9
+ .widget-container {
10
+ background: white;
11
+ width: 100%;
12
+ padding: 40px;
13
+ box-sizing: border-box;
14
+ overflow: hidden;
15
+ }
16
+
17
+ @keyframes pulse {
18
+ 0%, 100% { opacity: 1; }
19
+ 50% { opacity: 0.6; }
20
+ }
21
+
22
+ .skeleton {
23
+ background: #e0e0e0;
24
+ animation: pulse 1.8s ease-in-out infinite;
25
+ border-radius: 6px;
26
+ margin-bottom: 12px;
27
+ }
28
+
29
+ /* Typography Skeletons */
30
+ .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
31
+ .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
32
+ .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
33
+ .sk-text-short { width: 40%; }
34
+ .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
35
+
36
+ /* Layouts */
37
+ .hero-section {
38
+ display: flex;
39
+ gap: 40px;
40
+ margin-bottom: 40px;
41
+ padding-bottom: 40px;
42
+ flex-direction: row;
43
+ height: 100%;
44
+ /* Removed border-bottom */
45
+ }
46
+
47
+ .hero-content {
48
+ flex: 1;
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ }
53
+
54
+ .hero-image {
55
+ flex: 1;
56
+ height: 300px;
57
+ border-radius: 12px;
58
+ }
59
+
60
+ /* -- Specific Instant Access Overrides -- */
61
+ .instant-access-layout {
62
+ margin-bottom: 0;
63
+ padding-bottom: 0;
64
+ align-items: center;
65
+ }
66
+ .ia-image {
67
+ height: 400px;
68
+ }
69
+ .ia-center {
70
+ margin-left: auto;
71
+ margin-right: auto;
72
+ }
73
+ .ia-content {
74
+ align-items: center;
75
+ text-align: center;
76
+ }
77
+ .sk-btn-action {
78
+ height: 45px;
79
+ width: 140px;
80
+ border-radius: 6px;
81
+ margin: 24px auto;
82
+ }
83
+ .input-group {
84
+ display: flex;
85
+ gap: 10px;
86
+ width: 100%;
87
+ max-width: 400px;
88
+ }
89
+ .sk-btn-copy {
90
+ height: 50px;
91
+ width: 120px;
92
+ border-radius: 8px;
93
+ }
94
+ /* ------------------------------------- */
95
+
96
+ .share-section { margin-bottom: 40px; }
97
+ .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
98
+
99
+ .social-buttons { display: flex; gap: 12px; }
100
+ .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
101
+
102
+ .stats-section {
103
+ display: flex;
104
+ gap: 24px;
105
+ margin-bottom: 40px;
106
+ padding: 30px 0;
107
+ /* Removed border-top and border-bottom */
108
+ }
109
+ .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
110
+ .stat-divider { padding-left: 24px; }
111
+ .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
112
+ .sk-stat-label { height: 18px; width: 80px; }
113
+
114
+ /* Table Styles */
115
+ .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
116
+ .sk-th { height: 16px; }
117
+ .table-row {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 16px;
121
+ padding: 16px 0;
122
+ /* Removed border-bottom */
123
+ }
124
+
125
+ .col-user { flex: 2; }
126
+ .col-status { flex: 1; }
127
+ .col-reward { flex: 2; }
128
+ .col-date { flex: 1; }
129
+
130
+ .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
131
+ .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
132
+
133
+ .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
134
+ .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
135
+
136
+ @media (max-width: 768px) {
137
+ body { padding: 20px; }
138
+ .widget-container { padding: 24px; }
139
+
140
+ .hero-section { flex-direction: column-reverse; gap: 24px; }
141
+ .instant-access-layout { flex-direction: column; }
142
+
143
+ .hero-image { height: 220px; width: 100%; }
144
+ .sk-title-lg { width: 100%; }
145
+
146
+ .col-date { display: none; }
147
+ }
148
+ </style>
149
+
150
+ <div class="widget-container">
151
+ ${s==="verified-access"?`
152
+ <div class="hero-section">
153
+ <div class="hero-content">
154
+ <div class="skeleton sk-title-lg"></div>
155
+ <div class="skeleton sk-text"></div>
156
+ <div class="skeleton sk-text sk-text-short"></div>
157
+ </div>
158
+ <div class="skeleton hero-image"></div>
159
+ </div>
160
+
161
+ <div class="share-section">
162
+ <div class="skeleton sk-label"></div>
163
+ <div class="skeleton sk-input"></div>
164
+ <div class="social-buttons">
165
+ <div class="skeleton sk-btn-social"></div>
166
+ <div class="skeleton sk-btn-social"></div>
167
+ <div class="skeleton sk-btn-social"></div>
168
+ <div class="skeleton sk-btn-social"></div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
173
+ <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
174
+
175
+ <div class="stats-section">
176
+ <div class="stat-card">
177
+ <div class="skeleton sk-stat-num"></div>
178
+ <div class="skeleton sk-stat-label"></div>
179
+ </div>
180
+ <div class="stat-card stat-divider">
181
+ <div class="skeleton sk-stat-num"></div>
182
+ <div class="skeleton sk-stat-label"></div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="skeleton sk-title-md"></div>
187
+
188
+ <div class="table-header">
189
+ <div class="skeleton sk-th col-user"></div>
190
+ <div class="skeleton sk-th col-status"></div>
191
+ <div class="skeleton sk-th col-reward"></div>
192
+ <div class="skeleton sk-th col-date"></div>
193
+ </div>
194
+
195
+ <div class="table-row">
196
+ <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
197
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
198
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
199
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
200
+ </div>
201
+
202
+ <div class="table-row">
203
+ <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
204
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
205
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
206
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
207
+ </div>
208
+
209
+ <div class="table-row">
210
+ <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
211
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
212
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
213
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
214
+ </div>
215
+
216
+ <div class="pagination">
217
+ <div class="skeleton sk-btn-page"></div>
218
+ <div class="skeleton sk-btn-page"></div>
219
+ </div>
220
+ `:`
221
+ <div class="hero-section instant-access-layout">
222
+ <div class="skeleton hero-image ia-image"></div>
223
+
224
+ <div class="hero-content ia-content">
225
+ <div class="skeleton sk-title-lg ia-center"></div>
226
+ <div class="skeleton sk-text ia-center"></div>
227
+
228
+ <div class="skeleton sk-btn-action"></div>
229
+
230
+ <div class="skeleton sk-label"></div>
231
+ <div class="input-group">
232
+ <div class="skeleton sk-input"></div>
233
+ <div class="skeleton sk-btn-copy"></div>
234
+ </div>
235
+
236
+ <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
237
+ <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
238
+ </div>
239
+ </div>
240
+ `}
241
+ </div>
242
+ `;exports.getSkeleton=t;
243
+ //# sourceMappingURL=SkeletonTemplate-B3Bk4NFu.cjs.map
package/dist/SkeletonTemplate-B3Bk4NFu.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkeletonTemplate-B3Bk4NFu.cjs","sources":["../src/widgets/SkeletonTemplate.ts"],"sourcesContent":["export type WidgetType = \"instant-access\" | \"verified-access\";\n\ninterface SkeletonProps {\n type?: WidgetType;\n}\n\n/**\n * Returns the complete HTML string (including <style>) for the skeleton.\n * Values are injected directly into the CSS string.\n */\nexport const getSkeleton = ({ type = \"verified-access\" }: SkeletonProps) => {\n const skeletonBackgroundColor = \"#e0e0e0\";\n const skeletonShimmerColor = \"#f5f5f5\";\n const referrerHTML = `\n <div class=\"hero-section\">\n <div class=\"hero-content\">\n <div class=\"skeleton sk-title-lg\"></div>\n <div class=\"skeleton sk-text\"></div>\n <div class=\"skeleton sk-text sk-text-short\"></div>\n </div>\n <div class=\"skeleton hero-image\"></div>\n </div>\n\n <div class=\"share-section\">\n <div class=\"skeleton sk-label\"></div>\n <div class=\"skeleton sk-input\"></div>\n <div class=\"social-buttons\">\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n </div>\n </div>\n\n <div class=\"skeleton sk-title-md\" style=\"margin-top: 0; width: 30%; margin-left: auto; margin-right: auto\"></div>\n <div class=\"skeleton sk-text\" style=\"width: 60%; margin-left: auto; margin-right: auto\"></div>\n\n <div class=\"stats-section\">\n <div class=\"stat-card\">\n <div class=\"skeleton sk-stat-num\"></div>\n <div class=\"skeleton sk-stat-label\"></div>\n </div>\n <div class=\"stat-card stat-divider\">\n <div class=\"skeleton sk-stat-num\"></div>\n <div class=\"skeleton sk-stat-label\"></div>\n </div>\n </div>\n\n <div class=\"skeleton sk-title-md\"></div>\n\n <div class=\"table-header\">\n <div class=\"skeleton sk-th col-user\"></div>\n <div class=\"skeleton sk-th col-status\"></div>\n <div class=\"skeleton sk-th col-reward\"></div>\n <div class=\"skeleton sk-th col-date\"></div>\n </div>\n\n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 70%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n \n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 60%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n\n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 75%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n\n <div class=\"pagination\">\n <div class=\"skeleton sk-btn-page\"></div>\n <div class=\"skeleton sk-btn-page\"></div>\n </div>\n `;\n\n const instantAccessHTML = `\n <div class=\"hero-section instant-access-layout\">\n <div class=\"skeleton hero-image ia-image\"></div>\n \n <div class=\"hero-content ia-content\">\n <div class=\"skeleton sk-title-lg ia-center\"></div>\n <div class=\"skeleton sk-text ia-center\"></div>\n \n <div class=\"skeleton sk-btn-action\"></div>\n\n <div class=\"skeleton sk-label\"></div>\n <div class=\"input-group\">\n <div class=\"skeleton sk-input\"></div>\n <div class=\"skeleton sk-btn-copy\"></div>\n </div>\n\n <div class=\"skeleton sk-text-short ia-center\" style=\"margin-top: 20px; width: 30%\"></div>\n <div class=\"skeleton sk-text-short ia-center\" style=\"width: 20%\"></div>\n </div>\n </div>\n `;\n\n return `\n <style>\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n .widget-container {\n background: white;\n width: 100%;\n padding: 40px;\n box-sizing: border-box;\n overflow: hidden; \n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n\n .skeleton {\n background: ${skeletonBackgroundColor};\n animation: pulse 1.8s ease-in-out infinite;\n border-radius: 6px;\n margin-bottom: 12px;\n }\n\n /* Typography Skeletons */\n .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }\n .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }\n .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }\n .sk-text-short { width: 40%; }\n .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }\n\n /* Layouts */\n .hero-section {\n display: flex;\n gap: 40px;\n margin-bottom: 40px;\n padding-bottom: 40px;\n flex-direction: row;\n height: 100%;\n /* Removed border-bottom */\n }\n \n .hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n \n .hero-image {\n flex: 1;\n height: 300px;\n border-radius: 12px;\n }\n\n /* -- Specific Instant Access Overrides -- */\n .instant-access-layout {\n margin-bottom: 0;\n padding-bottom: 0;\n align-items: center; \n }\n .ia-image {\n height: 400px; \n }\n .ia-center {\n margin-left: auto;\n margin-right: auto;\n }\n .ia-content {\n align-items: center; \n text-align: center;\n }\n .sk-btn-action {\n height: 45px;\n width: 140px;\n border-radius: 6px;\n margin: 24px auto;\n }\n .input-group {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 400px;\n }\n .sk-btn-copy {\n height: 50px;\n width: 120px;\n border-radius: 8px;\n }\n /* ------------------------------------- */\n\n .share-section { margin-bottom: 40px; }\n .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }\n \n .social-buttons { display: flex; gap: 12px; }\n .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }\n\n .stats-section {\n display: flex;\n gap: 24px;\n margin-bottom: 40px;\n padding: 30px 0;\n /* Removed border-top and border-bottom */\n }\n .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }\n .stat-divider { padding-left: 24px; }\n .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }\n .sk-stat-label { height: 18px; width: 80px; }\n\n /* Table Styles */\n .table-header { display: flex; gap: 16px; margin-bottom: 16px; }\n .sk-th { height: 16px; }\n .table-row { \n display: flex; \n align-items: center; \n gap: 16px; \n padding: 16px 0; \n /* Removed border-bottom */\n }\n \n .col-user { flex: 2; }\n .col-status { flex: 1; }\n .col-reward { flex: 2; }\n .col-date { flex: 1; }\n\n .sk-badge { height: 28px; width: 90px; border-radius: 14px; }\n .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }\n\n .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }\n .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }\n\n @media (max-width: 768px) {\n body { padding: 20px; }\n .widget-container { padding: 24px; }\n\n .hero-section { flex-direction: column-reverse; gap: 24px; }\n .instant-access-layout { flex-direction: column; }\n \n .hero-image { height: 220px; width: 100%; }\n .sk-title-lg { width: 100%; }\n\n .col-date { display: none; }\n }\n </style>\n\n <div class=\"widget-container\">\n ${type === \"verified-access\" ? referrerHTML : instantAccessHTML}\n </div>\n `;\n};\n"],"names":["getSkeleton","type"],"mappings":"gFAUO,MAAMA,EAAc,CAAC,CAAE,KAAAC,EAAO,qBAgG5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsJDA,IAAS,kBAnPM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuEK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4KyC;AAAA;AAAA"}
package/dist/SkeletonTemplate-Day_0iMM.js ADDED
@@ -0,0 +1,246 @@
1
+ const d = ({ type: s = "verified-access" }) => `
2
+ <style>
3
+ * {
4
+ box-sizing: border-box;
5
+ padding: 0;
6
+ margin: 0;
7
+ }
8
+
9
+ .widget-container {
10
+ background: white;
11
+ width: 100%;
12
+ padding: 40px;
13
+ box-sizing: border-box;
14
+ overflow: hidden;
15
+ }
16
+
17
+ @keyframes pulse {
18
+ 0%, 100% { opacity: 1; }
19
+ 50% { opacity: 0.6; }
20
+ }
21
+
22
+ .skeleton {
23
+ background: #e0e0e0;
24
+ animation: pulse 1.8s ease-in-out infinite;
25
+ border-radius: 6px;
26
+ margin-bottom: 12px;
27
+ }
28
+
29
+ /* Typography Skeletons */
30
+ .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
31
+ .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
32
+ .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
33
+ .sk-text-short { width: 40%; }
34
+ .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
35
+
36
+ /* Layouts */
37
+ .hero-section {
38
+ display: flex;
39
+ gap: 40px;
40
+ margin-bottom: 40px;
41
+ padding-bottom: 40px;
42
+ flex-direction: row;
43
+ height: 100%;
44
+ /* Removed border-bottom */
45
+ }
46
+
47
+ .hero-content {
48
+ flex: 1;
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ }
53
+
54
+ .hero-image {
55
+ flex: 1;
56
+ height: 300px;
57
+ border-radius: 12px;
58
+ }
59
+
60
+ /* -- Specific Instant Access Overrides -- */
61
+ .instant-access-layout {
62
+ margin-bottom: 0;
63
+ padding-bottom: 0;
64
+ align-items: center;
65
+ }
66
+ .ia-image {
67
+ height: 400px;
68
+ }
69
+ .ia-center {
70
+ margin-left: auto;
71
+ margin-right: auto;
72
+ }
73
+ .ia-content {
74
+ align-items: center;
75
+ text-align: center;
76
+ }
77
+ .sk-btn-action {
78
+ height: 45px;
79
+ width: 140px;
80
+ border-radius: 6px;
81
+ margin: 24px auto;
82
+ }
83
+ .input-group {
84
+ display: flex;
85
+ gap: 10px;
86
+ width: 100%;
87
+ max-width: 400px;
88
+ }
89
+ .sk-btn-copy {
90
+ height: 50px;
91
+ width: 120px;
92
+ border-radius: 8px;
93
+ }
94
+ /* ------------------------------------- */
95
+
96
+ .share-section { margin-bottom: 40px; }
97
+ .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
98
+
99
+ .social-buttons { display: flex; gap: 12px; }
100
+ .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
101
+
102
+ .stats-section {
103
+ display: flex;
104
+ gap: 24px;
105
+ margin-bottom: 40px;
106
+ padding: 30px 0;
107
+ /* Removed border-top and border-bottom */
108
+ }
109
+ .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
110
+ .stat-divider { padding-left: 24px; }
111
+ .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
112
+ .sk-stat-label { height: 18px; width: 80px; }
113
+
114
+ /* Table Styles */
115
+ .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
116
+ .sk-th { height: 16px; }
117
+ .table-row {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 16px;
121
+ padding: 16px 0;
122
+ /* Removed border-bottom */
123
+ }
124
+
125
+ .col-user { flex: 2; }
126
+ .col-status { flex: 1; }
127
+ .col-reward { flex: 2; }
128
+ .col-date { flex: 1; }
129
+
130
+ .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
131
+ .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
132
+
133
+ .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
134
+ .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
135
+
136
+ @media (max-width: 768px) {
137
+ body { padding: 20px; }
138
+ .widget-container { padding: 24px; }
139
+
140
+ .hero-section { flex-direction: column-reverse; gap: 24px; }
141
+ .instant-access-layout { flex-direction: column; }
142
+
143
+ .hero-image { height: 220px; width: 100%; }
144
+ .sk-title-lg { width: 100%; }
145
+
146
+ .col-date { display: none; }
147
+ }
148
+ </style>
149
+
150
+ <div class="widget-container">
151
+ ${s === "verified-access" ? `
152
+ <div class="hero-section">
153
+ <div class="hero-content">
154
+ <div class="skeleton sk-title-lg"></div>
155
+ <div class="skeleton sk-text"></div>
156
+ <div class="skeleton sk-text sk-text-short"></div>
157
+ </div>
158
+ <div class="skeleton hero-image"></div>
159
+ </div>
160
+
161
+ <div class="share-section">
162
+ <div class="skeleton sk-label"></div>
163
+ <div class="skeleton sk-input"></div>
164
+ <div class="social-buttons">
165
+ <div class="skeleton sk-btn-social"></div>
166
+ <div class="skeleton sk-btn-social"></div>
167
+ <div class="skeleton sk-btn-social"></div>
168
+ <div class="skeleton sk-btn-social"></div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
173
+ <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
174
+
175
+ <div class="stats-section">
176
+ <div class="stat-card">
177
+ <div class="skeleton sk-stat-num"></div>
178
+ <div class="skeleton sk-stat-label"></div>
179
+ </div>
180
+ <div class="stat-card stat-divider">
181
+ <div class="skeleton sk-stat-num"></div>
182
+ <div class="skeleton sk-stat-label"></div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="skeleton sk-title-md"></div>
187
+
188
+ <div class="table-header">
189
+ <div class="skeleton sk-th col-user"></div>
190
+ <div class="skeleton sk-th col-status"></div>
191
+ <div class="skeleton sk-th col-reward"></div>
192
+ <div class="skeleton sk-th col-date"></div>
193
+ </div>
194
+
195
+ <div class="table-row">
196
+ <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
197
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
198
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
199
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
200
+ </div>
201
+
202
+ <div class="table-row">
203
+ <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
204
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
205
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
206
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
207
+ </div>
208
+
209
+ <div class="table-row">
210
+ <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
211
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
212
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
213
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
214
+ </div>
215
+
216
+ <div class="pagination">
217
+ <div class="skeleton sk-btn-page"></div>
218
+ <div class="skeleton sk-btn-page"></div>
219
+ </div>
220
+ ` : `
221
+ <div class="hero-section instant-access-layout">
222
+ <div class="skeleton hero-image ia-image"></div>
223
+
224
+ <div class="hero-content ia-content">
225
+ <div class="skeleton sk-title-lg ia-center"></div>
226
+ <div class="skeleton sk-text ia-center"></div>
227
+
228
+ <div class="skeleton sk-btn-action"></div>
229
+
230
+ <div class="skeleton sk-label"></div>
231
+ <div class="input-group">
232
+ <div class="skeleton sk-input"></div>
233
+ <div class="skeleton sk-btn-copy"></div>
234
+ </div>
235
+
236
+ <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
237
+ <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
238
+ </div>
239
+ </div>
240
+ `}
241
+ </div>
242
+ `;
243
+ export {
244
+ d as getSkeleton
245
+ };
246
+ //# sourceMappingURL=SkeletonTemplate-Day_0iMM.js.map