@tnf-dev/react 1.0.1-7 → 1.0.1-9

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 (159) hide show
  1. package/dist/cjs/components/icons/archive-box-icon.cjs +1 -50
  2. package/dist/cjs/components/icons/bell-icon.cjs +1 -50
  3. package/dist/cjs/components/icons/check-circle-icon.cjs +1 -50
  4. package/dist/cjs/components/icons/index.cjs +1 -112
  5. package/dist/cjs/components/inbox/bell.cjs +12 -4714
  6. package/dist/cjs/components/inbox/button.cjs +12 -4654
  7. package/dist/cjs/components/inbox/empty.cjs +12 -4635
  8. package/dist/cjs/components/inbox/inbox.cjs +12 -5291
  9. package/dist/cjs/components/inbox/index.cjs +12 -5309
  10. package/dist/cjs/components/inbox/loader.cjs +12 -4629
  11. package/dist/cjs/components/inbox/notification-header.cjs +12 -4649
  12. package/dist/cjs/components/inbox/notification-item/actions.cjs +12 -4738
  13. package/dist/cjs/components/inbox/notification-item/index.cjs +12 -4865
  14. package/dist/cjs/components/inbox/popover.cjs +12 -4711
  15. package/dist/cjs/components/index.cjs +12 -5309
  16. package/dist/cjs/contexts/StyleProvider.cjs +12 -4645
  17. package/dist/cjs/contexts/TeknifyProvider.cjs +12 -4674
  18. package/dist/cjs/contexts/index.cjs +12 -4677
  19. package/dist/cjs/dto/index.cjs +1 -19
  20. package/dist/cjs/dto/notifications/index.cjs +1 -19
  21. package/dist/cjs/dto/notifications/notification.interface.cjs +1 -19
  22. package/dist/cjs/hooks/index.cjs +1 -145
  23. package/dist/cjs/hooks/useNotifications.cjs +1 -143
  24. package/dist/cjs/index.cjs +12 -5362
  25. package/dist/cjs/utils/const.cjs +1 -31
  26. package/dist/cjs/utils/index.cjs +1 -33
  27. package/dist/esm/components/icons/archive-box-icon.js +1 -8
  28. package/dist/esm/components/icons/bell-icon.js +1 -8
  29. package/dist/esm/components/icons/check-circle-icon.js +1 -8
  30. package/dist/esm/components/icons/index.js +1 -17
  31. package/dist/esm/components/inbox/bell.js +29 -15
  32. package/dist/esm/components/inbox/button.js +29 -11
  33. package/dist/esm/components/inbox/empty.js +29 -11
  34. package/dist/esm/components/inbox/inbox.js +29 -28
  35. package/dist/esm/components/inbox/index.js +29 -50
  36. package/dist/esm/components/inbox/loader.js +29 -9
  37. package/dist/esm/components/inbox/notification-header.js +29 -11
  38. package/dist/esm/components/inbox/notification-item/actions.js +29 -16
  39. package/dist/esm/components/inbox/notification-item/index.js +29 -17
  40. package/dist/esm/components/inbox/popover.js +29 -11
  41. package/dist/esm/components/index.js +29 -51
  42. package/dist/esm/contexts/StyleProvider.js +29 -9
  43. package/dist/esm/contexts/TeknifyProvider.js +29 -12
  44. package/dist/esm/contexts/index.js +29 -13
  45. package/dist/esm/dto/index.js +0 -4
  46. package/dist/esm/dto/notifications/index.js +0 -3
  47. package/dist/esm/dto/notifications/notification.interface.js +0 -2
  48. package/dist/esm/hooks/index.js +1 -13
  49. package/dist/esm/hooks/useNotifications.js +1 -12
  50. package/dist/esm/index.js +29 -62
  51. package/dist/esm/utils/const.js +1 -8
  52. package/dist/esm/utils/index.js +1 -9
  53. package/package.json +4 -4
  54. package/dist/cjs/components/icons/archive-box-icon.cjs.map +0 -1
  55. package/dist/cjs/components/icons/bell-icon.cjs.map +0 -1
  56. package/dist/cjs/components/icons/check-circle-icon.cjs.map +0 -1
  57. package/dist/cjs/components/icons/index.cjs.map +0 -1
  58. package/dist/cjs/components/inbox/bell.cjs.map +0 -1
  59. package/dist/cjs/components/inbox/button.cjs.map +0 -1
  60. package/dist/cjs/components/inbox/empty.cjs.map +0 -1
  61. package/dist/cjs/components/inbox/inbox.cjs.map +0 -1
  62. package/dist/cjs/components/inbox/index.cjs.map +0 -1
  63. package/dist/cjs/components/inbox/loader.cjs.map +0 -1
  64. package/dist/cjs/components/inbox/notification-header.cjs.map +0 -1
  65. package/dist/cjs/components/inbox/notification-item/actions.cjs.map +0 -1
  66. package/dist/cjs/components/inbox/notification-item/index.cjs.map +0 -1
  67. package/dist/cjs/components/inbox/popover.cjs.map +0 -1
  68. package/dist/cjs/components/index.cjs.map +0 -1
  69. package/dist/cjs/contexts/StyleProvider.cjs.map +0 -1
  70. package/dist/cjs/contexts/TeknifyProvider.cjs.map +0 -1
  71. package/dist/cjs/contexts/index.cjs.map +0 -1
  72. package/dist/cjs/dto/index.cjs.map +0 -1
  73. package/dist/cjs/dto/notifications/index.cjs.map +0 -1
  74. package/dist/cjs/dto/notifications/notification.interface.cjs.map +0 -1
  75. package/dist/cjs/hooks/index.cjs.map +0 -1
  76. package/dist/cjs/hooks/useNotifications.cjs.map +0 -1
  77. package/dist/cjs/index.cjs.map +0 -1
  78. package/dist/cjs/utils/const.cjs.map +0 -1
  79. package/dist/cjs/utils/index.cjs.map +0 -1
  80. package/dist/esm/chunk-57PGXW3M.js +0 -2
  81. package/dist/esm/chunk-57PGXW3M.js.map +0 -1
  82. package/dist/esm/chunk-5ZHARJ3G.js +0 -4446
  83. package/dist/esm/chunk-5ZHARJ3G.js.map +0 -1
  84. package/dist/esm/chunk-6FGP2HJW.js +0 -9
  85. package/dist/esm/chunk-6FGP2HJW.js.map +0 -1
  86. package/dist/esm/chunk-ATNNGNAM.js +0 -2
  87. package/dist/esm/chunk-ATNNGNAM.js.map +0 -1
  88. package/dist/esm/chunk-B5I3IFK2.js +0 -113
  89. package/dist/esm/chunk-B5I3IFK2.js.map +0 -1
  90. package/dist/esm/chunk-DC2MKTMP.js +0 -2
  91. package/dist/esm/chunk-DC2MKTMP.js.map +0 -1
  92. package/dist/esm/chunk-EBHNXTGY.js +0 -2
  93. package/dist/esm/chunk-EBHNXTGY.js.map +0 -1
  94. package/dist/esm/chunk-ET4RPLX7.js +0 -32
  95. package/dist/esm/chunk-ET4RPLX7.js.map +0 -1
  96. package/dist/esm/chunk-H3IWAKC5.js +0 -34
  97. package/dist/esm/chunk-H3IWAKC5.js.map +0 -1
  98. package/dist/esm/chunk-H3RCKWE3.js +0 -2
  99. package/dist/esm/chunk-H3RCKWE3.js.map +0 -1
  100. package/dist/esm/chunk-HDKTD2IK.js +0 -49
  101. package/dist/esm/chunk-HDKTD2IK.js.map +0 -1
  102. package/dist/esm/chunk-IXQPSHNR.js +0 -32
  103. package/dist/esm/chunk-IXQPSHNR.js.map +0 -1
  104. package/dist/esm/chunk-MNBHQJKW.js +0 -2
  105. package/dist/esm/chunk-MNBHQJKW.js.map +0 -1
  106. package/dist/esm/chunk-NDUFFQA7.js +0 -24
  107. package/dist/esm/chunk-NDUFFQA7.js.map +0 -1
  108. package/dist/esm/chunk-NQ3CC7OA.js +0 -84
  109. package/dist/esm/chunk-NQ3CC7OA.js.map +0 -1
  110. package/dist/esm/chunk-QILM4R2Q.js +0 -54
  111. package/dist/esm/chunk-QILM4R2Q.js.map +0 -1
  112. package/dist/esm/chunk-RCHW4I55.js +0 -2
  113. package/dist/esm/chunk-RCHW4I55.js.map +0 -1
  114. package/dist/esm/chunk-RLFVKZHT.js +0 -30
  115. package/dist/esm/chunk-RLFVKZHT.js.map +0 -1
  116. package/dist/esm/chunk-S6WUE45S.js +0 -32
  117. package/dist/esm/chunk-S6WUE45S.js.map +0 -1
  118. package/dist/esm/chunk-SSLZWOID.js +0 -97
  119. package/dist/esm/chunk-SSLZWOID.js.map +0 -1
  120. package/dist/esm/chunk-VWQT7XSQ.js +0 -2
  121. package/dist/esm/chunk-VWQT7XSQ.js.map +0 -1
  122. package/dist/esm/chunk-WN4NSHNE.js +0 -32
  123. package/dist/esm/chunk-WN4NSHNE.js.map +0 -1
  124. package/dist/esm/chunk-XVCHU66N.js +0 -40
  125. package/dist/esm/chunk-XVCHU66N.js.map +0 -1
  126. package/dist/esm/chunk-YKV4YNJ4.js +0 -44
  127. package/dist/esm/chunk-YKV4YNJ4.js.map +0 -1
  128. package/dist/esm/chunk-YY3MZBYQ.js +0 -2
  129. package/dist/esm/chunk-YY3MZBYQ.js.map +0 -1
  130. package/dist/esm/chunk-Z4Q2SGNX.js +0 -144
  131. package/dist/esm/chunk-Z4Q2SGNX.js.map +0 -1
  132. package/dist/esm/chunk-ZBV5DZZB.js +0 -104
  133. package/dist/esm/chunk-ZBV5DZZB.js.map +0 -1
  134. package/dist/esm/components/icons/archive-box-icon.js.map +0 -1
  135. package/dist/esm/components/icons/bell-icon.js.map +0 -1
  136. package/dist/esm/components/icons/check-circle-icon.js.map +0 -1
  137. package/dist/esm/components/icons/index.js.map +0 -1
  138. package/dist/esm/components/inbox/bell.js.map +0 -1
  139. package/dist/esm/components/inbox/button.js.map +0 -1
  140. package/dist/esm/components/inbox/empty.js.map +0 -1
  141. package/dist/esm/components/inbox/inbox.js.map +0 -1
  142. package/dist/esm/components/inbox/index.js.map +0 -1
  143. package/dist/esm/components/inbox/loader.js.map +0 -1
  144. package/dist/esm/components/inbox/notification-header.js.map +0 -1
  145. package/dist/esm/components/inbox/notification-item/actions.js.map +0 -1
  146. package/dist/esm/components/inbox/notification-item/index.js.map +0 -1
  147. package/dist/esm/components/inbox/popover.js.map +0 -1
  148. package/dist/esm/components/index.js.map +0 -1
  149. package/dist/esm/contexts/StyleProvider.js.map +0 -1
  150. package/dist/esm/contexts/TeknifyProvider.js.map +0 -1
  151. package/dist/esm/contexts/index.js.map +0 -1
  152. package/dist/esm/dto/index.js.map +0 -1
  153. package/dist/esm/dto/notifications/index.js.map +0 -1
  154. package/dist/esm/dto/notifications/notification.interface.js.map +0 -1
  155. package/dist/esm/hooks/index.js.map +0 -1
  156. package/dist/esm/hooks/useNotifications.js.map +0 -1
  157. package/dist/esm/index.js.map +0 -1
  158. package/dist/esm/utils/const.js.map +0 -1
  159. package/dist/esm/utils/index.js.map +0 -1
