@banbox/chat 1.0.4 → 1.0.6

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 (17) hide show
  1. package/dist/index.cjs +276 -413
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +19 -13
  4. package/dist/index.d.ts +19 -13
  5. package/dist/index.js +276 -413
  6. package/dist/index.js.map +1 -1
  7. package/package.json +9 -3
  8. package/src/chat/ChatRoot.tsx +15 -10
  9. package/src/chat/InboxPopup.tsx +105 -176
  10. package/src/chat/SinglePopup.tsx +39 -43
  11. package/src/index.ts +7 -0
  12. package/src/styles/index.css +231 -0
  13. package/src/types/css.d.ts +5 -0
  14. package/src/ui/chat/ChatHeader.tsx +3 -14
  15. package/src/ui/chat/ChatListHeader.tsx +74 -103
  16. package/src/ui/chat/ChatScroll.tsx +5 -24
  17. package/src/ui/chat/TypingIndicator.tsx +8 -38
package/dist/index.cjs CHANGED
@@ -14,7 +14,30 @@ var React10__default = /*#__PURE__*/_interopDefault(React10);
14
14
  var clsx16__default = /*#__PURE__*/_interopDefault(clsx16);
15
15
  var _Lottie__default = /*#__PURE__*/_interopDefault(_Lottie);
16
16
 
