@banbox/chat 1.0.7 → 1.0.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.
- package/dist/index.cjs +1236 -235
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -3
- package/dist/index.d.ts +15 -3
- package/dist/index.js +1160 -160
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/chat/InboxPopup.tsx +105 -42
- package/src/chat/SinglePopup.tsx +59 -14
- package/src/icons/index.tsx +55 -0
- package/src/index.ts +14 -12
- package/src/modals/ChatAddressModal.tsx +844 -0
- package/src/modals/{chat/ChatConfirmModal.tsx → ChatConfirmModal.tsx} +2 -2
- package/src/modals/ChatTranslateSettingsModal.tsx +182 -0
- package/src/styles/index.build.css +15 -0
- package/src/styles/index.css +10 -2
- package/src/ui/{chat/AttachmentPreviewStrip.tsx → AttachmentPreviewStrip.tsx} +2 -2
- package/src/ui/{chat/ChatComposerBar.tsx → ChatComposerBar.tsx} +2 -2
- package/src/ui/{chat/ChatFooter.tsx → ChatFooter.tsx} +102 -8
- package/src/ui/{chat/ChatHeader.tsx → ChatHeader.tsx} +7 -4
- package/src/ui/{chat/ChatIdentity.tsx → ChatIdentity.tsx} +2 -2
- package/src/ui/{chat/ChatInquiryBar.tsx → ChatInquiryBar.tsx} +1 -1
- package/src/ui/ChatKebabMenu.tsx +125 -0
- package/src/ui/{chat/ChatListHeader.tsx → ChatListHeader.tsx} +49 -25
- package/src/ui/{chat/ChatMessageItem.tsx → ChatMessageItem.tsx} +1 -1
- package/src/ui/ChatScroll.tsx +59 -0
- package/src/ui/{chat/ChatSpinner.tsx → ChatSpinner.tsx} +1 -1
- package/src/ui/{chat/ChatThreadItem.tsx → ChatThreadItem.tsx} +9 -16
- package/src/ui/{chat/MessageHoverActions.tsx → MessageHoverActions.tsx} +2 -2
- package/src/ui/{chat/ReplyCard.tsx → ReplyCard.tsx} +2 -2
- package/src/ui/{chat/TypingIndicator.tsx → TypingIndicator.tsx} +1 -1
- package/src/ui/{chat/drop-up → drop-up}/BusinessCardDropup.tsx +15 -3
- package/src/ui/{chat/drop-up → drop-up}/EmojiDropup.tsx +1 -1
- package/src/ui/{chat/message-items → message-items}/ChatAddressCard.tsx +4 -4
- package/src/ui/{chat/message-items → message-items}/ChatBubbleFiles.tsx +1 -1
- package/src/ui/{chat/message-items → message-items}/ChatBubbleImages.tsx +2 -2
- package/src/ui/{chat/message-items → message-items}/ChatBusinessCard.tsx +1 -1
- package/src/ui/{chat/scrollToMessage.ts → scrollToMessage.ts} +1 -1
- package/src/ui/{chat/types.ts → types.ts} +2 -2
- package/src/modals/chat/ChatTranslateSettingsModal.tsx +0 -180
- package/src/ui/chat/ChatScroll.tsx +0 -52
- /package/src/ui/{chat/message-items → message-items}/ChatBubbleAudio.tsx +0 -0
- /package/src/ui/{chat/message-items → message-items}/ChatBubbleText.tsx +0 -0
package/dist/index.cjs
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
var framerMotion = require('framer-motion');
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
|
-
var
|
|
5
|
+
var React16 = require('react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
var
|
|
7
|
+
var clsx3 = require('clsx');
|
|
8
8
|
var tailwindMerge = require('tailwind-merge');
|
|
9
9
|
var _Lottie = require('lottie-react');
|
|
10
10
|
|
|
11
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
12
|
|
|
13
|
-
var
|
|
14
|
-
var
|
|
13
|
+
var React16__default = /*#__PURE__*/_interopDefault(React16);
|
|
14
|
+
var clsx3__default = /*#__PURE__*/_interopDefault(clsx3);
|
|
15
15
|
var _Lottie__default = /*#__PURE__*/_interopDefault(_Lottie);
|
|
16
16
|
|
|
17
17
|
// #style-inject:#style-inject
|
|
@@ -37,17 +37,17 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
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');
|
|
41
|
-
var ChatUIContext =
|
|
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-normal: 1.5;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\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 .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\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-\\[6px\\] {\n top: calc(6px * -1);\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-\\[12px\\] {\n bottom: 12px;\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-\\[1\\] {\n z-index: calc(1 * -1);\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-10002 {\n z-index: 10002;\n }\n .z-\\[70\\] {\n z-index: 70;\n }\n .z-\\[9999\\] {\n z-index: 9999;\n }\n .z-\\[10002\\] {\n z-index: 10002;\n }\n .z-\\[10003\\] {\n z-index: 10003;\n }\n .z-\\[10004\\] {\n z-index: 10004;\n }\n .z-\\[10010\\] {\n z-index: 10010;\n }\n .z-\\[10011\\] {\n z-index: 10011;\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-\\[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-0\\.5 {\n margin-left: calc(var(--spacing) * 0.5);\n }\n .ml-1 {\n margin-left: calc(var(--spacing) * 1);\n }\n .ml-1\\.5 {\n margin-left: calc(var(--spacing) * 1.5);\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 {\n height: calc(var(--spacing) * 2);\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-\\[16px\\] {\n height: 16px;\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-\\[446px\\] {\n height: 446px;\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-44 {\n width: calc(var(--spacing) * 44);\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-\\[16px\\] {\n width: 16px;\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-\\[30px\\] {\n width: 30px;\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-\\[460px\\] {\n width: 460px;\n }\n .w-\\[480px\\] {\n width: 480px;\n }\n .w-\\[700px\\] {\n width: 700px;\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-\\[80\\%\\] {\n max-width: 80%;\n }\n .max-w-\\[95\\%\\] {\n max-width: 95%;\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 .min-w-\\[100px\\] {\n min-width: 100px;\n }\n .min-w-\\[106px\\] {\n min-width: 106px;\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 .appearance-none {\n appearance: none;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\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_350px\\] {\n grid-template-columns: 1fr 350px;\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 .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .gap-\\[6px\\] {\n gap: 6px;\n }\n .gap-\\[17px\\] {\n gap: 17px;\n }\n .gap-\\[18px\\] {\n gap: 18px;\n }\n .gap-\\[24px\\] {\n gap: 24px;\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\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-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * 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 .gap-y-1\\.5 {\n row-gap: calc(var(--spacing) * 1.5);\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-clip {\n overflow: clip;\n }\n .overflow-hidden {\n overflow: hidden;\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-\\[inherit\\] {\n border-radius: inherit;\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-\\[6px\\] {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\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-\\[6px\\] {\n border-bottom-right-radius: 6px;\n border-bottom-left-radius: 6px;\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-\\[1\\.5px\\] {\n border-style: var(--tw-border-style);\n border-width: 1.5px;\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-\\[\\#636363\\] {\n border-color: #636363;\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-\\[\\#F8F8F8\\] {\n border-color: #F8F8F8;\n }\n .border-\\[\\#FF5300\\] {\n border-color: #FF5300;\n }\n .border-\\[\\#cacaca\\] {\n border-color: #cacaca;\n }\n .border-\\[\\#d1d5db\\] {\n border-color: #d1d5db;\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-black {\n border-color: var(--color-black);\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-\\[\\#F8F8F8\\] {\n background-color: #F8F8F8;\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-\\[\\#f0f4ff\\] {\n background-color: #f0f4ff;\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-\\[var\\(--color-banbox-f8\\,\\#f8f8f8\\)\\] {\n background-color: var(--color-banbox-f8,#f8f8f8);\n }\n .bg-\\[var\\(--color-banbox-primary-container\\,\\#f0f4ff\\)\\] {\n background-color: var(--color-banbox-primary-container,#f0f4ff);\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-6 {\n padding: calc(var(--spacing) * 6);\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-8 {\n padding-inline: calc(var(--spacing) * 8);\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-0 {\n padding-block: calc(var(--spacing) * 0);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\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-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\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 .py-\\[9px\\] {\n padding-block: 9px;\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-2\\.5 {\n padding-top: calc(var(--spacing) * 2.5);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\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-6 {\n padding-bottom: calc(var(--spacing) * 6);\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-normal {\n --tw-leading: var(--leading-normal);\n line-height: var(--leading-normal);\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-\\[0\\.5px\\] {\n --tw-tracking: 0.5px;\n letter-spacing: 0.5px;\n }\n .tracking-\\[0\\.25px\\] {\n --tw-tracking: 0.25px;\n letter-spacing: 0.25px;\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-\\[\\#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-\\[\\#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-\\[\\#161616\\] {\n color: #161616;\n }\n .text-\\[\\#374151\\] {\n color: #374151;\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-\\[\\#ff5200\\] {\n color: #ff5200;\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 .capitalize {\n text-transform: capitalize;\n }\n .uppercase {\n text-transform: uppercase;\n }\n .underline {\n text-decoration-line: underline;\n }\n .underline-offset-4 {\n text-underline-offset: 4px;\n }\n .placeholder-\\[\\#9ca3af\\] {\n &::placeholder {\n color: #9ca3af;\n }\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_0px_rgba\\(47\\,47\\,47\\,0\\.08\\)\\] {\n --tw-shadow: 0px 2px 2px 0px 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-\\[0px_2px_12px_0px_rgba\\(59\\,51\\,51\\,0\\.1\\)\\] {\n --tw-shadow: 0px 2px 12px 0px 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-\\[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 .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-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\\:h-\\[6px\\] {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n height: 6px;\n }\n }\n }\n .group-hover\\:w-\\[6px\\] {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n width: 6px;\n }\n }\n }\n .group-hover\\:border-2 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n }\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-\\[\\#636363\\] {\n &:hover {\n @media (hover: hover) {\n border-color: #636363;\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-\\[\\#f9fafb\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #f9fafb;\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-\\[\\#ff5200\\] {\n &:hover {\n @media (hover: hover) {\n color: #ff5200;\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\\:border-\\[\\#2753fb\\] {\n &:focus {\n border-color: #2753fb;\n }\n }\n .focus\\:border-\\[\\#ff5200\\] {\n &:focus {\n border-color: #ff5200;\n }\n }\n .focus\\:ring-1 {\n &:focus {\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 }\n .focus\\:ring-\\[\\#2753fb\\]\\/20 {\n &:focus {\n --tw-ring-color: color-mix(in oklab, #2753fb 20%, transparent);\n }\n }\n .focus\\:ring-\\[\\#ff5200\\]\\/30 {\n &:focus {\n --tw-ring-color: color-mix(in oklab, #ff5200 30%, transparent);\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');
|
|
41
|
+
var ChatUIContext = React16.createContext(null);
|
|
42
42
|
function useChatUI() {
|
|
43
|
-
const ctx =
|
|
43
|
+
const ctx = React16.useContext(ChatUIContext);
|
|
44
44
|
if (!ctx) {
|
|
45
45
|
throw new Error("useChatUI must be used within ChatUIProvider");
|
|
46
46
|
}
|
|
47
47
|
return ctx;
|
|
48
48
|
}
|
|
49
49
|
function useDisableBodyScroll(active) {
|
|
50
|
-
|
|
50
|
+
React16.useEffect(() => {
|
|
51
51
|
if (!active) return;
|
|
52
52
|
const original = document.body.style.overflow;
|
|
53
53
|
document.body.style.overflow = "hidden";
|
|
@@ -56,11 +56,11 @@ function useDisableBodyScroll(active) {
|
|
|
56
56
|
};
|
|
57
57
|
}, [active]);
|
|
58
58
|
}
|
|
59
|
-
var GalleryContext =
|
|
59
|
+
var GalleryContext = React16.createContext(
|
|
60
60
|
void 0
|
|
61
61
|
);
|
|
62
62
|
var useGallery = () => {
|
|
63
|
-
const context =
|
|
63
|
+
const context = React16.useContext(GalleryContext);
|
|
64
64
|
if (!context) {
|
|
65
65
|
throw new Error("useGallery must be used within a GalleryProvider");
|
|
66
66
|
}
|
|
@@ -74,17 +74,17 @@ var INITIAL_STATE = {
|
|
|
74
74
|
showDots: false
|
|
75
75
|
};
|
|
76
76
|
var GalleryProvider = ({ children }) => {
|
|
77
|
-
const [state, setState] =
|
|
78
|
-
const setImages =
|
|
77
|
+
const [state, setState] = React16.useState(INITIAL_STATE);
|
|
78
|
+
const setImages = React16.useCallback((images) => {
|
|
79
79
|
setState((prev2) => ({ ...prev2, images }));
|
|
80
80
|
}, []);
|
|
81
|
-
const setCurrentIndex =
|
|
81
|
+
const setCurrentIndex = React16.useCallback((currentIndex) => {
|
|
82
82
|
setState((prev2) => ({ ...prev2, currentIndex }));
|
|
83
83
|
}, []);
|
|
84
|
-
const setUploadDate =
|
|
84
|
+
const setUploadDate = React16.useCallback((uploadDate) => {
|
|
85
85
|
setState((prev2) => ({ ...prev2, uploadDate }));
|
|
86
86
|
}, []);
|
|
87
|
-
const openGallery =
|
|
87
|
+
const openGallery = React16.useCallback(
|
|
88
88
|
(imgs, startIndex = 0, date = null, dots = false) => {
|
|
89
89
|
setState({
|
|
90
90
|
images: imgs,
|
|
@@ -96,17 +96,17 @@ var GalleryProvider = ({ children }) => {
|
|
|
96
96
|
},
|
|
97
97
|
[]
|
|
98
98
|
);
|
|
99
|
-
const closeGallery =
|
|
99
|
+
const closeGallery = React16.useCallback(() => {
|
|
100
100
|
setState((prev2) => ({ ...prev2, isOpen: false, currentIndex: null }));
|
|
101
101
|
}, []);
|
|
102
|
-
const next =
|
|
102
|
+
const next = React16.useCallback(() => {
|
|
103
103
|
setState((prev2) => {
|
|
104
104
|
if (prev2.currentIndex === null || prev2.images.length === 0) return prev2;
|
|
105
105
|
const newIndex = prev2.currentIndex < prev2.images.length - 1 ? prev2.currentIndex + 1 : 0;
|
|
106
106
|
return { ...prev2, currentIndex: newIndex, uploadDate: prev2.images[newIndex]?.uploadDate ?? null };
|
|
107
107
|
});
|
|
108
108
|
}, []);
|
|
109
|
-
const prev =
|
|
109
|
+
const prev = React16.useCallback(() => {
|
|
110
110
|
setState((prev2) => {
|
|
111
111
|
if (prev2.currentIndex === null || prev2.images.length === 0) return prev2;
|
|
112
112
|
const newIndex = prev2.currentIndex > 0 ? prev2.currentIndex - 1 : prev2.images.length - 1;
|
|
@@ -130,7 +130,7 @@ var GalleryProvider = ({ children }) => {
|
|
|
130
130
|
return /* @__PURE__ */ jsxRuntime.jsx(GalleryContext.Provider, { value, children });
|
|
131
131
|
};
|
|
132
132
|
function cn(...inputs) {
|
|
133
|
-
return tailwindMerge.twMerge(
|
|
133
|
+
return tailwindMerge.twMerge(clsx3.clsx(inputs));
|
|
134
134
|
}
|
|
135
135
|
var sizeClasses = {
|
|
136
136
|
"26": "h-[26px] px-[10px] text-[12px] rounded-[4px] gap-1",
|
|
@@ -153,7 +153,7 @@ var colorMap = {
|
|
|
153
153
|
green: { bg: "bg-[#086600]", hover: "hover:bg-[#28A745]", text: "text-[#086600]", border: "border-[#086600]", lightBg: "bg-[#E6F5E6]" },
|
|
154
154
|
blue: { bg: "bg-[#005694]", hover: "hover:bg-[#00375E]", text: "text-[#005694]", border: "border-[#005694]", lightBg: "bg-[#E0EFF8]" }
|
|
155
155
|
};
|
|
156
|
-
var Button =
|
|
156
|
+
var Button = React16__default.default.forwardRef(
|
|
157
157
|
({ variant = "filled", color = "primary", size = "40", leftIcon, rightIcon, iconOnly = false, children, className, disabled, ...props }, ref) => {
|
|
158
158
|
const c = colorMap[color];
|
|
159
159
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -192,7 +192,7 @@ function ChatConfirmModal({
|
|
|
192
192
|
onClose,
|
|
193
193
|
className
|
|
194
194
|
}) {
|
|
195
|
-
|
|
195
|
+
React16__default.default.useEffect(() => {
|
|
196
196
|
if (!open) return;
|
|
197
197
|
const onKey = (e) => e.key === "Escape" && onClose();
|
|
198
198
|
window.addEventListener("keydown", onKey);
|
|
@@ -389,11 +389,56 @@ var MapPinIcon = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg",
|
|
|
389
389
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.9974 2.66797V11.3346", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
390
390
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.9974 10V13.3333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
391
391
|
] });
|
|
392
|
+
var MapIcon2 = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
|
|
393
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.9987 1.33203C5.41203 1.33203 3.33203 3.41203 3.33203 5.9987C3.33203 9.4987 7.9987 14.6654 7.9987 14.6654C7.9987 14.6654 12.6654 9.4987 12.6654 5.9987C12.6654 3.41203 10.5854 1.33203 7.9987 1.33203Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
394
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "6", r: "1.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
395
|
+
] });
|
|
396
|
+
var MenuIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", children: [
|
|
397
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "2" }),
|
|
398
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2" }),
|
|
399
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "19", r: "2" })
|
|
400
|
+
] });
|
|
401
|
+
var PinIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
402
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5007 3.75L9.16732 7.08333L5.83398 8.33333L4.58398 9.58333L10.4173 15.4167L11.6673 14.1667L12.9173 10.8333L16.2507 7.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
403
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 12.5L3.75 16.25", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
404
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.084 3.33594L16.6673 7.91927", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
405
|
+
] });
|
|
406
|
+
var PinOffIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
407
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5007 3.75L9.16732 7.08333L5.83398 8.33333L4.58398 9.58333L10.4173 15.4167L11.6673 14.1667L12.9173 10.8333L16.2507 7.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
408
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 12.5L3.75 16.25", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
409
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.084 3.33594L16.6673 7.91927", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
410
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3L17 17", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
411
|
+
] });
|
|
412
|
+
var EditIcon = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
|
|
413
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 7H6C4.89543 7 4 7.89543 4 9V18C4 19.1046 4.89543 20 6 20H15C16.1046 20 17 19.1046 17 18V15", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
414
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 15H12L20.5 6.49998C21.3284 5.67156 21.3284 4.32841 20.5 3.49998C19.6716 2.67156 18.3284 2.67156 17.5 3.49998L9 12V15", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
415
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 5L19 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
416
|
+
] });
|
|
417
|
+
var TrashIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
|
|
418
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.3335 5.83464H16.6668", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
419
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.33317 9.16797V14.168", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
420
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.6667 9.16797V14.168", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
421
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.1665 5.83203L4.99984 15.832C4.99984 16.7525 5.74603 17.4987 6.6665 17.4987H13.3332C14.2536 17.4987 14.9998 16.7525 14.9998 15.832L15.8332 5.83203", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
422
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 5.83333V3.33333C7.5 2.8731 7.8731 2.5 8.33333 2.5H11.6667C12.1269 2.5 12.5 2.8731 12.5 3.33333V5.83333", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
423
|
+
] });
|
|
424
|
+
var EmailIcon = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
|
|
425
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3H15C15.825 3 16.5 3.675 16.5 4.5V13.5C16.5 14.325 15.825 15 15 15H3C2.175 15 1.5 14.325 1.5 13.5V4.5C1.5 3.675 2.175 3 3 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
426
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 4.5L9 9.75L1.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
427
|
+
] });
|
|
428
|
+
var BadgeHomeAddrIcon = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
|
|
429
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.91667 7H1.75L7 1.75L12.25 7H11.0833", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
430
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.91406 7V11.0833C2.91406 11.7277 3.4364 12.25 4.08073 12.25H9.91406C10.5584 12.25 11.0807 11.7277 11.0807 11.0833V7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
431
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5.83594", y: "7", width: "2.33333", height: "2.33333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
432
|
+
] });
|
|
433
|
+
var CheckboxFilledIcon = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
|
|
434
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { width: "16", height: "16", rx: "4", fill: "currentColor" }),
|
|
435
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.8161 1C13.1423 2.42824 11.7356 4.37456 10.6806 6.51692C9.68193 8.56126 8.99268 10.8016 8.69729 13H4.81498V12.972L3.12701 8.56126L2.4659 6.83897L2.18457 6.09685L3.83033 6.05484C4.26639 6.05484 4.66025 6.30688 4.75871 6.68495L5.72929 8.63127L6.517 10.1995L6.728 10.6196C6.91086 10.2415 7.09372 9.87748 7.29065 9.51342C8.34563 7.49708 9.49907 5.67678 10.8635 4.13652C11.6512 3.25438 12.5093 2.45624 13.4658 1.77013C13.8456 1.50408 14.2254 1.25204 14.6333 1.014H14.8161V1Z", fill: "white" })
|
|
436
|
+
] });
|
|
392
437
|
var Select = ({ options, value, onChange, placeholder = "Select...", size = 36, className, disabled }) => {
|
|
393
|
-
const [open, setOpen] =
|
|
394
|
-
const ref =
|
|
438
|
+
const [open, setOpen] = React16.useState(false);
|
|
439
|
+
const ref = React16.useRef(null);
|
|
395
440
|
const selected = options.find((o) => o.value === value);
|
|
396
|
-
|
|
441
|
+
React16.useEffect(() => {
|
|
397
442
|
if (!open) return;
|
|
398
443
|
const onDoc = (e) => {
|
|
399
444
|
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
@@ -463,10 +508,10 @@ var ChatTranslateSettingsModal = ({
|
|
|
463
508
|
className,
|
|
464
509
|
variant = "group"
|
|
465
510
|
}) => {
|
|
466
|
-
const [incomingTarget, setIncomingTarget] =
|
|
511
|
+
const [incomingTarget, setIncomingTarget] = React16.useState(
|
|
467
512
|
initial?.incomingTarget ?? ""
|
|
468
513
|
);
|
|
469
|
-
|
|
514
|
+
React16__default.default.useEffect(() => {
|
|
470
515
|
if (!open) return;
|
|
471
516
|
const onKey = (e) => {
|
|
472
517
|
if (e.key === "Escape") onClose();
|
|
@@ -475,7 +520,6 @@ var ChatTranslateSettingsModal = ({
|
|
|
475
520
|
return () => window.removeEventListener("keydown", onKey);
|
|
476
521
|
}, [open, onClose]);
|
|
477
522
|
if (!open) return null;
|
|
478
|
-
const isSingle = variant === "single";
|
|
479
523
|
const handleSave = () => {
|
|
480
524
|
onSave({
|
|
481
525
|
incomingTarget,
|
|
@@ -485,15 +529,19 @@ var ChatTranslateSettingsModal = ({
|
|
|
485
529
|
outgoingTo: "Bangla"
|
|
486
530
|
});
|
|
487
531
|
};
|
|
488
|
-
|
|
532
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
489
533
|
"div",
|
|
490
534
|
{
|
|
491
|
-
className:
|
|
492
|
-
|
|
535
|
+
className: clsx3__default.default(
|
|
536
|
+
"absolute inset-0 z-[9999] flex items-center justify-center",
|
|
537
|
+
variant === "single" && "rounded-[inherit]"
|
|
493
538
|
),
|
|
494
|
-
onClick: () =>
|
|
539
|
+
onClick: (e) => {
|
|
540
|
+
e.stopPropagation();
|
|
541
|
+
onClose();
|
|
542
|
+
},
|
|
495
543
|
children: [
|
|
496
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
544
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 rounded-[inherit]" }),
|
|
497
545
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
498
546
|
"div",
|
|
499
547
|
{
|
|
@@ -501,23 +549,23 @@ var ChatTranslateSettingsModal = ({
|
|
|
501
549
|
"aria-modal": "true",
|
|
502
550
|
"aria-labelledby": "translate-settings-title",
|
|
503
551
|
onClick: (e) => e.stopPropagation(),
|
|
504
|
-
className:
|
|
505
|
-
|
|
506
|
-
"
|
|
552
|
+
className: clsx3__default.default(
|
|
553
|
+
"relative w-[460px] max-w-[95%]",
|
|
554
|
+
"overflow-clip rounded-[6px] bg-white shadow-[0px_2px_12px_0px_rgba(59,51,51,0.1)]",
|
|
507
555
|
className
|
|
508
556
|
),
|
|
509
557
|
children: [
|
|
510
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "
|
|
558
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[44px] px-6 py-2 flex items-center w-full shadow-[0px_2px_2px_0px_rgba(47,47,47,0.08)] bg-[#f8f8f8] rounded-t-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
511
559
|
"h2",
|
|
512
560
|
{
|
|
513
561
|
id: "translate-settings-title",
|
|
514
|
-
className: "
|
|
562
|
+
className: "text-[20px] font-semibold text-black capitalize tracking-[0.5px] truncate leading-normal",
|
|
515
563
|
children: "Translation Settings"
|
|
516
564
|
}
|
|
517
565
|
) }),
|
|
518
|
-
/* @__PURE__ */ jsxRuntime.
|
|
519
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "
|
|
520
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-medium text-black", children: "Translate message into" }),
|
|
566
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 pt-4 pb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[24px]", children: [
|
|
567
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[6px]", children: [
|
|
568
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-medium text-black tracking-[0.25px] leading-normal", children: "Translate message into" }),
|
|
521
569
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
522
570
|
Select_default,
|
|
523
571
|
{
|
|
@@ -525,16 +573,16 @@ var ChatTranslateSettingsModal = ({
|
|
|
525
573
|
value: incomingTarget,
|
|
526
574
|
onChange: setIncomingTarget,
|
|
527
575
|
placeholder: "Select Language",
|
|
528
|
-
size:
|
|
576
|
+
size: 34
|
|
529
577
|
}
|
|
530
578
|
)
|
|
531
579
|
] }),
|
|
532
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "
|
|
533
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
534
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-
|
|
580
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[6px] items-start text-[#ff5200]", children: [
|
|
581
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "pt-[2px] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ChatInfoIcon, { className: "w-4 h-4" }) }),
|
|
582
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] font-normal tracking-[0.25px] leading-normal", children: "Automatically translate incoming messages. The language you save here will be used to display all incoming messages. You can choose from Spanish, Russian, French, Arabic, Portuguese, Turkish, Bangla, and among others." })
|
|
535
583
|
] })
|
|
536
|
-
] }),
|
|
537
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "
|
|
584
|
+
] }) }),
|
|
585
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-[9px] bg-[#f0f4ff] flex items-center justify-end rounded-b-[6px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-6", children: [
|
|
538
586
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
539
587
|
Button_default,
|
|
540
588
|
{
|
|
@@ -562,12 +610,679 @@ var ChatTranslateSettingsModal = ({
|
|
|
562
610
|
]
|
|
563
611
|
}
|
|
564
612
|
);
|
|
565
|
-
if (isSingle) {
|
|
566
|
-
return reactDom.createPortal(content, document.body);
|
|
567
|
-
}
|
|
568
|
-
return content;
|
|
569
613
|
};
|
|
570
614
|
var ChatTranslateSettingsModal_default = ChatTranslateSettingsModal;
|
|
615
|
+
var MOCK_ADDRESSES = [
|
|
616
|
+
{
|
|
617
|
+
id: "ca-1",
|
|
618
|
+
isDefault: false,
|
|
619
|
+
addressLabel: "Office",
|
|
620
|
+
businessName: "Oceanget",
|
|
621
|
+
firstName: "Ariful",
|
|
622
|
+
lastName: "Islam",
|
|
623
|
+
mobileNumber: "+11712345678",
|
|
624
|
+
email: "ariful.ca@example.com",
|
|
625
|
+
country: "Canada",
|
|
626
|
+
postalCode: "M5V 3K2",
|
|
627
|
+
addressLine: "1001 Birchwood Ave, Apt 12",
|
|
628
|
+
landMark: "Near Harbourfront",
|
|
629
|
+
district: null,
|
|
630
|
+
policeStation: null,
|
|
631
|
+
state: "Ontario",
|
|
632
|
+
city: "Toronto"
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
id: "bd-1",
|
|
636
|
+
isDefault: true,
|
|
637
|
+
addressLabel: "Home",
|
|
638
|
+
firstName: "Ariful",
|
|
639
|
+
lastName: "Islam",
|
|
640
|
+
mobileNumber: "+8801712345678",
|
|
641
|
+
email: null,
|
|
642
|
+
country: "Bangladesh",
|
|
643
|
+
postalCode: "1212",
|
|
644
|
+
addressLine: "House 12, Road 34, Gulshan 2",
|
|
645
|
+
landMark: "N/A",
|
|
646
|
+
district: "Dhaka",
|
|
647
|
+
policeStation: "Gulshan",
|
|
648
|
+
state: null,
|
|
649
|
+
city: null
|
|
650
|
+
},
|
|
651
|
+
{
|
|
652
|
+
id: "bd-2",
|
|
653
|
+
isDefault: false,
|
|
654
|
+
addressLabel: "Office",
|
|
655
|
+
businessName: "Oceanget",
|
|
656
|
+
firstName: "Ariful",
|
|
657
|
+
lastName: "Islam",
|
|
658
|
+
mobileNumber: "+8801712345678",
|
|
659
|
+
email: null,
|
|
660
|
+
country: "Bangladesh",
|
|
661
|
+
postalCode: "1212",
|
|
662
|
+
addressLine: "House 12, Road 34, Gulshan 2",
|
|
663
|
+
landMark: "N/A",
|
|
664
|
+
district: "Dhaka",
|
|
665
|
+
policeStation: "Gulshan",
|
|
666
|
+
state: null,
|
|
667
|
+
city: null
|
|
668
|
+
}
|
|
669
|
+
];
|
|
670
|
+
var toAddressCard = (a) => ({
|
|
671
|
+
name: `${a.firstName ?? ""} ${a.lastName ?? ""}`.trim(),
|
|
672
|
+
label: a.addressLabel ?? (a.isDefault ? "Home" : void 0),
|
|
673
|
+
businessName: a.businessName ?? void 0,
|
|
674
|
+
mobileNumber: a.mobileNumber,
|
|
675
|
+
country: a.country,
|
|
676
|
+
district: a.district ?? null,
|
|
677
|
+
policeStation: a.policeStation ?? null,
|
|
678
|
+
state: a.state ?? null,
|
|
679
|
+
city: a.city ?? null,
|
|
680
|
+
postalCode: a.postalCode ?? void 0,
|
|
681
|
+
addressLine: a.addressLine,
|
|
682
|
+
landMark: a.landMark ?? null
|
|
683
|
+
});
|
|
684
|
+
var FieldRow = ({ icon, label, value, highlight = false, isAction = true }) => {
|
|
685
|
+
if (value === null || value === void 0) return null;
|
|
686
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs tracking-[0.25px]", children: [
|
|
687
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx3__default.default("flex items-center justify-center text-black", isAction ? "w-4 h-4" : "w-3.5 h-3.5"), children: icon }),
|
|
688
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: clsx3__default.default("text-[12px] font-medium text-black", isAction ? "min-w-[106px]" : "min-w-[100px]"), children: label }),
|
|
689
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx3__default.default("font-normal", highlight ? "text-black" : "text-[#636363]"), children: value ?? "N/A" })
|
|
690
|
+
] });
|
|
691
|
+
};
|
|
692
|
+
var BadgeLabel = ({ label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-xs bg-[#FFDBCF] px-2 py-[3px] text-[#FF5300] select-none", children: [
|
|
693
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: icon }),
|
|
694
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium tracking-[0.5px]", children: label })
|
|
695
|
+
] });
|
|
696
|
+
var RadioPill = ({ name, value, label, checked, onChange }) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "group inline-flex h-[30px] select-none overflow-hidden rounded-xs bg-[#F8F8F8] cursor-pointer", children: [
|
|
697
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
698
|
+
"input",
|
|
699
|
+
{
|
|
700
|
+
type: "radio",
|
|
701
|
+
name,
|
|
702
|
+
value,
|
|
703
|
+
checked,
|
|
704
|
+
onChange: () => onChange(value),
|
|
705
|
+
className: "sr-only"
|
|
706
|
+
}
|
|
707
|
+
),
|
|
708
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[30px] w-[30px] items-center justify-center rounded-xs border border-[#F8F8F8] bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
709
|
+
"span",
|
|
710
|
+
{
|
|
711
|
+
className: clsx3__default.default(
|
|
712
|
+
"flex h-3.5 w-3.5 items-center justify-center rounded-full border-[1.5px] transition-all duration-200 ease-out group-hover:border-2",
|
|
713
|
+
checked ? "border-[#3D3D3D]" : ""
|
|
714
|
+
),
|
|
715
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
716
|
+
"span",
|
|
717
|
+
{
|
|
718
|
+
className: clsx3__default.default(
|
|
719
|
+
"rounded-full bg-[#3D3D3D] transition-all duration-200 ease-out",
|
|
720
|
+
checked ? "h-2 w-2 opacity-100" : "h-2 w-2 opacity-0",
|
|
721
|
+
"group-hover:h-[6px] group-hover:w-[6px]"
|
|
722
|
+
)
|
|
723
|
+
}
|
|
724
|
+
)
|
|
725
|
+
}
|
|
726
|
+
) }),
|
|
727
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full items-center px-4 text-sm font-medium tracking-[0.25px] text-[#2C2C2C]", children: label })
|
|
728
|
+
] });
|
|
729
|
+
var CustomerAddressCard = ({ addr, isSelected, onSelect, onEdit, onDelete }) => {
|
|
730
|
+
const fullName = [addr.firstName, addr.lastName].filter(Boolean).join(" ");
|
|
731
|
+
const addressParts = [
|
|
732
|
+
addr.landMark,
|
|
733
|
+
addr.addressLine,
|
|
734
|
+
addr.policeStation,
|
|
735
|
+
addr.district,
|
|
736
|
+
addr.state,
|
|
737
|
+
addr.city,
|
|
738
|
+
addr.postalCode,
|
|
739
|
+
addr.country
|
|
740
|
+
].filter((part) => part && String(part).trim().length > 0);
|
|
741
|
+
const combinedAddress = addressParts.length ? addressParts.join(", ") : void 0;
|
|
742
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
743
|
+
"div",
|
|
744
|
+
{
|
|
745
|
+
className: clsx3__default.default(
|
|
746
|
+
"border rounded-sm p-3 relative cursor-pointer hover:border-[#636363] flex gap-3",
|
|
747
|
+
isSelected ? "text-black border-[#636363]" : "border-[#ededed]"
|
|
748
|
+
),
|
|
749
|
+
onClick: onSelect,
|
|
750
|
+
onKeyDown: (e) => {
|
|
751
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
752
|
+
e.preventDefault();
|
|
753
|
+
onSelect();
|
|
754
|
+
}
|
|
755
|
+
},
|
|
756
|
+
role: "radio",
|
|
757
|
+
"aria-checked": isSelected,
|
|
758
|
+
tabIndex: 0,
|
|
759
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
760
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center h-[30px]", children: [
|
|
761
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[18px]", children: [
|
|
762
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold tracking-[0.5px] text-black", children: fullName || "Recipient" }),
|
|
763
|
+
addr.addressLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
764
|
+
BadgeLabel,
|
|
765
|
+
{
|
|
766
|
+
label: addr.addressLabel,
|
|
767
|
+
icon: addr.addressLabel === "Home" ? /* @__PURE__ */ jsxRuntime.jsx(BadgeHomeAddrIcon, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntime.jsx(BadgeOfficeIcon, { className: "w-3 h-3" })
|
|
768
|
+
}
|
|
769
|
+
)
|
|
770
|
+
] }),
|
|
771
|
+
addr.isDefault && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center text-[14px] font-medium tracking-[0.5px] text-[#636363]", children: [
|
|
772
|
+
/* @__PURE__ */ jsxRuntime.jsx(CheckboxFilledIcon, { className: "h-[16px] w-[16px]" }),
|
|
773
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1.5", children: "Default" })
|
|
774
|
+
] })
|
|
775
|
+
] }),
|
|
776
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 text-sm mt-3 max-w-[80%] gap-y-1.5", children: [
|
|
777
|
+
addr.businessName && /* @__PURE__ */ jsxRuntime.jsx(
|
|
778
|
+
FieldRow,
|
|
779
|
+
{
|
|
780
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(BadgeOfficeIcon, { className: "w-4 h-4" }),
|
|
781
|
+
label: "Business Name",
|
|
782
|
+
value: addr.businessName,
|
|
783
|
+
highlight: true
|
|
784
|
+
}
|
|
785
|
+
),
|
|
786
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
787
|
+
FieldRow,
|
|
788
|
+
{
|
|
789
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(MapIcon2, { className: "w-4 h-4" }),
|
|
790
|
+
label: "Mobile Number",
|
|
791
|
+
value: addr.mobileNumber,
|
|
792
|
+
highlight: true
|
|
793
|
+
}
|
|
794
|
+
),
|
|
795
|
+
addr.email !== null && addr.email !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
796
|
+
FieldRow,
|
|
797
|
+
{
|
|
798
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(EmailIcon, { className: "w-4 h-4" }),
|
|
799
|
+
label: "Email",
|
|
800
|
+
value: addr.email
|
|
801
|
+
}
|
|
802
|
+
),
|
|
803
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
804
|
+
FieldRow,
|
|
805
|
+
{
|
|
806
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(MapIcon2, { className: "w-4 h-4" }),
|
|
807
|
+
label: "Address",
|
|
808
|
+
value: combinedAddress
|
|
809
|
+
}
|
|
810
|
+
)
|
|
811
|
+
] }),
|
|
812
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute flex justify-end bottom-[12px] right-3 gap-3", children: [
|
|
813
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
814
|
+
"button",
|
|
815
|
+
{
|
|
816
|
+
type: "button",
|
|
817
|
+
className: "text-[#2C2C2C] hover:bg-black/10 rounded-full cursor-pointer w-9 h-9 flex items-center justify-center",
|
|
818
|
+
"aria-label": "Edit address",
|
|
819
|
+
onClick: (e) => {
|
|
820
|
+
e.stopPropagation();
|
|
821
|
+
onEdit();
|
|
822
|
+
},
|
|
823
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { className: "w-5 h-5 text-black" })
|
|
824
|
+
}
|
|
825
|
+
),
|
|
826
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
827
|
+
"button",
|
|
828
|
+
{
|
|
829
|
+
type: "button",
|
|
830
|
+
className: "text-[#2C2C2C] hover:bg-black/10 rounded-full cursor-pointer w-9 h-9 flex items-center justify-center",
|
|
831
|
+
"aria-label": "Delete address",
|
|
832
|
+
onClick: (e) => {
|
|
833
|
+
e.stopPropagation();
|
|
834
|
+
onDelete();
|
|
835
|
+
},
|
|
836
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, { className: "w-5 h-5 text-[#ff5200]" })
|
|
837
|
+
}
|
|
838
|
+
)
|
|
839
|
+
] })
|
|
840
|
+
] })
|
|
841
|
+
}
|
|
842
|
+
);
|
|
843
|
+
};
|
|
844
|
+
var Field = ({ label, required, optional, children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
845
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-[12px] font-medium text-[#374151] tracking-[0.25px]", children: [
|
|
846
|
+
label,
|
|
847
|
+
required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[#ff5200]", children: "*" }),
|
|
848
|
+
optional && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[#9ca3af] font-normal", children: "(Optional)" })
|
|
849
|
+
] }),
|
|
850
|
+
children
|
|
851
|
+
] });
|
|
852
|
+
var Input = (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
853
|
+
"input",
|
|
854
|
+
{
|
|
855
|
+
...props,
|
|
856
|
+
className: clsx3__default.default(
|
|
857
|
+
"rounded-sm border border-[#ededed] px-3 py-0 text-sm text-black placeholder-[#9ca3af]",
|
|
858
|
+
"outline-none focus:border-[#2753fb] focus:ring-1 focus:ring-[#2753fb]/20",
|
|
859
|
+
"h-[34px] w-full",
|
|
860
|
+
props.className
|
|
861
|
+
)
|
|
862
|
+
}
|
|
863
|
+
);
|
|
864
|
+
var SelectInput = ({ value, onChange, options, placeholder, disabled }) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
865
|
+
"select",
|
|
866
|
+
{
|
|
867
|
+
value,
|
|
868
|
+
onChange: (e) => onChange(e.target.value),
|
|
869
|
+
disabled,
|
|
870
|
+
className: clsx3__default.default(
|
|
871
|
+
"rounded-sm border border-[#ededed] px-3 py-0 text-sm text-black bg-white",
|
|
872
|
+
"outline-none focus:border-[#2753fb] focus:ring-1 focus:ring-[#2753fb]/20",
|
|
873
|
+
"h-[34px] w-full appearance-none",
|
|
874
|
+
!value && "text-[#9ca3af]",
|
|
875
|
+
disabled && "opacity-50 cursor-not-allowed"
|
|
876
|
+
),
|
|
877
|
+
children: [
|
|
878
|
+
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
|
|
879
|
+
options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o, children: o }, o))
|
|
880
|
+
]
|
|
881
|
+
}
|
|
882
|
+
);
|
|
883
|
+
var BANGLADESH_DISTRICTS = [
|
|
884
|
+
"Dhaka",
|
|
885
|
+
"Chittagong",
|
|
886
|
+
"Sylhet",
|
|
887
|
+
"Rajshahi",
|
|
888
|
+
"Khulna",
|
|
889
|
+
"Barisal",
|
|
890
|
+
"Rangpur",
|
|
891
|
+
"Mymensingh",
|
|
892
|
+
"Gazipur",
|
|
893
|
+
"Narayanganj",
|
|
894
|
+
"Tangail",
|
|
895
|
+
"Faridpur",
|
|
896
|
+
"Comilla",
|
|
897
|
+
"Noakhali",
|
|
898
|
+
"Cox's Bazar"
|
|
899
|
+
];
|
|
900
|
+
var COUNTRIES = ["Bangladesh", "India", "United States", "United Kingdom", "Canada", "Australia", "Germany", "France", "Saudi Arabia", "UAE"];
|
|
901
|
+
var AddressForm = ({ initial, onSave, onBack, mode }) => {
|
|
902
|
+
const [form, setForm] = React16.useState(
|
|
903
|
+
initial ?? { country: "Bangladesh", isDefault: false }
|
|
904
|
+
);
|
|
905
|
+
const [addressLabel, setAddressLabel] = React16.useState(
|
|
906
|
+
initial?.addressLabel?.toLowerCase() === "home" ? "home" : initial?.addressLabel?.toLowerCase() === "office" ? "office" : null
|
|
907
|
+
);
|
|
908
|
+
const [isDefault, setIsDefault] = React16.useState(Boolean(initial?.isDefault));
|
|
909
|
+
const set = (k, v) => setForm((prev) => ({ ...prev, [k]: v }));
|
|
910
|
+
const isBD = (form.country ?? "").toLowerCase() === "bangladesh";
|
|
911
|
+
const handleSave = () => {
|
|
912
|
+
onSave({
|
|
913
|
+
id: initial?.id ?? `addr-${Date.now()}`,
|
|
914
|
+
...form,
|
|
915
|
+
isDefault,
|
|
916
|
+
addressLabel: addressLabel === "home" ? "Home" : addressLabel === "office" ? "Office" : void 0
|
|
917
|
+
});
|
|
918
|
+
};
|
|
919
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => {
|
|
920
|
+
e.preventDefault();
|
|
921
|
+
handleSave();
|
|
922
|
+
}, className: "space-y-4", children: [
|
|
923
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
924
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "First Name", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.firstName ?? "", onChange: (e) => set("firstName", e.target.value), placeholder: "First Name" }) }),
|
|
925
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Last Name", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.lastName ?? "", onChange: (e) => set("lastName", e.target.value), placeholder: "Last Name" }) })
|
|
926
|
+
] }),
|
|
927
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Mobile Number", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.mobileNumber ?? "", onChange: (e) => set("mobileNumber", e.target.value), placeholder: "+880..." }) }),
|
|
928
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Email", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { type: "email", value: form.email ?? "", onChange: (e) => set("email", e.target.value), placeholder: "name@example.com" }) }),
|
|
929
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: isBD ? "Country" : "Country / Region", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
930
|
+
SelectInput,
|
|
931
|
+
{
|
|
932
|
+
value: form.country ?? "",
|
|
933
|
+
onChange: (v) => {
|
|
934
|
+
set("country", v);
|
|
935
|
+
set("district", "");
|
|
936
|
+
set("policeStation", "");
|
|
937
|
+
set("state", "");
|
|
938
|
+
set("city", "");
|
|
939
|
+
},
|
|
940
|
+
options: COUNTRIES,
|
|
941
|
+
placeholder: "Select country"
|
|
942
|
+
}
|
|
943
|
+
) }),
|
|
944
|
+
isBD ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
945
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
946
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "District", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
947
|
+
SelectInput,
|
|
948
|
+
{
|
|
949
|
+
value: form.district ?? "",
|
|
950
|
+
onChange: (v) => {
|
|
951
|
+
set("district", v);
|
|
952
|
+
set("policeStation", "");
|
|
953
|
+
},
|
|
954
|
+
options: BANGLADESH_DISTRICTS,
|
|
955
|
+
placeholder: "District",
|
|
956
|
+
disabled: !form.country
|
|
957
|
+
}
|
|
958
|
+
) }),
|
|
959
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Police Station", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.policeStation ?? "", onChange: (e) => set("policeStation", e.target.value), placeholder: "Police Station" }) })
|
|
960
|
+
] }),
|
|
961
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Postal Code", optional: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.postalCode ?? "", onChange: (e) => set("postalCode", e.target.value), placeholder: "Postal Code" }) })
|
|
962
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
963
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
964
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "State", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.state ?? "", onChange: (e) => set("state", e.target.value), placeholder: "State" }) }),
|
|
965
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "City", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.city ?? "", onChange: (e) => set("city", e.target.value), placeholder: "City" }) })
|
|
966
|
+
] }),
|
|
967
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Postal Code", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.postalCode ?? "", onChange: (e) => set("postalCode", e.target.value), placeholder: "Postal Code" }) })
|
|
968
|
+
] }),
|
|
969
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Address Line", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
970
|
+
Input,
|
|
971
|
+
{
|
|
972
|
+
value: form.addressLine ?? "",
|
|
973
|
+
onChange: (e) => set("addressLine", e.target.value),
|
|
974
|
+
placeholder: isBD ? "House/Road/Block/Sector" : "Street, Apt, Suite, etc."
|
|
975
|
+
}
|
|
976
|
+
) }),
|
|
977
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Land Mark", optional: true, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.landMark ?? "", onChange: (e) => set("landMark", e.target.value), placeholder: "Nearby landmark" }) }),
|
|
978
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
979
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer w-fit select-none text-sm text-[#2C2C2C] font-normal", children: [
|
|
980
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
981
|
+
"input",
|
|
982
|
+
{
|
|
983
|
+
type: "checkbox",
|
|
984
|
+
checked: isDefault,
|
|
985
|
+
onChange: (e) => setIsDefault(e.target.checked),
|
|
986
|
+
className: "sr-only"
|
|
987
|
+
}
|
|
988
|
+
),
|
|
989
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
990
|
+
"span",
|
|
991
|
+
{
|
|
992
|
+
className: clsx3__default.default(
|
|
993
|
+
"flex h-4 w-4 items-center justify-center rounded border transition-colors",
|
|
994
|
+
isDefault ? "bg-black border-black" : "border-[#d1d5db] bg-white"
|
|
995
|
+
),
|
|
996
|
+
children: isDefault && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 10 8", className: "h-3 w-3 text-white", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
997
|
+
}
|
|
998
|
+
),
|
|
999
|
+
"Set as default delivery address"
|
|
1000
|
+
] }),
|
|
1001
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[17px]", children: [
|
|
1002
|
+
/* @__PURE__ */ jsxRuntime.jsx(RadioPill, { name: "addr-label", value: "home", checked: addressLabel === "home", label: "Home", onChange: (v) => setAddressLabel(v) }),
|
|
1003
|
+
/* @__PURE__ */ jsxRuntime.jsx(RadioPill, { name: "addr-label", value: "office", checked: addressLabel === "office", label: "Office", onChange: (v) => setAddressLabel(v) })
|
|
1004
|
+
] })
|
|
1005
|
+
] }),
|
|
1006
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "sr-only", id: "addr-form-submit", children: "Submit" })
|
|
1007
|
+
] });
|
|
1008
|
+
};
|
|
1009
|
+
var DeleteConfirm = ({ onConfirm, onCancel }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[10010] flex items-center justify-center", onClick: onCancel, children: [
|
|
1010
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/40" }),
|
|
1011
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1012
|
+
"div",
|
|
1013
|
+
{
|
|
1014
|
+
role: "dialog",
|
|
1015
|
+
"aria-modal": "true",
|
|
1016
|
+
className: "relative z-[10011] w-[420px] max-w-[95vw] rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] overflow-hidden",
|
|
1017
|
+
onClick: (e) => e.stopPropagation(),
|
|
1018
|
+
children: [
|
|
1019
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[44px] items-center bg-[#f8f8f8] px-6", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-black", children: "Delete Address" }) }),
|
|
1020
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 space-y-1", children: [
|
|
1021
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-black", children: "Are you sure you want to delete this address?" }),
|
|
1022
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[#636363]", children: "The address is permanently removed. This action cannot be undone." })
|
|
1023
|
+
] }),
|
|
1024
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[52px] items-center justify-end gap-3 bg-[#f0f4ff] px-6", children: [
|
|
1025
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1026
|
+
"button",
|
|
1027
|
+
{
|
|
1028
|
+
type: "button",
|
|
1029
|
+
onClick: onCancel,
|
|
1030
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
|
|
1031
|
+
children: "Cancel"
|
|
1032
|
+
}
|
|
1033
|
+
),
|
|
1034
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1035
|
+
"button",
|
|
1036
|
+
{
|
|
1037
|
+
type: "button",
|
|
1038
|
+
onClick: onConfirm,
|
|
1039
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
|
|
1040
|
+
children: "Delete"
|
|
1041
|
+
}
|
|
1042
|
+
)
|
|
1043
|
+
] })
|
|
1044
|
+
]
|
|
1045
|
+
}
|
|
1046
|
+
)
|
|
1047
|
+
] });
|
|
1048
|
+
var ChatAddressModal = ({
|
|
1049
|
+
open,
|
|
1050
|
+
onClose,
|
|
1051
|
+
onSend,
|
|
1052
|
+
initialId,
|
|
1053
|
+
className,
|
|
1054
|
+
variant = "group"
|
|
1055
|
+
}) => {
|
|
1056
|
+
const panelRef = React16.useRef(null);
|
|
1057
|
+
const bodyRef = React16.useRef(null);
|
|
1058
|
+
React16.useRef(null);
|
|
1059
|
+
const [mode, setMode] = React16.useState("list");
|
|
1060
|
+
const [addresses, setAddresses] = React16.useState(MOCK_ADDRESSES);
|
|
1061
|
+
const [editData, setEditData] = React16.useState(null);
|
|
1062
|
+
const [deleteTarget, setDeleteTarget] = React16.useState(null);
|
|
1063
|
+
const [formKey, setFormKey] = React16.useState(0);
|
|
1064
|
+
const defaultId = initialId ?? addresses.find((a) => a.isDefault)?.id ?? addresses[0]?.id;
|
|
1065
|
+
const [selectedId, setSelectedId] = React16.useState(defaultId || "");
|
|
1066
|
+
const selectedAddress = React16.useMemo(
|
|
1067
|
+
() => addresses.find((a) => a.id === selectedId) || null,
|
|
1068
|
+
[addresses, selectedId]
|
|
1069
|
+
);
|
|
1070
|
+
React16.useEffect(() => {
|
|
1071
|
+
bodyRef.current?.scrollTo({ top: 0, behavior: "auto" });
|
|
1072
|
+
}, [mode]);
|
|
1073
|
+
React16.useEffect(() => {
|
|
1074
|
+
if (!open) return;
|
|
1075
|
+
const onEsc = (e) => e.key === "Escape" && onClose();
|
|
1076
|
+
window.addEventListener("keydown", onEsc);
|
|
1077
|
+
return () => window.removeEventListener("keydown", onEsc);
|
|
1078
|
+
}, [open, onClose]);
|
|
1079
|
+
React16.useEffect(() => {
|
|
1080
|
+
if (open) setMode("list");
|
|
1081
|
+
}, [open]);
|
|
1082
|
+
if (!open) return null;
|
|
1083
|
+
const isSingle = variant === "single";
|
|
1084
|
+
const handleSave = (data) => {
|
|
1085
|
+
setAddresses((prev) => {
|
|
1086
|
+
const idx = prev.findIndex((a) => a.id === data.id);
|
|
1087
|
+
if (idx >= 0) {
|
|
1088
|
+
const next = [...prev];
|
|
1089
|
+
next[idx] = data;
|
|
1090
|
+
return next;
|
|
1091
|
+
}
|
|
1092
|
+
return [...prev, data];
|
|
1093
|
+
});
|
|
1094
|
+
setSelectedId(data.id);
|
|
1095
|
+
setMode("list");
|
|
1096
|
+
};
|
|
1097
|
+
const handleDelete = (id) => {
|
|
1098
|
+
setAddresses((prev) => prev.filter((a) => a.id !== id));
|
|
1099
|
+
if (selectedId === id) {
|
|
1100
|
+
const remaining = addresses.filter((a) => a.id !== id);
|
|
1101
|
+
setSelectedId(remaining[0]?.id ?? "");
|
|
1102
|
+
}
|
|
1103
|
+
setDeleteTarget(null);
|
|
1104
|
+
};
|
|
1105
|
+
const renderHeader = () => {
|
|
1106
|
+
if (mode === "list") {
|
|
1107
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
|
|
1108
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl tracking-[0.5px] capitalize font-semibold text-black", children: "Delivery Address" }),
|
|
1109
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1110
|
+
"button",
|
|
1111
|
+
{
|
|
1112
|
+
type: "button",
|
|
1113
|
+
onClick: () => {
|
|
1114
|
+
setEditData(null);
|
|
1115
|
+
setFormKey((k) => k + 1);
|
|
1116
|
+
setMode("add");
|
|
1117
|
+
},
|
|
1118
|
+
className: "text-black hover:text-[#ff5200] cursor-pointer text-sm font-medium tracking-[0.5px] underline underline-offset-4",
|
|
1119
|
+
children: "Add New Address"
|
|
1120
|
+
}
|
|
1121
|
+
)
|
|
1122
|
+
] });
|
|
1123
|
+
}
|
|
1124
|
+
if (mode === "add") {
|
|
1125
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center capitalize w-full", children: [
|
|
1126
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl tracking-[0.5px] font-semibold text-black", children: "Add New Address" }),
|
|
1127
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "text-[#005694] text-sm font-normal tracking-[0.25px] underline underline-offset-4 flex items-center gap-2 cursor-pointer", children: [
|
|
1128
|
+
/* @__PURE__ */ jsxRuntime.jsx(MapPinIcon, { className: "w-[18px] h-[18px]" }),
|
|
1129
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Use current location" })
|
|
1130
|
+
] })
|
|
1131
|
+
] });
|
|
1132
|
+
}
|
|
1133
|
+
if (mode === "edit") {
|
|
1134
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
|
|
1135
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl tracking-[0.5px] uppercase font-semibold text-black", children: "Edit Address" }),
|
|
1136
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "text-[#005694] text-sm font-normal tracking-[0.25px] underline underline-offset-4 flex items-center gap-2 cursor-pointer", children: [
|
|
1137
|
+
/* @__PURE__ */ jsxRuntime.jsx(MapPinIcon, { className: "w-[18px] h-[18px]" }),
|
|
1138
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Use current location" })
|
|
1139
|
+
] })
|
|
1140
|
+
] });
|
|
1141
|
+
}
|
|
1142
|
+
return null;
|
|
1143
|
+
};
|
|
1144
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1145
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1146
|
+
"div",
|
|
1147
|
+
{
|
|
1148
|
+
className: clsx3__default.default(
|
|
1149
|
+
isSingle ? "fixed inset-0 z-[10003] flex" : "absolute inset-0 z-[70] flex items-center justify-center"
|
|
1150
|
+
),
|
|
1151
|
+
onClick: (e) => {
|
|
1152
|
+
e.stopPropagation();
|
|
1153
|
+
onClose();
|
|
1154
|
+
},
|
|
1155
|
+
children: [
|
|
1156
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/30" }),
|
|
1157
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1158
|
+
"div",
|
|
1159
|
+
{
|
|
1160
|
+
ref: panelRef,
|
|
1161
|
+
role: "dialog",
|
|
1162
|
+
"aria-modal": "true",
|
|
1163
|
+
"aria-labelledby": "chat-address-modal-title",
|
|
1164
|
+
onClick: (e) => e.stopPropagation(),
|
|
1165
|
+
className: clsx3__default.default(
|
|
1166
|
+
isSingle ? "fixed bottom-6 right-6 w-[700px] max-w-[95vw]" : "relative w-[700px] max-w-[95vw]",
|
|
1167
|
+
"overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] z-[10004]",
|
|
1168
|
+
className
|
|
1169
|
+
),
|
|
1170
|
+
children: [
|
|
1171
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[44px] px-8 py-[7px] flex items-center w-full bg-[var(--color-banbox-f8,#f8f8f8)] rounded-t-md", children: renderHeader() }),
|
|
1172
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { ref: bodyRef, className: "px-8 py-3 overflow-y-auto h-[446px] custom-scroll", children: [
|
|
1173
|
+
mode === "list" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: addresses.map((addr) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1174
|
+
CustomerAddressCard,
|
|
1175
|
+
{
|
|
1176
|
+
addr,
|
|
1177
|
+
isSelected: selectedId === addr.id,
|
|
1178
|
+
onSelect: () => setSelectedId(addr.id),
|
|
1179
|
+
onEdit: () => {
|
|
1180
|
+
setEditData(addr);
|
|
1181
|
+
setFormKey((k) => k + 1);
|
|
1182
|
+
setMode("edit");
|
|
1183
|
+
},
|
|
1184
|
+
onDelete: () => setDeleteTarget(addr)
|
|
1185
|
+
},
|
|
1186
|
+
addr.id
|
|
1187
|
+
)) }),
|
|
1188
|
+
(mode === "add" || mode === "edit") && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1189
|
+
AddressForm,
|
|
1190
|
+
{
|
|
1191
|
+
initial: editData ?? void 0,
|
|
1192
|
+
onSave: handleSave,
|
|
1193
|
+
onBack: () => setMode("list"),
|
|
1194
|
+
mode
|
|
1195
|
+
},
|
|
1196
|
+
formKey
|
|
1197
|
+
)
|
|
1198
|
+
] }),
|
|
1199
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[52px] bg-[var(--color-banbox-primary-container,#f0f4ff)] w-full px-6 py-2 flex justify-end items-center gap-6 rounded-b-[6px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3", children: [
|
|
1200
|
+
mode === "list" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1201
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1202
|
+
"button",
|
|
1203
|
+
{
|
|
1204
|
+
type: "button",
|
|
1205
|
+
onClick: onClose,
|
|
1206
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
|
|
1207
|
+
children: "Cancel"
|
|
1208
|
+
}
|
|
1209
|
+
),
|
|
1210
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1211
|
+
"button",
|
|
1212
|
+
{
|
|
1213
|
+
type: "button",
|
|
1214
|
+
disabled: !selectedAddress,
|
|
1215
|
+
onClick: () => {
|
|
1216
|
+
if (!selectedAddress) return;
|
|
1217
|
+
onSend(toAddressCard(selectedAddress));
|
|
1218
|
+
onClose();
|
|
1219
|
+
},
|
|
1220
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00] disabled:opacity-50",
|
|
1221
|
+
children: "Send"
|
|
1222
|
+
}
|
|
1223
|
+
)
|
|
1224
|
+
] }),
|
|
1225
|
+
mode === "add" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1226
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1227
|
+
"button",
|
|
1228
|
+
{
|
|
1229
|
+
type: "button",
|
|
1230
|
+
onClick: () => setMode("list"),
|
|
1231
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
|
|
1232
|
+
children: "Back"
|
|
1233
|
+
}
|
|
1234
|
+
),
|
|
1235
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1236
|
+
"button",
|
|
1237
|
+
{
|
|
1238
|
+
type: "button",
|
|
1239
|
+
onClick: () => {
|
|
1240
|
+
document.getElementById("addr-form-submit")?.click();
|
|
1241
|
+
},
|
|
1242
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
|
|
1243
|
+
children: "Save Address"
|
|
1244
|
+
}
|
|
1245
|
+
)
|
|
1246
|
+
] }),
|
|
1247
|
+
mode === "edit" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1248
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1249
|
+
"button",
|
|
1250
|
+
{
|
|
1251
|
+
type: "button",
|
|
1252
|
+
onClick: () => setMode("list"),
|
|
1253
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
|
|
1254
|
+
children: "Back"
|
|
1255
|
+
}
|
|
1256
|
+
),
|
|
1257
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1258
|
+
"button",
|
|
1259
|
+
{
|
|
1260
|
+
type: "button",
|
|
1261
|
+
onClick: () => {
|
|
1262
|
+
document.getElementById("addr-form-submit")?.click();
|
|
1263
|
+
},
|
|
1264
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
|
|
1265
|
+
children: "Update"
|
|
1266
|
+
}
|
|
1267
|
+
)
|
|
1268
|
+
] })
|
|
1269
|
+
] }) })
|
|
1270
|
+
]
|
|
1271
|
+
}
|
|
1272
|
+
)
|
|
1273
|
+
]
|
|
1274
|
+
}
|
|
1275
|
+
),
|
|
1276
|
+
deleteTarget && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1277
|
+
DeleteConfirm,
|
|
1278
|
+
{
|
|
1279
|
+
onConfirm: () => handleDelete(deleteTarget.id),
|
|
1280
|
+
onCancel: () => setDeleteTarget(null)
|
|
1281
|
+
}
|
|
1282
|
+
)
|
|
1283
|
+
] });
|
|
1284
|
+
};
|
|
1285
|
+
var ChatAddressModal_default = ChatAddressModal;
|
|
571
1286
|
var extColor = (ext) => {
|
|
572
1287
|
const e = ext.toLowerCase();
|
|
573
1288
|
if (e === "pdf") {
|
|
@@ -584,7 +1299,7 @@ var extColor = (ext) => {
|
|
|
584
1299
|
var FilePreviewChip = ({ name, sizeMB, ext, onRemove }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-2 inline-flex items-center gap-3 whitespace-nowrap rounded-sm border border-[#e1e1e1] bg-white px-3 py-2 h-[65px] max-w-[185px]", children: [
|
|
585
1300
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
|
|
586
1301
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
587
|
-
/* @__PURE__ */ jsxRuntime.jsx(FileIcon, { className:
|
|
1302
|
+
/* @__PURE__ */ jsxRuntime.jsx(FileIcon, { className: clsx3__default.default("h-[18px] w-[18px]", extColor(ext)) }),
|
|
588
1303
|
" ",
|
|
589
1304
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-normal text-black", children: name })
|
|
590
1305
|
] }),
|
|
@@ -666,8 +1381,8 @@ var ChatComposerBar = ({
|
|
|
666
1381
|
sendAttachments,
|
|
667
1382
|
fmtTime: fmtTime2
|
|
668
1383
|
}) => {
|
|
669
|
-
const composingRef =
|
|
670
|
-
const [isFocused, setIsFocused] =
|
|
1384
|
+
const composingRef = React16.useRef(false);
|
|
1385
|
+
const [isFocused, setIsFocused] = React16.useState(false);
|
|
671
1386
|
const isActiveBorder = isFocused || recording;
|
|
672
1387
|
if (!recording) {
|
|
673
1388
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-stretch gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -735,7 +1450,7 @@ var ChatComposerBar = ({
|
|
|
735
1450
|
{
|
|
736
1451
|
type: "button",
|
|
737
1452
|
onClick: sendText,
|
|
738
|
-
className:
|
|
1453
|
+
className: clsx3__default.default(
|
|
739
1454
|
"ms-1 grid h-[40px] w-[40px] place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]"
|
|
740
1455
|
),
|
|
741
1456
|
title: hasAttachments ? "Send attachments" : "Send",
|
|
@@ -751,7 +1466,7 @@ var ChatComposerBar = ({
|
|
|
751
1466
|
type: "button",
|
|
752
1467
|
onClick: sendAttachments,
|
|
753
1468
|
disabled: !hasAttachments,
|
|
754
|
-
className:
|
|
1469
|
+
className: clsx3__default.default(
|
|
755
1470
|
"ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
|
|
756
1471
|
hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]"
|
|
757
1472
|
),
|
|
@@ -776,7 +1491,7 @@ var ChatComposerBar = ({
|
|
|
776
1491
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
777
1492
|
RecordMicIcon,
|
|
778
1493
|
{
|
|
779
|
-
className:
|
|
1494
|
+
className: clsx3__default.default(
|
|
780
1495
|
"h-6 w-6",
|
|
781
1496
|
seconds % 2 === 0 ? "text-[#929292]" : "text-[#ff5301]"
|
|
782
1497
|
)
|
|
@@ -830,12 +1545,13 @@ var BusinessCardDropup = ({
|
|
|
830
1545
|
onClose,
|
|
831
1546
|
onSend,
|
|
832
1547
|
anchorRef,
|
|
833
|
-
className
|
|
1548
|
+
className,
|
|
1549
|
+
onEdit
|
|
834
1550
|
}) => {
|
|
835
|
-
const panelRef =
|
|
836
|
-
const [pos, setPos] =
|
|
837
|
-
const [form] =
|
|
838
|
-
const getPosition =
|
|
1551
|
+
const panelRef = React16.useRef(null);
|
|
1552
|
+
const [pos, setPos] = React16.useState(null);
|
|
1553
|
+
const [form] = React16.useState(defaultCard);
|
|
1554
|
+
const getPosition = React16.useCallback(() => {
|
|
839
1555
|
const anchor = anchorRef?.current;
|
|
840
1556
|
const panel = panelRef.current;
|
|
841
1557
|
if (!anchor || !panel) {
|
|
@@ -851,7 +1567,7 @@ var BusinessCardDropup = ({
|
|
|
851
1567
|
}
|
|
852
1568
|
return { left: Math.round(left - 18), top: Math.round(top) };
|
|
853
1569
|
}, [anchorRef]);
|
|
854
|
-
|
|
1570
|
+
React16.useEffect(() => {
|
|
855
1571
|
if (!open) {
|
|
856
1572
|
return;
|
|
857
1573
|
}
|
|
@@ -879,7 +1595,7 @@ var BusinessCardDropup = ({
|
|
|
879
1595
|
window.removeEventListener("resize", onResize);
|
|
880
1596
|
};
|
|
881
1597
|
}, [open, getPosition]);
|
|
882
|
-
|
|
1598
|
+
React16.useEffect(() => {
|
|
883
1599
|
if (!open) {
|
|
884
1600
|
return;
|
|
885
1601
|
}
|
|
@@ -900,7 +1616,7 @@ var BusinessCardDropup = ({
|
|
|
900
1616
|
document.removeEventListener("keydown", onEsc);
|
|
901
1617
|
};
|
|
902
1618
|
}, [open, onClose]);
|
|
903
|
-
const disabled =
|
|
1619
|
+
const disabled = React16.useMemo(() => !form.name || !form.company || !form.email || !form.phone, [form]);
|
|
904
1620
|
if (!open) {
|
|
905
1621
|
return null;
|
|
906
1622
|
}
|
|
@@ -980,19 +1696,33 @@ var BusinessCardDropup = ({
|
|
|
980
1696
|
] }) })
|
|
981
1697
|
}
|
|
982
1698
|
) }),
|
|
983
|
-
/* @__PURE__ */ jsxRuntime.
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
1699
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
|
|
1700
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1701
|
+
"button",
|
|
1702
|
+
{
|
|
1703
|
+
type: "button",
|
|
1704
|
+
onClick: () => {
|
|
1705
|
+
onClose();
|
|
1706
|
+
onEdit?.();
|
|
1707
|
+
},
|
|
1708
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
|
|
1709
|
+
children: "Edit"
|
|
1710
|
+
}
|
|
1711
|
+
),
|
|
1712
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1713
|
+
"button",
|
|
1714
|
+
{
|
|
1715
|
+
type: "button",
|
|
1716
|
+
disabled,
|
|
1717
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00] disabled:opacity-50",
|
|
1718
|
+
onClick: () => {
|
|
1719
|
+
onSend(form);
|
|
1720
|
+
onClose();
|
|
1721
|
+
},
|
|
1722
|
+
children: "Send"
|
|
1723
|
+
}
|
|
1724
|
+
)
|
|
1725
|
+
] }),
|
|
996
1726
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
997
1727
|
"div",
|
|
998
1728
|
{
|
|
@@ -1014,9 +1744,9 @@ var GAP_Y2 = 1;
|
|
|
1014
1744
|
var GAP_X = 1;
|
|
1015
1745
|
var PADDING2 = 1;
|
|
1016
1746
|
var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
|
|
1017
|
-
const panelRef =
|
|
1018
|
-
const [pos, setPos] =
|
|
1019
|
-
const place =
|
|
1747
|
+
const panelRef = React16__default.default.useRef(null);
|
|
1748
|
+
const [pos, setPos] = React16__default.default.useState(null);
|
|
1749
|
+
const place = React16__default.default.useCallback(() => {
|
|
1020
1750
|
const anchor = anchorRef?.current;
|
|
1021
1751
|
const panel = panelRef.current;
|
|
1022
1752
|
if (!anchor || !panel) {
|
|
@@ -1033,7 +1763,7 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
|
|
|
1033
1763
|
panel.style.setProperty("--arrow-left", `${arrowLeft}px`);
|
|
1034
1764
|
setPos({ left: Math.round(left), top: Math.round(top) });
|
|
1035
1765
|
}, [anchorRef]);
|
|
1036
|
-
|
|
1766
|
+
React16.useEffect(() => {
|
|
1037
1767
|
if (!open) {
|
|
1038
1768
|
return;
|
|
1039
1769
|
}
|
|
@@ -1047,7 +1777,7 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
|
|
|
1047
1777
|
window.removeEventListener("resize", onResize);
|
|
1048
1778
|
};
|
|
1049
1779
|
}, [open, place]);
|
|
1050
|
-
|
|
1780
|
+
React16.useEffect(() => {
|
|
1051
1781
|
if (!open) {
|
|
1052
1782
|
return;
|
|
1053
1783
|
}
|
|
@@ -1073,9 +1803,10 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
|
|
|
1073
1803
|
ref: panelRef,
|
|
1074
1804
|
role: "dialog",
|
|
1075
1805
|
"aria-label": "Emoji picker",
|
|
1076
|
-
className:
|
|
1806
|
+
className: clsx3__default.default("emoji-dropup", className),
|
|
1077
1807
|
style: {
|
|
1078
|
-
zIndex:
|
|
1808
|
+
zIndex: 99999,
|
|
1809
|
+
// Must be above chat panel z-index (10002)
|
|
1079
1810
|
width: WIDTH2,
|
|
1080
1811
|
left: pos?.left ?? -9999,
|
|
1081
1812
|
top: pos?.top ?? -9999,
|
|
@@ -1102,7 +1833,7 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
|
|
|
1102
1833
|
};
|
|
1103
1834
|
var EmojiDropup_default = EmojiDropup;
|
|
1104
1835
|
|
|
1105
|
-
// src/ui/
|
|
1836
|
+
// src/ui/scrollToMessage.ts
|
|
1106
1837
|
function scrollToMessageById(messageId) {
|
|
1107
1838
|
if (!messageId) {
|
|
1108
1839
|
return;
|
|
@@ -1166,8 +1897,8 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
|
|
|
1166
1897
|
const mode = hasText ? "text" : hasFiles ? "files" : hasImages ? "images" : "audio";
|
|
1167
1898
|
const widthClamp = onClose ? "w-full" : "max-w-[200px] w-full";
|
|
1168
1899
|
const heightClamp = compact ? "py-1.5" : "py-1.5";
|
|
1169
|
-
const [durTxt, setDurTxt] =
|
|
1170
|
-
|
|
1900
|
+
const [durTxt, setDurTxt] = React16__default.default.useState(refMsg.audio?.duration ?? "0:06");
|
|
1901
|
+
React16__default.default.useEffect(() => {
|
|
1171
1902
|
if (mode !== "audio" || !refMsg.audio?.src) {
|
|
1172
1903
|
setDurTxt(refMsg.audio?.duration ?? "0:06");
|
|
1173
1904
|
return;
|
|
@@ -1205,7 +1936,7 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
|
|
|
1205
1936
|
a.removeEventListener("error", onError);
|
|
1206
1937
|
};
|
|
1207
1938
|
}, [mode, refMsg.audio?.src, refMsg.audio?.duration]);
|
|
1208
|
-
const clickToJump =
|
|
1939
|
+
const clickToJump = React16__default.default.useCallback(() => {
|
|
1209
1940
|
if (!jumpOnClick) {
|
|
1210
1941
|
return;
|
|
1211
1942
|
}
|
|
@@ -1217,7 +1948,7 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
|
|
|
1217
1948
|
"div",
|
|
1218
1949
|
{
|
|
1219
1950
|
onClick: clickToJump,
|
|
1220
|
-
className:
|
|
1951
|
+
className: clsx3__default.default(
|
|
1221
1952
|
widthClamp,
|
|
1222
1953
|
"relative rounded-md bg-[#f8f8f8] px-3",
|
|
1223
1954
|
"border-l-2 border-[#FF5300]",
|
|
@@ -1315,10 +2046,11 @@ var ChatFooter = ({
|
|
|
1315
2046
|
maxRows = 4,
|
|
1316
2047
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1317
2048
|
actions: _actions,
|
|
2049
|
+
hiddenActionKeys = [],
|
|
1318
2050
|
replyTo,
|
|
1319
2051
|
clearReply
|
|
1320
2052
|
}) => {
|
|
1321
|
-
const
|
|
2053
|
+
const allActions = [
|
|
1322
2054
|
{ key: "attachment", title: "Attach file", icon: /* @__PURE__ */ jsxRuntime.jsx(AttachIcon, { className: "h-4 w-4" }) },
|
|
1323
2055
|
{ key: "emoji", title: "Add emoji", icon: /* @__PURE__ */ jsxRuntime.jsx(SmileIcon, { className: "h-4 w-4" }) },
|
|
1324
2056
|
{
|
|
@@ -1326,37 +2058,48 @@ var ChatFooter = ({
|
|
|
1326
2058
|
title: "Share business card",
|
|
1327
2059
|
icon: /* @__PURE__ */ jsxRuntime.jsx(ProfileCardIcon, { className: "h-4 w-4" })
|
|
1328
2060
|
},
|
|
2061
|
+
{
|
|
2062
|
+
key: "addressCard",
|
|
2063
|
+
title: "Share address",
|
|
2064
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(MapIcon2, { className: "h-4 w-4" })
|
|
2065
|
+
},
|
|
1329
2066
|
{
|
|
1330
2067
|
key: "translate",
|
|
1331
2068
|
title: "Translation settings",
|
|
1332
2069
|
icon: /* @__PURE__ */ jsxRuntime.jsx(NewLanguageIcon, { className: "h-4 w-4" })
|
|
1333
2070
|
}
|
|
1334
2071
|
];
|
|
1335
|
-
const
|
|
1336
|
-
const
|
|
1337
|
-
const
|
|
1338
|
-
const [
|
|
1339
|
-
const [
|
|
1340
|
-
const [
|
|
1341
|
-
const
|
|
1342
|
-
const
|
|
1343
|
-
const
|
|
1344
|
-
const
|
|
1345
|
-
const [
|
|
1346
|
-
const [
|
|
1347
|
-
const
|
|
1348
|
-
const
|
|
1349
|
-
const [
|
|
2072
|
+
const actionData = hiddenActionKeys.length ? allActions.filter((a) => !hiddenActionKeys.includes(a.key)) : allActions;
|
|
2073
|
+
const textRef = React16.useRef(null);
|
|
2074
|
+
const emojiBtnRef = React16.useRef(null);
|
|
2075
|
+
const [text, setText] = React16.useState("");
|
|
2076
|
+
const [showEmoji, setShowEmoji] = React16.useState(false);
|
|
2077
|
+
const [recording, setRecording] = React16.useState(false);
|
|
2078
|
+
const [seconds, setSeconds] = React16.useState(0);
|
|
2079
|
+
const mediaRecRef = React16.useRef(null);
|
|
2080
|
+
const streamRef = React16.useRef(null);
|
|
2081
|
+
const chunksRef = React16.useRef([]);
|
|
2082
|
+
const [micError, setMicError] = React16.useState("");
|
|
2083
|
+
const [imgPreviews, setImgPreviews] = React16.useState([]);
|
|
2084
|
+
const [filePreviews, setFilePreviews] = React16.useState([]);
|
|
2085
|
+
const fileInputRef = React16.useRef(null);
|
|
2086
|
+
const [showTranslate, setShowTranslate] = React16.useState(false);
|
|
2087
|
+
const [translateSettings, setTranslateSettings] = React16.useState({
|
|
1350
2088
|
incomingTarget: "",
|
|
1351
2089
|
autoIncoming: true,
|
|
1352
2090
|
enableOutgoing: false,
|
|
1353
2091
|
outgoingFrom: "English",
|
|
1354
2092
|
outgoingTo: "Bangla"
|
|
1355
2093
|
});
|
|
1356
|
-
const bizBtnRef =
|
|
1357
|
-
const [showBiz, setShowBiz] =
|
|
1358
|
-
const
|
|
1359
|
-
const
|
|
2094
|
+
const bizBtnRef = React16.useRef(null);
|
|
2095
|
+
const [showBiz, setShowBiz] = React16.useState(false);
|
|
2096
|
+
const [showBizEdit, setShowBizEdit] = React16.useState(false);
|
|
2097
|
+
const handleOpenBizEdit = () => {
|
|
2098
|
+
setShowBiz(false);
|
|
2099
|
+
setShowBizEdit(true);
|
|
2100
|
+
};
|
|
2101
|
+
const addrBtnRef = React16.useRef(null);
|
|
2102
|
+
const [showAddress, setShowAddress] = React16.useState(false);
|
|
1360
2103
|
const insertEmoji = (emoji) => {
|
|
1361
2104
|
const el = textRef.current;
|
|
1362
2105
|
if (!el) {
|
|
@@ -1372,7 +2115,7 @@ var ChatFooter = ({
|
|
|
1372
2115
|
el.setSelectionRange(pos, pos);
|
|
1373
2116
|
});
|
|
1374
2117
|
};
|
|
1375
|
-
const handleAutoGrow =
|
|
2118
|
+
const handleAutoGrow = React16__default.default.useCallback(() => {
|
|
1376
2119
|
const el = textRef.current;
|
|
1377
2120
|
if (!el) {
|
|
1378
2121
|
return;
|
|
@@ -1383,10 +2126,10 @@ var ChatFooter = ({
|
|
|
1383
2126
|
const max = lh * maxRows + parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
|
|
1384
2127
|
el.style.height = `${Math.min(el.scrollHeight, max)}px`;
|
|
1385
2128
|
}, [maxRows]);
|
|
1386
|
-
|
|
2129
|
+
React16.useEffect(() => {
|
|
1387
2130
|
handleAutoGrow();
|
|
1388
2131
|
}, [text, handleAutoGrow]);
|
|
1389
|
-
|
|
2132
|
+
React16.useEffect(() => {
|
|
1390
2133
|
if (!recording) {
|
|
1391
2134
|
return;
|
|
1392
2135
|
}
|
|
@@ -1394,7 +2137,7 @@ var ChatFooter = ({
|
|
|
1394
2137
|
const id = setInterval(() => setSeconds((s) => s + 1), 1e3);
|
|
1395
2138
|
return () => clearInterval(id);
|
|
1396
2139
|
}, [recording]);
|
|
1397
|
-
|
|
2140
|
+
React16.useEffect(() => {
|
|
1398
2141
|
return () => {
|
|
1399
2142
|
imgPreviews.forEach((u) => u.startsWith("blob:") && URL.revokeObjectURL(u));
|
|
1400
2143
|
filePreviews.forEach((f) => f.href?.startsWith("blob:") && URL.revokeObjectURL(f.href));
|
|
@@ -1409,7 +2152,7 @@ var ChatFooter = ({
|
|
|
1409
2152
|
}, []);
|
|
1410
2153
|
const isTyping = text.length > 0;
|
|
1411
2154
|
const hasAttachments = imgPreviews.length > 0 || filePreviews.length > 0;
|
|
1412
|
-
const canSendArrow =
|
|
2155
|
+
const canSendArrow = React16.useMemo(() => hasAttachments || isTyping, [hasAttachments, isTyping]);
|
|
1413
2156
|
const onFilesPicked = (e) => {
|
|
1414
2157
|
const files = Array.from(e.target.files ?? []);
|
|
1415
2158
|
if (!files.length) {
|
|
@@ -1536,7 +2279,7 @@ var ChatFooter = ({
|
|
|
1536
2279
|
}
|
|
1537
2280
|
setSeconds(0);
|
|
1538
2281
|
};
|
|
1539
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
2282
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("border-t border-[#ededed] bg-white p-3.5", className), children: [
|
|
1540
2283
|
replyTo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ReplyCard_default, { refMsg: replyTo, onClose: clearReply }) }),
|
|
1541
2284
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1542
2285
|
AttachmentPreviewStrip_default,
|
|
@@ -1586,7 +2329,8 @@ var ChatFooter = ({
|
|
|
1586
2329
|
open: showBiz,
|
|
1587
2330
|
onClose: () => setShowBiz(false),
|
|
1588
2331
|
anchorRef: bizBtnRef,
|
|
1589
|
-
|
|
2332
|
+
onEdit: handleOpenBizEdit,
|
|
2333
|
+
onSend: (card) => {
|
|
1590
2334
|
onSend({ type: "businessCard", card, replyTo });
|
|
1591
2335
|
clearReply?.();
|
|
1592
2336
|
onAfterSend?.();
|
|
@@ -1630,16 +2374,95 @@ var ChatFooter = ({
|
|
|
1630
2374
|
setShowTranslate(false);
|
|
1631
2375
|
}
|
|
1632
2376
|
}
|
|
2377
|
+
),
|
|
2378
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2379
|
+
ChatAddressModal_default,
|
|
2380
|
+
{
|
|
2381
|
+
variant,
|
|
2382
|
+
open: showAddress,
|
|
2383
|
+
onClose: () => setShowAddress(false),
|
|
2384
|
+
onSend: (card) => {
|
|
2385
|
+
onSend({ type: "addressCard", card, replyTo });
|
|
2386
|
+
clearReply?.();
|
|
2387
|
+
onAfterSend?.();
|
|
2388
|
+
}
|
|
2389
|
+
}
|
|
2390
|
+
),
|
|
2391
|
+
showBizEdit && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2392
|
+
"div",
|
|
2393
|
+
{
|
|
2394
|
+
className: "fixed inset-0 z-[10003] flex items-center justify-center",
|
|
2395
|
+
onClick: () => setShowBizEdit(false),
|
|
2396
|
+
children: [
|
|
2397
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/30" }),
|
|
2398
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2399
|
+
"div",
|
|
2400
|
+
{
|
|
2401
|
+
role: "dialog",
|
|
2402
|
+
"aria-modal": "true",
|
|
2403
|
+
onClick: (e) => e.stopPropagation(),
|
|
2404
|
+
className: "relative z-[10004] w-[480px] max-w-[95vw] overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
|
|
2405
|
+
children: [
|
|
2406
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[44px] items-center justify-between bg-[#f8f8f8] px-6", children: [
|
|
2407
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-black", children: "Business Info" }),
|
|
2408
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2409
|
+
"button",
|
|
2410
|
+
{
|
|
2411
|
+
type: "button",
|
|
2412
|
+
onClick: () => setShowBizEdit(false),
|
|
2413
|
+
className: "flex h-8 w-8 items-center justify-center rounded-full hover:bg-black/10 cursor-pointer",
|
|
2414
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "h-5 w-5" })
|
|
2415
|
+
}
|
|
2416
|
+
)
|
|
2417
|
+
] }),
|
|
2418
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-3 text-sm text-[#374151]", children: [
|
|
2419
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#6b7280]", children: "Update your business card information below." }),
|
|
2420
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: ["First Name", "Last Name", "Business Name", "Mobile", "Email", "Website"].map((label) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
2421
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-[#374151]", children: label }),
|
|
2422
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2423
|
+
"input",
|
|
2424
|
+
{
|
|
2425
|
+
placeholder: label,
|
|
2426
|
+
className: "rounded-md border border-[#d1d5db] px-3 py-2 text-sm text-black placeholder-[#9ca3af] outline-none focus:border-[#ff5200] focus:ring-1 focus:ring-[#ff5200]/30"
|
|
2427
|
+
}
|
|
2428
|
+
)
|
|
2429
|
+
] }, label)) })
|
|
2430
|
+
] }),
|
|
2431
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[52px] items-center justify-end gap-3 bg-[#f0f4ff] px-6", children: [
|
|
2432
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2433
|
+
"button",
|
|
2434
|
+
{
|
|
2435
|
+
type: "button",
|
|
2436
|
+
onClick: () => setShowBizEdit(false),
|
|
2437
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
|
|
2438
|
+
children: "Cancel"
|
|
2439
|
+
}
|
|
2440
|
+
),
|
|
2441
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2442
|
+
"button",
|
|
2443
|
+
{
|
|
2444
|
+
type: "button",
|
|
2445
|
+
onClick: () => setShowBizEdit(false),
|
|
2446
|
+
className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
|
|
2447
|
+
children: "Save"
|
|
2448
|
+
}
|
|
2449
|
+
)
|
|
2450
|
+
] })
|
|
2451
|
+
]
|
|
2452
|
+
}
|
|
2453
|
+
)
|
|
2454
|
+
]
|
|
2455
|
+
}
|
|
1633
2456
|
)
|
|
1634
2457
|
] });
|
|
1635
2458
|
};
|
|
1636
2459
|
var ChatFooter_default = ChatFooter;
|
|
1637
2460
|
function ChatHeader({ left, right, below, className }) {
|
|
1638
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
1639
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4
|
|
2461
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2462
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default("border-b border-[#ededed] h-[64px]", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-2.5", children: [
|
|
1640
2463
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: left }),
|
|
1641
2464
|
right
|
|
1642
|
-
] }),
|
|
2465
|
+
] }) }),
|
|
1643
2466
|
below && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: below })
|
|
1644
2467
|
] });
|
|
1645
2468
|
}
|
|
@@ -1657,11 +2480,11 @@ var ChatIdentity = (props) => {
|
|
|
1657
2480
|
size = 46,
|
|
1658
2481
|
className
|
|
1659
2482
|
} = props;
|
|
1660
|
-
const subtitleClass =
|
|
2483
|
+
const subtitleClass = clsx3__default.default(
|
|
1661
2484
|
"text-[10px] font-medium",
|
|
1662
2485
|
subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]"
|
|
1663
2486
|
);
|
|
1664
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
2487
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("flex items-start gap-3", className), children: [
|
|
1665
2488
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
|
|
1666
2489
|
props.variant === "avatar" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1667
2490
|
"img",
|
|
@@ -1674,7 +2497,7 @@ var ChatIdentity = (props) => {
|
|
|
1674
2497
|
props.variant === "initial" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1675
2498
|
"div",
|
|
1676
2499
|
{
|
|
1677
|
-
className:
|
|
2500
|
+
className: clsx3__default.default(
|
|
1678
2501
|
"grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
|
|
1679
2502
|
props.textClassName
|
|
1680
2503
|
),
|
|
@@ -1749,7 +2572,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
|
|
|
1749
2572
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1750
2573
|
"div",
|
|
1751
2574
|
{
|
|
1752
|
-
className:
|
|
2575
|
+
className: clsx3__default.default(
|
|
1753
2576
|
"flex items-center justify-between border-b border-[#ededed] bg-[#f8f8f8] ps-[16px] pe-[30px] h-[30px]",
|
|
1754
2577
|
className
|
|
1755
2578
|
),
|
|
@@ -1782,11 +2605,16 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
|
|
|
1782
2605
|
);
|
|
1783
2606
|
};
|
|
1784
2607
|
var ChatInquiryBar_default = ChatInquiryBar;
|
|
1785
|
-
var ChatListHeader = ({
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
2608
|
+
var ChatListHeader = ({
|
|
2609
|
+
className,
|
|
2610
|
+
onClose,
|
|
2611
|
+
onSearchChange,
|
|
2612
|
+
hideSearch = false
|
|
2613
|
+
}) => {
|
|
2614
|
+
const [searching, setSearching] = React16__default.default.useState(false);
|
|
2615
|
+
const [q, setQ] = React16__default.default.useState("");
|
|
2616
|
+
const inputRef = React16__default.default.useRef(null);
|
|
2617
|
+
React16__default.default.useEffect(() => {
|
|
1790
2618
|
const timer = searching ? setTimeout(() => {
|
|
1791
2619
|
inputRef.current?.focus();
|
|
1792
2620
|
}, 220) : void 0;
|
|
@@ -1794,8 +2622,10 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1794
2622
|
clearTimeout(timer);
|
|
1795
2623
|
};
|
|
1796
2624
|
}, [searching]);
|
|
1797
|
-
|
|
1798
|
-
if (!searching)
|
|
2625
|
+
React16__default.default.useEffect(() => {
|
|
2626
|
+
if (!searching) {
|
|
2627
|
+
return;
|
|
2628
|
+
}
|
|
1799
2629
|
const onKey = (e) => {
|
|
1800
2630
|
if (e.key === "Escape") {
|
|
1801
2631
|
setSearching(false);
|
|
@@ -1814,7 +2644,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1814
2644
|
inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
|
|
1815
2645
|
outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } }
|
|
1816
2646
|
};
|
|
1817
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
2647
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default("h-[64px] border-b border-[#ededed]", 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
2648
|
framerMotion.motion.div,
|
|
1819
2649
|
{
|
|
1820
2650
|
className: "flex w-full items-center justify-between",
|
|
@@ -1828,7 +2658,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1828
2658
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
|
|
1829
2659
|
] }) }),
|
|
1830
2660
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1831
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2661
|
+
!hideSearch && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1832
2662
|
"button",
|
|
1833
2663
|
{
|
|
1834
2664
|
title: "Search",
|
|
@@ -1861,7 +2691,6 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1861
2691
|
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
2692
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center ms-[12px] w-full", children: [
|
|
1863
2693
|
/* @__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
2694
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1866
2695
|
"input",
|
|
1867
2696
|
{
|
|
@@ -1876,7 +2705,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1876
2705
|
}
|
|
1877
2706
|
)
|
|
1878
2707
|
] }),
|
|
1879
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2708
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1880
2709
|
"button",
|
|
1881
2710
|
{
|
|
1882
2711
|
title: "Close search",
|
|
@@ -1888,7 +2717,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1888
2717
|
className: "grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent",
|
|
1889
2718
|
children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "w-5 h-5" })
|
|
1890
2719
|
}
|
|
1891
|
-
)
|
|
2720
|
+
) })
|
|
1892
2721
|
] }) })
|
|
1893
2722
|
},
|
|
1894
2723
|
"search"
|
|
@@ -1950,7 +2779,7 @@ var ChatAddressCard = ({ mine, card, className }) => {
|
|
|
1950
2779
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1951
2780
|
"div",
|
|
1952
2781
|
{
|
|
1953
|
-
className:
|
|
2782
|
+
className: clsx3__default.default(
|
|
1954
2783
|
"w-[340px] rounded-md bg-[#f8f8f8] p-2",
|
|
1955
2784
|
mine ? "ml-auto" : "mr-auto",
|
|
1956
2785
|
className
|
|
@@ -1998,13 +2827,13 @@ var PlayIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBo
|
|
|
1998
2827
|
var PauseIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 4h4v12H5V4zm6 0h4v12h-4V4z" }) });
|
|
1999
2828
|
var audioRegistry = /* @__PURE__ */ new Set();
|
|
2000
2829
|
var ChatBubbleAudio = ({ mine, audio }) => {
|
|
2001
|
-
const ref =
|
|
2002
|
-
const trackRef =
|
|
2003
|
-
const [playing, setPlaying] =
|
|
2004
|
-
const [progress, setProgress] =
|
|
2005
|
-
const [durSec, setDurSec] =
|
|
2006
|
-
const [remain, setRemain] =
|
|
2007
|
-
|
|
2830
|
+
const ref = React16__default.default.useRef(null);
|
|
2831
|
+
const trackRef = React16__default.default.useRef(null);
|
|
2832
|
+
const [playing, setPlaying] = React16__default.default.useState(false);
|
|
2833
|
+
const [progress, setProgress] = React16__default.default.useState(0);
|
|
2834
|
+
const [durSec, setDurSec] = React16__default.default.useState(0);
|
|
2835
|
+
const [remain, setRemain] = React16__default.default.useState(audio.duration ?? "0:00");
|
|
2836
|
+
React16__default.default.useEffect(() => {
|
|
2008
2837
|
const a = ref.current;
|
|
2009
2838
|
if (!a) {
|
|
2010
2839
|
return;
|
|
@@ -2098,7 +2927,7 @@ var ChatBubbleAudio = ({ mine, audio }) => {
|
|
|
2098
2927
|
type: "button",
|
|
2099
2928
|
"aria-label": playing ? "Pause" : "Play",
|
|
2100
2929
|
onClick: toggle,
|
|
2101
|
-
className:
|
|
2930
|
+
className: clsx3__default.default(
|
|
2102
2931
|
"grid h-7 w-[34px] place-items-center rounded-md transition-colors",
|
|
2103
2932
|
mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]"
|
|
2104
2933
|
),
|
|
@@ -2169,7 +2998,7 @@ var extColor2 = (ext) => {
|
|
|
2169
2998
|
var FileChip = ({ file }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border border-[#e1e1e1] bg-white px-3 py-2", children: [
|
|
2170
2999
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
|
|
2171
3000
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
2172
|
-
/* @__PURE__ */ jsxRuntime.jsx(FileIcon, { className:
|
|
3001
|
+
/* @__PURE__ */ jsxRuntime.jsx(FileIcon, { className: clsx3__default.default("h-[18px] w-[18px]", extColor2(file.ext)) }),
|
|
2173
3002
|
" ",
|
|
2174
3003
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs font-normal text-black", children: file.name })
|
|
2175
3004
|
] }),
|
|
@@ -2284,14 +3113,14 @@ var ChatBubbleText = ({ mine, text }) => {
|
|
|
2284
3113
|
const color = mine ? "bg-[#f8f8f8] border-[#f1f1f1]" : "bg-white border-[#EFEFEF]";
|
|
2285
3114
|
const corner = mine ? "rounded-tr-[6px]" : "rounded-tl-md";
|
|
2286
3115
|
const textFormatting = "whitespace-pre-wrap break-words";
|
|
2287
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
3116
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(base, color, corner, textFormatting), children: text });
|
|
2288
3117
|
};
|
|
2289
3118
|
var ChatBubbleText_default = ChatBubbleText;
|
|
2290
3119
|
var ChatBusinessCard = ({ mine, card }) => {
|
|
2291
3120
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2292
3121
|
"div",
|
|
2293
3122
|
{
|
|
2294
|
-
className:
|
|
3123
|
+
className: clsx3__default.default(
|
|
2295
3124
|
"relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white bg-cover bg-no-repeat",
|
|
2296
3125
|
"shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
|
|
2297
3126
|
mine ? "ml-auto" : "mr-auto"
|
|
@@ -2351,13 +3180,13 @@ var MessageHoverActions = ({
|
|
|
2351
3180
|
const showTranslate = !isItemButton || isItemButton.includes("translate");
|
|
2352
3181
|
const hasAny = showReplay || showTranslate;
|
|
2353
3182
|
const isActive = (k) => !!activeButtons?.includes(k);
|
|
2354
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
3183
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("relative inline-flex group/message", className), children: [
|
|
2355
3184
|
children,
|
|
2356
3185
|
hasAny && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2357
3186
|
"div",
|
|
2358
3187
|
{
|
|
2359
3188
|
"aria-hidden": true,
|
|
2360
|
-
className:
|
|
3189
|
+
className: clsx3__default.default(
|
|
2361
3190
|
"absolute inset-y-0 w-2",
|
|
2362
3191
|
mine ? "right-full" : "left-full",
|
|
2363
3192
|
"pointer-events-auto"
|
|
@@ -2367,7 +3196,7 @@ var MessageHoverActions = ({
|
|
|
2367
3196
|
hasAny && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2368
3197
|
"div",
|
|
2369
3198
|
{
|
|
2370
|
-
className:
|
|
3199
|
+
className: clsx3__default.default(
|
|
2371
3200
|
"absolute bottom-0 pointer-events-auto transition-opacity",
|
|
2372
3201
|
sidePos,
|
|
2373
3202
|
railNudge,
|
|
@@ -2387,7 +3216,7 @@ var MessageHoverActions = ({
|
|
|
2387
3216
|
e.stopPropagation();
|
|
2388
3217
|
onReply?.();
|
|
2389
3218
|
},
|
|
2390
|
-
className:
|
|
3219
|
+
className: clsx3__default.default(
|
|
2391
3220
|
"inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
|
|
2392
3221
|
isActive("replay") && "bg-[#636363] text-white"
|
|
2393
3222
|
),
|
|
@@ -2408,7 +3237,7 @@ var MessageHoverActions = ({
|
|
|
2408
3237
|
e.stopPropagation();
|
|
2409
3238
|
onTranslate?.();
|
|
2410
3239
|
},
|
|
2411
|
-
className:
|
|
3240
|
+
className: clsx3__default.default(
|
|
2412
3241
|
"inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
|
|
2413
3242
|
isActive("translate") && "!bg-[#636363] text-white"
|
|
2414
3243
|
),
|
|
@@ -2457,14 +3286,14 @@ var ChatMessageItem = ({
|
|
|
2457
3286
|
onTranslate,
|
|
2458
3287
|
initialSrc
|
|
2459
3288
|
}) => {
|
|
2460
|
-
const originalTextRef =
|
|
2461
|
-
const [translated, setTranslated] =
|
|
3289
|
+
const originalTextRef = React16__default.default.useRef(text ?? "");
|
|
3290
|
+
const [translated, setTranslated] = React16__default.default.useState(false);
|
|
2462
3291
|
const displayText = translated ? toBanglaDemo(originalTextRef.current) : originalTextRef.current;
|
|
2463
3292
|
const handleTranslateClick = () => {
|
|
2464
3293
|
setTranslated((v) => !v);
|
|
2465
3294
|
onTranslate?.();
|
|
2466
3295
|
};
|
|
2467
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
3296
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("flex items-end gap-3", mine && "justify-end"), children: [
|
|
2468
3297
|
!mine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: [
|
|
2469
3298
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2470
3299
|
"img",
|
|
@@ -2486,19 +3315,19 @@ var ChatMessageItem = ({
|
|
|
2486
3315
|
]
|
|
2487
3316
|
}
|
|
2488
3317
|
) }),
|
|
2489
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
3318
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("flex flex-col gap-1 w-full"), children: [
|
|
2490
3319
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2491
3320
|
"div",
|
|
2492
3321
|
{
|
|
2493
|
-
className:
|
|
3322
|
+
className: clsx3__default.default(
|
|
2494
3323
|
" text-xs font-light text-[#636363]",
|
|
2495
3324
|
mine ? "text-right" : "text-left"
|
|
2496
3325
|
),
|
|
2497
3326
|
children: time
|
|
2498
3327
|
}
|
|
2499
3328
|
),
|
|
2500
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
2501
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
3329
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
|
|
3330
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsxRuntime.jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
|
|
2502
3331
|
businessCard ? /* @__PURE__ */ jsxRuntime.jsx(ChatBusinessCard_default, { mine, card: businessCard }) : null,
|
|
2503
3332
|
addressCard ? /* @__PURE__ */ jsxRuntime.jsx(ChatAddressCard_default, { mine, card: addressCard }) : null,
|
|
2504
3333
|
images?.length ? /* @__PURE__ */ jsxRuntime.jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsxRuntime.jsx(ChatBubbleImages_default, { images }) }) : null,
|
|
@@ -2515,42 +3344,40 @@ var ChatMessageItem = ({
|
|
|
2515
3344
|
children: /* @__PURE__ */ jsxRuntime.jsx(ChatBubbleText_default, { mine, text: displayText })
|
|
2516
3345
|
}
|
|
2517
3346
|
) : null,
|
|
2518
|
-
showStatus && /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
3347
|
+
showStatus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
|
|
2519
3348
|
] })
|
|
2520
3349
|
] })
|
|
2521
3350
|
] }) });
|
|
2522
3351
|
};
|
|
2523
3352
|
var ChatMessageItem_default = ChatMessageItem;
|
|
2524
|
-
var ChatScroll = ({
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
className,
|
|
2528
|
-
style,
|
|
2529
|
-
bottomAlignWhenShort = false,
|
|
2530
|
-
scrollKey
|
|
2531
|
-
}) => {
|
|
2532
|
-
const ref = React10__default.default.useRef(null);
|
|
2533
|
-
const scrollToBottom = React10__default.default.useCallback(() => {
|
|
3353
|
+
var ChatScroll = React16__default.default.forwardRef(function ChatScroll2({ top, children, className, bottomAlignWhenShort = false, scrollKey }, _) {
|
|
3354
|
+
const ref = React16__default.default.useRef(null);
|
|
3355
|
+
const scrollToBottom = React16__default.default.useCallback(() => {
|
|
2534
3356
|
const el = ref.current;
|
|
2535
|
-
if (!el)
|
|
3357
|
+
if (!el) {
|
|
3358
|
+
return;
|
|
3359
|
+
}
|
|
2536
3360
|
el.scrollTop = el.scrollHeight;
|
|
2537
3361
|
}, []);
|
|
2538
|
-
|
|
3362
|
+
React16__default.default.useLayoutEffect(() => {
|
|
2539
3363
|
scrollToBottom();
|
|
2540
|
-
const id = window.setTimeout(scrollToBottom, 0);
|
|
2541
|
-
return () => window.clearTimeout(id);
|
|
2542
3364
|
}, [scrollKey, scrollToBottom]);
|
|
2543
3365
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2544
3366
|
"div",
|
|
2545
3367
|
{
|
|
2546
3368
|
ref,
|
|
2547
3369
|
"data-chat-scroll": true,
|
|
2548
|
-
className:
|
|
2549
|
-
|
|
3370
|
+
className: clsx3__default.default(
|
|
3371
|
+
"h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
|
|
3372
|
+
className
|
|
3373
|
+
),
|
|
2550
3374
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2551
3375
|
"div",
|
|
2552
3376
|
{
|
|
2553
|
-
className:
|
|
3377
|
+
className: clsx3__default.default(
|
|
3378
|
+
"min-h-full flex flex-col",
|
|
3379
|
+
bottomAlignWhenShort ? "justify-end" : "justify-between"
|
|
3380
|
+
),
|
|
2554
3381
|
children: [
|
|
2555
3382
|
top,
|
|
2556
3383
|
children
|
|
@@ -2559,7 +3386,7 @@ var ChatScroll = ({
|
|
|
2559
3386
|
)
|
|
2560
3387
|
}
|
|
2561
3388
|
);
|
|
2562
|
-
};
|
|
3389
|
+
});
|
|
2563
3390
|
var ChatScroll_default = ChatScroll;
|
|
2564
3391
|
var ChatThreadItem = ({
|
|
2565
3392
|
active,
|
|
@@ -2572,12 +3399,10 @@ var ChatThreadItem = ({
|
|
|
2572
3399
|
status,
|
|
2573
3400
|
avatarText,
|
|
2574
3401
|
avatarSrc,
|
|
2575
|
-
_size = 46,
|
|
2576
3402
|
avatarBg = "#FFF1EC",
|
|
2577
3403
|
className,
|
|
2578
3404
|
onClick
|
|
2579
3405
|
}) => {
|
|
2580
|
-
const count = status.kind === "new" ? String(Math.max(0, status.count)).padStart(2, "0") : "";
|
|
2581
3406
|
const statusEl = (() => {
|
|
2582
3407
|
switch (status.kind) {
|
|
2583
3408
|
case "seen":
|
|
@@ -2586,7 +3411,7 @@ var ChatThreadItem = ({
|
|
|
2586
3411
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#B7B7B7]", children: "Delivered" });
|
|
2587
3412
|
case "new":
|
|
2588
3413
|
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[#E63946]", children: [
|
|
2589
|
-
count,
|
|
3414
|
+
String(Math.max(0, status.count)).padStart(2, "0"),
|
|
2590
3415
|
" New"
|
|
2591
3416
|
] });
|
|
2592
3417
|
default:
|
|
@@ -2597,7 +3422,7 @@ var ChatThreadItem = ({
|
|
|
2597
3422
|
"button",
|
|
2598
3423
|
{
|
|
2599
3424
|
onClick,
|
|
2600
|
-
className:
|
|
3425
|
+
className: clsx3__default.default(
|
|
2601
3426
|
"relative w-full text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
|
|
2602
3427
|
active && "bg-[#f8f8f8]",
|
|
2603
3428
|
className
|
|
@@ -2606,7 +3431,7 @@ var ChatThreadItem = ({
|
|
|
2606
3431
|
pinned && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-0 top-0 h-0 w-0 border-l-16 border-t-16 border-l-transparent border-t-[#FFD2BD]" }),
|
|
2607
3432
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 border-b border-[#f8f8f8] pb-2", children: [
|
|
2608
3433
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-[2px]", children: [
|
|
2609
|
-
avatarSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1]
|
|
3434
|
+
avatarSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2610
3435
|
"img",
|
|
2611
3436
|
{
|
|
2612
3437
|
src: avatarSrc,
|
|
@@ -2698,8 +3523,8 @@ var TypingIndicator = ({
|
|
|
2698
3523
|
};
|
|
2699
3524
|
var TypingIndicator_default = TypingIndicator;
|
|
2700
3525
|
function Portal({ children, containerId = "portal-root" }) {
|
|
2701
|
-
const [container, setContainer] =
|
|
2702
|
-
|
|
3526
|
+
const [container, setContainer] = React16.useState(null);
|
|
3527
|
+
React16.useEffect(() => {
|
|
2703
3528
|
let node = document.getElementById(containerId);
|
|
2704
3529
|
let created = false;
|
|
2705
3530
|
if (!node) {
|
|
@@ -2742,20 +3567,20 @@ var ChatImagePreviewModal = ({
|
|
|
2742
3567
|
const total = images?.length ?? 0;
|
|
2743
3568
|
const hasPrev = current > 0;
|
|
2744
3569
|
const hasNext = current < total - 1;
|
|
2745
|
-
const [direction, setDirection] =
|
|
2746
|
-
const goPrev =
|
|
3570
|
+
const [direction, setDirection] = React16.useState(0);
|
|
3571
|
+
const goPrev = React16.useCallback(() => {
|
|
2747
3572
|
if (current > 0) {
|
|
2748
3573
|
setDirection(-1);
|
|
2749
3574
|
setCurrentIndex(current - 1);
|
|
2750
3575
|
}
|
|
2751
3576
|
}, [current, setCurrentIndex]);
|
|
2752
|
-
const goNext =
|
|
3577
|
+
const goNext = React16.useCallback(() => {
|
|
2753
3578
|
if (images && current < images.length - 1) {
|
|
2754
3579
|
setDirection(1);
|
|
2755
3580
|
setCurrentIndex(current + 1);
|
|
2756
3581
|
}
|
|
2757
3582
|
}, [current, images, setCurrentIndex]);
|
|
2758
|
-
|
|
3583
|
+
React16.useEffect(() => {
|
|
2759
3584
|
if (!isOpen) return;
|
|
2760
3585
|
const handleKey = (e) => {
|
|
2761
3586
|
if (e.key === "Escape") onClose();
|
|
@@ -2890,9 +3715,97 @@ var ChatImagePreviewModal = ({
|
|
|
2890
3715
|
) }) });
|
|
2891
3716
|
};
|
|
2892
3717
|
var ChatImagePreviewModal_default = ChatImagePreviewModal;
|
|
3718
|
+
var baseItem = "flex w-full items-center gap-3 px-3 py-2 text-sm hover:bg-black/5 cursor-pointer";
|
|
3719
|
+
var ChatKebabMenu = ({
|
|
3720
|
+
pinned,
|
|
3721
|
+
onPinToggle,
|
|
3722
|
+
onDelete,
|
|
3723
|
+
className
|
|
3724
|
+
}) => {
|
|
3725
|
+
const [open, setOpen] = React16.useState(false);
|
|
3726
|
+
const btnRef = React16.useRef(null);
|
|
3727
|
+
const menuId = "chat-kebab-menu";
|
|
3728
|
+
React16.useEffect(() => {
|
|
3729
|
+
if (!open) return;
|
|
3730
|
+
const onDoc = (e) => {
|
|
3731
|
+
const menu = document.getElementById(menuId);
|
|
3732
|
+
if (!menu || !btnRef.current) return;
|
|
3733
|
+
const target = e.target;
|
|
3734
|
+
if (menu.contains(target) || btnRef.current.contains(target)) return;
|
|
3735
|
+
setOpen(false);
|
|
3736
|
+
};
|
|
3737
|
+
document.addEventListener("mousedown", onDoc);
|
|
3738
|
+
return () => document.removeEventListener("mousedown", onDoc);
|
|
3739
|
+
}, [open]);
|
|
3740
|
+
React16.useEffect(() => {
|
|
3741
|
+
if (!open) return;
|
|
3742
|
+
const onKey = (e) => e.key === "Escape" && setOpen(false);
|
|
3743
|
+
document.addEventListener("keydown", onKey);
|
|
3744
|
+
return () => document.removeEventListener("keydown", onKey);
|
|
3745
|
+
}, [open]);
|
|
3746
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("relative", className), children: [
|
|
3747
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3748
|
+
"button",
|
|
3749
|
+
{
|
|
3750
|
+
ref: btnRef,
|
|
3751
|
+
type: "button",
|
|
3752
|
+
className: "grid h-9 w-9 place-items-center rounded-full hover:bg-black/5 cursor-pointer",
|
|
3753
|
+
onClick: () => setOpen((v) => !v),
|
|
3754
|
+
"aria-haspopup": "menu",
|
|
3755
|
+
"aria-expanded": open,
|
|
3756
|
+
title: "More options",
|
|
3757
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, { className: "w-6 h-6" })
|
|
3758
|
+
}
|
|
3759
|
+
),
|
|
3760
|
+
open && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3761
|
+
"div",
|
|
3762
|
+
{
|
|
3763
|
+
id: menuId,
|
|
3764
|
+
role: "menu",
|
|
3765
|
+
className: "absolute right-0 z-10 mt-2 w-44 rounded-xs bg-white py-1 shadow-[0_4px_16px_rgba(0,0,0,0.08)]",
|
|
3766
|
+
children: [
|
|
3767
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute -z-[1] -top-[6px] right-4 h-3 w-3 rotate-45 bg-white" }),
|
|
3768
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3769
|
+
"button",
|
|
3770
|
+
{
|
|
3771
|
+
role: "menuitem",
|
|
3772
|
+
type: "button",
|
|
3773
|
+
className: baseItem,
|
|
3774
|
+
onClick: () => {
|
|
3775
|
+
onPinToggle?.();
|
|
3776
|
+
setOpen(false);
|
|
3777
|
+
},
|
|
3778
|
+
children: [
|
|
3779
|
+
pinned ? /* @__PURE__ */ jsxRuntime.jsx(PinOffIcon, { className: "h-[18px] w-[18px] text-[#636363]" }) : /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { className: "h-[18px] w-[18px] text-[#636363]" }),
|
|
3780
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#161616]", children: pinned ? "Unpin" : "Pin on top" })
|
|
3781
|
+
]
|
|
3782
|
+
}
|
|
3783
|
+
),
|
|
3784
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3785
|
+
"button",
|
|
3786
|
+
{
|
|
3787
|
+
role: "menuitem",
|
|
3788
|
+
type: "button",
|
|
3789
|
+
className: baseItem,
|
|
3790
|
+
onClick: () => {
|
|
3791
|
+
onDelete?.();
|
|
3792
|
+
setOpen(false);
|
|
3793
|
+
},
|
|
3794
|
+
children: [
|
|
3795
|
+
/* @__PURE__ */ jsxRuntime.jsx(TrashIcon, { className: "h-[18px] w-[18px] text-[#636363]" }),
|
|
3796
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#161616]", children: "Delete" })
|
|
3797
|
+
]
|
|
3798
|
+
}
|
|
3799
|
+
)
|
|
3800
|
+
]
|
|
3801
|
+
}
|
|
3802
|
+
)
|
|
3803
|
+
] });
|
|
3804
|
+
};
|
|
3805
|
+
var ChatKebabMenu_default = ChatKebabMenu;
|
|
2893
3806
|
var avatarBgByInitial = {
|
|
2894
3807
|
K: "#FFE7DB",
|
|
2895
|
-
A: "#
|
|
3808
|
+
A: "#FFF1EC",
|
|
2896
3809
|
F: "#E8F7FF",
|
|
2897
3810
|
B: "#F0EDEB",
|
|
2898
3811
|
b: "#F0EDEB"
|
|
@@ -2914,12 +3827,12 @@ function getThemeVars(theme) {
|
|
|
2914
3827
|
var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
2915
3828
|
const { close, selectThread, selectedThreadId, reference } = useChatUI();
|
|
2916
3829
|
const { isOpen: isGalleryOpen, closeGallery } = useGallery();
|
|
2917
|
-
const [threads, setThreads] =
|
|
2918
|
-
const refreshThreads =
|
|
3830
|
+
const [threads, setThreads] = React16.useState(() => adapter.threads.list(reference));
|
|
3831
|
+
const refreshThreads = React16.useCallback(
|
|
2919
3832
|
() => setThreads(adapter.threads.list(reference)),
|
|
2920
3833
|
[adapter, reference]
|
|
2921
3834
|
);
|
|
2922
|
-
|
|
3835
|
+
React16.useEffect(() => {
|
|
2923
3836
|
let rafId = 0;
|
|
2924
3837
|
rafId = requestAnimationFrame(refreshThreads);
|
|
2925
3838
|
const unsub = adapter.threads.subscribe(refreshThreads);
|
|
@@ -2928,18 +3841,18 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
2928
3841
|
unsub();
|
|
2929
3842
|
};
|
|
2930
3843
|
}, [adapter, reference, refreshThreads]);
|
|
2931
|
-
const [rev, setRev] =
|
|
2932
|
-
const [replyTo, setReplyTo] =
|
|
2933
|
-
const [searchQuery, setSearchQuery] =
|
|
3844
|
+
const [rev, setRev] = React16.useState(0);
|
|
3845
|
+
const [replyTo, setReplyTo] = React16.useState(void 0);
|
|
3846
|
+
const [searchQuery, setSearchQuery] = React16.useState("");
|
|
2934
3847
|
const activeId = selectedThreadId ?? threads[0]?.id;
|
|
2935
3848
|
const activeThread = threads.find((t) => t.id === activeId);
|
|
2936
|
-
const [messages, setMessages] =
|
|
3849
|
+
const [messages, setMessages] = React16.useState(
|
|
2937
3850
|
() => activeId ? adapter.messages.list(activeId) : []
|
|
2938
3851
|
);
|
|
2939
|
-
|
|
3852
|
+
React16.useEffect(() => {
|
|
2940
3853
|
if (activeId) setMessages(adapter.messages.list(activeId));
|
|
2941
3854
|
}, [activeId, rev, adapter]);
|
|
2942
|
-
|
|
3855
|
+
React16.useEffect(() => {
|
|
2943
3856
|
if (!activeId || !adapter.messages.subscribe) return;
|
|
2944
3857
|
const unsub = adapter.messages.subscribe(activeId, () => {
|
|
2945
3858
|
setMessages(adapter.messages.list(activeId));
|
|
@@ -2952,13 +3865,14 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
2952
3865
|
const online = Boolean(activeThread?.online);
|
|
2953
3866
|
const isVerified = Boolean(activeThread?.badge);
|
|
2954
3867
|
const avatarBg = avatarBgByInitial[initial] ?? "#FFF1EC";
|
|
3868
|
+
const initialSrc = activeThread?.avatarSrc ?? "/chat/banbox_chat_logo.png";
|
|
2955
3869
|
const idLabel = activeThread?.orderId ? "Order ID" : activeThread?.inquiryId ? "Inquiry ID" : void 0;
|
|
2956
3870
|
const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : void 0;
|
|
2957
3871
|
const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? void 0;
|
|
2958
|
-
const [showDelete, setShowDelete] =
|
|
3872
|
+
const [showDelete, setShowDelete] = React16.useState(false);
|
|
2959
3873
|
const scrollKey = `${activeId}-${messages.length}-${rev}`;
|
|
2960
|
-
const prevActiveIdRef =
|
|
2961
|
-
|
|
3874
|
+
const prevActiveIdRef = React16.useRef(activeId);
|
|
3875
|
+
React16.useEffect(() => {
|
|
2962
3876
|
if (prevActiveIdRef.current !== activeId) {
|
|
2963
3877
|
prevActiveIdRef.current = activeId;
|
|
2964
3878
|
if (activeId) adapter.threads.markRead?.(activeId);
|
|
@@ -2983,20 +3897,24 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
2983
3897
|
if (nextId) selectThread(nextId);
|
|
2984
3898
|
setReplyTo(void 0);
|
|
2985
3899
|
setShowDelete(false);
|
|
2986
|
-
uiCallbacks?.showToast?.({
|
|
3900
|
+
uiCallbacks?.showToast?.({
|
|
3901
|
+
type: "success",
|
|
3902
|
+
title: "Chat Deleted",
|
|
3903
|
+
message: "The chat has been deleted successfully."
|
|
3904
|
+
});
|
|
2987
3905
|
};
|
|
2988
3906
|
const filteredThreads = threads.filter((t) => {
|
|
2989
3907
|
if (!searchQuery.trim()) return true;
|
|
2990
3908
|
const q = searchQuery.toLowerCase();
|
|
2991
3909
|
return t.title.toLowerCase().includes(q) || t.last?.toLowerCase().includes(q) || t.orderId?.toLowerCase().includes(q) || t.inquiryId?.toLowerCase().includes(q);
|
|
2992
3910
|
});
|
|
2993
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-4 right-4 z-
|
|
3911
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-4 right-4 z-10002", children: [
|
|
2994
3912
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2995
3913
|
framerMotion.motion.button,
|
|
2996
3914
|
{
|
|
2997
3915
|
"aria-label": "Close chat",
|
|
2998
3916
|
onClick: close,
|
|
2999
|
-
className: "fixed inset-0
|
|
3917
|
+
className: "fixed inset-0",
|
|
3000
3918
|
style: { background: "transparent", border: "none" },
|
|
3001
3919
|
initial: { opacity: 0 },
|
|
3002
3920
|
animate: { opacity: 1 },
|
|
@@ -3029,19 +3947,51 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3029
3947
|
style: { overscrollBehavior: "contain" },
|
|
3030
3948
|
children: [
|
|
3031
3949
|
/* @__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-[
|
|
3950
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_350px]", children: [
|
|
3033
3951
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col border-r border-[#9BBCCF]", children: [
|
|
3034
3952
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3035
3953
|
ChatHeader,
|
|
3036
3954
|
{
|
|
3037
|
-
left: activeThread?.avatarSrc ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3038
|
-
|
|
3955
|
+
left: activeThread?.avatarSrc ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3956
|
+
ChatIdentity_default,
|
|
3957
|
+
{
|
|
3958
|
+
variant: "avatar",
|
|
3959
|
+
src: initialSrc,
|
|
3960
|
+
online,
|
|
3961
|
+
title,
|
|
3962
|
+
subtitle,
|
|
3963
|
+
verified: isVerified,
|
|
3964
|
+
subtitleVariant: "muted"
|
|
3965
|
+
}
|
|
3966
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
3967
|
+
ChatIdentity_default,
|
|
3968
|
+
{
|
|
3969
|
+
variant: "initial",
|
|
3970
|
+
initial,
|
|
3971
|
+
bg: avatarBg,
|
|
3972
|
+
online,
|
|
3973
|
+
title,
|
|
3974
|
+
subtitle,
|
|
3975
|
+
verified: isVerified,
|
|
3976
|
+
subtitleVariant: "muted"
|
|
3977
|
+
}
|
|
3978
|
+
),
|
|
3979
|
+
right: uiCallbacks?.renderKebabMenu ? uiCallbacks.renderKebabMenu({
|
|
3039
3980
|
pinned: Boolean(activeThread?.pinned),
|
|
3040
3981
|
onPinToggle: () => {
|
|
3041
3982
|
if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
|
|
3042
3983
|
},
|
|
3043
3984
|
onDelete: () => setShowDelete(true)
|
|
3044
|
-
})
|
|
3985
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
3986
|
+
ChatKebabMenu_default,
|
|
3987
|
+
{
|
|
3988
|
+
pinned: Boolean(activeThread?.pinned),
|
|
3989
|
+
onPinToggle: () => {
|
|
3990
|
+
if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
|
|
3991
|
+
},
|
|
3992
|
+
onDelete: () => setShowDelete(true)
|
|
3993
|
+
}
|
|
3994
|
+
)
|
|
3045
3995
|
}
|
|
3046
3996
|
) }),
|
|
3047
3997
|
idValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3106,9 +4056,9 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3106
4056
|
activeId
|
|
3107
4057
|
) })
|
|
3108
4058
|
] }),
|
|
3109
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "
|
|
3110
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3111
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "
|
|
4059
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full min-h-0", children: [
|
|
4060
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }),
|
|
4061
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-auto custom-scroll py-0", children: filteredThreads.map((t) => {
|
|
3112
4062
|
const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
|
|
3113
4063
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3114
4064
|
ChatThreadItem_default,
|
|
@@ -3133,7 +4083,14 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3133
4083
|
}) })
|
|
3134
4084
|
] })
|
|
3135
4085
|
] }),
|
|
3136
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4086
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4087
|
+
ChatConfirmModal,
|
|
4088
|
+
{
|
|
4089
|
+
open: showDelete,
|
|
4090
|
+
onClose: () => setShowDelete(false),
|
|
4091
|
+
onConfirm: handleConfirmDelete
|
|
4092
|
+
}
|
|
4093
|
+
),
|
|
3137
4094
|
/* @__PURE__ */ jsxRuntime.jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
|
|
3138
4095
|
]
|
|
3139
4096
|
}
|
|
@@ -3177,13 +4134,14 @@ function getThemeVars2(theme) {
|
|
|
3177
4134
|
}
|
|
3178
4135
|
var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
3179
4136
|
const { close, reference } = useChatUI();
|
|
4137
|
+
const { isOpen: isGalleryOpen, closeGallery } = useGallery();
|
|
3180
4138
|
const threads = adapter.threads.list(reference);
|
|
3181
|
-
const initialThreadId =
|
|
4139
|
+
const initialThreadId = React16__default.default.useMemo(
|
|
3182
4140
|
() => coalesceThreadId(reference, threads),
|
|
3183
4141
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3184
4142
|
[reference]
|
|
3185
4143
|
);
|
|
3186
|
-
const [activeId] =
|
|
4144
|
+
const [activeId] = React16__default.default.useState(initialThreadId);
|
|
3187
4145
|
const activeThread = threads.find((t) => t.id === activeId);
|
|
3188
4146
|
const isVerified = activeThread?.badge === true;
|
|
3189
4147
|
const meta = reference?.meta ?? {};
|
|
@@ -3191,12 +4149,13 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3191
4149
|
const title = meta.title ?? activeThread?.title ?? "Unknown";
|
|
3192
4150
|
const online = meta.online ?? activeThread?.online ?? true;
|
|
3193
4151
|
const subtitle = meta.subtitle ?? "Customer";
|
|
3194
|
-
const [messages, setMessages] =
|
|
4152
|
+
const [messages, setMessages] = React16__default.default.useState(
|
|
3195
4153
|
() => activeId ? adapter.messages.list(activeId) : []
|
|
3196
4154
|
);
|
|
3197
|
-
const [scrollKey, setScrollKey] =
|
|
3198
|
-
const [replyTo, setReplyTo] =
|
|
3199
|
-
|
|
4155
|
+
const [scrollKey, setScrollKey] = React16__default.default.useState(Date.now());
|
|
4156
|
+
const [replyTo, setReplyTo] = React16__default.default.useState(void 0);
|
|
4157
|
+
const [showDelete, setShowDelete] = React16__default.default.useState(false);
|
|
4158
|
+
React16__default.default.useEffect(() => {
|
|
3200
4159
|
if (!activeId || !adapter.messages.subscribe) return;
|
|
3201
4160
|
const unsub = adapter.messages.subscribe(activeId, () => {
|
|
3202
4161
|
setMessages(adapter.messages.list(activeId));
|
|
@@ -3204,11 +4163,25 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3204
4163
|
});
|
|
3205
4164
|
return unsub;
|
|
3206
4165
|
}, [activeId, adapter]);
|
|
3207
|
-
const handleAfterSend =
|
|
4166
|
+
const handleAfterSend = React16__default.default.useCallback(() => {
|
|
3208
4167
|
setMessages(adapter.messages.list(activeId));
|
|
3209
4168
|
setScrollKey(Date.now());
|
|
3210
4169
|
setReplyTo(void 0);
|
|
3211
4170
|
}, [activeId, adapter]);
|
|
4171
|
+
const handleConfirmDelete = React16__default.default.useCallback(() => {
|
|
4172
|
+
if (!activeId) {
|
|
4173
|
+
setShowDelete(false);
|
|
4174
|
+
return;
|
|
4175
|
+
}
|
|
4176
|
+
adapter.threads.delete(activeId);
|
|
4177
|
+
uiCallbacks?.showToast?.({
|
|
4178
|
+
type: "success",
|
|
4179
|
+
title: "Chat Deleted",
|
|
4180
|
+
message: "The chat has been deleted successfully."
|
|
4181
|
+
});
|
|
4182
|
+
setShowDelete(false);
|
|
4183
|
+
close();
|
|
4184
|
+
}, [activeId, adapter, uiCallbacks, close]);
|
|
3212
4185
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
|
|
3213
4186
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3214
4187
|
framerMotion.motion.button,
|
|
@@ -3260,15 +4233,33 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3260
4233
|
subtitleVariant: "muted"
|
|
3261
4234
|
}
|
|
3262
4235
|
),
|
|
3263
|
-
right: /* @__PURE__ */ jsxRuntime.
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
}
|
|
3271
|
-
|
|
4236
|
+
right: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
4237
|
+
uiCallbacks?.renderKebabMenu ? uiCallbacks.renderKebabMenu({
|
|
4238
|
+
pinned: Boolean(activeThread?.pinned),
|
|
4239
|
+
onPinToggle: () => {
|
|
4240
|
+
if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
|
|
4241
|
+
},
|
|
4242
|
+
onDelete: () => setShowDelete(true)
|
|
4243
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4244
|
+
ChatKebabMenu_default,
|
|
4245
|
+
{
|
|
4246
|
+
pinned: Boolean(activeThread?.pinned),
|
|
4247
|
+
onPinToggle: () => {
|
|
4248
|
+
if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
|
|
4249
|
+
},
|
|
4250
|
+
onDelete: () => setShowDelete(true)
|
|
4251
|
+
}
|
|
4252
|
+
),
|
|
4253
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4254
|
+
"button",
|
|
4255
|
+
{
|
|
4256
|
+
type: "button",
|
|
4257
|
+
onClick: close,
|
|
4258
|
+
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",
|
|
4259
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ChatXIcon, { className: "h-6 w-6" })
|
|
4260
|
+
}
|
|
4261
|
+
)
|
|
4262
|
+
] })
|
|
3272
4263
|
}
|
|
3273
4264
|
) }),
|
|
3274
4265
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -3323,7 +4314,16 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3323
4314
|
}
|
|
3324
4315
|
)
|
|
3325
4316
|
}
|
|
3326
|
-
)
|
|
4317
|
+
),
|
|
4318
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4319
|
+
ChatConfirmModal,
|
|
4320
|
+
{
|
|
4321
|
+
open: showDelete,
|
|
4322
|
+
onClose: () => setShowDelete(false),
|
|
4323
|
+
onConfirm: handleConfirmDelete
|
|
4324
|
+
}
|
|
4325
|
+
),
|
|
4326
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
|
|
3327
4327
|
] });
|
|
3328
4328
|
};
|
|
3329
4329
|
var SinglePopup_default = SinglePopup;
|
|
@@ -3356,11 +4356,11 @@ function ChatRoot({ adapter, uiCallbacks, theme }) {
|
|
|
3356
4356
|
);
|
|
3357
4357
|
}
|
|
3358
4358
|
function ChatUIProvider({ children }) {
|
|
3359
|
-
const [isOpen, setOpen] =
|
|
3360
|
-
const [variant, setVariant] =
|
|
3361
|
-
const [reference, setReference] =
|
|
3362
|
-
const [selectedThreadId, setSelected] =
|
|
3363
|
-
const api =
|
|
4359
|
+
const [isOpen, setOpen] = React16.useState(false);
|
|
4360
|
+
const [variant, setVariant] = React16.useState("inbox");
|
|
4361
|
+
const [reference, setReference] = React16.useState();
|
|
4362
|
+
const [selectedThreadId, setSelected] = React16.useState(null);
|
|
4363
|
+
const api = React16.useMemo(
|
|
3364
4364
|
() => ({
|
|
3365
4365
|
isOpen,
|
|
3366
4366
|
variant,
|
|
@@ -3426,6 +4426,7 @@ exports.ChatFooter = ChatFooter_default;
|
|
|
3426
4426
|
exports.ChatHeader = ChatHeader;
|
|
3427
4427
|
exports.ChatIdentity = ChatIdentity_default;
|
|
3428
4428
|
exports.ChatInquiryBar = ChatInquiryBar_default;
|
|
4429
|
+
exports.ChatKebabMenu = ChatKebabMenu_default;
|
|
3429
4430
|
exports.ChatListHeader = ChatListHeader_default;
|
|
3430
4431
|
exports.ChatMessageItem = ChatMessageItem_default;
|
|
3431
4432
|
exports.ChatRoot = ChatRoot;
|