@@ -1,97 +0,0 @@
1
- "use client"
2
- import {
3
- notification_item_default
4
- } from "./chunk-Z4Q2SGNX.js";
5
- import {
6
- empty_default
7
- } from "./chunk-RLFVKZHT.js";
8
- import {
9
- loader_default
10
- } from "./chunk-NDUFFQA7.js";
11
- import {
12
- notification_header_default
13
- } from "./chunk-YKV4YNJ4.js";
14
- import {
15
- popover_default
16
- } from "./chunk-ZBV5DZZB.js";
17
- import {
18
- bell_default
19
- } from "./chunk-NQ3CC7OA.js";
20
- import {
21
- button_default
22
- } from "./chunk-HDKTD2IK.js";
23
- import {
24
- COMPONENT_PREFIX
25
- } from "./chunk-6FGP2HJW.js";
26
- import {
27
- useNotifications
28
- } from "./chunk-B5I3IFK2.js";
29
- import {
30
- clsx_default,
31
- createUseStyles
32
- } from "./chunk-5ZHARJ3G.js";
33
-
34
- // src/components/inbox/inbox.tsx
35
- import { useCallback, useState } from "react";
36
- import InfiniteScroll from "react-infinite-scroller";
37
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
38
- var useStyles = createUseStyles(
39
- {
40
- inboxContent: {
41
- height: "100%",
42
- display: "flex",
43
- flexDirection: "column"
44
- },
45
- inboxContentList: {
46
- flex: 1,
47
- overflowY: "auto"
48
- }
49
- },
50
- { name: COMPONENT_PREFIX }
51
- );
52
- var DEFAULT_COMPONENTS = {
53
- Bell: bell_default,
54
- Button: button_default,
55
- NotificationHeader: notification_header_default,
56
- Empty: empty_default,
57
- Loader: loader_default,
58
- NotificationItem: notification_item_default,
59
- NotificationPopover: popover_default
60
- };
61
- var Inbox = ({ components }) => {
62
- const [anchorElement, setAnchorElement] = useState(null);
63
- const [isOpen, setIsOpen] = useState(false);
64
- const { Bell, Empty, Loader, NotificationHeader, NotificationItem, NotificationPopover } = {
65
- ...DEFAULT_COMPONENTS,
66
- ...components
67
- };
68
- const toggleOpen = useCallback(() => {
69
- setIsOpen((prev) => !prev);
70
- }, []);
71
- const { notifications, unread, isFirstLoad, hasMore, fetchMore, isError, error } = useNotifications();
72
- const styles = useStyles();
73
- return /* @__PURE__ */ jsxs(Fragment, { children: [
74
- /* @__PURE__ */ jsx(
75
- Bell,
76
- {
77
- onClick: (event) => {
78
- event.stopPropagation();
79
- toggleOpen();
80
- },
81
- ref: setAnchorElement,
82
- active: isOpen,
83
- counts: unread
84
- }
85
- ),
86
- /* @__PURE__ */ jsx(NotificationPopover, { open: isOpen, anchorElement, onClose: toggleOpen, children: /* @__PURE__ */ jsxs("div", { className: clsx_default(styles.inboxContent), children: [
87
- /* @__PURE__ */ jsx(NotificationHeader, {}),
88
- /* @__PURE__ */ jsx("div", { className: clsx_default(styles.inboxContentList), children: /* @__PURE__ */ jsx(InfiniteScroll, { loadMore: fetchMore, hasMore, loader: /* @__PURE__ */ jsx(Loader, {}, 0), useWindow: false, children: isFirstLoad ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(Fragment, { children: notifications.length ? /* @__PURE__ */ jsx(Fragment, { children: notifications.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification }, notification._id)) }) : /* @__PURE__ */ jsx(Empty, {}) }) }) })
89
- ] }) })
90
- ] });
91
- };
92
- var inbox_default = Inbox;
93
-
94
- export {
95
- inbox_default
96
- };
97
- //# sourceMappingURL=chunk-SSLZWOID.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/inbox/inbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC, useCallback, useState } from 'react';\nimport InfiniteScroll from 'react-infinite-scroller';\nimport { createUseStyles } from 'react-jss';\nimport { useNotifications } from '../../hooks';\nimport { COMPONENT_PREFIX } from '../../utils';\nimport Bell, { BellProps } from './bell';\nimport Button, { ButtonProps } from './button';\nimport Empty, { EmptyProps } from './empty';\nimport Loader, { LoaderProps } from './loader';\nimport NotificationHeader, { NotificationHeaderProps } from './notification-header';\nimport NotificationItem, { NotificationItemProps } from './notification-item';\nimport NotificationPopover, { NotificationPopoverProps } from './popover';\n\nconst useStyles = createUseStyles(\n {\n inboxContent: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n inboxContentList: {\n flex: 1,\n overflowY: 'auto',\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nexport interface Components {\n Bell: React.ComponentType<BellProps>;\n Button: React.ComponentType<ButtonProps>;\n NotificationHeader: React.ComponentType<NotificationHeaderProps>;\n NotificationItem: React.ComponentType<NotificationItemProps>;\n NotificationPopover: React.ComponentType<NotificationPopoverProps>;\n Loader: React.ComponentType<LoaderProps>;\n Empty: React.ComponentType<EmptyProps>;\n}\n\nconst DEFAULT_COMPONENTS: Components = {\n Bell,\n Button,\n NotificationHeader,\n Empty,\n Loader,\n NotificationItem,\n NotificationPopover,\n};\n\nexport interface InboxProps {\n components?: Partial<Components>;\n}\n\nconst Inbox: FC<InboxProps> = ({ components }) => {\n const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n const { Bell, Empty, Loader, NotificationHeader, NotificationItem, NotificationPopover } = {\n ...DEFAULT_COMPONENTS,\n ...components,\n };\n\n const toggleOpen = useCallback(() => {\n setIsOpen((prev) => !prev);\n }, []);\n\n const { notifications, unread, isFirstLoad, hasMore, fetchMore, isError, error } = useNotifications();\n\n const styles = useStyles();\n\n return (\n <>\n <Bell\n onClick={(event) => {\n event.stopPropagation();\n toggleOpen();\n }}\n ref={setAnchorElement as any}\n active={isOpen}\n counts={unread}\n />\n <NotificationPopover open={isOpen} anchorElement={anchorElement!} onClose={toggleOpen}>\n <div className={clsx(styles.inboxContent)}>\n <NotificationHeader />\n <div className={clsx(styles.inboxContentList)}>\n <InfiniteScroll loadMore={fetchMore} hasMore={hasMore} loader={<Loader key={0} />} useWindow={false}>\n {isFirstLoad ? (\n <></>\n ) : (\n <>\n {notifications.length ? (\n <>\n {notifications.map((notification) => (\n <NotificationItem key={notification._id} notification={notification} />\n ))}\n </>\n ) : (\n <Empty />\n )}\n </>\n )}\n </InfiniteScroll>\n </div>\n </div>\n </NotificationPopover>\n </>\n );\n};\n\nexport default Inbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAa,aAAa,gBAAgB;AAC1C,OAAO,oBAAoB;AAqErB,SAeU,UAfV,KAUE,YAVF;AAzDN,IAAM,YAAY;AAAA,EAChB;AAAA,IACE,cAAc;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,EAAE,MAAM,iBAAiB;AAC3B;AAYA,IAAM,qBAAiC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAMA,IAAM,QAAwB,CAAC,EAAE,WAAW,MAAM;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,IAAI;AAC3E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,MAAM,OAAO,QAAQ,oBAAoB,kBAAkB,oBAAoB,IAAI;AAAA,IACzF,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,aAAa,YAAY,MAAM;AACnC,cAAU,CAAC,SAAS,CAAC,IAAI;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,eAAe,QAAQ,aAAa,SAAS,WAAW,SAAS,MAAM,IAAI,iBAAiB;AAEpG,QAAM,SAAS,UAAU;AAEzB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAgB;AACtB,qBAAW;AAAA,QACb;AAAA,QACA,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA;AAAA,IACV;AAAA,IACA,oBAAC,uBAAoB,MAAM,QAAQ,eAA+B,SAAS,YACzE,+BAAC,SAAI,WAAW,aAAK,OAAO,YAAY,GACtC;AAAA,0BAAC,sBAAmB;AAAA,MACpB,oBAAC,SAAI,WAAW,aAAK,OAAO,gBAAgB,GAC1C,8BAAC,kBAAe,UAAU,WAAW,SAAkB,QAAQ,oBAAC,YAAY,CAAG,GAAI,WAAW,OAC3F,wBACC,gCAAE,IAEF,gCACG,wBAAc,SACb,gCACG,wBAAc,IAAI,CAAC,iBAClB,oBAAC,oBAAwC,gBAAlB,aAAa,GAAiC,CACtE,GACH,IAEA,oBAAC,SAAM,GAEX,GAEJ,GACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
@@ -1,2 +0,0 @@
1
- "use client"
2
- //# sourceMappingURL=chunk-VWQT7XSQ.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,32 +0,0 @@
1
- "use client"
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __commonJS = (cb, mod) => function __require() {
9
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
- // If the importer is in node compatibility mode or this is not an ESM
21
- // file that has been converted to a CommonJS file using a Babel-
22
- // compatible transform (i.e. "__esModule" has not been set), then set
23
- // "default" to the CommonJS "module.exports" for node compatibility.
24
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
- mod
26
- ));
27
-
28
- export {
29
- __commonJS,
30
- __toESM
31
- };
32
- //# sourceMappingURL=chunk-WN4NSHNE.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,40 +0,0 @@
1
- "use client"
2
- import {
3
- clsx_default,
4
- createUseStyles
5
- } from "./chunk-5ZHARJ3G.js";
6
-
7
- // src/contexts/StyleProvider.tsx
8
- import { jsx } from "react/jsx-runtime";
9
- var useStyles = createUseStyles({
10
- styleProvider: {
11
- fontFamily: "inherit, sans-serif",
12
- fontSize: 13,
13
- "--background-color": "#f1f1f1",
14
- "--card-background-color": "#fff",
15
- "--primary-color": "#000088",
16
- "--secondary-color": "#00C16E",
17
- "--tertiary-color": "#f6f6f6",
18
- "--primary-color-darker": "#000066",
19
- "--secondary-color-darker": "#009955",
20
- "--border-radius": "12px",
21
- "& *::-webkit-scrollbar": {
22
- width: 8,
23
- height: 8
24
- },
25
- "& *::-webkit-scrollbar-thumb": {
26
- borderRadius: 10,
27
- background: "#0003"
28
- }
29
- }
30
- });
31
- var StyleProvider = ({ children }) => {
32
- const styles = useStyles();
33
- return /* @__PURE__ */ jsx("div", { className: clsx_default(styles.styleProvider), children });
34
- };
35
- var StyleProvider_default = StyleProvider;
36
-
37
- export {
38
- StyleProvider_default
39
- };
40
- //# sourceMappingURL=chunk-XVCHU66N.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/contexts/StyleProvider.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC, PropsWithChildren } from 'react';\nimport { createUseStyles } from 'react-jss';\n\nconst useStyles = createUseStyles({\n styleProvider: {\n fontFamily: 'inherit, sans-serif',\n fontSize: 13,\n\n '--background-color': '#f1f1f1',\n '--card-background-color': '#fff',\n\n '--primary-color': '#000088',\n '--secondary-color': '#00C16E',\n '--tertiary-color': '#f6f6f6',\n\n '--primary-color-darker': '#000066',\n '--secondary-color-darker': '#009955',\n\n '--border-radius': '12px',\n\n '& *::-webkit-scrollbar': {\n width: 8,\n height: 8,\n },\n '& *::-webkit-scrollbar-thumb': {\n borderRadius: 10,\n background: '#0003',\n },\n },\n});\n\ninterface StyleProviderProps extends PropsWithChildren {}\n\nconst StyleProvider: FC<StyleProviderProps> = ({ children }) => {\n const styles = useStyles();\n\n return <div className={clsx(styles.styleProvider)}>{children}</div>;\n};\n\nexport default StyleProvider;\n"],"mappings":";;;;;;;AAqCS;AAjCT,IAAM,YAAY,gBAAgB;AAAA,EAChC,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,sBAAsB;AAAA,IACtB,2BAA2B;AAAA,IAE3B,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IAEpB,0BAA0B;AAAA,IAC1B,4BAA4B;AAAA,IAE5B,mBAAmB;AAAA,IAEnB,0BAA0B;AAAA,MACxB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,gCAAgC;AAAA,MAC9B,cAAc;AAAA,MACd,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;AAID,IAAM,gBAAwC,CAAC,EAAE,SAAS,MAAM;AAC9D,QAAM,SAAS,UAAU;AAEzB,SAAO,oBAAC,SAAI,WAAW,aAAK,OAAO,aAAa,GAAI,UAAS;AAC/D;AAEA,IAAO,wBAAQ;","names":[]}
@@ -1,44 +0,0 @@
1
- "use client"
2
- import {
3
- COMPONENT_PREFIX
4
- } from "./chunk-6FGP2HJW.js";
5
- import {
6
- clsx_default,
7
- createUseStyles
8
- } from "./chunk-5ZHARJ3G.js";
9
-
10
- // src/components/inbox/notification-header.tsx
11
- import { jsx, jsxs } from "react/jsx-runtime";
12
- var useStyles = createUseStyles(
13
- {
14
- notificationHeader: {
15
- padding: "10px 15px",
16
- borderBottom: "1px solid #0001",
17
- display: "flex",
18
- justifyContent: "space-between",
19
- background: "var(--card-background-color)",
20
- borderRadius: "5px 5px 0 0",
21
- height: 36,
22
- alignItems: "center"
23
- },
24
- notificationHeaderTitle: {
25
- fontSize: 15,
26
- fontWeight: 600,
27
- flex: 1
28
- }
29
- },
30
- { name: COMPONENT_PREFIX }
31
- );
32
- var NotificationHeader = () => {
33
- const styles = useStyles();
34
- return /* @__PURE__ */ jsxs("div", { className: clsx_default(styles.notificationHeader), children: [
35
- /* @__PURE__ */ jsx("h2", { className: clsx_default(styles.notificationHeaderTitle), children: "Notifications" }),
36
- /* @__PURE__ */ jsx("div", {})
37
- ] });
38
- };
39
- var notification_header_default = NotificationHeader;
40
-
41
- export {
42
- notification_header_default
43
- };
44
- //# sourceMappingURL=chunk-YKV4YNJ4.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/inbox/notification-header.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport { COMPONENT_PREFIX } from '../../utils';\n\nconst useStyles = createUseStyles(\n {\n notificationHeader: {\n padding: '10px 15px',\n borderBottom: '1px solid #0001',\n display: 'flex',\n justifyContent: 'space-between',\n background: 'var(--card-background-color)',\n borderRadius: '5px 5px 0 0',\n height: 36,\n alignItems: 'center',\n },\n notificationHeaderTitle: {\n fontSize: 15,\n fontWeight: 600,\n flex: 1,\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nexport interface NotificationHeaderProps {}\n\nconst NotificationHeader: FC<NotificationHeaderProps> = () => {\n const styles = useStyles();\n\n return (\n <div className={clsx(styles.notificationHeader)}>\n <h2 className={clsx(styles.notificationHeaderTitle)}>Notifications</h2>\n <div></div>\n </div>\n );\n};\n\nexport default NotificationHeader;\n"],"mappings":";;;;;;;;;;AAgCI,SACE,KADF;AA3BJ,IAAM,YAAY;AAAA,EAChB;AAAA,IACE,oBAAoB;AAAA,MAClB,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,YAAY;AAAA,IACd;AAAA,IACA,yBAAyB;AAAA,MACvB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,EAAE,MAAM,iBAAiB;AAC3B;AAIA,IAAM,qBAAkD,MAAM;AAC5D,QAAM,SAAS,UAAU;AAEzB,SACE,qBAAC,SAAI,WAAW,aAAK,OAAO,kBAAkB,GAC5C;AAAA,wBAAC,QAAG,WAAW,aAAK,OAAO,uBAAuB,GAAG,2BAAa;AAAA,IAClE,oBAAC,SAAI;AAAA,KACP;AAEJ;AAEA,IAAO,8BAAQ;","names":[]}
@@ -1,2 +0,0 @@
1
- "use client"
2
- //# sourceMappingURL=chunk-YY3MZBYQ.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,144 +0,0 @@
1
- "use client"
2
- import {
3
- actions_default
4
- } from "./chunk-QILM4R2Q.js";
5
- import {
6
- button_default
7
- } from "./chunk-HDKTD2IK.js";
8
- import {
9
- COMPONENT_PREFIX
10
- } from "./chunk-6FGP2HJW.js";
11
- import {
12
- clsx_default,
13
- createUseStyles
14
- } from "./chunk-5ZHARJ3G.js";
15
-
16
- // src/components/inbox/notification-item/index.tsx
17
- import sanitize from "sanitize-html";
18
- import { jsx, jsxs } from "react/jsx-runtime";
19
- var useStyles = createUseStyles(
20
- {
21
- notificationItem: {
22
- padding: "10px 15px",
23
- display: "flex",
24
- flexWrap: "wrap",
25
- columnGap: 10,
26
- flexDirection: "column",
27
- margin: 10,
28
- background: "var(--card-background-color)",
29
- borderRadius: 10,
30
- border: "1px solid #ddd",
31
- position: "relative",
32
- [`& .${COMPONENT_PREFIX}-actions`]: {
33
- visibility: "hidden",
34
- opacity: 0,
35
- transition: "0.3s ease-in-out"
36
- },
37
- [`&:hover .${COMPONENT_PREFIX}-actions`]: {
38
- visibility: "visible",
39
- opacity: 1
40
- }
41
- },
42
- notificationItemImage: {
43
- width: 24,
44
- height: 24,
45
- objectFit: "cover"
46
- },
47
- notificationItemTitle: {
48
- fontSize: 14,
49
- fontWeight: 600,
50
- paddingBottom: 5,
51
- whiteSpace: "nowrap",
52
- overflow: "hidden",
53
- textOverflow: "ellipsis"
54
- },
55
- notificationItemBody: {
56
- fontSize: 14,
57
- lineClamp: 2,
58
- overflow: "hidden",
59
- textOverflow: "ellipsis"
60
- },
61
- notificationItemActions: {
62
- display: "flex",
63
- gap: 8,
64
- marginTop: 10,
65
- alignItems: "center",
66
- justifyContent: "flex-end",
67
- width: "100%"
68
- },
69
- unreadDot: {
70
- width: 7,
71
- height: 7,
72
- borderRadius: 100,
73
- background: "var(--primary-color)",
74
- position: "relative",
75
- "&::before": {
76
- content: '""',
77
- position: "absolute",
78
- top: -3,
79
- left: -3,
80
- width: "calc(100% + 6px)",
81
- height: "calc(100% + 6px)",
82
- borderRadius: 100,
83
- background: "var(--primary-color)",
84
- opacity: 0.2
85
- }
86
- }
87
- },
88
- { name: COMPONENT_PREFIX }
89
- );
90
- var NotificationItem = ({ notification }) => {
91
- const styles = useStyles();
92
- return /* @__PURE__ */ jsxs("div", { className: clsx_default(styles.notificationItem), children: [
93
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, width: "100%" }, children: [
94
- /* @__PURE__ */ jsx("div", { children: notification.icon && /* @__PURE__ */ jsx(
95
- "img",
96
- {
97
- src: notification.icon,
98
- alt: notification.title,
99
- width: 32,
100
- height: 32,
101
- className: clsx_default(styles.notificationItemImage)
102
- }
103
- ) }),
104
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "hidden" }, children: [
105
- /* @__PURE__ */ jsx("h3", { className: clsx_default(styles.notificationItemTitle), children: notification.title }),
106
- /* @__PURE__ */ jsx(
107
- "div",
108
- {
109
- dangerouslySetInnerHTML: { __html: sanitize(notification.message) },
110
- className: clsx_default(styles.notificationItemBody)
111
- }
112
- )
113
- ] }),
114
- !notification.isRead && /* @__PURE__ */ jsx("div", { className: clsx_default(styles.unreadDot) })
115
- ] }),
116
- /* @__PURE__ */ jsxs("div", { className: clsx_default(styles.notificationItemActions), children: [
117
- notification.secondary_action && /* @__PURE__ */ jsx(
118
- "a",
119
- {
120
- href: notification.secondary_action.href,
121
- target: notification.secondary_action.target,
122
- rel: notification.secondary_action.rel,
123
- children: /* @__PURE__ */ jsx(button_default, { variant: "secondary", children: notification.secondary_action.label })
124
- }
125
- ),
126
- notification.primary_action && /* @__PURE__ */ jsx(
127
- "a",
128
- {
129
- href: notification.primary_action.href,
130
- target: notification.primary_action.target,
131
- rel: notification.primary_action.rel,
132
- children: /* @__PURE__ */ jsx(button_default, { variant: "primary", children: notification.primary_action.label })
133
- }
134
- )
135
- ] }),
136
- /* @__PURE__ */ jsx(actions_default, { notification })
137
- ] });
138
- };
139
- var notification_item_default = NotificationItem;
140
-
141
- export {
142
- notification_item_default
143
- };
144
- //# sourceMappingURL=chunk-Z4Q2SGNX.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/inbox/notification-item/index.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport sanitize from 'sanitize-html';\nimport { Notification } from '../../../dto';\nimport { COMPONENT_PREFIX } from '../../../utils';\nimport Button from '../button';\nimport NotificationItemActions from './actions';\n\nexport interface NotificationItemProps {\n notification: Notification;\n}\n\nconst useStyles = createUseStyles(\n {\n notificationItem: {\n padding: '10px 15px',\n display: 'flex',\n flexWrap: 'wrap',\n columnGap: 10,\n flexDirection: 'column',\n margin: 10,\n background: 'var(--card-background-color)',\n borderRadius: 10,\n border: '1px solid #ddd',\n position: 'relative',\n\n [`& .${COMPONENT_PREFIX}-actions`]: {\n visibility: 'hidden',\n opacity: 0,\n transition: '0.3s ease-in-out',\n },\n\n [`&:hover .${COMPONENT_PREFIX}-actions`]: {\n visibility: 'visible',\n opacity: 1,\n },\n },\n notificationItemImage: {\n width: 24,\n height: 24,\n objectFit: 'cover',\n },\n notificationItemTitle: {\n fontSize: 14,\n fontWeight: 600,\n paddingBottom: 5,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n notificationItemBody: {\n fontSize: 14,\n lineClamp: 2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n notificationItemActions: {\n display: 'flex',\n gap: 8,\n marginTop: 10,\n alignItems: 'center',\n justifyContent: 'flex-end',\n width: '100%',\n },\n unreadDot: {\n width: 7,\n height: 7,\n borderRadius: 100,\n background: 'var(--primary-color)',\n position: 'relative',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: -3,\n left: -3,\n width: 'calc(100% + 6px)',\n height: 'calc(100% + 6px)',\n borderRadius: 100,\n background: 'var(--primary-color)',\n opacity: 0.2,\n },\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nconst NotificationItem: FC<NotificationItemProps> = ({ notification }) => {\n const styles = useStyles();\n\n return (\n <div className={clsx(styles.notificationItem)}>\n <div style={{ display: 'flex', gap: 10, width: '100%' }}>\n <div>\n {notification.icon && (\n <img\n src={notification.icon}\n alt={notification.title}\n width={32}\n height={32}\n className={clsx(styles.notificationItemImage)}\n />\n )}\n </div>\n\n <div style={{ flex: 1, overflow: 'hidden' }}>\n <h3 className={clsx(styles.notificationItemTitle)}>{notification.title}</h3>\n <div\n dangerouslySetInnerHTML={{ __html: sanitize(notification.message) }}\n className={clsx(styles.notificationItemBody)}\n />\n </div>\n\n {!notification.isRead && <div className={clsx(styles.unreadDot)} />}\n </div>\n\n <div className={clsx(styles.notificationItemActions)}>\n {notification.secondary_action && (\n <a\n href={notification.secondary_action.href}\n target={notification.secondary_action.target}\n rel={notification.secondary_action.rel}\n >\n <Button variant='secondary'>{notification.secondary_action.label}</Button>\n </a>\n )}\n\n {notification.primary_action && (\n <a\n href={notification.primary_action.href}\n target={notification.primary_action.target}\n rel={notification.primary_action.rel}\n >\n <Button variant='primary'>{notification.primary_action.label}</Button>\n </a>\n )}\n </div>\n\n <NotificationItemActions notification={notification} />\n </div>\n );\n};\n\nexport default NotificationItem;\n"],"mappings":"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","names":[]}
@@ -1,104 +0,0 @@
1
- "use client"
2
- import {
3
- COMPONENT_PREFIX
4
- } from "./chunk-6FGP2HJW.js";
5
- import {
6
- clsx_default,
7
- createUseStyles
8
- } from "./chunk-5ZHARJ3G.js";
9
-
10
- // src/components/inbox/popover.tsx
11
- import { useEffect, useMemo, useState } from "react";
12
- import { jsx } from "react/jsx-runtime";
13
- var useStyles = createUseStyles(
14
- {
15
- popover: {
16
- width: "100%",
17
- height: "100%",
18
- maxWidth: 400,
19
- maxHeight: 500,
20
- boxShadow: "0 10px 40px #0001",
21
- position: "fixed",
22
- background: "#fff",
23
- borderRadius: 10,
24
- visibility: "hidden",
25
- opacity: 0,
26
- scale: 0.8,
27
- transition: "all 0.3s",
28
- backgroundColor: "var(--background-color)",
29
- border: "1px solid var(--card-background-color)"
30
- },
31
- popoverOpen: {
32
- top: 0,
33
- left: 0,
34
- visibility: "visible",
35
- opacity: 1,
36
- scale: 1
37
- }
38
- },
39
- { name: COMPONENT_PREFIX }
40
- );
41
- var NotificationPopover = ({ open, anchorElement, onClose, children }) => {
42
- const styles = useStyles();
43
- const [popoverElement, setPopoverElement] = useState(null);
44
- const [windowWidth, setWindowWidth] = useState(typeof window === "undefined" ? 0 : window.innerWidth);
45
- const top = useMemo(() => {
46
- if (!anchorElement) return 0;
47
- const bound = anchorElement.getBoundingClientRect();
48
- return bound.top + bound.height + 20;
49
- }, [anchorElement, windowWidth]);
50
- const left = useMemo(() => {
51
- if (!anchorElement) return 0;
52
- const bound = anchorElement.getBoundingClientRect();
53
- return bound.left + 10;
54
- }, [anchorElement, windowWidth]);
55
- const isOutside = useMemo(() => {
56
- if (!popoverElement || !anchorElement) return true;
57
- const anchorBound = anchorElement.getBoundingClientRect();
58
- const popoverBound = popoverElement.getBoundingClientRect();
59
- return anchorBound.left + popoverBound.width > windowWidth;
60
- }, [popoverElement, anchorElement, windowWidth]);
61
- useEffect(() => {
62
- const handler = () => {
63
- if (!open) return;
64
- onClose?.();
65
- };
66
- window.addEventListener("click", handler);
67
- return () => {
68
- window.removeEventListener("click", handler);
69
- };
70
- }, [open]);
71
- useEffect(() => {
72
- const handleResize = () => {
73
- setWindowWidth(window.innerWidth);
74
- };
75
- window.addEventListener("resize", handleResize);
76
- return () => {
77
- window.removeEventListener("resize", handleResize);
78
- };
79
- }, []);
80
- return /* @__PURE__ */ jsx(
81
- "div",
82
- {
83
- className: clsx_default(styles.popover, open && styles.popoverOpen),
84
- style: {
85
- top,
86
- left,
87
- ...isOutside ? {
88
- transform: "translateX(calc(-100% + 20px))"
89
- } : {}
90
- },
91
- ref: setPopoverElement,
92
- onClick: (event) => {
93
- event.stopPropagation();
94
- },
95
- children
96
- }
97
- );
98
- };
99
- var popover_default = NotificationPopover;
100
-
101
- export {
102
- popover_default
103
- };
104
- //# sourceMappingURL=chunk-ZBV5DZZB.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/inbox/popover.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport { COMPONENT_PREFIX } from '../../utils';\n\nconst useStyles = createUseStyles(\n {\n popover: {\n width: '100%',\n height: '100%',\n maxWidth: 400,\n maxHeight: 500,\n boxShadow: '0 10px 40px #0001',\n position: 'fixed',\n background: '#fff',\n borderRadius: 10,\n visibility: 'hidden',\n opacity: 0,\n scale: 0.8,\n transition: 'all 0.3s',\n backgroundColor: 'var(--background-color)',\n border: '1px solid var(--card-background-color)',\n },\n popoverOpen: {\n top: 0,\n left: 0,\n visibility: 'visible',\n opacity: 1,\n scale: 1,\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nexport interface NotificationPopoverProps extends PropsWithChildren {\n open?: boolean;\n anchorElement?: HTMLElement;\n onClose?: () => void;\n}\n\nconst NotificationPopover: FC<NotificationPopoverProps> = ({ open, anchorElement, onClose, children }) => {\n const styles = useStyles();\n const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(null);\n const [windowWidth, setWindowWidth] = useState(typeof window === 'undefined' ? 0 : window.innerWidth);\n\n const top = useMemo(() => {\n if (!anchorElement) return 0;\n const bound = anchorElement.getBoundingClientRect();\n return bound.top + bound.height + 20;\n }, [anchorElement, windowWidth]);\n\n const left = useMemo(() => {\n if (!anchorElement) return 0;\n const bound = anchorElement.getBoundingClientRect();\n return bound.left + 10;\n }, [anchorElement, windowWidth]);\n\n const isOutside = useMemo(() => {\n if (!popoverElement || !anchorElement) return true;\n const anchorBound = anchorElement.getBoundingClientRect();\n const popoverBound = popoverElement.getBoundingClientRect();\n\n return anchorBound.left + popoverBound.width > windowWidth;\n }, [popoverElement, anchorElement, windowWidth]);\n\n useEffect(() => {\n const handler = () => {\n if (!open) return;\n onClose?.();\n };\n\n window.addEventListener('click', handler);\n\n return () => {\n window.removeEventListener('click', handler);\n };\n }, [open]);\n\n useEffect(() => {\n const handleResize = () => {\n setWindowWidth(window.innerWidth);\n };\n window.addEventListener('resize', handleResize);\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n return (\n <div\n className={clsx(styles.popover, open && styles.popoverOpen)}\n style={{\n top,\n left,\n ...(isOutside\n ? {\n transform: 'translateX(calc(-100% + 20px))',\n }\n : {}),\n }}\n ref={setPopoverElement as any}\n onClick={(event) => {\n event.stopPropagation();\n }}\n >\n {children}\n </div>\n );\n};\n\nexport default NotificationPopover;\n"],"mappings":";;;;;;;;;;AACA,SAAgC,WAAW,SAAS,gBAAgB;AAwFhE;AApFJ,IAAM,YAAY;AAAA,EAChB;AAAA,IACE,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACV;AAAA,IACA,aAAa;AAAA,MACX,KAAK;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,EAAE,MAAM,iBAAiB;AAC3B;AAQA,IAAM,sBAAoD,CAAC,EAAE,MAAM,eAAe,SAAS,SAAS,MAAM;AACxG,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA6B,IAAI;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO,WAAW,cAAc,IAAI,OAAO,UAAU;AAEpG,QAAM,MAAM,QAAQ,MAAM;AACxB,QAAI,CAAC,cAAe,QAAO;AAC3B,UAAM,QAAQ,cAAc,sBAAsB;AAClD,WAAO,MAAM,MAAM,MAAM,SAAS;AAAA,EACpC,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,CAAC,cAAe,QAAO;AAC3B,UAAM,QAAQ,cAAc,sBAAsB;AAClD,WAAO,MAAM,OAAO;AAAA,EACtB,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC,cAAe,QAAO;AAC9C,UAAM,cAAc,cAAc,sBAAsB;AACxD,UAAM,eAAe,eAAe,sBAAsB;AAE1D,WAAO,YAAY,OAAO,aAAa,QAAQ;AAAA,EACjD,GAAG,CAAC,gBAAgB,eAAe,WAAW,CAAC;AAE/C,YAAU,MAAM;AACd,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,KAAM;AACX,gBAAU;AAAA,IACZ;AAEA,WAAO,iBAAiB,SAAS,OAAO;AAExC,WAAO,MAAM;AACX,aAAO,oBAAoB,SAAS,OAAO;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,UAAM,eAAe,MAAM;AACzB,qBAAe,OAAO,UAAU;AAAA,IAClC;AACA,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAK,OAAO,SAAS,QAAQ,OAAO,WAAW;AAAA,MAC1D,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAI,YACA;AAAA,UACE,WAAW;AAAA,QACb,IACA,CAAC;AAAA,MACP;AAAA,MACA,KAAK;AAAA,MACL,SAAS,CAAC,UAAU;AAClB,cAAM,gBAAgB;AAAA,MACxB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}