17
- // src/chat/ChatRoot.tsx
17
+ // #style-inject:#style-inject
18
+ function styleInject(css, { insertAt } = {}) {
19
+ if (typeof document === "undefined") return;
20
+ const head = document.head || document.getElementsByTagName("head")[0];
21
+ const style = document.createElement("style");
22
+ style.type = "text/css";
23
+ if (insertAt === "top") {
24
+ if (head.firstChild) {
25
+ head.insertBefore(style, head.firstChild);
26
+ } else {
27
+ head.appendChild(style);
28
+ }
29
+ } else {
30
+ head.appendChild(style);
31
+ }
32
+ if (style.styleSheet) {
33
+ style.styleSheet.cssText = css;
34
+ } else {
35
+ style.appendChild(document.createTextNode(css));
36
+ }
37
+ }
38
+
39
+ // src/styles/index.css
40
+ styleInject('/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-gray-50: oklch(98.5% 0.002 247.839);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --tracking-wide: 0.025em;\n --leading-relaxed: 1.625;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .inset-x-0 {\n inset-inline: calc(var(--spacing) * 0);\n }\n .inset-y-0 {\n inset-block: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1 / 2 * 100%);\n }\n .top-\\[-4px\\] {\n top: -4px;\n }\n .top-full {\n top: 100%;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .right-\\[-63px\\] {\n right: -63px;\n }\n .right-full {\n right: 100%;\n }\n .-bottom-2 {\n bottom: calc(var(--spacing) * -2);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n .bottom-\\[-13px\\] {\n bottom: -13px;\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .left-6 {\n left: calc(var(--spacing) * 6);\n }\n .left-\\[30px\\] {\n left: 30px;\n }\n .left-full {\n left: 100%;\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .z-70 {\n z-index: 70;\n }\n .z-71 {\n z-index: 71;\n }\n .z-999 {\n z-index: 999;\n }\n .z-9999 {\n z-index: 9999;\n }\n .z-10000 {\n z-index: 10000;\n }\n .z-\\[10002\\] {\n z-index: 10002;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .ms-1 {\n margin-inline-start: calc(var(--spacing) * 1);\n }\n .ms-\\[3px\\] {\n margin-inline-start: 3px;\n }\n .ms-\\[12px\\] {\n margin-inline-start: 12px;\n }\n .me-1 {\n margin-inline-end: calc(var(--spacing) * 1);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mt-\\[2px\\] {\n margin-top: 2px;\n }\n .mt-\\[6px\\] {\n margin-top: 6px;\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mr-auto {\n margin-right: auto;\n }\n .mb-0 {\n margin-bottom: calc(var(--spacing) * 0);\n }\n .mb-0\\.5 {\n margin-bottom: calc(var(--spacing) * 0.5);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-5 {\n margin-bottom: calc(var(--spacing) * 5);\n }\n .mb-10 {\n margin-bottom: calc(var(--spacing) * 10);\n }\n .mb-\\[24px\\] {\n margin-bottom: 24px;\n }\n .-ml-\\[5px\\] {\n margin-left: calc(5px * -1);\n }\n .ml-\\[2px\\] {\n margin-left: 2px;\n }\n .ml-\\[4px\\] {\n margin-left: 4px;\n }\n .ml-auto {\n margin-left: auto;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-\\[1\\.17px\\] {\n height: 1.17px;\n }\n .h-\\[4px\\] {\n height: 4px;\n }\n .h-\\[5\\.5px\\] {\n height: 5.5px;\n }\n .h-\\[11\\.25px\\] {\n height: 11.25px;\n }\n .h-\\[14px\\] {\n height: 14px;\n }\n .h-\\[17\\.5px\\] {\n height: 17.5px;\n }\n .h-\\[18px\\] {\n height: 18px;\n }\n .h-\\[21px\\] {\n height: 21px;\n }\n .h-\\[22px\\] {\n height: 22px;\n }\n .h-\\[26px\\] {\n height: 26px;\n }\n .h-\\[28px\\] {\n height: 28px;\n }\n .h-\\[30px\\] {\n height: 30px;\n }\n .h-\\[32px\\] {\n height: 32px;\n }\n .h-\\[34px\\] {\n height: 34px;\n }\n .h-\\[36px\\] {\n height: 36px;\n }\n .h-\\[40px\\] {\n height: 40px;\n }\n .h-\\[41px\\] {\n height: 41px;\n }\n .h-\\[44px\\] {\n height: 44px;\n }\n .h-\\[46px\\] {\n height: 46px;\n }\n .h-\\[52px\\] {\n height: 52px;\n }\n .h-\\[64px\\] {\n height: 64px;\n }\n .h-\\[65px\\] {\n height: 65px;\n }\n .h-\\[75px\\] {\n height: 75px;\n }\n .h-\\[100px\\] {\n height: 100px;\n }\n .h-\\[208px\\] {\n height: 208px;\n }\n .h-\\[650px\\] {\n height: 650px;\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .max-h-\\[200px\\] {\n max-height: 200px;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-\\[50px\\] {\n min-height: 50px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-\\[5\\.5px\\] {\n width: 5.5px;\n }\n .w-\\[11\\.25px\\] {\n width: 11.25px;\n }\n .w-\\[14px\\] {\n width: 14px;\n }\n .w-\\[18\\.08px\\] {\n width: 18.08px;\n }\n .w-\\[18px\\] {\n width: 18px;\n }\n .w-\\[22px\\] {\n width: 22px;\n }\n .w-\\[26px\\] {\n width: 26px;\n }\n .w-\\[28px\\] {\n width: 28px;\n }\n .w-\\[34px\\] {\n width: 34px;\n }\n .w-\\[36px\\] {\n width: 36px;\n }\n .w-\\[40px\\] {\n width: 40px;\n }\n .w-\\[44px\\] {\n width: 44px;\n }\n .w-\\[46px\\] {\n width: 46px;\n }\n .w-\\[65px\\] {\n width: 65px;\n }\n .w-\\[105px\\] {\n width: 105px;\n }\n .w-\\[130px\\] {\n width: 130px;\n }\n .w-\\[186px\\] {\n width: 186px;\n }\n .w-\\[340px\\] {\n width: 340px;\n }\n .w-\\[355px\\] {\n width: 355px;\n }\n .w-\\[420px\\] {\n width: 420px;\n }\n .w-\\[450px\\] {\n width: 450px;\n }\n .w-\\[500px\\] {\n width: 500px;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .max-w-\\[95vw\\] {\n max-width: 95vw;\n }\n .max-w-\\[110px\\] {\n max-width: 110px;\n }\n .max-w-\\[151px\\] {\n max-width: 151px;\n }\n .max-w-\\[185px\\] {\n max-width: 185px;\n }\n .max-w-\\[200px\\] {\n max-width: 200px;\n }\n .max-w-\\[260px\\] {\n max-width: 260px;\n }\n .max-w-\\[289px\\] {\n max-width: 289px;\n }\n .max-w-\\[300px\\] {\n max-width: 300px;\n }\n .max-w-\\[410px\\] {\n max-width: 410px;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .-translate-x-1\\.5 {\n --tw-translate-x: calc(var(--spacing) * -1.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-1\\.5 {\n --tw-translate-x: calc(var(--spacing) * 1.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .rotate-45 {\n rotate: 45deg;\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .cursor-auto\\! {\n cursor: auto !important;\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .cursor-zoom-in {\n cursor: zoom-in;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n .grid-cols-\\[1fr_310px\\] {\n grid-template-columns: 1fr 310px;\n }\n .grid-cols-\\[18px_120px_1fr\\] {\n grid-template-columns: 18px 120px 1fr;\n }\n .grid-cols-\\[125px_125px\\] {\n grid-template-columns: 125px 125px;\n }\n .flex-col {\n flex-direction: column;\n }\n .place-items-center {\n place-items: center;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-1\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-\\[2px\\] {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(2px * var(--tw-space-y-reverse));\n margin-block-end: calc(2px * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-visible {\n overflow: visible;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-\\[2\\.33px\\] {\n border-radius: 2.33px;\n }\n .rounded-\\[3\\.5px\\] {\n border-radius: 3.5px;\n }\n .rounded-\\[3px\\] {\n border-radius: 3px;\n }\n .rounded-\\[4px\\] {\n border-radius: 4px;\n }\n .rounded-\\[6px\\] {\n border-radius: 6px;\n }\n .rounded-\\[12px\\] {\n border-radius: 12px;\n }\n .rounded-\\[14px\\] {\n border-radius: 14px;\n }\n .rounded-\\[18px\\] {\n border-radius: 18px;\n }\n .rounded-\\[20px\\] {\n border-radius: 20px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-xs {\n border-radius: var(--radius-xs);\n }\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n .rounded-tl-\\[3px\\] {\n border-top-left-radius: 3px;\n }\n .rounded-tl-md {\n border-top-left-radius: var(--radius-md);\n }\n .rounded-tr-\\[3px\\] {\n border-top-right-radius: 3px;\n }\n .rounded-tr-\\[6px\\] {\n border-top-right-radius: 6px;\n }\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n .rounded-br-\\[3px\\] {\n border-bottom-right-radius: 3px;\n }\n .rounded-bl-\\[3px\\] {\n border-bottom-left-radius: 3px;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-\\[0\\.7px\\] {\n border-style: var(--tw-border-style);\n border-width: 0.7px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-t-16 {\n border-top-style: var(--tw-border-style);\n border-top-width: 16px;\n }\n .border-t-\\[5px\\] {\n border-top-style: var(--tw-border-style);\n border-top-width: 5px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-r-\\[5px\\] {\n border-right-style: var(--tw-border-style);\n border-right-width: 5px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-l-2 {\n border-left-style: var(--tw-border-style);\n border-left-width: 2px;\n }\n .border-l-16 {\n border-left-style: var(--tw-border-style);\n border-left-width: 16px;\n }\n .border-l-\\[5px\\] {\n border-left-style: var(--tw-border-style);\n border-left-width: 5px;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-\\[\\#00b8d4\\] {\n border-color: #00b8d4;\n }\n .border-\\[\\#3D3D3D\\] {\n border-color: #3D3D3D;\n }\n .border-\\[\\#3d3d3d\\] {\n border-color: #3d3d3d;\n }\n .border-\\[\\#3d6b42\\] {\n border-color: #3d6b42;\n }\n .border-\\[\\#6A6A6A\\] {\n border-color: #6A6A6A;\n }\n .border-\\[\\#9BBCCF\\] {\n border-color: #9BBCCF;\n }\n .border-\\[\\#005694\\] {\n border-color: #005694;\n }\n .border-\\[\\#086600\\] {\n border-color: #086600;\n }\n .border-\\[\\#CCCCCC\\] {\n border-color: #CCCCCC;\n }\n .border-\\[\\#D8D8D8\\] {\n border-color: #D8D8D8;\n }\n .border-\\[\\#E5E5E5\\] {\n border-color: #E5E5E5;\n }\n .border-\\[\\#EFEFEF\\] {\n border-color: #EFEFEF;\n }\n .border-\\[\\#F1F1F1\\] {\n border-color: #F1F1F1;\n }\n .border-\\[\\#FF5300\\] {\n border-color: #FF5300;\n }\n .border-\\[\\#cacaca\\] {\n border-color: #cacaca;\n }\n .border-\\[\\#e1e1e1\\] {\n border-color: #e1e1e1;\n }\n .border-\\[\\#ededed\\] {\n border-color: #ededed;\n }\n .border-\\[\\#ef4444\\] {\n border-color: #ef4444;\n }\n .border-\\[\\#f1f1f1\\] {\n border-color: #f1f1f1;\n }\n .border-\\[\\#f8f8f8\\] {\n border-color: #f8f8f8;\n }\n .border-\\[\\#f59e0b\\] {\n border-color: #f59e0b;\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-t-\\[\\#636363\\] {\n border-top-color: #636363;\n }\n .border-t-\\[\\#FFD2BD\\] {\n border-top-color: #FFD2BD;\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .border-r-transparent {\n border-right-color: transparent;\n }\n .border-l-transparent {\n border-left-color: transparent;\n }\n .\\!bg-\\[\\#636363\\] {\n background-color: #636363 !important;\n }\n .bg-\\[\\#00b8d4\\] {\n background-color: #00b8d4;\n }\n .bg-\\[\\#00b8d4\\]\\/10 {\n background-color: color-mix(in oklab, #00b8d4 10%, transparent);\n }\n .bg-\\[\\#1E8E3E\\] {\n background-color: #1E8E3E;\n }\n .bg-\\[\\#3D3D3D\\] {\n background-color: #3D3D3D;\n }\n .bg-\\[\\#3D3D3D\\]\\/10 {\n background-color: color-mix(in oklab, #3D3D3D 10%, transparent);\n }\n .bg-\\[\\#3d3d3d\\] {\n background-color: #3d3d3d;\n }\n .bg-\\[\\#3d6b42\\] {\n background-color: #3d6b42;\n }\n .bg-\\[\\#3d6b42\\]\\/10 {\n background-color: color-mix(in oklab, #3d6b42 10%, transparent);\n }\n .bg-\\[\\#005694\\] {\n background-color: #005694;\n }\n .bg-\\[\\#086600\\] {\n background-color: #086600;\n }\n .bg-\\[\\#328545\\] {\n background-color: #328545;\n }\n .bg-\\[\\#636363\\] {\n background-color: #636363;\n }\n .bg-\\[\\#747474\\] {\n background-color: #747474;\n }\n .bg-\\[\\#BDBDBD\\] {\n background-color: #BDBDBD;\n }\n .bg-\\[\\#E0EFF8\\] {\n background-color: #E0EFF8;\n }\n .bg-\\[\\#E6F5E6\\] {\n background-color: #E6F5E6;\n }\n .bg-\\[\\#E7E7E7\\] {\n background-color: #E7E7E7;\n }\n .bg-\\[\\#F1F1F1\\] {\n background-color: #F1F1F1;\n }\n .bg-\\[\\#F5F7FA\\] {\n background-color: #F5F7FA;\n }\n .bg-\\[\\#F7F7F7\\] {\n background-color: #F7F7F7;\n }\n .bg-\\[\\#FF5300\\] {\n background-color: #FF5300;\n }\n .bg-\\[\\#FFDBCF\\] {\n background-color: #FFDBCF;\n }\n .bg-\\[\\#FFE9DB\\] {\n background-color: #FFE9DB;\n }\n .bg-\\[\\#FFEAE0\\] {\n background-color: #FFEAE0;\n }\n .bg-\\[\\#cacaca\\] {\n background-color: #cacaca;\n }\n .bg-\\[\\#e1e1e1\\] {\n background-color: #e1e1e1;\n }\n .bg-\\[\\#eb2127\\] {\n background-color: #eb2127;\n }\n .bg-\\[\\#ececec\\] {\n background-color: #ececec;\n }\n .bg-\\[\\#ef4444\\] {\n background-color: #ef4444;\n }\n .bg-\\[\\#ef4444\\]\\/10 {\n background-color: color-mix(in oklab, #ef4444 10%, transparent);\n }\n .bg-\\[\\#f1f1f1\\] {\n background-color: #f1f1f1;\n }\n .bg-\\[\\#f8f8f8\\] {\n background-color: #f8f8f8;\n }\n .bg-\\[\\#f59e0b\\] {\n background-color: #f59e0b;\n }\n .bg-\\[\\#f59e0b\\]\\/10 {\n background-color: color-mix(in oklab, #f59e0b 10%, transparent);\n }\n .bg-\\[\\#ff5200\\] {\n background-color: #ff5200;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/5 {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n .bg-black\\/30 {\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n }\n .bg-black\\/35 {\n background-color: color-mix(in srgb, #000 35%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 35%, transparent);\n }\n }\n .bg-black\\/40 {\n background-color: color-mix(in srgb, #000 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 40%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-cover {\n background-size: cover;\n }\n .bg-no-repeat {\n background-repeat: no-repeat;\n }\n .object-contain {\n object-fit: contain;\n }\n .object-cover {\n object-fit: cover;\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-3\\.5 {\n padding: calc(var(--spacing) * 3.5);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-\\[1\\.75px\\] {\n padding: 1.75px;\n }\n .p-\\[2px\\] {\n padding: 2px;\n }\n .p-\\[3px\\] {\n padding: 3px;\n }\n .p-\\[7px\\] {\n padding: 7px;\n }\n .p-px {\n padding: 1px;\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .px-\\[3px\\] {\n padding-inline: 3px;\n }\n .px-\\[4px\\] {\n padding-inline: 4px;\n }\n .px-\\[10px\\] {\n padding-inline: 10px;\n }\n .px-\\[12px\\] {\n padding-inline: 12px;\n }\n .px-\\[14px\\] {\n padding-inline: 14px;\n }\n .px-\\[16px\\] {\n padding-inline: 16px;\n }\n .px-\\[18px\\] {\n padding-inline: 18px;\n }\n .px-\\[20px\\] {\n padding-inline: 20px;\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .py-\\[2px\\] {\n padding-block: 2px;\n }\n .py-\\[3px\\] {\n padding-block: 3px;\n }\n .py-\\[7px\\] {\n padding-block: 7px;\n }\n .ps-\\[16px\\] {\n padding-inline-start: 16px;\n }\n .pe-\\[4px\\] {\n padding-inline-end: 4px;\n }\n .pe-\\[30px\\] {\n padding-inline-end: 30px;\n }\n .pt-1 {\n padding-top: calc(var(--spacing) * 1);\n }\n .pt-\\[2px\\] {\n padding-top: 2px;\n }\n .pt-\\[24px\\] {\n padding-top: 24px;\n }\n .pr-1\\.5 {\n padding-right: calc(var(--spacing) * 1.5);\n }\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n .pb-1 {\n padding-bottom: calc(var(--spacing) * 1);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-10 {\n padding-bottom: calc(var(--spacing) * 10);\n }\n .pb-\\[2px\\] {\n padding-bottom: 2px;\n }\n .text-left {\n text-align: left;\n }\n .text-right {\n text-align: right;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-4xl {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .text-\\[14px\\] {\n font-size: 14px;\n }\n .text-\\[15px\\] {\n font-size: 15px;\n }\n .text-\\[16px\\] {\n font-size: 16px;\n }\n .text-\\[20px\\] {\n font-size: 20px;\n }\n .text-\\[22px\\] {\n font-size: 22px;\n }\n .leading-4 {\n --tw-leading: calc(var(--spacing) * 4);\n line-height: calc(var(--spacing) * 4);\n }\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-\\[0\\.4px\\] {\n --tw-tracking: 0.4px;\n letter-spacing: 0.4px;\n }\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-\\[\\#0D5EA8\\] {\n color: #0D5EA8;\n }\n .text-\\[\\#0F0F0F\\] {\n color: #0F0F0F;\n }\n .text-\\[\\#00b8d4\\] {\n color: #00b8d4;\n }\n .text-\\[\\#1E9E6A\\] {\n color: #1E9E6A;\n }\n .text-\\[\\#2B579A\\] {\n color: #2B579A;\n }\n .text-\\[\\#2c2c2c\\] {\n color: #2c2c2c;\n }\n .text-\\[\\#3D3D3D\\] {\n color: #3D3D3D;\n }\n .text-\\[\\#3d6b42\\] {\n color: #3d6b42;\n }\n .text-\\[\\#004F4F\\] {\n color: #004F4F;\n }\n .text-\\[\\#6B7280\\] {\n color: #6B7280;\n }\n .text-\\[\\#9AA1A9\\] {\n color: #9AA1A9;\n }\n .text-\\[\\#9C9C9C\\] {\n color: #9C9C9C;\n }\n .text-\\[\\#9ca3af\\] {\n color: #9ca3af;\n }\n .text-\\[\\#00486F\\] {\n color: #00486F;\n }\n .text-\\[\\#005694\\] {\n color: #005694;\n }\n .text-\\[\\#086600\\] {\n color: #086600;\n }\n .text-\\[\\#636363\\] {\n color: #636363;\n }\n .text-\\[\\#747474\\] {\n color: #747474;\n }\n .text-\\[\\#929292\\] {\n color: #929292;\n }\n .text-\\[\\#B7B7B7\\] {\n color: #B7B7B7;\n }\n .text-\\[\\#B9C3D4\\] {\n color: #B9C3D4;\n }\n .text-\\[\\#D93025\\] {\n color: #D93025;\n }\n .text-\\[\\#E63946\\] {\n color: #E63946;\n }\n .text-\\[\\#E69138\\] {\n color: #E69138;\n }\n .text-\\[\\#EA580C\\] {\n color: #EA580C;\n }\n .text-\\[\\#FF5300\\] {\n color: #FF5300;\n }\n .text-\\[\\#ef4444\\] {\n color: #ef4444;\n }\n .text-\\[\\#f59e0b\\] {\n color: #f59e0b;\n }\n .text-\\[\\#ff5301\\] {\n color: #ff5301;\n }\n .text-black {\n color: var(--color-black);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-30 {\n opacity: 30%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow-\\[-3px_0px_6px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: -3px 0px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_1px_2px_rgba\\(0\\,0\\,0\\,0\\.04\\)\\] {\n --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.04));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n --tw-shadow: 0 1px 3px var(--tw-shadow-color, rgba(0,0,0,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_2px_8px_rgba\\(0\\,0\\,0\\,0\\.15\\)\\] {\n --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.15));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_2px_12px_rgba\\(59\\,51\\,51\\,0\\.1\\)\\] {\n --tw-shadow: 0 2px 12px var(--tw-shadow-color, rgba(59,51,51,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_4px_16px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n --tw-shadow: 0 4px 16px var(--tw-shadow-color, rgba(0,0,0,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\] {\n --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(0,0,0,0.12));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_12px_30px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.18));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0px_2px_2px_rgba\\(47\\,47\\,47\\,0\\.08\\)\\] {\n --tw-shadow: 0px 2px 2px var(--tw-shadow-color, rgba(47,47,47,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0px_2px_4px_0px_\\#A5A3AE4D\\] {\n --tw-shadow: 0px 2px 4px 0px var(--tw-shadow-color, #A5A3AE4D);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[3px_0px_6px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 3px 0px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-\\[\\#2F80ED\\]\\/40 {\n --tw-ring-color: color-mix(in oklab, #2F80ED 40%, transparent);\n }\n .ring-white {\n --tw-ring-color: var(--color-white);\n }\n .backdrop-blur-\\[2px\\] {\n --tw-backdrop-blur: blur(2px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to,\n opacity,\n box-shadow,\n transform,\n translate,\n scale,\n rotate,\n filter,\n -webkit-backdrop-filter,\n backdrop-filter,\n display,\n content-visibility,\n overlay,\n pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[background\\] {\n transition-property: background;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property:\n transform,\n translate,\n scale,\n rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .group-hover\\:opacity-0 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 0%;\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/message\\:opacity-100 {\n &:is(:where(.group\\/message):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/replay\\:opacity-100 {\n &:is(:where(.group\\/replay):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/translate\\:opacity-100 {\n &:is(:where(.group\\/translate):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .placeholder\\:text-\\[\\#9C9C9C\\] {\n &::placeholder {\n color: #9C9C9C;\n }\n }\n .hover\\:border-\\[\\#777\\] {\n &:hover {\n @media (hover: hover) {\n border-color: #777;\n }\n }\n }\n .hover\\:border-\\[\\#e04a00\\] {\n &:hover {\n @media (hover: hover) {\n border-color: #e04a00;\n }\n }\n }\n .hover\\:bg-\\[\\#2e5939\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #2e5939;\n }\n }\n }\n .hover\\:bg-\\[\\#009db3\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #009db3;\n }\n }\n }\n .hover\\:bg-\\[\\#28A745\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #28A745;\n }\n }\n }\n .hover\\:bg-\\[\\#00375E\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #00375E;\n }\n }\n }\n .hover\\:bg-\\[\\#646464\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #646464;\n }\n }\n }\n .hover\\:bg-\\[\\#F4F6F8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #F4F6F8;\n }\n }\n }\n .hover\\:bg-\\[\\#c91b20\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #c91b20;\n }\n }\n }\n .hover\\:bg-\\[\\#d97706\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #d97706;\n }\n }\n }\n .hover\\:bg-\\[\\#e04a00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #e04a00;\n }\n }\n }\n .hover\\:bg-\\[\\#e64a00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #e64a00;\n }\n }\n }\n .hover\\:bg-\\[\\#f1f1f1\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #f1f1f1;\n }\n }\n }\n .hover\\:bg-\\[\\#f8f8f8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #f8f8f8;\n }\n }\n }\n .hover\\:bg-black\\/5 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n }\n }\n .hover\\:bg-black\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n }\n }\n .hover\\:bg-gray-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-50);\n }\n }\n }\n .hover\\:text-\\[\\#FF5300\\] {\n &:hover {\n @media (hover: hover) {\n color: #FF5300;\n }\n }\n }\n .hover\\:text-\\[\\#ff5301\\] {\n &:hover {\n @media (hover: hover) {\n color: #ff5301;\n }\n }\n }\n .hover\\:text-\\[var\\(--color-banbox-warning\\)\\] {\n &:hover {\n @media (hover: hover) {\n color: var(--color-banbox-warning);\n }\n }\n }\n .hover\\:brightness-95 {\n &:hover {\n @media (hover: hover) {\n --tw-brightness: brightness(95%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n}\n.banbox-chat-root {\n --color-banbox-primary: #ff5300;\n --color-banbox-primary-active: #dc4c07;\n --color-banbox-secondary: #2079b0;\n --color-banbox-tertiary: #74a380;\n --color-banbox-primary-container: #f9d2c4;\n --color-banbox-on-primary-container: #9e3505;\n --color-banbox-secondary-container: #b2e0fc;\n --color-banbox-on-secondary-container: #17547b;\n --color-banbox-tertiary-container: #ceefd6;\n --color-banbox-on-tertiary-container: #3b7249;\n --color-banbox-surface-dim: #f1f1f1;\n --color-banbox-surface: #f2f3f7;\n --color-banbox-surface-bright: #fffcfa;\n --color-banbox-surface-container-lowest: #ffffff;\n --color-banbox-surface-container-low: #fff1ec;\n --color-banbox-surface-container: #fceae5;\n --color-banbox-surface-container-high: #f7e4df;\n --color-banbox-surface-container-highest: #f1dfd9;\n --color-banbox-on-surface: #2c2c2c;\n --color-banbox-text-dynamic: #636363;\n --color-banbox-outline: #e0d6cf;\n --color-banbox-outline-variant: #a89e97;\n --color-banbox-blue: #0d99ff;\n --color-banbox-blue-deep: #1078d8;\n --color-banbox-blue-dim-deep: #006fd6;\n --color-banbox-blue-h: #0a7acc;\n --color-banbox-red: #eb2127;\n --color-banbox-link: #005694;\n --color-banbox-link-h: #004576;\n --color-banbox-review: #fcb532;\n --color-banbox-green: #28c76f;\n --color-banbox-deep-green: #097000;\n --color-banbox-warning: #ff5301;\n --color-banbox-error: #eb2127;\n --color-banbox-ed: #ededed;\n --color-banbox-f8: #f8f8f8;\n --color-banbox-e1: #e1e1e1;\n --color-banbox-fc: #fcfcfc;\n --color-banbox-ca: #cacaca;\n --color-banbox-e5: #e5e5e5;\n --color-banbox-92: #929292;\n --color-banbox-63: #636363;\n --color-banbox-2c: #2c2c2c;\n --color-banbox-f1: #f1f1f1;\n --border-banbox-primary: #636363;\n --border-banbox-e1: #e1e1e1;\n --border-banbox-dark: #374151;\n --radius-banbox-sm: 4px;\n --radius-banbox-md: 6px;\n --radius-lg: 12px;\n --radius-full: 100px;\n --shadow-banbox-modal-primary: 0px 2px 12px 0px #3b33331a;\n --shadow-banbox-card-primary: 0px 6px 12px 0px #3b33331a;\n --shadow-banbox-card-secondary: 0px 2px 2px 0px #2f2f2f14;\n --shadow-banbox-footer-primary: 0px -2px 4px 0px #0000000a;\n}\n.banbox-chat-root[data-theme=marketplace] {\n --color-banbox-primary: #ff5300;\n --color-banbox-primary-active: #dc4c07;\n --color-banbox-surface-container-low: #fff1ec;\n --color-banbox-surface-container: #fceae5;\n}\n.banbox-chat-root[data-theme=admin] {\n --color-banbox-primary: #1a1a1a;\n --color-banbox-primary-active: #000000;\n --color-banbox-secondary: #374151;\n --color-banbox-surface-container-lowest: #ffffff;\n --color-banbox-surface-container-low: #f5f5f5;\n --color-banbox-surface-container: #eeeeee;\n --color-banbox-surface-container-high: #e8e8e8;\n --color-banbox-surface-container-highest: #e0e0e0;\n --color-banbox-outline: #d4d4d4;\n --color-banbox-outline-variant: #9e9e9e;\n}\n.banbox-chat-root .custom-scroll,\n.banbox-chat-root .custom-scroll-hidden {\n --sb-size: 6px;\n --sb-track: #f1f1f1;\n --sb-thumb: #c1c1c1;\n --sb-thumb-hover: #898989;\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: #c1c1c1 #f1f1f1;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n display: block;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-track,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 9999px;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-thumb,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-thumb {\n background-color: #c1c1c1;\n border-radius: 9999px;\n border: 1px solid #f1f1f1;\n min-height: 40px;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-thumb:hover,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-thumb:hover {\n background-color: #898989;\n}\n.banbox-chat-root .custom-scroll-hidden {\n scrollbar-width: none;\n}\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar {\n display: none;\n}\n.banbox-chat-root .no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.banbox-chat-root .no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n@keyframes banbox-chat-fade-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.banbox-chat-root .animate-fade-in {\n animation: banbox-chat-fade-in 0.2s ease-out forwards;\n}\n.banbox-chat-root .chat-bubble-mine {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n.banbox-chat-root .chat-thread-active {\n background-color: var(--color-banbox-surface-container-low);\n}\n.banbox-chat-root .chat-btn-send {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n.banbox-chat-root .chat-btn-send:hover {\n background-color: var(--color-banbox-primary-active);\n}\n.banbox-chat-root .chat-badge-unread {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n@layer utilities {\n .banbox-chat-root * {\n box-sizing: border-box;\n }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n }\n }\n}\n');
18
41
  var ChatUIContext = React10.createContext(null);
