@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.
Files changed (43) hide show
  1. package/dist/index.cjs +1236 -235
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +15 -3
  4. package/dist/index.d.ts +15 -3
  5. package/dist/index.js +1160 -160
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/chat/InboxPopup.tsx +105 -42
  9. package/src/chat/SinglePopup.tsx +59 -14
  10. package/src/icons/index.tsx +55 -0
  11. package/src/index.ts +14 -12
  12. package/src/modals/ChatAddressModal.tsx +844 -0
  13. package/src/modals/{chat/ChatConfirmModal.tsx → ChatConfirmModal.tsx} +2 -2
  14. package/src/modals/ChatTranslateSettingsModal.tsx +182 -0
  15. package/src/styles/index.build.css +15 -0
  16. package/src/styles/index.css +10 -2
  17. package/src/ui/{chat/AttachmentPreviewStrip.tsx → AttachmentPreviewStrip.tsx} +2 -2
  18. package/src/ui/{chat/ChatComposerBar.tsx → ChatComposerBar.tsx} +2 -2
  19. package/src/ui/{chat/ChatFooter.tsx → ChatFooter.tsx} +102 -8
  20. package/src/ui/{chat/ChatHeader.tsx → ChatHeader.tsx} +7 -4
  21. package/src/ui/{chat/ChatIdentity.tsx → ChatIdentity.tsx} +2 -2
  22. package/src/ui/{chat/ChatInquiryBar.tsx → ChatInquiryBar.tsx} +1 -1
  23. package/src/ui/ChatKebabMenu.tsx +125 -0
  24. package/src/ui/{chat/ChatListHeader.tsx → ChatListHeader.tsx} +49 -25
  25. package/src/ui/{chat/ChatMessageItem.tsx → ChatMessageItem.tsx} +1 -1
  26. package/src/ui/ChatScroll.tsx +59 -0
  27. package/src/ui/{chat/ChatSpinner.tsx → ChatSpinner.tsx} +1 -1
  28. package/src/ui/{chat/ChatThreadItem.tsx → ChatThreadItem.tsx} +9 -16
  29. package/src/ui/{chat/MessageHoverActions.tsx → MessageHoverActions.tsx} +2 -2
  30. package/src/ui/{chat/ReplyCard.tsx → ReplyCard.tsx} +2 -2
  31. package/src/ui/{chat/TypingIndicator.tsx → TypingIndicator.tsx} +1 -1
  32. package/src/ui/{chat/drop-up → drop-up}/BusinessCardDropup.tsx +15 -3
  33. package/src/ui/{chat/drop-up → drop-up}/EmojiDropup.tsx +1 -1
  34. package/src/ui/{chat/message-items → message-items}/ChatAddressCard.tsx +4 -4
  35. package/src/ui/{chat/message-items → message-items}/ChatBubbleFiles.tsx +1 -1
  36. package/src/ui/{chat/message-items → message-items}/ChatBubbleImages.tsx +2 -2
  37. package/src/ui/{chat/message-items → message-items}/ChatBusinessCard.tsx +1 -1
  38. package/src/ui/{chat/scrollToMessage.ts → scrollToMessage.ts} +1 -1
  39. package/src/ui/{chat/types.ts → types.ts} +2 -2
  40. package/src/modals/chat/ChatTranslateSettingsModal.tsx +0 -180
  41. package/src/ui/chat/ChatScroll.tsx +0 -52
  42. /package/src/ui/{chat/message-items → message-items}/ChatBubbleAudio.tsx +0 -0
  43. /package/src/ui/{chat/message-items → message-items}/ChatBubbleText.tsx +0 -0
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { AnimatePresence, motion } from 'framer-motion';
2
2
  import { createPortal } from 'react-dom';
3
- import React10, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
3
+ import React16, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
4
4
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
- import clsx16, { clsx } from 'clsx';
5
+ import clsx3, { clsx } from 'clsx';
6
6
  import { twMerge } from 'tailwind-merge';
7
7
  import _Lottie from 'lottie-react';
8
8
 
@@ -29,7 +29,7 @@ function styleInject(css, { insertAt } = {}) {
29
29
  }
30
30
 
31
31
  // src/styles/index.css
32
- 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');
32
+ 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');
33
33
  var ChatUIContext = createContext(null);