19
42
  function useChatUI() {
20
43
  const ctx = React10.useContext(ChatUIContext);
@@ -1611,27 +1634,12 @@ var ChatFooter = ({
1611
1634
  ] });
1612
1635
  };
1613
1636
  var ChatFooter_default = ChatFooter;
1614
- function ChatHeader({ left, right, below }) {
1637
+ function ChatHeader({ left, right, below, className }) {
1615
1638
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1616
- /* @__PURE__ */ jsxRuntime.jsxs(
1617
- "div",
1618
- {
1619
- style: {
1620
- borderBottom: "1px solid #e1e1e1",
1621
- height: 64,
1622
- display: "flex",
1623
- alignItems: "flex-start",
1624
- justifyContent: "space-between",
1625
- paddingLeft: 16,
1626
- paddingRight: 16,
1627
- paddingTop: 10
1628
- },
1629
- children: [
1630
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: left }),
1631
- right
1632
- ]
1633
- }
1634
- ),
1639
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border-b border-[#e1e1e1] h-[64px] flex items-start justify-between px-4 pt-2.5${className ? ` ${className}` : ""}`, children: [
1640
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: left }),
1641
+ right
1642
+ ] }),
1635
1643
  below && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: below })
1636
1644
  ] });
1637
1645
  }
@@ -1774,7 +1782,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
1774
1782
  );
1775
1783
  };
1776
1784
  var ChatInquiryBar_default = ChatInquiryBar;
1777
- var ChatListHeader = ({ onClose, onSearchChange }) => {
1785
+ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1778
1786
  const [searching, setSearching] = React10__default.default.useState(false);
1779
1787
  const [q, setQ] = React10__default.default.useState("");
1780
1788
  const inputRef = React10__default.default.useRef(null);
@@ -1806,117 +1814,85 @@ var ChatListHeader = ({ onClose, onSearchChange }) => {
1806
1814
  inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
1807
1815
  outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } }
1808
1816
  };
1809
- const btnStyle = {
1810
- height: 36,
1811
- width: 36,
1812
- display: "flex",
1813
- alignItems: "center",
1814
- justifyContent: "center",
1815
- borderRadius: "50%",
1816
- border: "none",
1817
- background: "transparent",
1818
- cursor: "pointer"
1819
- };
1820
- return /* @__PURE__ */ jsxRuntime.jsx(
1821
- "div",
1817
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-[64px] border-b border-[#ededed]${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxRuntime.jsxs(
1818
+ framerMotion.motion.div,
1822
1819
  {
1823
- style: {
1824
- height: 64,
1825
- borderBottom: "1px solid #ededed",
1826
- display: "flex",
1827
- alignItems: "center",
1828
- paddingLeft: 20,
1829
- paddingRight: 20
1830
- },
1831
- children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxRuntime.jsxs(
1832
- framerMotion.motion.div,
1833
- {
1834
- style: { display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between" },
1835
- initial: { opacity: 0, x: -24 },
1836
- animate: "inFromLeft",
1837
- exit: "outToLeft",
1838
- variants,
1839
- children: [
1840
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, color: "#2c2c2c" }, children: [
1841
- /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, { className: "w-6 h-6" }),
1842
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 22, fontWeight: 600 }, children: "Messenger" })
1843
- ] }),
1844
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
1845
- /* @__PURE__ */ jsxRuntime.jsx("button", { title: "Search", onClick: () => setSearching(true), style: btnStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
1846
- /* @__PURE__ */ jsxRuntime.jsx("button", { title: "Close", onClick: onClose, style: btnStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "w-6 h-6" }) })
1847
- ] })
1848
- ]
1849
- },
1850
- "normal"
1851
- ) : /* @__PURE__ */ jsxRuntime.jsx(
1852
- framerMotion.motion.div,
1853
- {
1854
- style: { display: "flex", width: "100%", alignItems: "center", gap: 12 },
1855
- initial: { opacity: 0, x: 24 },
1856
- animate: "inFromRight",
1857
- exit: "outToRight",
1858
- variants,
1859
- children: /* @__PURE__ */ jsxRuntime.jsxs(
1860
- "div",
1820
+ className: "flex w-full items-center justify-between",
1821
+ initial: { opacity: 0, x: -24 },
1822
+ animate: "inFromLeft",
1823
+ exit: "outToLeft",
1824
+ variants,
1825
+ children: [
1826
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[#2c2c2c] flex items-center gap-2", children: [
1827
+ /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, { className: "w-6 h-6" }),
1828
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
1829
+ ] }) }),
1830
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1831
+ /* @__PURE__ */ jsxRuntime.jsx(
1832
+ "button",
1833
+ {
1834
+ title: "Search",
1835
+ onClick: () => setSearching(true),
1836
+ className: "h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center cursor-pointer border-none bg-transparent",
1837
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChatSearchIcon, { className: "w-5 h-5" })
1838
+ }
1839
+ ),
1840
+ /* @__PURE__ */ jsxRuntime.jsx(
1841
+ "button",
1842
+ {
1843
+ title: "Close",
1844
+ onClick: onClose,
1845
+ className: "h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center cursor-pointer border-none bg-transparent",
1846
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "w-6 h-6" })
1847
+ }
1848
+ )
1849
+ ] })
1850
+ ]
1851
+ },
1852
+ "normal"
1853
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
1854
+ framerMotion.motion.div,
1855
+ {
1856
+ className: "flex w-full items-center gap-3",
1857
+ initial: { opacity: 0, x: 24 },
1858
+ animate: "inFromRight",
1859
+ exit: "outToRight",
1860
+ variants,
1861
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-10 w-full items-center rounded-full border border-[#6A6A6A] bg-white px-[4px] gap-1.5", children: [
1862
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center ms-[12px] w-full", children: [
1863
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]", children: /* @__PURE__ */ jsxRuntime.jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
1864
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" }),
1865
+ /* @__PURE__ */ jsxRuntime.jsx(
1866
+ "input",
1861
1867
  {
1862
- style: {
1863
- display: "flex",
1864
- flex: 1,
1865
- height: 40,
1866
- alignItems: "center",
1867
- borderRadius: 9999,
1868
- border: "1px solid #6A6A6A",
1869
- backgroundColor: "#fff",
1870
- padding: "0 4px",
1871
- gap: 6
1868
+ ref: inputRef,
1869
+ value: q,
1870
+ onChange: (e) => {
1871
+ setQ(e.target.value);
1872
+ onSearchChange?.(e.target.value);
1872
1873
  },
1873
- children: [
1874
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: 12 }, children: [
1875
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 8, color: "#929292", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
1876
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 8, height: 24, width: 1, flexShrink: 0, backgroundColor: "#e1e1e1" } }),
1877
- /* @__PURE__ */ jsxRuntime.jsx(
1878
- "input",
1879
- {
1880
- ref: inputRef,
1881
- value: q,
1882
- onChange: (e) => {
1883
- setQ(e.target.value);
1884
- onSearchChange?.(e.target.value);
1885
- },
1886
- placeholder: "Search",
1887
- style: {
1888
- flex: 1,
1889
- height: "100%",
1890
- background: "transparent",
1891
- fontSize: 15,
1892
- outline: "none",
1893
- border: "none",
1894
- color: "#2c2c2c"
1895
- }
1896
- }
1897
- )
1898
- ] }),
1899
- /* @__PURE__ */ jsxRuntime.jsx(
1900
- "button",
1901
- {
1902
- title: "Close search",
1903
- onClick: () => {
1904
- setSearching(false);
1905
- setQ("");
1906
- onSearchChange?.("");
1907
- },
1908
- style: { ...btnStyle, height: 32, width: 32 },
1909
- children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "w-5 h-5" })
1910
- }
1911
- )
1912
- ]
1874
+ placeholder: "Search",
1875
+ className: "h-full w-full flex-1 bg-transparent text-[15px] outline-none placeholder:text-[#9C9C9C] border-none"
1913
1876
  }