34
34
  function useChatUI() {
35
35
  const ctx = useContext(ChatUIContext);
@@ -145,7 +145,7 @@ var colorMap = {
145
145
  green: { bg: "bg-[#086600]", hover: "hover:bg-[#28A745]", text: "text-[#086600]", border: "border-[#086600]", lightBg: "bg-[#E6F5E6]" },
146
146
  blue: { bg: "bg-[#005694]", hover: "hover:bg-[#00375E]", text: "text-[#005694]", border: "border-[#005694]", lightBg: "bg-[#E0EFF8]" }
147
147
  };
148
- var Button = React10.forwardRef(
148
+ var Button = React16.forwardRef(
149
149
  ({ variant = "filled", color = "primary", size = "40", leftIcon, rightIcon, iconOnly = false, children, className, disabled, ...props }, ref) => {
150
150
  const c = colorMap[color];
151
151
  return /* @__PURE__ */ jsxs(
@@ -184,7 +184,7 @@ function ChatConfirmModal({
184
184
  onClose,
185
185
  className
186
186
  }) {
187
- React10.useEffect(() => {
187
+ React16.useEffect(() => {
188
188
  if (!open) return;
189
189
  const onKey = (e) => e.key === "Escape" && onClose();
190
190
  window.addEventListener("keydown", onKey);
@@ -381,6 +381,51 @@ var MapPinIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "1
381
381
  /* @__PURE__ */ jsx("path", { d: "M5.9974 2.66797V11.3346", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
382
382
  /* @__PURE__ */ jsx("path", { d: "M9.9974 10V13.3333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
383
383
  ] });
384
+ var MapIcon2 = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
385
+ /* @__PURE__ */ 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" }),
386
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "6", r: "1.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
387
+ ] });
388
+ var MenuIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", children: [
389
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2" }),
390
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" }),
391
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2" })
392
+ ] });
393
+ var PinIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
394
+ /* @__PURE__ */ 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" }),
395
+ /* @__PURE__ */ jsx("path", { d: "M7.5 12.5L3.75 16.25", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
396
+ /* @__PURE__ */ jsx("path", { d: "M12.084 3.33594L16.6673 7.91927", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
397
+ ] });
398
+ var PinOffIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
399
+ /* @__PURE__ */ 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" }),
400
+ /* @__PURE__ */ jsx("path", { d: "M7.5 12.5L3.75 16.25", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
401
+ /* @__PURE__ */ jsx("path", { d: "M12.084 3.33594L16.6673 7.91927", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
402
+ /* @__PURE__ */ jsx("path", { d: "M3 3L17 17", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
403
+ ] });
404
+ var EditIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
405
+ /* @__PURE__ */ 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" }),
406
+ /* @__PURE__ */ 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" }),
407
+ /* @__PURE__ */ jsx("path", { d: "M16 5L19 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
408
+ ] });
409
+ var TrashIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
410
+ /* @__PURE__ */ jsx("path", { d: "M3.3335 5.83464H16.6668", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
411
+ /* @__PURE__ */ jsx("path", { d: "M8.33317 9.16797V14.168", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
412
+ /* @__PURE__ */ jsx("path", { d: "M11.6667 9.16797V14.168", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
413
+ /* @__PURE__ */ 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" }),
414
+ /* @__PURE__ */ 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" })
415
+ ] });
416
+ var EmailIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
417
+ /* @__PURE__ */ 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" }),
418
+ /* @__PURE__ */ jsx("path", { d: "M16.5 4.5L9 9.75L1.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
419
+ ] });
420
+ var BadgeHomeAddrIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
421
+ /* @__PURE__ */ jsx("path", { d: "M2.91667 7H1.75L7 1.75L12.25 7H11.0833", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
422
+ /* @__PURE__ */ 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" }),
423
+ /* @__PURE__ */ jsx("rect", { x: "5.83594", y: "7", width: "2.33333", height: "2.33333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
424
+ ] });
425
+ var CheckboxFilledIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
426
+ /* @__PURE__ */ jsx("rect", { width: "16", height: "16", rx: "4", fill: "currentColor" }),
427
+ /* @__PURE__ */ 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" })
428
+ ] });
384
429
  var Select = ({ options, value, onChange, placeholder = "Select...", size = 36, className, disabled }) => {
385
430
  const [open, setOpen] = useState(false);
386
431
  const ref = useRef(null);
@@ -458,7 +503,7 @@ var ChatTranslateSettingsModal = ({
458
503
  const [incomingTarget, setIncomingTarget] = useState(
459
504
  initial?.incomingTarget ?? ""
460
505
  );
461
- React10.useEffect(() => {
506
+ React16.useEffect(() => {
462
507
  if (!open) return;
463
508
  const onKey = (e) => {
464
509
  if (e.key === "Escape") onClose();
@@ -467,7 +512,6 @@ var ChatTranslateSettingsModal = ({
467
512
  return () => window.removeEventListener("keydown", onKey);
468
513
  }, [open, onClose]);
469
514
  if (!open) return null;
470
- const isSingle = variant === "single";
471
515
  const handleSave = () => {
472
516
  onSave({
473
517
  incomingTarget,
@@ -477,15 +521,19 @@ var ChatTranslateSettingsModal = ({
477
521
  outgoingTo: "Bangla"
478
522
  });
479
523
  };
480
- const content = /* @__PURE__ */ jsxs(
524
+ return /* @__PURE__ */ jsxs(
481
525
  "div",
482
526
  {
483
- className: clsx16(
484
- isSingle ? "fixed inset-0 z-9999 flex" : "absolute inset-0 z-50 flex items-center justify-center"
527
+ className: clsx3(
528
+ "absolute inset-0 z-[9999] flex items-center justify-center",
529
+ variant === "single" && "rounded-[inherit]"
485
530
  ),
486
- onClick: () => onClose(),
531
+ onClick: (e) => {
532
+ e.stopPropagation();
533
+ onClose();
534
+ },
487
535
  children: [
488
- /* @__PURE__ */ jsx("div", { className: isSingle ? "fixed inset-0 bg-black/30" : "absolute inset-0 bg-black/30" }),
536
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 rounded-[inherit]" }),
489
537
  /* @__PURE__ */ jsxs(
490
538
  "div",
491
539
  {
@@ -493,23 +541,23 @@ var ChatTranslateSettingsModal = ({
493
541
  "aria-modal": "true",
494
542
  "aria-labelledby": "translate-settings-title",
495
543
  onClick: (e) => e.stopPropagation(),
496
- className: clsx16(
497
- isSingle ? "fixed bottom-6 right-6 w-[500px] max-w-[95vw]" : "relative w-[500px] max-w-[95vw]",
498
- "z-10000 overflow-visible rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
544
+ className: clsx3(
545
+ "relative w-[460px] max-w-[95%]",
546
+ "overflow-clip rounded-[6px] bg-white shadow-[0px_2px_12px_0px_rgba(59,51,51,0.1)]",
499
547
  className
500
548
  ),
501
549
  children: [
502
- /* @__PURE__ */ jsx("div", { className: "flex h-[44px] w-full items-center rounded-t-md bg-[#f8f8f8] px-6 py-[7px] shadow-[0px_2px_2px_rgba(47,47,47,0.08)]", children: /* @__PURE__ */ jsx(
550
+ /* @__PURE__ */ 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__ */ jsx(
503
551
  "h2",
504
552
  {
505
553
  id: "translate-settings-title",
506
- className: "w-full text-[20px] font-semibold text-black",
554
+ className: "text-[20px] font-semibold text-black capitalize tracking-[0.5px] truncate leading-normal",
507
555
  children: "Translation Settings"
508
556
  }
509
557
  ) }),
510
- /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
511
- /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
512
- /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium text-black", children: "Translate message into" }),
558
+ /* @__PURE__ */ jsx("div", { className: "px-6 pt-4 pb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[24px]", children: [
559
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[6px]", children: [
560
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium text-black tracking-[0.25px] leading-normal", children: "Translate message into" }),
513
561
  /* @__PURE__ */ jsx(
514
562
  Select_default,
515
563
  {
@@ -517,16 +565,16 @@ var ChatTranslateSettingsModal = ({
517
565
  value: incomingTarget,
518
566
  onChange: setIncomingTarget,
519
567
  placeholder: "Select Language",
520
- size: 36
568
+ size: 34
521
569
  }
522
570
  )
523
571
  ] }),
524
- /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-start gap-1.5 text-[#FF5300]", children: [
525
- /* @__PURE__ */ jsx(ChatInfoIcon, { className: "h-4 w-4 shrink-0" }),
526
- /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed", 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." })
572
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-[6px] items-start text-[#ff5200]", children: [
573
+ /* @__PURE__ */ jsx("span", { className: "pt-[2px] shrink-0", children: /* @__PURE__ */ jsx(ChatInfoIcon, { className: "w-4 h-4" }) }),
574
+ /* @__PURE__ */ 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." })
527
575
  ] })
528
- ] }),
529
- /* @__PURE__ */ jsx("div", { className: "flex h-[52px] items-center justify-end rounded-b-md bg-[#f8f8f8] px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
576
+ ] }) }),
577
+ /* @__PURE__ */ jsx("div", { className: "px-6 py-[9px] bg-[#f0f4ff] flex items-center justify-end rounded-b-[6px]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-6", children: [
530
578
  /* @__PURE__ */ jsx(
531
579
  Button_default,
532
580
  {
@@ -554,12 +602,679 @@ var ChatTranslateSettingsModal = ({
554
602
  ]
555
603
  }
556
604
  );
557
- if (isSingle) {
558
- return createPortal(content, document.body);
559
- }
560
- return content;
561
605
  };
562
606
  var ChatTranslateSettingsModal_default = ChatTranslateSettingsModal;
607
+ var MOCK_ADDRESSES = [
608
+ {
609
+ id: "ca-1",
610
+ isDefault: false,
611
+ addressLabel: "Office",
612
+ businessName: "Oceanget",
613
+ firstName: "Ariful",
614
+ lastName: "Islam",
615
+ mobileNumber: "+11712345678",
616
+ email: "ariful.ca@example.com",
617
+ country: "Canada",
618
+ postalCode: "M5V 3K2",
619
+ addressLine: "1001 Birchwood Ave, Apt 12",
620
+ landMark: "Near Harbourfront",
621
+ district: null,
622
+ policeStation: null,
623
+ state: "Ontario",
624
+ city: "Toronto"
625
+ },
626
+ {
627
+ id: "bd-1",
628
+ isDefault: true,
629
+ addressLabel: "Home",
630
+ firstName: "Ariful",
631
+ lastName: "Islam",
632
+ mobileNumber: "+8801712345678",
633
+ email: null,
634
+ country: "Bangladesh",
635
+ postalCode: "1212",
636
+ addressLine: "House 12, Road 34, Gulshan 2",
637
+ landMark: "N/A",
638
+ district: "Dhaka",
639
+ policeStation: "Gulshan",
640
+ state: null,
641
+ city: null
642
+ },
643
+ {
644
+ id: "bd-2",
645
+ isDefault: false,
646
+ addressLabel: "Office",
647
+ businessName: "Oceanget",
648
+ firstName: "Ariful",
649
+ lastName: "Islam",
650
+ mobileNumber: "+8801712345678",
651
+ email: null,
652
+ country: "Bangladesh",
653
+ postalCode: "1212",
654
+ addressLine: "House 12, Road 34, Gulshan 2",
655
+ landMark: "N/A",
656
+ district: "Dhaka",
657
+ policeStation: "Gulshan",
658
+ state: null,
659
+ city: null
660
+ }
661
+ ];
662
+ var toAddressCard = (a) => ({
663
+ name: `${a.firstName ?? ""} ${a.lastName ?? ""}`.trim(),
664
+ label: a.addressLabel ?? (a.isDefault ? "Home" : void 0),
665
+ businessName: a.businessName ?? void 0,
666
+ mobileNumber: a.mobileNumber,
667
+ country: a.country,
668
+ district: a.district ?? null,
669
+ policeStation: a.policeStation ?? null,
670
+ state: a.state ?? null,
671
+ city: a.city ?? null,
672
+ postalCode: a.postalCode ?? void 0,
673
+ addressLine: a.addressLine,
674
+ landMark: a.landMark ?? null
675
+ });
676
+ var FieldRow = ({ icon, label, value, highlight = false, isAction = true }) => {
677
+ if (value === null || value === void 0) return null;
678
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs tracking-[0.25px]", children: [
679
+ /* @__PURE__ */ jsx("span", { className: clsx3("flex items-center justify-center text-black", isAction ? "w-4 h-4" : "w-3.5 h-3.5"), children: icon }),
680
+ /* @__PURE__ */ jsx("strong", { className: clsx3("text-[12px] font-medium text-black", isAction ? "min-w-[106px]" : "min-w-[100px]"), children: label }),
681
+ /* @__PURE__ */ jsx("span", { className: clsx3("font-normal", highlight ? "text-black" : "text-[#636363]"), children: value ?? "N/A" })
682
+ ] });
683
+ };
684
+ var BadgeLabel = ({ label, icon }) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-xs bg-[#FFDBCF] px-2 py-[3px] text-[#FF5300] select-none", children: [
685
+ /* @__PURE__ */ jsx("span", { className: "inline-flex", children: icon }),
686
+ /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tracking-[0.5px]", children: label })
687
+ ] });
688
+ var RadioPill = ({ name, value, label, checked, onChange }) => /* @__PURE__ */ jsxs("label", { className: "group inline-flex h-[30px] select-none overflow-hidden rounded-xs bg-[#F8F8F8] cursor-pointer", children: [
689
+ /* @__PURE__ */ jsx(
690
+ "input",
691
+ {
692
+ type: "radio",
693
+ name,
694
+ value,
695
+ checked,
696
+ onChange: () => onChange(value),
697
+ className: "sr-only"
698
+ }
699
+ ),
700
+ /* @__PURE__ */ jsx("span", { className: "flex h-[30px] w-[30px] items-center justify-center rounded-xs border border-[#F8F8F8] bg-white", children: /* @__PURE__ */ jsx(
701
+ "span",
702
+ {
703
+ className: clsx3(
704
+ "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",
705
+ checked ? "border-[#3D3D3D]" : ""
706
+ ),
707
+ children: /* @__PURE__ */ jsx(
708
+ "span",
709
+ {
710
+ className: clsx3(
711
+ "rounded-full bg-[#3D3D3D] transition-all duration-200 ease-out",
712
+ checked ? "h-2 w-2 opacity-100" : "h-2 w-2 opacity-0",
713
+ "group-hover:h-[6px] group-hover:w-[6px]"
714
+ )
715
+ }
716
+ )
717
+ }
718
+ ) }),
719
+ /* @__PURE__ */ jsx("span", { className: "flex h-full items-center px-4 text-sm font-medium tracking-[0.25px] text-[#2C2C2C]", children: label })
720
+ ] });
721
+ var CustomerAddressCard = ({ addr, isSelected, onSelect, onEdit, onDelete }) => {
722
+ const fullName = [addr.firstName, addr.lastName].filter(Boolean).join(" ");
723
+ const addressParts = [
724
+ addr.landMark,
725
+ addr.addressLine,
726
+ addr.policeStation,
727
+ addr.district,
728
+ addr.state,
729
+ addr.city,
730
+ addr.postalCode,
731
+ addr.country
732
+ ].filter((part) => part && String(part).trim().length > 0);
733
+ const combinedAddress = addressParts.length ? addressParts.join(", ") : void 0;
734
+ return /* @__PURE__ */ jsx(
735
+ "div",
736
+ {
737
+ className: clsx3(
738
+ "border rounded-sm p-3 relative cursor-pointer hover:border-[#636363] flex gap-3",
739
+ isSelected ? "text-black border-[#636363]" : "border-[#ededed]"
740
+ ),
741
+ onClick: onSelect,
742
+ onKeyDown: (e) => {
743
+ if (e.key === "Enter" || e.key === " ") {
744
+ e.preventDefault();
745
+ onSelect();
746
+ }
747
+ },
748
+ role: "radio",
749
+ "aria-checked": isSelected,
750
+ tabIndex: 0,
751
+ children: /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
752
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center h-[30px]", children: [
753
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[18px]", children: [
754
+ /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold tracking-[0.5px] text-black", children: fullName || "Recipient" }),
755
+ addr.addressLabel && /* @__PURE__ */ jsx(
756
+ BadgeLabel,
757
+ {
758
+ label: addr.addressLabel,
759
+ icon: addr.addressLabel === "Home" ? /* @__PURE__ */ jsx(BadgeHomeAddrIcon, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(BadgeOfficeIcon, { className: "w-3 h-3" })
760
+ }
761
+ )
762
+ ] }),
763
+ addr.isDefault && /* @__PURE__ */ jsxs("span", { className: "flex items-center text-[14px] font-medium tracking-[0.5px] text-[#636363]", children: [
764
+ /* @__PURE__ */ jsx(CheckboxFilledIcon, { className: "h-[16px] w-[16px]" }),
765
+ /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: "Default" })
766
+ ] })
767
+ ] }),
768
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 text-sm mt-3 max-w-[80%] gap-y-1.5", children: [
769
+ addr.businessName && /* @__PURE__ */ jsx(
770
+ FieldRow,
771
+ {
772
+ icon: /* @__PURE__ */ jsx(BadgeOfficeIcon, { className: "w-4 h-4" }),
773
+ label: "Business Name",
774
+ value: addr.businessName,
775
+ highlight: true
776
+ }
777
+ ),
778
+ /* @__PURE__ */ jsx(
779
+ FieldRow,
780
+ {
781
+ icon: /* @__PURE__ */ jsx(MapIcon2, { className: "w-4 h-4" }),
782
+ label: "Mobile Number",
783
+ value: addr.mobileNumber,
784
+ highlight: true
785
+ }
786
+ ),
787
+ addr.email !== null && addr.email !== void 0 && /* @__PURE__ */ jsx(
788
+ FieldRow,
789
+ {
790
+ icon: /* @__PURE__ */ jsx(EmailIcon, { className: "w-4 h-4" }),
791
+ label: "Email",
792
+ value: addr.email
793
+ }
794
+ ),
795
+ /* @__PURE__ */ jsx(
796
+ FieldRow,
797
+ {
798
+ icon: /* @__PURE__ */ jsx(MapIcon2, { className: "w-4 h-4" }),
799
+ label: "Address",
800
+ value: combinedAddress
801
+ }
802
+ )
803
+ ] }),
804
+ /* @__PURE__ */ jsxs("div", { className: "absolute flex justify-end bottom-[12px] right-3 gap-3", children: [
805
+ /* @__PURE__ */ jsx(
806
+ "button",
807
+ {
808
+ type: "button",
809
+ className: "text-[#2C2C2C] hover:bg-black/10 rounded-full cursor-pointer w-9 h-9 flex items-center justify-center",
810
+ "aria-label": "Edit address",
811
+ onClick: (e) => {
812
+ e.stopPropagation();
813
+ onEdit();
814
+ },
815
+ children: /* @__PURE__ */ jsx(EditIcon, { className: "w-5 h-5 text-black" })
816
+ }
817
+ ),
818
+ /* @__PURE__ */ jsx(
819
+ "button",
820
+ {
821
+ type: "button",
822
+ className: "text-[#2C2C2C] hover:bg-black/10 rounded-full cursor-pointer w-9 h-9 flex items-center justify-center",
823
+ "aria-label": "Delete address",
824
+ onClick: (e) => {
825
+ e.stopPropagation();
826
+ onDelete();
827
+ },
828
+ children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-5 h-5 text-[#ff5200]" })
829
+ }
830
+ )
831
+ ] })
832
+ ] })
833
+ }
834
+ );
835
+ };
836
+ var Field = ({ label, required, optional, children }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
837
+ /* @__PURE__ */ jsxs("label", { className: "text-[12px] font-medium text-[#374151] tracking-[0.25px]", children: [
838
+ label,
839
+ required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[#ff5200]", children: "*" }),
840
+ optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[#9ca3af] font-normal", children: "(Optional)" })
841
+ ] }),
842
+ children
843
+ ] });
844
+ var Input = (props) => /* @__PURE__ */ jsx(
845
+ "input",
846
+ {
847
+ ...props,
848
+ className: clsx3(
849
+ "rounded-sm border border-[#ededed] px-3 py-0 text-sm text-black placeholder-[#9ca3af]",
850
+ "outline-none focus:border-[#2753fb] focus:ring-1 focus:ring-[#2753fb]/20",
851
+ "h-[34px] w-full",
852
+ props.className
853
+ )
854
+ }
855
+ );
856
+ var SelectInput = ({ value, onChange, options, placeholder, disabled }) => /* @__PURE__ */ jsxs(
857
+ "select",
858
+ {
859
+ value,
860
+ onChange: (e) => onChange(e.target.value),
861
+ disabled,
862
+ className: clsx3(
863
+ "rounded-sm border border-[#ededed] px-3 py-0 text-sm text-black bg-white",
864
+ "outline-none focus:border-[#2753fb] focus:ring-1 focus:ring-[#2753fb]/20",
865
+ "h-[34px] w-full appearance-none",
866
+ !value && "text-[#9ca3af]",
867
+ disabled && "opacity-50 cursor-not-allowed"
868
+ ),
869
+ children: [
870
+ /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
871
+ options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
872
+ ]
873
+ }
874
+ );
875
+ var BANGLADESH_DISTRICTS = [
876
+ "Dhaka",
877
+ "Chittagong",
878
+ "Sylhet",
879
+ "Rajshahi",
880
+ "Khulna",
881
+ "Barisal",
882
+ "Rangpur",
883
+ "Mymensingh",
884
+ "Gazipur",
885
+ "Narayanganj",
886
+ "Tangail",
887
+ "Faridpur",
888
+ "Comilla",
889
+ "Noakhali",
890
+ "Cox's Bazar"
891
+ ];
892
+ var COUNTRIES = ["Bangladesh", "India", "United States", "United Kingdom", "Canada", "Australia", "Germany", "France", "Saudi Arabia", "UAE"];
893
+ var AddressForm = ({ initial, onSave, onBack, mode }) => {
894
+ const [form, setForm] = useState(
895
+ initial ?? { country: "Bangladesh", isDefault: false }
896
+ );
897
+ const [addressLabel, setAddressLabel] = useState(
898
+ initial?.addressLabel?.toLowerCase() === "home" ? "home" : initial?.addressLabel?.toLowerCase() === "office" ? "office" : null
899
+ );
900
+ const [isDefault, setIsDefault] = useState(Boolean(initial?.isDefault));
901
+ const set = (k, v) => setForm((prev) => ({ ...prev, [k]: v }));
902
+ const isBD = (form.country ?? "").toLowerCase() === "bangladesh";
903
+ const handleSave = () => {
904
+ onSave({
905
+ id: initial?.id ?? `addr-${Date.now()}`,
906
+ ...form,
907
+ isDefault,
908
+ addressLabel: addressLabel === "home" ? "Home" : addressLabel === "office" ? "Office" : void 0
909
+ });
910
+ };
911
+ return /* @__PURE__ */ jsxs("form", { onSubmit: (e) => {
912
+ e.preventDefault();
913
+ handleSave();
914
+ }, className: "space-y-4", children: [
915
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
916
+ /* @__PURE__ */ jsx(Field, { label: "First Name", required: true, children: /* @__PURE__ */ jsx(Input, { value: form.firstName ?? "", onChange: (e) => set("firstName", e.target.value), placeholder: "First Name" }) }),
917
+ /* @__PURE__ */ jsx(Field, { label: "Last Name", children: /* @__PURE__ */ jsx(Input, { value: form.lastName ?? "", onChange: (e) => set("lastName", e.target.value), placeholder: "Last Name" }) })
918
+ ] }),
919
+ /* @__PURE__ */ jsx(Field, { label: "Mobile Number", required: true, children: /* @__PURE__ */ jsx(Input, { value: form.mobileNumber ?? "", onChange: (e) => set("mobileNumber", e.target.value), placeholder: "+880..." }) }),
920
+ /* @__PURE__ */ jsx(Field, { label: "Email", children: /* @__PURE__ */ jsx(Input, { type: "email", value: form.email ?? "", onChange: (e) => set("email", e.target.value), placeholder: "name@example.com" }) }),
921
+ /* @__PURE__ */ jsx(Field, { label: isBD ? "Country" : "Country / Region", required: true, children: /* @__PURE__ */ jsx(
922
+ SelectInput,
923
+ {
924
+ value: form.country ?? "",
925
+ onChange: (v) => {
926
+ set("country", v);
927
+ set("district", "");
928
+ set("policeStation", "");
929
+ set("state", "");
930
+ set("city", "");
931
+ },
932
+ options: COUNTRIES,
933
+ placeholder: "Select country"
934
+ }
935
+ ) }),
936
+ isBD ? /* @__PURE__ */ jsxs(Fragment, { children: [
937
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
938
+ /* @__PURE__ */ jsx(Field, { label: "District", required: true, children: /* @__PURE__ */ jsx(
939
+ SelectInput,
940
+ {
941
+ value: form.district ?? "",
942
+ onChange: (v) => {
943
+ set("district", v);
944
+ set("policeStation", "");
945
+ },
946
+ options: BANGLADESH_DISTRICTS,
947
+ placeholder: "District",
948
+ disabled: !form.country
949
+ }
950
+ ) }),
951
+ /* @__PURE__ */ jsx(Field, { label: "Police Station", required: true, children: /* @__PURE__ */ jsx(Input, { value: form.policeStation ?? "", onChange: (e) => set("policeStation", e.target.value), placeholder: "Police Station" }) })
952
+ ] }),
953
+ /* @__PURE__ */ jsx(Field, { label: "Postal Code", optional: true, children: /* @__PURE__ */ jsx(Input, { value: form.postalCode ?? "", onChange: (e) => set("postalCode", e.target.value), placeholder: "Postal Code" }) })
954
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
955
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
956
+ /* @__PURE__ */ jsx(Field, { label: "State", required: true, children: /* @__PURE__ */ jsx(Input, { value: form.state ?? "", onChange: (e) => set("state", e.target.value), placeholder: "State" }) }),
957
+ /* @__PURE__ */ jsx(Field, { label: "City", required: true, children: /* @__PURE__ */ jsx(Input, { value: form.city ?? "", onChange: (e) => set("city", e.target.value), placeholder: "City" }) })
958
+ ] }),
959
+ /* @__PURE__ */ jsx(Field, { label: "Postal Code", required: true, children: /* @__PURE__ */ jsx(Input, { value: form.postalCode ?? "", onChange: (e) => set("postalCode", e.target.value), placeholder: "Postal Code" }) })
960
+ ] }),
961
+ /* @__PURE__ */ jsx(Field, { label: "Address Line", required: true, children: /* @__PURE__ */ jsx(
962
+ Input,
963
+ {
964
+ value: form.addressLine ?? "",
965
+ onChange: (e) => set("addressLine", e.target.value),
966
+ placeholder: isBD ? "House/Road/Block/Sector" : "Street, Apt, Suite, etc."
967
+ }
968
+ ) }),
969
+ /* @__PURE__ */ jsx(Field, { label: "Land Mark", optional: true, children: /* @__PURE__ */ jsx(Input, { value: form.landMark ?? "", onChange: (e) => set("landMark", e.target.value), placeholder: "Nearby landmark" }) }),
970
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
971
+ /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer w-fit select-none text-sm text-[#2C2C2C] font-normal", children: [
972
+ /* @__PURE__ */ jsx(
973
+ "input",
974
+ {
975
+ type: "checkbox",
976
+ checked: isDefault,
977
+ onChange: (e) => setIsDefault(e.target.checked),
978
+ className: "sr-only"
979
+ }
980
+ ),
981
+ /* @__PURE__ */ jsx(
982
+ "span",
983
+ {
984
+ className: clsx3(
985
+ "flex h-4 w-4 items-center justify-center rounded border transition-colors",
986
+ isDefault ? "bg-black border-black" : "border-[#d1d5db] bg-white"
987
+ ),
988
+ children: isDefault && /* @__PURE__ */ 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__ */ jsx("path", { d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
989
+ }
990
+ ),
991
+ "Set as default delivery address"
992
+ ] }),
993
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[17px]", children: [
994
+ /* @__PURE__ */ jsx(RadioPill, { name: "addr-label", value: "home", checked: addressLabel === "home", label: "Home", onChange: (v) => setAddressLabel(v) }),
995
+ /* @__PURE__ */ jsx(RadioPill, { name: "addr-label", value: "office", checked: addressLabel === "office", label: "Office", onChange: (v) => setAddressLabel(v) })
996
+ ] })
997
+ ] }),
998
+ /* @__PURE__ */ jsx("button", { type: "submit", className: "sr-only", id: "addr-form-submit", children: "Submit" })
999
+ ] });
1000
+ };
1001
+ var DeleteConfirm = ({ onConfirm, onCancel }) => /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[10010] flex items-center justify-center", onClick: onCancel, children: [
1002
+ /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40" }),
1003
+ /* @__PURE__ */ jsxs(
1004
+ "div",
1005
+ {
1006
+ role: "dialog",
1007
+ "aria-modal": "true",
1008
+ 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",
1009
+ onClick: (e) => e.stopPropagation(),
1010
+ children: [
1011
+ /* @__PURE__ */ jsx("div", { className: "flex h-[44px] items-center bg-[#f8f8f8] px-6", children: /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-black", children: "Delete Address" }) }),
1012
+ /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 space-y-1", children: [
1013
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-black", children: "Are you sure you want to delete this address?" }),
1014
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-[#636363]", children: "The address is permanently removed. This action cannot be undone." })
1015
+ ] }),
1016
+ /* @__PURE__ */ jsxs("div", { className: "flex h-[52px] items-center justify-end gap-3 bg-[#f0f4ff] px-6", children: [
1017
+ /* @__PURE__ */ jsx(
1018
+ "button",
1019
+ {
1020
+ type: "button",
1021
+ onClick: onCancel,
1022
+ className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
1023
+ children: "Cancel"
1024
+ }
1025
+ ),
1026
+ /* @__PURE__ */ jsx(
1027
+ "button",
1028
+ {
1029
+ type: "button",
1030
+ onClick: onConfirm,
1031
+ className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
1032
+ children: "Delete"
1033
+ }
1034
+ )
1035
+ ] })
1036
+ ]
1037
+ }
1038
+ )
1039
+ ] });
1040
+ var ChatAddressModal = ({
1041
+ open,
1042
+ onClose,
1043
+ onSend,
1044
+ initialId,
1045
+ className,
1046
+ variant = "group"
1047
+ }) => {
1048
+ const panelRef = useRef(null);
1049
+ const bodyRef = useRef(null);
1050
+ useRef(null);
1051
+ const [mode, setMode] = useState("list");
1052
+ const [addresses, setAddresses] = useState(MOCK_ADDRESSES);
1053
+ const [editData, setEditData] = useState(null);
1054
+ const [deleteTarget, setDeleteTarget] = useState(null);
1055
+ const [formKey, setFormKey] = useState(0);
1056
+ const defaultId = initialId ?? addresses.find((a) => a.isDefault)?.id ?? addresses[0]?.id;
1057
+ const [selectedId, setSelectedId] = useState(defaultId || "");
1058
+ const selectedAddress = useMemo(
1059
+ () => addresses.find((a) => a.id === selectedId) || null,
1060
+ [addresses, selectedId]
1061
+ );
1062
+ useEffect(() => {
1063
+ bodyRef.current?.scrollTo({ top: 0, behavior: "auto" });
1064
+ }, [mode]);
1065
+ useEffect(() => {
1066
+ if (!open) return;
1067
+ const onEsc = (e) => e.key === "Escape" && onClose();
1068
+ window.addEventListener("keydown", onEsc);
1069
+ return () => window.removeEventListener("keydown", onEsc);
1070
+ }, [open, onClose]);
1071
+ useEffect(() => {
1072
+ if (open) setMode("list");
1073
+ }, [open]);
1074
+ if (!open) return null;
1075
+ const isSingle = variant === "single";
1076
+ const handleSave = (data) => {
1077
+ setAddresses((prev) => {
1078
+ const idx = prev.findIndex((a) => a.id === data.id);
1079
+ if (idx >= 0) {
1080
+ const next = [...prev];
1081
+ next[idx] = data;
1082
+ return next;
1083
+ }
1084
+ return [...prev, data];
1085
+ });
1086
+ setSelectedId(data.id);
1087
+ setMode("list");
1088
+ };
1089
+ const handleDelete = (id) => {
1090
+ setAddresses((prev) => prev.filter((a) => a.id !== id));
1091
+ if (selectedId === id) {
1092
+ const remaining = addresses.filter((a) => a.id !== id);
1093
+ setSelectedId(remaining[0]?.id ?? "");
1094
+ }
1095
+ setDeleteTarget(null);
1096
+ };
1097
+ const renderHeader = () => {
1098
+ if (mode === "list") {
1099
+ return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
1100
+ /* @__PURE__ */ jsx("h2", { className: "text-xl tracking-[0.5px] capitalize font-semibold text-black", children: "Delivery Address" }),
1101
+ /* @__PURE__ */ jsx(
1102
+ "button",
1103
+ {
1104
+ type: "button",
1105
+ onClick: () => {
1106
+ setEditData(null);
1107
+ setFormKey((k) => k + 1);
1108
+ setMode("add");
1109
+ },
1110
+ className: "text-black hover:text-[#ff5200] cursor-pointer text-sm font-medium tracking-[0.5px] underline underline-offset-4",
1111
+ children: "Add New Address"
1112
+ }
1113
+ )
1114
+ ] });
1115
+ }
1116
+ if (mode === "add") {
1117
+ return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center capitalize w-full", children: [
1118
+ /* @__PURE__ */ jsx("h2", { className: "text-xl tracking-[0.5px] font-semibold text-black", children: "Add New Address" }),
1119
+ /* @__PURE__ */ 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: [
1120
+ /* @__PURE__ */ jsx(MapPinIcon, { className: "w-[18px] h-[18px]" }),
1121
+ /* @__PURE__ */ jsx("span", { children: "Use current location" })
1122
+ ] })
1123
+ ] });
1124
+ }
1125
+ if (mode === "edit") {
1126
+ return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
1127
+ /* @__PURE__ */ jsx("h2", { className: "text-xl tracking-[0.5px] uppercase font-semibold text-black", children: "Edit Address" }),
1128
+ /* @__PURE__ */ 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: [
1129
+ /* @__PURE__ */ jsx(MapPinIcon, { className: "w-[18px] h-[18px]" }),
1130
+ /* @__PURE__ */ jsx("span", { children: "Use current location" })
1131
+ ] })
1132
+ ] });
1133
+ }
1134
+ return null;
1135
+ };
1136
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
1137
+ /* @__PURE__ */ jsxs(
1138
+ "div",
1139
+ {
1140
+ className: clsx3(
1141
+ isSingle ? "fixed inset-0 z-[10003] flex" : "absolute inset-0 z-[70] flex items-center justify-center"
1142
+ ),
1143
+ onClick: (e) => {
1144
+ e.stopPropagation();
1145
+ onClose();
1146
+ },
1147
+ children: [
1148
+ /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/30" }),
1149
+ /* @__PURE__ */ jsxs(
1150
+ "div",
1151
+ {
1152
+ ref: panelRef,
1153
+ role: "dialog",
1154
+ "aria-modal": "true",
1155
+ "aria-labelledby": "chat-address-modal-title",
1156
+ onClick: (e) => e.stopPropagation(),
1157
+ className: clsx3(
1158
+ isSingle ? "fixed bottom-6 right-6 w-[700px] max-w-[95vw]" : "relative w-[700px] max-w-[95vw]",
1159
+ "overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] z-[10004]",
1160
+ className
1161
+ ),
1162
+ children: [
1163
+ /* @__PURE__ */ 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() }),
1164
+ /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: "px-8 py-3 overflow-y-auto h-[446px] custom-scroll", children: [
1165
+ mode === "list" && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: addresses.map((addr) => /* @__PURE__ */ jsx(
1166
+ CustomerAddressCard,
1167
+ {
1168
+ addr,
1169
+ isSelected: selectedId === addr.id,
1170
+ onSelect: () => setSelectedId(addr.id),
1171
+ onEdit: () => {
1172
+ setEditData(addr);
1173
+ setFormKey((k) => k + 1);
1174
+ setMode("edit");
1175
+ },
1176
+ onDelete: () => setDeleteTarget(addr)
1177
+ },
1178
+ addr.id
1179
+ )) }),
1180
+ (mode === "add" || mode === "edit") && /* @__PURE__ */ jsx(
1181
+ AddressForm,
1182
+ {
1183
+ initial: editData ?? void 0,
1184
+ onSave: handleSave,
1185
+ onBack: () => setMode("list"),
1186
+ mode
1187
+ },
1188
+ formKey
1189
+ )
1190
+ ] }),
1191
+ /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
1192
+ mode === "list" && /* @__PURE__ */ jsxs(Fragment, { children: [
1193
+ /* @__PURE__ */ jsx(
1194
+ "button",
1195
+ {
1196
+ type: "button",
1197
+ onClick: onClose,
1198
+ className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
1199
+ children: "Cancel"
1200
+ }
1201
+ ),
1202
+ /* @__PURE__ */ jsx(
1203
+ "button",
1204
+ {
1205
+ type: "button",
1206
+ disabled: !selectedAddress,
1207
+ onClick: () => {
1208
+ if (!selectedAddress) return;
1209
+ onSend(toAddressCard(selectedAddress));
1210
+ onClose();
1211
+ },
1212
+ 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",
1213
+ children: "Send"
1214
+ }
1215
+ )
1216
+ ] }),
1217
+ mode === "add" && /* @__PURE__ */ jsxs(Fragment, { children: [
1218
+ /* @__PURE__ */ jsx(
1219
+ "button",
1220
+ {
1221
+ type: "button",
1222
+ onClick: () => setMode("list"),
1223
+ className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
1224
+ children: "Back"
1225
+ }
1226
+ ),
1227
+ /* @__PURE__ */ jsx(
1228
+ "button",
1229
+ {
1230
+ type: "button",
1231
+ onClick: () => {
1232
+ document.getElementById("addr-form-submit")?.click();
1233
+ },
1234
+ className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
1235
+ children: "Save Address"
1236
+ }
1237
+ )
1238
+ ] }),
1239
+ mode === "edit" && /* @__PURE__ */ jsxs(Fragment, { children: [
1240
+ /* @__PURE__ */ jsx(
1241
+ "button",
1242
+ {
1243
+ type: "button",
1244
+ onClick: () => setMode("list"),
1245
+ className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
1246
+ children: "Back"
1247
+ }
1248
+ ),
1249
+ /* @__PURE__ */ jsx(
1250
+ "button",
1251
+ {
1252
+ type: "button",
1253
+ onClick: () => {
1254
+ document.getElementById("addr-form-submit")?.click();
1255
+ },
1256
+ className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
1257
+ children: "Update"
1258
+ }
1259
+ )
1260
+ ] })
1261
+ ] }) })
1262
+ ]
1263
+ }
1264
+ )
1265
+ ]
1266
+ }
1267
+ ),
1268
+ deleteTarget && /* @__PURE__ */ jsx(
1269
+ DeleteConfirm,
1270
+ {
1271
+ onConfirm: () => handleDelete(deleteTarget.id),
1272
+ onCancel: () => setDeleteTarget(null)
1273
+ }
1274
+ )
1275
+ ] });
1276
+ };
1277
+ var ChatAddressModal_default = ChatAddressModal;
563
1278
  var extColor = (ext) => {
564
1279
  const e = ext.toLowerCase();
565
1280
  if (e === "pdf") {
@@ -576,7 +1291,7 @@ var extColor = (ext) => {
576
1291
  var FilePreviewChip = ({ name, sizeMB, ext, onRemove }) => /* @__PURE__ */ 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: [
577
1292
  /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
578
1293
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
579
- /* @__PURE__ */ jsx(FileIcon, { className: clsx16("h-[18px] w-[18px]", extColor(ext)) }),
1294
+ /* @__PURE__ */ jsx(FileIcon, { className: clsx3("h-[18px] w-[18px]", extColor(ext)) }),
580
1295
  " ",
581
1296
  /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-normal text-black", children: name })
582
1297
  ] }),
@@ -727,7 +1442,7 @@ var ChatComposerBar = ({
727
1442
  {
728
1443
  type: "button",
729
1444
  onClick: sendText,
730
- className: clsx16(
1445
+ className: clsx3(
731
1446
  "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]"
732
1447
  ),
733
1448
  title: hasAttachments ? "Send attachments" : "Send",
@@ -743,7 +1458,7 @@ var ChatComposerBar = ({
743
1458
  type: "button",
744
1459
  onClick: sendAttachments,
745
1460
  disabled: !hasAttachments,
746
- className: clsx16(
1461
+ className: clsx3(
747
1462
  "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
748
1463
  hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]"
749
1464
  ),
@@ -768,7 +1483,7 @@ var ChatComposerBar = ({
768
1483
  children: /* @__PURE__ */ jsx(
769
1484
  RecordMicIcon,
770
1485
  {
771
- className: clsx16(
1486
+ className: clsx3(
772
1487
  "h-6 w-6",
773
1488
  seconds % 2 === 0 ? "text-[#929292]" : "text-[#ff5301]"
774
1489
  )
@@ -822,7 +1537,8 @@ var BusinessCardDropup = ({
822
1537
  onClose,
823
1538
  onSend,
824
1539
  anchorRef,
825
- className
1540
+ className,
1541
+ onEdit
826
1542
  }) => {
827
1543
  const panelRef = useRef(null);
828
1544
  const [pos, setPos] = useState(null);
@@ -972,19 +1688,33 @@ var BusinessCardDropup = ({
972
1688
  ] }) })
973
1689
  }
974
1690
  ) }),
975
- /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-end gap-2", children: /* @__PURE__ */ jsx(
976
- "button",
977
- {
978
- type: "button",
979
- disabled,
980
- 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",
981
- onClick: () => {
982
- onSend(form);
983
- onClose();
984
- },
985
- children: "Send"
986
- }
987
- ) }),
1691
+ /* @__PURE__ */ jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
1692
+ /* @__PURE__ */ jsx(
1693
+ "button",
1694
+ {
1695
+ type: "button",
1696
+ onClick: () => {
1697
+ onClose();
1698
+ onEdit?.();
1699
+ },
1700
+ className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
1701
+ children: "Edit"
1702
+ }
1703
+ ),
1704
+ /* @__PURE__ */ jsx(
1705
+ "button",
1706
+ {
1707
+ type: "button",
1708
+ disabled,
1709
+ 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",
1710
+ onClick: () => {
1711
+ onSend(form);
1712
+ onClose();
1713
+ },
1714
+ children: "Send"
1715
+ }
1716
+ )
1717
+ ] }),
988
1718
  /* @__PURE__ */ jsx(
989
1719
  "div",
990
1720
  {
@@ -1006,9 +1736,9 @@ var GAP_Y2 = 1;
1006
1736
  var GAP_X = 1;
1007
1737
  var PADDING2 = 1;
1008
1738
  var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
1009
- const panelRef = React10.useRef(null);
1010
- const [pos, setPos] = React10.useState(null);
1011
- const place = React10.useCallback(() => {
1739
+ const panelRef = React16.useRef(null);
1740
+ const [pos, setPos] = React16.useState(null);
1741
+ const place = React16.useCallback(() => {
1012
1742
  const anchor = anchorRef?.current;
1013
1743
  const panel = panelRef.current;
1014
1744
  if (!anchor || !panel) {
@@ -1065,9 +1795,10 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
1065
1795
  ref: panelRef,
1066
1796
  role: "dialog",
1067
1797
  "aria-label": "Emoji picker",
1068
- className: clsx16("emoji-dropup", className),
1798
+ className: clsx3("emoji-dropup", className),
1069
1799
  style: {
1070
- zIndex: "9999",
1800
+ zIndex: 99999,
1801
+ // Must be above chat panel z-index (10002)
1071
1802
  width: WIDTH2,
1072
1803
  left: pos?.left ?? -9999,
1073
1804
  top: pos?.top ?? -9999,
@@ -1094,7 +1825,7 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
1094
1825
  };
1095
1826
  var EmojiDropup_default = EmojiDropup;
1096
1827
 
1097
- // src/ui/chat/scrollToMessage.ts
1828
+ // src/ui/scrollToMessage.ts
1098
1829
  function scrollToMessageById(messageId) {
1099
1830
  if (!messageId) {
1100
1831
  return;
@@ -1158,8 +1889,8 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
1158
1889
  const mode = hasText ? "text" : hasFiles ? "files" : hasImages ? "images" : "audio";
1159
1890
  const widthClamp = onClose ? "w-full" : "max-w-[200px] w-full";
1160
1891
  const heightClamp = compact ? "py-1.5" : "py-1.5";
1161
- const [durTxt, setDurTxt] = React10.useState(refMsg.audio?.duration ?? "0:06");
1162
- React10.useEffect(() => {
1892
+ const [durTxt, setDurTxt] = React16.useState(refMsg.audio?.duration ?? "0:06");
1893
+ React16.useEffect(() => {
1163
1894
  if (mode !== "audio" || !refMsg.audio?.src) {
1164
1895
  setDurTxt(refMsg.audio?.duration ?? "0:06");
1165
1896
  return;
@@ -1197,7 +1928,7 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
1197
1928
  a.removeEventListener("error", onError);
1198
1929
  };
1199
1930
  }, [mode, refMsg.audio?.src, refMsg.audio?.duration]);
1200
- const clickToJump = React10.useCallback(() => {
1931
+ const clickToJump = React16.useCallback(() => {
1201
1932
  if (!jumpOnClick) {
1202
1933
  return;
1203
1934
  }
@@ -1209,7 +1940,7 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
1209
1940
  "div",
1210
1941
  {
1211
1942
  onClick: clickToJump,
1212
- className: clsx16(
1943
+ className: clsx3(
1213
1944
  widthClamp,
1214
1945
  "relative rounded-md bg-[#f8f8f8] px-3",
1215
1946
  "border-l-2 border-[#FF5300]",
@@ -1307,10 +2038,11 @@ var ChatFooter = ({
1307
2038
  maxRows = 4,
1308
2039
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
1309
2040
  actions: _actions,
2041
+ hiddenActionKeys = [],
1310
2042
  replyTo,
1311
2043
  clearReply
1312
2044
  }) => {
1313
- const actionData = [
2045
+ const allActions = [
1314
2046
  { key: "attachment", title: "Attach file", icon: /* @__PURE__ */ jsx(AttachIcon, { className: "h-4 w-4" }) },
1315
2047
  { key: "emoji", title: "Add emoji", icon: /* @__PURE__ */ jsx(SmileIcon, { className: "h-4 w-4" }) },
1316
2048
  {
@@ -1318,12 +2050,18 @@ var ChatFooter = ({
1318
2050
  title: "Share business card",
1319
2051
  icon: /* @__PURE__ */ jsx(ProfileCardIcon, { className: "h-4 w-4" })
1320
2052
  },
2053
+ {
2054
+ key: "addressCard",
2055
+ title: "Share address",
2056
+ icon: /* @__PURE__ */ jsx(MapIcon2, { className: "h-4 w-4" })
2057
+ },
1321
2058
  {
1322
2059
  key: "translate",
1323
2060
  title: "Translation settings",
1324
2061
  icon: /* @__PURE__ */ jsx(NewLanguageIcon, { className: "h-4 w-4" })
1325
2062
  }
1326
2063
  ];
2064
+ const actionData = hiddenActionKeys.length ? allActions.filter((a) => !hiddenActionKeys.includes(a.key)) : allActions;
1327
2065
  const textRef = useRef(null);
1328
2066
  const emojiBtnRef = useRef(null);
1329
2067
  const [text, setText] = useState("");
@@ -1347,8 +2085,13 @@ var ChatFooter = ({
1347
2085
  });
1348
2086
  const bizBtnRef = useRef(null);
1349
2087
  const [showBiz, setShowBiz] = useState(false);
2088
+ const [showBizEdit, setShowBizEdit] = useState(false);
2089
+ const handleOpenBizEdit = () => {
2090
+ setShowBiz(false);
2091
+ setShowBizEdit(true);
2092
+ };
1350
2093
  const addrBtnRef = useRef(null);
1351
- const [, setShowAddress] = useState(false);
2094
+ const [showAddress, setShowAddress] = useState(false);
1352
2095
  const insertEmoji = (emoji) => {
1353
2096
  const el = textRef.current;
1354
2097
  if (!el) {
@@ -1364,7 +2107,7 @@ var ChatFooter = ({
1364
2107
  el.setSelectionRange(pos, pos);
1365
2108
  });
1366
2109
  };
1367
- const handleAutoGrow = React10.useCallback(() => {
2110
+ const handleAutoGrow = React16.useCallback(() => {
1368
2111
  const el = textRef.current;
1369
2112
  if (!el) {
1370
2113
  return;
@@ -1528,7 +2271,7 @@ var ChatFooter = ({
1528
2271
  }
1529
2272
  setSeconds(0);
1530
2273
  };
1531
- return /* @__PURE__ */ jsxs("div", { className: clsx16("border-t border-[#ededed] bg-white p-3.5", className), children: [
2274
+ return /* @__PURE__ */ jsxs("div", { className: clsx3("border-t border-[#ededed] bg-white p-3.5", className), children: [
1532
2275
  replyTo && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(ReplyCard_default, { refMsg: replyTo, onClose: clearReply }) }),
1533
2276
  /* @__PURE__ */ jsx(
1534
2277
  AttachmentPreviewStrip_default,
@@ -1578,7 +2321,8 @@ var ChatFooter = ({
1578
2321
  open: showBiz,
1579
2322
  onClose: () => setShowBiz(false),
1580
2323
  anchorRef: bizBtnRef,
1581
- onSend: async (card) => {
2324
+ onEdit: handleOpenBizEdit,
2325
+ onSend: (card) => {
1582
2326
  onSend({ type: "businessCard", card, replyTo });
1583
2327
  clearReply?.();
1584
2328
  onAfterSend?.();
@@ -1622,16 +2366,95 @@ var ChatFooter = ({
1622
2366
  setShowTranslate(false);
1623
2367
  }
1624
2368
  }
2369
+ ),
2370
+ /* @__PURE__ */ jsx(
2371
+ ChatAddressModal_default,
2372
+ {
2373
+ variant,
2374
+ open: showAddress,
2375
+ onClose: () => setShowAddress(false),
2376
+ onSend: (card) => {
2377
+ onSend({ type: "addressCard", card, replyTo });
2378
+ clearReply?.();
2379
+ onAfterSend?.();
2380
+ }
2381
+ }
2382
+ ),
2383
+ showBizEdit && /* @__PURE__ */ jsxs(
2384
+ "div",
2385
+ {
2386
+ className: "fixed inset-0 z-[10003] flex items-center justify-center",
2387
+ onClick: () => setShowBizEdit(false),
2388
+ children: [
2389
+ /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/30" }),
2390
+ /* @__PURE__ */ jsxs(
2391
+ "div",
2392
+ {
2393
+ role: "dialog",
2394
+ "aria-modal": "true",
2395
+ onClick: (e) => e.stopPropagation(),
2396
+ 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)]",
2397
+ children: [
2398
+ /* @__PURE__ */ jsxs("div", { className: "flex h-[44px] items-center justify-between bg-[#f8f8f8] px-6", children: [
2399
+ /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-black", children: "Business Info" }),
2400
+ /* @__PURE__ */ jsx(
2401
+ "button",
2402
+ {
2403
+ type: "button",
2404
+ onClick: () => setShowBizEdit(false),
2405
+ className: "flex h-8 w-8 items-center justify-center rounded-full hover:bg-black/10 cursor-pointer",
2406
+ children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-5 w-5" })
2407
+ }
2408
+ )
2409
+ ] }),
2410
+ /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-3 text-sm text-[#374151]", children: [
2411
+ /* @__PURE__ */ jsx("p", { className: "text-[#6b7280]", children: "Update your business card information below." }),
2412
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: ["First Name", "Last Name", "Business Name", "Mobile", "Email", "Website"].map((label) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
2413
+ /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-[#374151]", children: label }),
2414
+ /* @__PURE__ */ jsx(
2415
+ "input",
2416
+ {
2417
+ placeholder: label,
2418
+ 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"
2419
+ }
2420
+ )
2421
+ ] }, label)) })
2422
+ ] }),
2423
+ /* @__PURE__ */ jsxs("div", { className: "flex h-[52px] items-center justify-end gap-3 bg-[#f0f4ff] px-6", children: [
2424
+ /* @__PURE__ */ jsx(
2425
+ "button",
2426
+ {
2427
+ type: "button",
2428
+ onClick: () => setShowBizEdit(false),
2429
+ className: "h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]",
2430
+ children: "Cancel"
2431
+ }
2432
+ ),
2433
+ /* @__PURE__ */ jsx(
2434
+ "button",
2435
+ {
2436
+ type: "button",
2437
+ onClick: () => setShowBizEdit(false),
2438
+ className: "h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]",
2439
+ children: "Save"
2440
+ }
2441
+ )
2442
+ ] })
2443
+ ]
2444
+ }
2445
+ )
2446
+ ]
2447
+ }
1625
2448
  )
1626
2449
  ] });
1627
2450
  };
1628
2451
  var ChatFooter_default = ChatFooter;
1629
2452
  function ChatHeader({ left, right, below, className }) {
1630
- return /* @__PURE__ */ jsxs("div", { className: `border-b border-[#ededed] h-[64px]${className ? ` ${className}` : ""}`, children: [
1631
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 h-full", children: [
2453
+ return /* @__PURE__ */ jsxs("div", { children: [
2454
+ /* @__PURE__ */ jsx("div", { className: clsx3("border-b border-[#ededed] h-[64px]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-2.5", children: [
1632
2455
  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: left }),
1633
2456
  right
1634
- ] }),
2457
+ ] }) }),
1635
2458
  below && /* @__PURE__ */ jsx(Fragment, { children: below })
1636
2459
  ] });
1637
2460
  }
@@ -1649,11 +2472,11 @@ var ChatIdentity = (props) => {
1649
2472
  size = 46,
1650
2473
  className
1651
2474
  } = props;
1652
- const subtitleClass = clsx16(
2475
+ const subtitleClass = clsx3(
1653
2476
  "text-[10px] font-medium",
1654
2477
  subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]"
1655
2478
  );
1656
- return /* @__PURE__ */ jsxs("div", { className: clsx16("flex items-start gap-3", className), children: [
2479
+ return /* @__PURE__ */ jsxs("div", { className: clsx3("flex items-start gap-3", className), children: [
1657
2480
  /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
1658
2481
  props.variant === "avatar" && /* @__PURE__ */ jsx(
1659
2482
  "img",
@@ -1666,7 +2489,7 @@ var ChatIdentity = (props) => {
1666
2489
  props.variant === "initial" && /* @__PURE__ */ jsx(
1667
2490
  "div",
1668
2491
  {
1669
- className: clsx16(
2492
+ className: clsx3(
1670
2493
  "grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
1671
2494
  props.textClassName
1672
2495
  ),
@@ -1741,7 +2564,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
1741
2564
  return /* @__PURE__ */ jsxs(
1742
2565
  "div",
1743
2566
  {
1744
- className: clsx16(
2567
+ className: clsx3(
1745
2568
  "flex items-center justify-between border-b border-[#ededed] bg-[#f8f8f8] ps-[16px] pe-[30px] h-[30px]",
1746
2569
  className
1747
2570
  ),
@@ -1774,11 +2597,16 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
1774
2597
  );
1775
2598
  };
1776
2599
  var ChatInquiryBar_default = ChatInquiryBar;
1777
- var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1778
- const [searching, setSearching] = React10.useState(false);
1779
- const [q, setQ] = React10.useState("");
1780
- const inputRef = React10.useRef(null);
1781
- React10.useEffect(() => {
2600
+ var ChatListHeader = ({
2601
+ className,
2602
+ onClose,
2603
+ onSearchChange,
2604
+ hideSearch = false
2605
+ }) => {
2606
+ const [searching, setSearching] = React16.useState(false);
2607
+ const [q, setQ] = React16.useState("");
2608
+ const inputRef = React16.useRef(null);
2609
+ React16.useEffect(() => {
1782
2610
  const timer = searching ? setTimeout(() => {
1783
2611
  inputRef.current?.focus();
1784
2612
  }, 220) : void 0;
@@ -1786,8 +2614,10 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1786
2614
  clearTimeout(timer);
1787
2615
  };
1788
2616
  }, [searching]);
1789
- React10.useEffect(() => {
1790
- if (!searching) return;
2617
+ React16.useEffect(() => {
2618
+ if (!searching) {
2619
+ return;
2620
+ }
1791
2621
  const onKey = (e) => {
1792
2622
  if (e.key === "Escape") {
1793
2623
  setSearching(false);
@@ -1806,7 +2636,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1806
2636
  inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
1807
2637
  outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } }
1808
2638
  };
1809
- return /* @__PURE__ */ jsx("div", { className: `h-[64px] border-b border-[#ededed]${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxs(
2639
+ return /* @__PURE__ */ jsx("div", { className: clsx3("h-[64px] border-b border-[#ededed]", className), children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxs(
1810
2640
  motion.div,
1811
2641
  {
1812
2642
  className: "flex w-full items-center justify-between",
@@ -1820,7 +2650,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1820
2650
  /* @__PURE__ */ jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
1821
2651
  ] }) }),
1822
2652
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1823
- /* @__PURE__ */ jsx(
2653
+ !hideSearch && /* @__PURE__ */ jsx(
1824
2654
  "button",
1825
2655
  {
1826
2656
  title: "Search",
@@ -1853,7 +2683,6 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1853
2683
  children: /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex h-10 w-full items-center rounded-full border border-[#6A6A6A] bg-white px-[4px] gap-1.5", children: [
1854
2684
  /* @__PURE__ */ jsxs("div", { className: "flex items-center ms-[12px] w-full", children: [
1855
2685
  /* @__PURE__ */ jsx("span", { className: "mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]", children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
1856
- /* @__PURE__ */ jsx("span", { className: "mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" }),
1857
2686
  /* @__PURE__ */ jsx(
1858
2687
  "input",
1859
2688
  {
@@ -1868,7 +2697,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1868
2697
  }
1869
2698
  )
1870
2699
  ] }),
1871
- /* @__PURE__ */ jsx(
2700
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
1872
2701
  "button",
1873
2702
  {
1874
2703
  title: "Close search",
@@ -1880,7 +2709,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
1880
2709
  className: "grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent",
1881
2710
  children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-5 h-5" })
1882
2711
  }
1883
- )
2712
+ ) })
1884
2713
  ] }) })
1885
2714
  },
1886
2715
  "search"
@@ -1942,7 +2771,7 @@ var ChatAddressCard = ({ mine, card, className }) => {
1942
2771
  return /* @__PURE__ */ jsxs(
1943
2772
  "div",
1944
2773
  {
1945
- className: clsx16(
2774
+ className: clsx3(
1946
2775
  "w-[340px] rounded-md bg-[#f8f8f8] p-2",
1947
2776
  mine ? "ml-auto" : "mr-auto",
1948
2777
  className
@@ -1990,13 +2819,13 @@ var PlayIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20
1990
2819
  var PauseIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 4h4v12H5V4zm6 0h4v12h-4V4z" }) });
1991
2820
  var audioRegistry = /* @__PURE__ */ new Set();
1992
2821
  var ChatBubbleAudio = ({ mine, audio }) => {
1993
- const ref = React10.useRef(null);
1994
- const trackRef = React10.useRef(null);
1995
- const [playing, setPlaying] = React10.useState(false);
1996
- const [progress, setProgress] = React10.useState(0);
1997
- const [durSec, setDurSec] = React10.useState(0);
1998
- const [remain, setRemain] = React10.useState(audio.duration ?? "0:00");
1999
- React10.useEffect(() => {
2822
+ const ref = React16.useRef(null);
2823
+ const trackRef = React16.useRef(null);
2824
+ const [playing, setPlaying] = React16.useState(false);
2825
+ const [progress, setProgress] = React16.useState(0);
2826
+ const [durSec, setDurSec] = React16.useState(0);
2827
+ const [remain, setRemain] = React16.useState(audio.duration ?? "0:00");
2828
+ React16.useEffect(() => {
2000
2829
  const a = ref.current;
2001
2830
  if (!a) {
2002
2831
  return;
@@ -2090,7 +2919,7 @@ var ChatBubbleAudio = ({ mine, audio }) => {
2090
2919
  type: "button",
2091
2920
  "aria-label": playing ? "Pause" : "Play",
2092
2921
  onClick: toggle,
2093
- className: clsx16(
2922
+ className: clsx3(
2094
2923
  "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
2095
2924
  mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]"
2096
2925
  ),
@@ -2161,7 +2990,7 @@ var extColor2 = (ext) => {
2161
2990
  var FileChip = ({ file }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border border-[#e1e1e1] bg-white px-3 py-2", children: [
2162
2991
  /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
2163
2992
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
2164
- /* @__PURE__ */ jsx(FileIcon, { className: clsx16("h-[18px] w-[18px]", extColor2(file.ext)) }),
2993
+ /* @__PURE__ */ jsx(FileIcon, { className: clsx3("h-[18px] w-[18px]", extColor2(file.ext)) }),
2165
2994
  " ",
2166
2995
  /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-black", children: file.name })
2167
2996
  ] }),
@@ -2276,14 +3105,14 @@ var ChatBubbleText = ({ mine, text }) => {
2276
3105
  const color = mine ? "bg-[#f8f8f8] border-[#f1f1f1]" : "bg-white border-[#EFEFEF]";
2277
3106
  const corner = mine ? "rounded-tr-[6px]" : "rounded-tl-md";
2278
3107
  const textFormatting = "whitespace-pre-wrap break-words";
2279
- return /* @__PURE__ */ jsx("div", { className: clsx16(base, color, corner, textFormatting), children: text });
3108
+ return /* @__PURE__ */ jsx("div", { className: clsx3(base, color, corner, textFormatting), children: text });
2280
3109
  };
2281
3110
  var ChatBubbleText_default = ChatBubbleText;
2282
3111
  var ChatBusinessCard = ({ mine, card }) => {
2283
3112
  return /* @__PURE__ */ jsx(
2284
3113
  "div",
2285
3114
  {
2286
- className: clsx16(
3115
+ className: clsx3(
2287
3116
  "relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white bg-cover bg-no-repeat",
2288
3117
  "shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
2289
3118
  mine ? "ml-auto" : "mr-auto"
@@ -2343,13 +3172,13 @@ var MessageHoverActions = ({
2343
3172
  const showTranslate = !isItemButton || isItemButton.includes("translate");
2344
3173
  const hasAny = showReplay || showTranslate;
2345
3174
  const isActive = (k) => !!activeButtons?.includes(k);
2346
- return /* @__PURE__ */ jsxs("div", { className: clsx16("relative inline-flex group/message", className), children: [
3175
+ return /* @__PURE__ */ jsxs("div", { className: clsx3("relative inline-flex group/message", className), children: [
2347
3176
  children,
2348
3177
  hasAny && /* @__PURE__ */ jsx(
2349
3178
  "div",
2350
3179
  {
2351
3180
  "aria-hidden": true,
2352
- className: clsx16(
3181
+ className: clsx3(
2353
3182
  "absolute inset-y-0 w-2",
2354
3183
  mine ? "right-full" : "left-full",
2355
3184
  "pointer-events-auto"
@@ -2359,7 +3188,7 @@ var MessageHoverActions = ({
2359
3188
  hasAny && /* @__PURE__ */ jsx(
2360
3189
  "div",
2361
3190
  {
2362
- className: clsx16(
3191
+ className: clsx3(
2363
3192
  "absolute bottom-0 pointer-events-auto transition-opacity",
2364
3193
  sidePos,
2365
3194
  railNudge,
@@ -2379,7 +3208,7 @@ var MessageHoverActions = ({
2379
3208
  e.stopPropagation();
2380
3209
  onReply?.();
2381
3210
  },
2382
- className: clsx16(
3211
+ className: clsx3(
2383
3212
  "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]",
2384
3213
  isActive("replay") && "bg-[#636363] text-white"
2385
3214
  ),
@@ -2400,7 +3229,7 @@ var MessageHoverActions = ({
2400
3229
  e.stopPropagation();
2401
3230
  onTranslate?.();
2402
3231
  },
2403
- className: clsx16(
3232
+ className: clsx3(
2404
3233
  "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]",
2405
3234
  isActive("translate") && "!bg-[#636363] text-white"
2406
3235
  ),
@@ -2449,14 +3278,14 @@ var ChatMessageItem = ({
2449
3278
  onTranslate,
2450
3279
  initialSrc
2451
3280
  }) => {
2452
- const originalTextRef = React10.useRef(text ?? "");
2453
- const [translated, setTranslated] = React10.useState(false);
3281
+ const originalTextRef = React16.useRef(text ?? "");
3282
+ const [translated, setTranslated] = React16.useState(false);
2454
3283
  const displayText = translated ? toBanglaDemo(originalTextRef.current) : originalTextRef.current;
2455
3284
  const handleTranslateClick = () => {
2456
3285
  setTranslated((v) => !v);
2457
3286
  onTranslate?.();
2458
3287
  };
2459
- return /* @__PURE__ */ jsx("div", { className: clsx16("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx16("flex items-end gap-3", mine && "justify-end"), children: [
3288
+ return /* @__PURE__ */ jsx("div", { className: clsx3("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx3("flex items-end gap-3", mine && "justify-end"), children: [
2460
3289
  !mine && /* @__PURE__ */ jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: [
2461
3290
  /* @__PURE__ */ jsx(
2462
3291
  "img",
@@ -2478,19 +3307,19 @@ var ChatMessageItem = ({
2478
3307
  ]
2479
3308
  }
2480
3309
  ) }),
2481
- /* @__PURE__ */ jsxs("div", { className: clsx16("flex flex-col gap-1 w-full"), children: [
3310
+ /* @__PURE__ */ jsxs("div", { className: clsx3("flex flex-col gap-1 w-full"), children: [
2482
3311
  /* @__PURE__ */ jsx(
2483
3312
  "div",
2484
3313
  {
2485
- className: clsx16(
3314
+ className: clsx3(
2486
3315
  " text-xs font-light text-[#636363]",
2487
3316
  mine ? "text-right" : "text-left"
2488
3317
  ),
2489
3318
  children: time
2490
3319
  }
2491
3320
  ),
2492
- /* @__PURE__ */ jsxs("div", { className: clsx16("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
2493
- /* @__PURE__ */ jsx("div", { className: clsx16("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
3321
+ /* @__PURE__ */ jsxs("div", { className: clsx3("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
3322
+ /* @__PURE__ */ jsx("div", { className: clsx3("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
2494
3323
  businessCard ? /* @__PURE__ */ jsx(ChatBusinessCard_default, { mine, card: businessCard }) : null,
2495
3324
  addressCard ? /* @__PURE__ */ jsx(ChatAddressCard_default, { mine, card: addressCard }) : null,
2496
3325
  images?.length ? /* @__PURE__ */ jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsx(ChatBubbleImages_default, { images }) }) : null,
@@ -2507,42 +3336,40 @@ var ChatMessageItem = ({
2507
3336
  children: /* @__PURE__ */ jsx(ChatBubbleText_default, { mine, text: displayText })
2508
3337
  }
2509
3338
  ) : null,
2510
- showStatus && /* @__PURE__ */ jsx("div", { className: clsx16("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
3339
+ showStatus && /* @__PURE__ */ jsx("div", { className: clsx3("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
2511
3340
  ] })
2512
3341
  ] })
2513
3342
  ] }) });
2514
3343
  };
2515
3344
  var ChatMessageItem_default = ChatMessageItem;
2516
- var ChatScroll = ({
2517
- top,
2518
- children,
2519
- className,
2520
- style,
2521
- bottomAlignWhenShort = false,
2522
- scrollKey
2523
- }) => {
2524
- const ref = React10.useRef(null);
2525
- const scrollToBottom = React10.useCallback(() => {
3345
+ var ChatScroll = React16.forwardRef(function ChatScroll2({ top, children, className, bottomAlignWhenShort = false, scrollKey }, _) {
3346
+ const ref = React16.useRef(null);
3347
+ const scrollToBottom = React16.useCallback(() => {
2526
3348
  const el = ref.current;
2527
- if (!el) return;
3349
+ if (!el) {
3350
+ return;
3351
+ }
2528
3352
  el.scrollTop = el.scrollHeight;
2529
3353
  }, []);
2530
- React10.useEffect(() => {
3354
+ React16.useLayoutEffect(() => {
2531
3355
  scrollToBottom();
2532
- const id = window.setTimeout(scrollToBottom, 0);
2533
- return () => window.clearTimeout(id);
2534
3356
  }, [scrollKey, scrollToBottom]);
2535
3357
  return /* @__PURE__ */ jsx(
2536
3358
  "div",
2537
3359
  {
2538
3360
  ref,
2539
3361
  "data-chat-scroll": true,
2540
- className: `h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`,
2541
- style,
3362
+ className: clsx3(
3363
+ "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
3364
+ className
3365
+ ),
2542
3366
  children: /* @__PURE__ */ jsxs(
2543
3367
  "div",
2544
3368
  {
2545
- className: `min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`,
3369
+ className: clsx3(
3370
+ "min-h-full flex flex-col",
3371
+ bottomAlignWhenShort ? "justify-end" : "justify-between"
3372
+ ),
2546
3373
  children: [
2547
3374
  top,
2548
3375
  children
@@ -2551,7 +3378,7 @@ var ChatScroll = ({
2551
3378
  )
2552
3379
  }
2553
3380
  );
2554
- };
3381
+ });
2555
3382
  var ChatScroll_default = ChatScroll;
2556
3383
  var ChatThreadItem = ({
2557
3384
  active,
@@ -2564,12 +3391,10 @@ var ChatThreadItem = ({
2564
3391
  status,
2565
3392
  avatarText,
2566
3393
  avatarSrc,
2567
- _size = 46,
2568
3394
  avatarBg = "#FFF1EC",
2569
3395
  className,
2570
3396
  onClick
2571
3397
  }) => {
2572
- const count = status.kind === "new" ? String(Math.max(0, status.count)).padStart(2, "0") : "";
2573
3398
  const statusEl = (() => {
2574
3399
  switch (status.kind) {
2575
3400
  case "seen":
@@ -2578,7 +3403,7 @@ var ChatThreadItem = ({
2578
3403
  return /* @__PURE__ */ jsx("span", { className: "text-[#B7B7B7]", children: "Delivered" });
2579
3404
  case "new":
2580
3405
  return /* @__PURE__ */ jsxs("span", { className: "text-[#E63946]", children: [
2581
- count,
3406
+ String(Math.max(0, status.count)).padStart(2, "0"),
2582
3407
  " New"
2583
3408
  ] });
2584
3409
  default:
@@ -2589,7 +3414,7 @@ var ChatThreadItem = ({
2589
3414
  "button",
2590
3415
  {
2591
3416
  onClick,
2592
- className: clsx16(
3417
+ className: clsx3(
2593
3418
  "relative w-full text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
2594
3419
  active && "bg-[#f8f8f8]",
2595
3420
  className
@@ -2598,7 +3423,7 @@ var ChatThreadItem = ({
2598
3423
  pinned && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-0 w-0 border-l-16 border-t-16 border-l-transparent border-t-[#FFD2BD]" }),
2599
3424
  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 border-b border-[#f8f8f8] pb-2", children: [
2600
3425
  /* @__PURE__ */ jsxs("div", { className: "relative mt-[2px]", children: [
2601
- avatarSrc ? /* @__PURE__ */ jsx("div", { className: "grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1] relative overflow-hidden", children: /* @__PURE__ */ jsx(
3426
+ avatarSrc ? /* @__PURE__ */ jsx("div", { className: "grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1]", children: /* @__PURE__ */ jsx(
2602
3427
  "img",
2603
3428
  {
2604
3429
  src: avatarSrc,
@@ -2882,9 +3707,97 @@ var ChatImagePreviewModal = ({
2882
3707
  ) }) });
2883
3708
  };
2884
3709
  var ChatImagePreviewModal_default = ChatImagePreviewModal;
3710
+ var baseItem = "flex w-full items-center gap-3 px-3 py-2 text-sm hover:bg-black/5 cursor-pointer";
3711
+ var ChatKebabMenu = ({
3712
+ pinned,
3713
+ onPinToggle,
3714
+ onDelete,
3715
+ className
3716
+ }) => {
3717
+ const [open, setOpen] = useState(false);
3718
+ const btnRef = useRef(null);
3719
+ const menuId = "chat-kebab-menu";
3720
+ useEffect(() => {
3721
+ if (!open) return;
3722
+ const onDoc = (e) => {
3723
+ const menu = document.getElementById(menuId);
3724
+ if (!menu || !btnRef.current) return;
3725
+ const target = e.target;
3726
+ if (menu.contains(target) || btnRef.current.contains(target)) return;
3727
+ setOpen(false);
3728
+ };
3729
+ document.addEventListener("mousedown", onDoc);
3730
+ return () => document.removeEventListener("mousedown", onDoc);
3731
+ }, [open]);
3732
+ useEffect(() => {
3733
+ if (!open) return;
3734
+ const onKey = (e) => e.key === "Escape" && setOpen(false);
3735
+ document.addEventListener("keydown", onKey);
3736
+ return () => document.removeEventListener("keydown", onKey);
3737
+ }, [open]);
3738
+ return /* @__PURE__ */ jsxs("div", { className: clsx3("relative", className), children: [
3739
+ /* @__PURE__ */ jsx(
3740
+ "button",
3741
+ {
3742
+ ref: btnRef,
3743
+ type: "button",
3744
+ className: "grid h-9 w-9 place-items-center rounded-full hover:bg-black/5 cursor-pointer",
3745
+ onClick: () => setOpen((v) => !v),
3746
+ "aria-haspopup": "menu",
3747
+ "aria-expanded": open,
3748
+ title: "More options",
3749
+ children: /* @__PURE__ */ jsx(MenuIcon, { className: "w-6 h-6" })
3750
+ }
3751
+ ),
3752
+ open && /* @__PURE__ */ jsxs(
3753
+ "div",
3754
+ {
3755
+ id: menuId,
3756
+ role: "menu",
3757
+ 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)]",
3758
+ children: [
3759
+ /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute -z-[1] -top-[6px] right-4 h-3 w-3 rotate-45 bg-white" }),
3760
+ /* @__PURE__ */ jsxs(
3761
+ "button",
3762
+ {
3763
+ role: "menuitem",
3764
+ type: "button",
3765
+ className: baseItem,
3766
+ onClick: () => {
3767
+ onPinToggle?.();
3768
+ setOpen(false);
3769
+ },
3770
+ children: [
3771
+ pinned ? /* @__PURE__ */ jsx(PinOffIcon, { className: "h-[18px] w-[18px] text-[#636363]" }) : /* @__PURE__ */ jsx(PinIcon, { className: "h-[18px] w-[18px] text-[#636363]" }),
3772
+ /* @__PURE__ */ jsx("span", { className: "text-[#161616]", children: pinned ? "Unpin" : "Pin on top" })
3773
+ ]
3774
+ }
3775
+ ),
3776
+ /* @__PURE__ */ jsxs(
3777
+ "button",
3778
+ {
3779
+ role: "menuitem",
3780
+ type: "button",
3781
+ className: baseItem,
3782
+ onClick: () => {
3783
+ onDelete?.();
3784
+ setOpen(false);
3785
+ },
3786
+ children: [
3787
+ /* @__PURE__ */ jsx(TrashIcon, { className: "h-[18px] w-[18px] text-[#636363]" }),
3788
+ /* @__PURE__ */ jsx("span", { className: "text-[#161616]", children: "Delete" })
3789
+ ]
3790
+ }
3791
+ )
3792
+ ]
3793
+ }
3794
+ )
3795
+ ] });
3796
+ };
3797
+ var ChatKebabMenu_default = ChatKebabMenu;
2885
3798
  var avatarBgByInitial = {
2886
3799
  K: "#FFE7DB",
2887
- A: "#FFE5DA",
3800
+ A: "#FFF1EC",
2888
3801
  F: "#E8F7FF",
2889
3802
  B: "#F0EDEB",
2890
3803
  b: "#F0EDEB"
@@ -2944,6 +3857,7 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
2944
3857
  const online = Boolean(activeThread?.online);
2945
3858
  const isVerified = Boolean(activeThread?.badge);
2946
3859
  const avatarBg = avatarBgByInitial[initial] ?? "#FFF1EC";
3860
+ const initialSrc = activeThread?.avatarSrc ?? "/chat/banbox_chat_logo.png";
2947
3861
  const idLabel = activeThread?.orderId ? "Order ID" : activeThread?.inquiryId ? "Inquiry ID" : void 0;
2948
3862
  const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : void 0;
2949
3863
  const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? void 0;
@@ -2975,20 +3889,24 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
2975
3889
  if (nextId) selectThread(nextId);
2976
3890
  setReplyTo(void 0);
2977
3891
  setShowDelete(false);
2978
- uiCallbacks?.showToast?.({ type: "success", title: "Chat Deleted", message: "The chat has been deleted successfully." });
3892
+ uiCallbacks?.showToast?.({
3893
+ type: "success",
3894
+ title: "Chat Deleted",
3895
+ message: "The chat has been deleted successfully."
3896
+ });
2979
3897
  };
2980
3898
  const filteredThreads = threads.filter((t) => {
2981
3899
  if (!searchQuery.trim()) return true;
2982
3900
  const q = searchQuery.toLowerCase();
2983
3901
  return t.title.toLowerCase().includes(q) || t.last?.toLowerCase().includes(q) || t.orderId?.toLowerCase().includes(q) || t.inquiryId?.toLowerCase().includes(q);
2984
3902
  });
2985
- return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
3903
+ return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-10002", children: [
2986
3904
  /* @__PURE__ */ jsx(
2987
3905
  motion.button,
2988
3906
  {
2989
3907
  "aria-label": "Close chat",
2990
3908
  onClick: close,
2991
- className: "fixed inset-0 cursor-auto!",
3909
+ className: "fixed inset-0",
2992
3910
  style: { background: "transparent", border: "none" },
2993
3911
  initial: { opacity: 0 },
2994
3912
  animate: { opacity: 1 },
@@ -3021,19 +3939,51 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
3021
3939
  style: { overscrollBehavior: "contain" },
3022
3940
  children: [
3023
3941
  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[14px] ring-1 ring-[#2F80ED]/40" }),
3024
- /* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_310px]", children: [
3942
+ /* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_350px]", children: [
3025
3943
  /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col border-r border-[#9BBCCF]", children: [
3026
3944
  /* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
3027
3945
  ChatHeader,
3028
3946
  {
3029
- left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "avatar", src: activeThread.avatarSrc, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }) : /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "initial", initial, bg: avatarBg, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }),
3030
- right: uiCallbacks?.renderKebabMenu?.({
3947
+ left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(
3948
+ ChatIdentity_default,
3949
+ {
3950
+ variant: "avatar",
3951
+ src: initialSrc,
3952
+ online,
3953
+ title,
3954
+ subtitle,
3955
+ verified: isVerified,
3956
+ subtitleVariant: "muted"
3957
+ }
3958
+ ) : /* @__PURE__ */ jsx(
3959
+ ChatIdentity_default,
3960
+ {
3961
+ variant: "initial",
3962
+ initial,
3963
+ bg: avatarBg,
3964
+ online,
3965
+ title,
3966
+ subtitle,
3967
+ verified: isVerified,
3968
+ subtitleVariant: "muted"
3969
+ }
3970
+ ),
3971
+ right: uiCallbacks?.renderKebabMenu ? uiCallbacks.renderKebabMenu({
3031
3972
  pinned: Boolean(activeThread?.pinned),
3032
3973
  onPinToggle: () => {
3033
3974
  if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
3034
3975
  },
3035
3976
  onDelete: () => setShowDelete(true)
3036
- }) ?? null
3977
+ }) : /* @__PURE__ */ jsx(
3978
+ ChatKebabMenu_default,
3979
+ {
3980
+ pinned: Boolean(activeThread?.pinned),
3981
+ onPinToggle: () => {
3982
+ if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
3983
+ },
3984
+ onDelete: () => setShowDelete(true)
3985
+ }
3986
+ )
3037
3987
  }
3038
3988
  ) }),
3039
3989
  idValue && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
@@ -3098,9 +4048,9 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
3098
4048
  activeId
3099
4049
  ) })
3100
4050
  ] }),
3101
- /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
3102
- /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }) }),
3103
- /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto custom-scroll", children: filteredThreads.map((t) => {
4051
+ /* @__PURE__ */ jsxs("div", { className: "h-full min-h-0", children: [
4052
+ /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }),
4053
+ /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto custom-scroll py-0", children: filteredThreads.map((t) => {
3104
4054
  const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
3105
4055
  return /* @__PURE__ */ jsx(
3106
4056
  ChatThreadItem_default,
@@ -3125,7 +4075,14 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
3125
4075
  }) })
3126
4076
  ] })
3127
4077
  ] }),
3128
- /* @__PURE__ */ jsx(ChatConfirmModal, { open: showDelete, onClose: () => setShowDelete(false), onConfirm: handleConfirmDelete }),
4078
+ /* @__PURE__ */ jsx(
4079
+ ChatConfirmModal,
4080
+ {
4081
+ open: showDelete,
4082
+ onClose: () => setShowDelete(false),
4083
+ onConfirm: handleConfirmDelete
4084
+ }
4085
+ ),
3129
4086
  /* @__PURE__ */ jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
3130
4087
  ]
3131
4088
  }
@@ -3169,13 +4126,14 @@ function getThemeVars2(theme) {
3169
4126
  }
3170
4127
  var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3171
4128
  const { close, reference } = useChatUI();
4129
+ const { isOpen: isGalleryOpen, closeGallery } = useGallery();
3172
4130
  const threads = adapter.threads.list(reference);
3173
- const initialThreadId = React10.useMemo(
4131
+ const initialThreadId = React16.useMemo(
3174
4132
  () => coalesceThreadId(reference, threads),
3175
4133
  // eslint-disable-next-line react-hooks/exhaustive-deps
3176
4134
  [reference]
3177
4135
  );
3178
- const [activeId] = React10.useState(initialThreadId);
4136
+ const [activeId] = React16.useState(initialThreadId);
3179
4137
  const activeThread = threads.find((t) => t.id === activeId);
3180
4138
  const isVerified = activeThread?.badge === true;
3181
4139
  const meta = reference?.meta ?? {};
@@ -3183,12 +4141,13 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3183
4141
  const title = meta.title ?? activeThread?.title ?? "Unknown";
3184
4142
  const online = meta.online ?? activeThread?.online ?? true;
3185
4143
  const subtitle = meta.subtitle ?? "Customer";
3186
- const [messages, setMessages] = React10.useState(
4144
+ const [messages, setMessages] = React16.useState(
3187
4145
  () => activeId ? adapter.messages.list(activeId) : []
3188
4146
  );
3189
- const [scrollKey, setScrollKey] = React10.useState(Date.now());
3190
- const [replyTo, setReplyTo] = React10.useState(void 0);
3191
- React10.useEffect(() => {
4147
+ const [scrollKey, setScrollKey] = React16.useState(Date.now());
4148
+ const [replyTo, setReplyTo] = React16.useState(void 0);
4149
+ const [showDelete, setShowDelete] = React16.useState(false);
4150
+ React16.useEffect(() => {
3192
4151
  if (!activeId || !adapter.messages.subscribe) return;
3193
4152
  const unsub = adapter.messages.subscribe(activeId, () => {
3194
4153
  setMessages(adapter.messages.list(activeId));
@@ -3196,11 +4155,25 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3196
4155
  });
3197
4156
  return unsub;
3198
4157
  }, [activeId, adapter]);
3199
- const handleAfterSend = React10.useCallback(() => {
4158
+ const handleAfterSend = React16.useCallback(() => {
3200
4159
  setMessages(adapter.messages.list(activeId));
3201
4160
  setScrollKey(Date.now());
3202
4161
  setReplyTo(void 0);
3203
4162
  }, [activeId, adapter]);
4163
+ const handleConfirmDelete = React16.useCallback(() => {
4164
+ if (!activeId) {
4165
+ setShowDelete(false);
4166
+ return;
4167
+ }
4168
+ adapter.threads.delete(activeId);
4169
+ uiCallbacks?.showToast?.({
4170
+ type: "success",
4171
+ title: "Chat Deleted",
4172
+ message: "The chat has been deleted successfully."
4173
+ });
4174
+ setShowDelete(false);
4175
+ close();
4176
+ }, [activeId, adapter, uiCallbacks, close]);
3204
4177
  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
3205
4178
  /* @__PURE__ */ jsx(
3206
4179
  motion.button,
@@ -3252,15 +4225,33 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3252
4225
  subtitleVariant: "muted"
3253
4226
  }
3254
4227
  ),
3255
- right: /* @__PURE__ */ jsx(
3256
- "button",
3257
- {
3258
- type: "button",
3259
- onClick: close,
3260
- 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",
3261
- children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
3262
- }
3263
- )
4228
+ right: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
4229
+ uiCallbacks?.renderKebabMenu ? uiCallbacks.renderKebabMenu({
4230
+ pinned: Boolean(activeThread?.pinned),
4231
+ onPinToggle: () => {
4232
+ if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
4233
+ },
4234
+ onDelete: () => setShowDelete(true)
4235
+ }) : /* @__PURE__ */ jsx(
4236
+ ChatKebabMenu_default,
4237
+ {
4238
+ pinned: Boolean(activeThread?.pinned),
4239
+ onPinToggle: () => {
4240
+ if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
4241
+ },
4242
+ onDelete: () => setShowDelete(true)
4243
+ }
4244
+ ),
4245
+ /* @__PURE__ */ jsx(
4246
+ "button",
4247
+ {
4248
+ type: "button",
4249
+ onClick: close,
4250
+ 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",
4251
+ children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
4252
+ }
4253
+ )
4254
+ ] })
3264
4255
  }
3265
4256
  ) }),
3266
4257
  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs(
@@ -3315,7 +4306,16 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3315
4306
  }
3316
4307
  )
3317
4308
  }
3318
- )
4309
+ ),
4310
+ /* @__PURE__ */ jsx(
4311
+ ChatConfirmModal,
4312
+ {
4313
+ open: showDelete,
4314
+ onClose: () => setShowDelete(false),
4315
+ onConfirm: handleConfirmDelete
4316
+ }
4317
+ ),
4318
+ /* @__PURE__ */ jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
3319
4319
  ] });
3320
4320
  };
3321
4321
  var SinglePopup_default = SinglePopup;
@@ -3414,6 +4414,6 @@ var ChatSpinner = ({ className, size = 32 }) => /* @__PURE__ */ jsxs(Fragment, {
3414
4414
  ] });
3415
4415
  var ChatSpinner_default = ChatSpinner;
3416
4416
 
3417
- export { ChatFooter_default as ChatFooter, ChatHeader, ChatIdentity_default as ChatIdentity, ChatInquiryBar_default as ChatInquiryBar, ChatListHeader_default as ChatListHeader, ChatMessageItem_default as ChatMessageItem, ChatRoot, ChatScroll_default as ChatScroll, ChatSpinner_default as ChatSpinner, ChatThreadItem_default as ChatThreadItem, ChatUIContext, ChatUIProvider, Portal, ReplyCard_default as ReplyCard, TypingIndicator_default as TypingIndicator, cn, useChatUI };
4417
+ export { ChatFooter_default as ChatFooter, ChatHeader, ChatIdentity_default as ChatIdentity, ChatInquiryBar_default as ChatInquiryBar, ChatKebabMenu_default as ChatKebabMenu, ChatListHeader_default as ChatListHeader, ChatMessageItem_default as ChatMessageItem, ChatRoot, ChatScroll_default as ChatScroll, ChatSpinner_default as ChatSpinner, ChatThreadItem_default as ChatThreadItem, ChatUIContext, ChatUIProvider, Portal, ReplyCard_default as ReplyCard, TypingIndicator_default as TypingIndicator, cn, useChatUI };
3418
4418
  //# sourceMappingURL=index.js.map
3419
4419
  //# sourceMappingURL=index.js.map