1914
1877
  )
1915
- },
1916
- "search"
1917
- ) })
1918
- }
1919
- );
1878
+ ] }),
1879
+ /* @__PURE__ */ jsxRuntime.jsx(
1880
+ "button",
1881
+ {
1882
+ title: "Close search",
1883
+ onClick: () => {
1884
+ setSearching(false);
1885
+ setQ("");
1886
+ onSearchChange?.("");
1887
+ },
1888
+ className: "grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent",
1889
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "w-5 h-5" })
1890
+ }
1891
+ )
1892
+ ] }) })
1893
+ },
1894
+ "search"
1895
+ ) }) }) });
1920
1896
  };
1921
1897
  var ChatListHeader_default = ChatListHeader;
1922
1898
  var Row = ({ icon, label, value, highlight }) => {
@@ -2548,6 +2524,7 @@ var ChatMessageItem_default = ChatMessageItem;
2548
2524
  var ChatScroll = ({
2549
2525
  top,
2550
2526
  children,
2527
+ className,
2551
2528
  style,
2552
2529
  bottomAlignWhenShort = false,
2553
2530
  scrollKey
@@ -2555,9 +2532,7 @@ var ChatScroll = ({
2555
2532
  const ref = React10__default.default.useRef(null);
2556
2533
  const scrollToBottom = React10__default.default.useCallback(() => {
2557
2534
  const el = ref.current;
2558
- if (!el) {
2559
- return;
2560
- }
2535
+ if (!el) return;
2561
2536
  el.scrollTop = el.scrollHeight;
2562
2537
  }, []);
2563
2538
  React10__default.default.useEffect(() => {
@@ -2570,26 +2545,12 @@ var ChatScroll = ({
2570
2545
  {
2571
2546
  ref,
2572
2547
  "data-chat-scroll": true,
2573
- style: {
2574
- height: "100%",
2575
- minHeight: 0,
2576
- overflowY: "auto",
2577
- backgroundColor: "#fff",
2578
- padding: 16,
2579
- // custom scrollbar — hide track for clean look
2580
- scrollbarWidth: "thin",
2581
- scrollbarColor: "#d1d5db transparent",
2582
- ...style
2583
- },
2548
+ className: `h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`,
2549
+ style,
2584
2550
  children: /* @__PURE__ */ jsxRuntime.jsxs(
2585
2551
  "div",
2586
2552
  {
2587
- style: {
2588
- minHeight: "100%",
2589
- display: "flex",
2590
- flexDirection: "column",
2591
- justifyContent: bottomAlignWhenShort ? "flex-end" : "flex-start"
2592
- },
2553
+ className: `min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`,
2593
2554
  children: [
2594
2555
  top,
2595
2556
  children
@@ -2691,6 +2652,7 @@ var Lottie2 = _Lottie__default.default.default ?? _Lottie__default.default;
2691
2652
  var TypingIndicator = ({
2692
2653
  loop = true,
2693
2654
  autoplay = true,
2655
+ className,
2694
2656
  ariaLabel = "Typing\u2026",
2695
2657
  avatarSize = 40,
2696
2658
  style
@@ -2700,53 +2662,28 @@ var TypingIndicator = ({
2700
2662
  {
2701
2663
  role: "status",
2702
2664
  "aria-label": ariaLabel,
2703
- style: {
2704
- position: "relative",
2705
- display: "flex",
2706
- alignItems: "flex-end",
2707
- gap: 6,
2708
- ...style
2709
- },
2665
+ className: `relative flex items-end gap-[6px]${className ? ` ${className}` : ""}`,
2666
+ style,
2710
2667
  children: [
2711
2668
  /* @__PURE__ */ jsxRuntime.jsxs(
2712
2669
  "div",
2713
2670
  {
2714
- style: {
2715
- position: "relative",
2716
- flexShrink: 0,
2717
- borderRadius: "50%",
2718
- border: "1px solid #F1F1F1",
2719
- width: avatarSize,
2720
- height: avatarSize
2721
- },
2671
+ className: "relative shrink-0 rounded-full border border-[#F1F1F1]",
2672
+ style: { width: avatarSize, height: avatarSize },
2722
2673
  children: [
2723
2674
  /* @__PURE__ */ jsxRuntime.jsx(
2724
2675
  "img",
2725
2676
  {
2726
2677
  src: "/chat/img/girl_support.png",
2727
2678
  alt: "avatar image",
2728
- style: { height: "100%", width: "100%", borderRadius: "50%", objectFit: "cover" }
2679
+ className: "h-full w-full rounded-full object-cover"
2729
2680
  }
2730
2681
  ),
2731
- /* @__PURE__ */ jsxRuntime.jsx(
2732
- "span",
2733
- {
2734
- style: {
2735
- position: "absolute",
2736
- bottom: 0,
2737
- right: 0,
2738
- height: 11.25,
2739
- width: 11.25,
2740
- borderRadius: "50%",
2741
- backgroundColor: "#328545",
2742
- outline: "2px solid #fff"
2743
- }
2744
- }
2745
- )
2682
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
2746
2683
  ]
2747
2684
  }
2748
2685
  ),
2749
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", bottom: -13, left: 30 }, children: /* @__PURE__ */ jsxRuntime.jsx(
2686
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-[-13px] left-[30px]", children: /* @__PURE__ */ jsxRuntime.jsx(
2750
2687
  Lottie2,
2751
2688
  {
2752
2689
  animationData: typingdotanimation2_default,
@@ -2961,7 +2898,20 @@ var avatarBgByInitial = {
2961
2898
  b: "#F0EDEB"
2962
2899
  };
2963
2900
  var GRADIENT_BORDER = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
2964
- var InboxPopup = ({ adapter, uiCallbacks }) => {
2901
+ function getThemeAttr(theme) {
2902
+ if (!theme || theme === "marketplace") return "marketplace";
2903
+ if (theme === "admin") return "admin";
2904
+ return "custom";
2905
+ }
2906
+ function getThemeVars(theme) {
2907
+ if (!theme || theme === "marketplace" || theme === "admin") return {};
2908
+ const vars = {};
2909
+ if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
2910
+ if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
2911
+ if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
2912
+ return vars;
2913
+ }
2914
+ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
2965
2915
  const { close, selectThread, selectedThreadId, reference } = useChatUI();
2966
2916
  const { isOpen: isGalleryOpen, closeGallery } = useGallery();
2967
2917
  const [threads, setThreads] = React10.useState(() => adapter.threads.list(reference));
@@ -3033,24 +2983,21 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
3033
2983
  if (nextId) selectThread(nextId);
3034
2984
  setReplyTo(void 0);
3035
2985
  setShowDelete(false);
3036
- uiCallbacks?.showToast?.({
3037
- type: "success",
3038
- title: "Chat Deleted",
3039
- message: "The chat has been deleted successfully."
3040
- });
2986
+ uiCallbacks?.showToast?.({ type: "success", title: "Chat Deleted", message: "The chat has been deleted successfully." });
3041
2987
  };
3042
2988
  const filteredThreads = threads.filter((t) => {
3043
2989
  if (!searchQuery.trim()) return true;
3044
2990
  const q = searchQuery.toLowerCase();
3045
2991
  return t.title.toLowerCase().includes(q) || t.last?.toLowerCase().includes(q) || t.orderId?.toLowerCase().includes(q) || t.inquiryId?.toLowerCase().includes(q);
3046
2992
  });
3047
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", bottom: 16, right: 16, zIndex: 10002 }, children: [
2993
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
3048
2994
  /* @__PURE__ */ jsxRuntime.jsx(
3049
2995
  framerMotion.motion.button,
3050
2996
  {
3051
2997
  "aria-label": "Close chat",
3052
2998
  onClick: close,
3053
- style: { position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" },
2999
+ className: "fixed inset-0 cursor-auto!",
3000
+ style: { background: "transparent", border: "none" },
3054
3001
  initial: { opacity: 0 },
3055
3002
  animate: { opacity: 1 },
3056
3003
  exit: { opacity: 0 },
@@ -3062,14 +3009,14 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
3062
3009
  {
3063
3010
  role: "dialog",
3064
3011
  "aria-modal": "true",
3012
+ "data-theme": getThemeAttr(theme),
3013
+ className: "banbox-chat-root relative rounded-[20px] p-[3px]",
3065
3014
  style: {
3066
- position: "relative",
3067
3015
  width: 800,
3068
3016
  height: 650,
3069
- borderRadius: 20,
3070
- padding: 3,
3071
3017
  boxShadow: "0px 2px 12px 0px #3B33331A",
3072
- background: GRADIENT_BORDER
3018
+ background: GRADIENT_BORDER,
3019
+ ...getThemeVars(theme)
3073
3020
  },
3074
3021
  initial: { x: "110%" },
3075
3022
  animate: { x: 0 },
@@ -3078,192 +3025,115 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
3078
3025
  children: /* @__PURE__ */ jsxRuntime.jsxs(
3079
3026
  "div",
3080
3027
  {
3081
- style: {
3082
- position: "relative",
3083
- height: "100%",
3084
- width: "100%",
3085
- overflow: "hidden",
3086
- borderRadius: 18,
3087
- backgroundColor: "#fff",
3088
- overscrollBehavior: "contain"
3089
- },
3028
+ className: "relative h-full w-full overflow-hidden rounded-[18px] bg-white",
3029
+ style: { overscrollBehavior: "contain" },
3090
3030
  children: [
3091
- /* @__PURE__ */ jsxRuntime.jsxs(
3092
- "div",
3093
- {
3094
- style: {
3095
- display: "grid",
3096
- gridTemplateColumns: "1fr 310px",
3097
- height: "100%",
3098
- minHeight: 0
3099
- },
3100
- children: [
3101
- /* @__PURE__ */ jsxRuntime.jsxs(
3102
- "div",
3103
- {
3104
- style: {
3105
- display: "flex",
3106
- flexDirection: "column",
3107
- height: "100%",
3108
- minHeight: 0,
3109
- borderRight: "1px solid #9BBCCF"
3031
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[14px] ring-1 ring-[#2F80ED]/40" }),
3032
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_310px]", children: [
3033
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col border-r border-[#9BBCCF]", children: [
3034
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
3035
+ ChatHeader,
3036
+ {
3037
+ left: activeThread?.avatarSrc ? /* @__PURE__ */ jsxRuntime.jsx(ChatIdentity_default, { variant: "avatar", src: activeThread.avatarSrc, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }) : /* @__PURE__ */ jsxRuntime.jsx(ChatIdentity_default, { variant: "initial", initial, bg: avatarBg, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }),
3038
+ right: uiCallbacks?.renderKebabMenu?.({
3039
+ pinned: Boolean(activeThread?.pinned),
3040
+ onPinToggle: () => {
3041
+ if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
3110
3042
  },
3111
- children: [
3112
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 64, flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3113
- ChatHeader,
3114
- {
3115
- left: activeThread?.avatarSrc ? /* @__PURE__ */ jsxRuntime.jsx(
3116
- ChatIdentity_default,
3117
- {
3118
- variant: "avatar",
3119
- src: activeThread.avatarSrc,
3120
- online,
3121
- title,
3122
- subtitle,
3123
- verified: isVerified,
3124
- subtitleVariant: "muted"
3125
- }
3126
- ) : /* @__PURE__ */ jsxRuntime.jsx(
3127
- ChatIdentity_default,
3128
- {
3129
- variant: "initial",
3130
- initial,
3131
- bg: avatarBg,
3132
- online,
3133
- title,
3134
- subtitle,
3135
- verified: isVerified,
3136
- subtitleVariant: "muted"
3137
- }
3138
- ),
3139
- right: uiCallbacks?.renderKebabMenu?.({
3140
- pinned: Boolean(activeThread?.pinned),
3141
- onPinToggle: () => {
3142
- if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
3143
- },
3144
- onDelete: () => setShowDelete(true)
3145
- }) ?? null
3146
- }
3147
- ) }),
3148
- idValue && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3149
- ChatInquiryBar_default,
3150
- {
3151
- id: idValue,
3152
- label: idLabel,
3153
- buttonLabel: idButtonLabel,
3154
- onView: () => {
3155
- const type = activeThread?.orderId ? "order" : "inquiry";
3156
- uiCallbacks?.onNavigate?.({ type, id: idValue });
3157
- }
3158
- }
3159
- ) }),
3160
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: [
3161
- /* @__PURE__ */ jsxRuntime.jsx(
3162
- ChatScroll_default,
3163
- {
3164
- className: "h-full pb-10",
3165
- bottomAlignWhenShort: false,
3166
- scrollKey,
3167
- style: { height: "100%", overflowY: "auto" },
3168
- children: messages.map((m, idx) => {
3169
- const mine = m.author === "you";
3170
- const isLast = idx === messages.length - 1;
3171
- return /* @__PURE__ */ jsxRuntime.jsx(
3172
- ChatMessageItem_default,
3173
- {
3174
- id: m.id,
3175
- mine,
3176
- time: m.time ?? "",
3177
- authorInitial: typeof m.author === "string" ? m.author : "U",
3178
- avatarBg,
3179
- text: m.text ?? m.content,
3180
- businessCard: m.businessCard,
3181
- addressCard: m.addressCard,
3182
- images: m.images,
3183
- files: m.files,
3184
- audio: m.audio,
3185
- replyTo: m.replyTo,
3186
- showStatus: isLast,
3187
- status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
3188
- onReply: () => setReplyTo(toRef2(m)),
3189
- initialSrc: m.avatarSrc
3190
- },
3191
- m.id
3192
- );
3193
- })
3194
- }
3195
- ),
3196
- /* @__PURE__ */ jsxRuntime.jsx(
3197
- "div",
3198
- {
3199
- style: {
3200
- position: "absolute",
3201
- left: 0,
3202
- right: 0,
3203
- bottom: 0,
3204
- display: "flex",
3205
- alignItems: "center",
3206
- justifyContent: "flex-start",
3207
- padding: "4px 16px 8px",
3208
- background: "#fff",
3209
- pointerEvents: "none"
3210
- },
3211
- children: /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator_default, { style: { pointerEvents: "auto" } })
3212
- }
3213
- )
3214
- ] }),
3215
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3216
- ChatFooter_default,
3043
+ onDelete: () => setShowDelete(true)
3044
+ }) ?? null
3045
+ }
3046
+ ) }),
3047
+ idValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
3048
+ ChatInquiryBar_default,
3049
+ {
3050
+ id: idValue,
3051
+ label: idLabel,
3052
+ buttonLabel: idButtonLabel,
3053
+ onView: () => {
3054
+ const type = activeThread?.orderId ? "order" : "inquiry";
3055
+ uiCallbacks?.onNavigate?.({ type, id: idValue });
3056
+ }
3057
+ }
3058
+ ) }),
3059
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full min-h-0", children: [
3060
+ /* @__PURE__ */ jsxRuntime.jsx(
3061
+ ChatScroll_default,
3062
+ {
3063
+ className: "h-full pb-10",
3064
+ bottomAlignWhenShort: false,
3065
+ scrollKey,
3066
+ children: messages.map((m, idx) => {
3067
+ const mine = m.author === "you";
3068
+ const isLast = idx === messages.length - 1;
3069
+ return /* @__PURE__ */ jsxRuntime.jsx(
3070
+ ChatMessageItem_default,
3217
3071
  {
3218
- replyTo,
3219
- clearReply: () => setReplyTo(void 0),
3220
- onAfterSend: () => setRev((v) => v + 1),
3221
- onSend: (payload) => {
3222
- if (activeId) adapter.messages.send(activeId, payload);
3223
- }
3072
+ id: m.id,
3073
+ mine,
3074
+ time: m.time ?? "",
3075
+ authorInitial: typeof m.author === "string" ? m.author : "U",
3076
+ avatarBg,
3077
+ text: m.text ?? m.content,
3078
+ businessCard: m.businessCard,
3079
+ addressCard: m.addressCard,
3080
+ images: m.images,
3081
+ files: m.files,
3082
+ audio: m.audio,
3083
+ replyTo: m.replyTo,
3084
+ showStatus: isLast,
3085
+ status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
3086
+ onReply: () => setReplyTo(toRef2(m)),
3087
+ initialSrc: m.avatarSrc
3224
3088
  },
3225
- activeId
3226
- ) })
3227
- ]
3089
+ m.id
3090
+ );
3091
+ })
3228
3092
  }
3229
3093
  ),
3230
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
3231
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }) }),
3232
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" }, children: filteredThreads.map((t) => {
3233
- const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
3234
- return /* @__PURE__ */ jsxRuntime.jsx(
3235
- ChatThreadItem_default,
3236
- {
3237
- onClick: () => {
3238
- setReplyTo(void 0);
3239
- selectThread(t.id);
3240
- },
3241
- active: t.id === activeId,
3242
- pinned: Boolean(t.pinned),
3243
- online: t.online,
3244
- verified: Boolean(t.badge),
3245
- title: t.title,
3246
- preview: t.last ?? "",
3247
- time: t.time ?? "",
3248
- status,
3249
- avatarText: t.avatarText ?? "",
3250
- avatarSrc: t.avatarSrc
3251
- },
3252
- t.id
3253
- );
3254
- }) })
3255
- ] })
3256
- ]
3257
- }
3258
- ),
3259
- /* @__PURE__ */ jsxRuntime.jsx(
3260
- ChatConfirmModal,
3261
- {
3262
- open: showDelete,
3263
- onClose: () => setShowDelete(false),
3264
- onConfirm: handleConfirmDelete
3265
- }
3266
- ),
3094
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-start px-4 pb-2 pt-1 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator_default, { className: "pointer-events-auto" }) })
3095
+ ] }) }),
3096
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
3097
+ ChatFooter_default,
3098
+ {
3099
+ replyTo,
3100
+ clearReply: () => setReplyTo(void 0),
3101
+ onAfterSend: () => setRev((v) => v + 1),
3102
+ onSend: (payload) => {
3103
+ if (activeId) adapter.messages.send(activeId, payload);
3104
+ }
3105
+ },
3106
+ activeId
3107
+ ) })
3108
+ ] }),
3109
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
3110
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }) }),
3111
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto custom-scroll", children: filteredThreads.map((t) => {
3112
+ const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
3113
+ return /* @__PURE__ */ jsxRuntime.jsx(
3114
+ ChatThreadItem_default,
3115
+ {
3116
+ onClick: () => {
3117
+ setReplyTo(void 0);
3118
+ selectThread(t.id);
3119
+ },
3120
+ active: t.id === activeId,
3121
+ pinned: Boolean(t.pinned),
3122
+ online: t.online,
3123
+ verified: Boolean(t.badge),
3124
+ title: t.title,
3125
+ preview: t.last ?? "",
3126
+ time: t.time ?? "",
3127
+ status,
3128
+ avatarText: t.avatarText ?? "",
3129
+ avatarSrc: t.avatarSrc
3130
+ },
3131
+ t.id
3132
+ );
3133
+ }) })
3134
+ ] })
3135
+ ] }),
3136
+ /* @__PURE__ */ jsxRuntime.jsx(ChatConfirmModal, { open: showDelete, onClose: () => setShowDelete(false), onConfirm: handleConfirmDelete }),
3267
3137
  /* @__PURE__ */ jsxRuntime.jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
3268
3138
  ]
3269
3139
  }
@@ -3292,7 +3162,20 @@ function toRef(m) {
3292
3162
  audio: m.audio
3293
3163
  };
3294
3164
  }
3295
- var SinglePopup = ({ adapter, uiCallbacks }) => {
3165
+ function getThemeAttr2(theme) {
3166
+ if (!theme || theme === "marketplace") return "marketplace";
3167
+ if (theme === "admin") return "admin";
3168
+ return "custom";
3169
+ }
3170
+ function getThemeVars2(theme) {
3171
+ if (!theme || theme === "marketplace" || theme === "admin") return {};
3172
+ const vars = {};
3173
+ if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
3174
+ if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
3175
+ if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
3176
+ return vars;
3177
+ }
3178
+ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3296
3179
  const { close, reference } = useChatUI();
3297
3180
  const threads = adapter.threads.list(reference);
3298
3181
  const initialThreadId = React10__default.default.useMemo(
@@ -3326,13 +3209,14 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
3326
3209
  setScrollKey(Date.now());
3327
3210
  setReplyTo(void 0);
3328
3211
  }, [activeId, adapter]);
3329
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", bottom: 16, right: 16, zIndex: 10002 }, children: [
3212
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
3330
3213
  /* @__PURE__ */ jsxRuntime.jsx(
3331
3214
  framerMotion.motion.button,
3332
3215
  {
3333
3216
  "aria-label": "Close chat",
3334
3217
  onClick: close,
3335
- style: { position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" },
3218
+ className: "fixed inset-0 cursor-auto!",
3219
+ style: { background: "transparent", border: "none" },
3336
3220
  initial: { opacity: 0 },
3337
3221
  animate: { opacity: 1 },
3338
3222
  exit: { opacity: 0 },
@@ -3344,14 +3228,12 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
3344
3228
  {
3345
3229
  role: "dialog",
3346
3230
  "aria-modal": "true",
3231
+ "data-theme": getThemeAttr2(theme),
3232
+ className: "banbox-chat-root relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
3347
3233
  style: {
3348
- position: "relative",
3349
- height: 650,
3350
- width: 450,
3351
- borderRadius: 20,
3352
- padding: 2,
3353
3234
  boxShadow: "0px 2px 12px 0px #3B33331A",
3354
- background: GRADIENT_BORDER2
3235
+ background: GRADIENT_BORDER2,
3236
+ ...getThemeVars2(theme)
3355
3237
  },
3356
3238
  initial: { x: "110%" },
3357
3239
  animate: { x: 0 },
@@ -3360,18 +3242,10 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
3360
3242
  children: /* @__PURE__ */ jsxRuntime.jsxs(
3361
3243
  "div",
3362
3244
  {
3363
- style: {
3364
- display: "flex",
3365
- flexDirection: "column",
3366
- height: "100%",
3367
- width: "100%",
3368
- overflow: "hidden",
3369
- borderRadius: 18,
3370
- backgroundColor: "#fff",
3371
- overscrollBehavior: "contain"
3372
- },
3245
+ className: "flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white",
3246
+ style: { overscrollBehavior: "contain" },
3373
3247
  children: [
3374
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 64, flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3248
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
3375
3249
  ChatHeader,
3376
3250
  {
3377
3251
  left: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3391,30 +3265,18 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
3391
3265
  {
3392
3266
  type: "button",
3393
3267
  onClick: close,
3394
- style: {
3395
- display: "flex",
3396
- alignItems: "center",
3397
- justifyContent: "center",
3398
- height: 34,
3399
- width: 34,
3400
- borderRadius: "50%",
3401
- backgroundColor: "#fff",
3402
- color: "#000",
3403
- border: "none",
3404
- boxShadow: "0px 2px 4px 0px #A5A3AE4D",
3405
- cursor: "pointer"
3406
- },
3268
+ className: "flex h-[34px] w-[34px] items-center justify-center rounded-full bg-white text-black shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5 hover:text-[var(--color-banbox-warning)] cursor-pointer border-none",
3407
3269
  children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "h-6 w-6" })
3408
3270
  }
3409
3271
  )
3410
3272
  }
3411
3273
  ) }),
3412
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
3274
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
3413
3275
  ChatScroll_default,
3414
3276
  {
3277
+ className: "h-full",
3415
3278
  bottomAlignWhenShort: false,
3416
3279
  scrollKey,
3417
- style: { height: "100%", overflowY: "auto" },
3418
3280
  children: [
3419
3281
  messages.map((m, idx) => {
3420
3282
  const mine = m.author === "you";
@@ -3441,11 +3303,11 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
3441
3303
  m.id
3442
3304
  );
3443
3305
  }),
3444
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator_default, {}) })
3306
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator_default, {}) })
3445
3307
  ]
3446
3308
  }
3447
3309
  ) }),
3448
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3310
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
3449
3311
  ChatFooter_default,
3450
3312
  {
3451
3313
  variant: "single",
@@ -3465,7 +3327,7 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
3465
3327
  ] });
3466
3328
  };
3467
3329
  var SinglePopup_default = SinglePopup;
3468
- function ChatRoot({ adapter, uiCallbacks }) {
3330
+ function ChatRoot({ adapter, uiCallbacks, theme }) {
3469
3331
  const { isOpen, variant } = useChatUI();
3470
3332
  useDisableBodyScroll(isOpen);
3471
3333
  if (typeof window === "undefined") {
@@ -3473,19 +3335,20 @@ function ChatRoot({ adapter, uiCallbacks }) {
3473
3335
  }
3474
3336
  return reactDom.createPortal(
3475
3337
  // GalleryProvider is scoped to the chat only.
3476
- // It is completely separate from the host app's own gallery context.
3477
3338
  /* @__PURE__ */ jsxRuntime.jsx(GalleryProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isOpen && (variant === "inbox" ? /* @__PURE__ */ jsxRuntime.jsx(
3478
3339
  InboxPopup_default,
3479
3340
  {
3480
3341
  adapter,
3481
- uiCallbacks
3342
+ uiCallbacks,
3343
+ theme
3482
3344
  },
3483
3345
  "inbox"
3484
3346
  ) : /* @__PURE__ */ jsxRuntime.jsx(
3485
3347
  SinglePopup_default,
3486
3348
  {
3487
3349
  adapter,
3488
- uiCallbacks
3350
+ uiCallbacks,
3351
+ theme
3489
3352
  },
3490
3353
  "single"
3491
3354
  )) }) }),