@banbox/chat 1.0.8 → 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 (42) hide show
  1. package/dist/index.cjs +1166 -202
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +11 -1
  4. package/dist/index.d.ts +11 -1
  5. package/dist/index.js +1090 -127
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/chat/InboxPopup.tsx +30 -19
  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/ChatIdentity.tsx → ChatIdentity.tsx} +2 -2
  21. package/src/ui/{chat/ChatInquiryBar.tsx → ChatInquiryBar.tsx} +1 -1
  22. package/src/ui/ChatKebabMenu.tsx +125 -0
  23. package/src/ui/{chat/ChatListHeader.tsx → ChatListHeader.tsx} +1 -1
  24. package/src/ui/{chat/ChatMessageItem.tsx → ChatMessageItem.tsx} +1 -1
  25. package/src/ui/{chat/ChatScroll.tsx → ChatScroll.tsx} +1 -1
  26. package/src/ui/{chat/ChatSpinner.tsx → ChatSpinner.tsx} +1 -1
  27. package/src/ui/{chat/ChatThreadItem.tsx → ChatThreadItem.tsx} +1 -1
  28. package/src/ui/{chat/MessageHoverActions.tsx → MessageHoverActions.tsx} +2 -2
  29. package/src/ui/{chat/ReplyCard.tsx → ReplyCard.tsx} +2 -2
  30. package/src/ui/{chat/TypingIndicator.tsx → TypingIndicator.tsx} +1 -1
  31. package/src/ui/{chat/drop-up → drop-up}/BusinessCardDropup.tsx +15 -3
  32. package/src/ui/{chat/drop-up → drop-up}/EmojiDropup.tsx +1 -1
  33. package/src/ui/{chat/message-items → message-items}/ChatAddressCard.tsx +4 -4
  34. package/src/ui/{chat/message-items → message-items}/ChatBubbleFiles.tsx +1 -1
  35. package/src/ui/{chat/message-items → message-items}/ChatBubbleImages.tsx +2 -2
  36. package/src/ui/{chat/message-items → message-items}/ChatBusinessCard.tsx +1 -1
  37. package/src/ui/{chat/scrollToMessage.ts → scrollToMessage.ts} +1 -1
  38. package/src/ui/{chat/types.ts → types.ts} +2 -2
  39. package/src/modals/chat/ChatTranslateSettingsModal.tsx +0 -180
  40. /package/src/ui/{chat/ChatHeader.tsx → ChatHeader.tsx} +0 -0
  41. /package/src/ui/{chat/message-items → message-items}/ChatBubbleAudio.tsx +0 -0
  42. /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 clsx18, { 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_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 .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-0 {\n padding-block: calc(var(--spacing) * 0);\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-2\\.5 {\n padding-top: calc(var(--spacing) * 2.5);\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: clsx18(
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: clsx18(
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: clsx18("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: clsx18(
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: clsx18(
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: clsx18(
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: clsx18("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: clsx18(
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: clsx18("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,13 +2366,92 @@ 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
2453
  return /* @__PURE__ */ jsxs("div", { children: [
1631
- /* @__PURE__ */ jsx("div", { className: clsx18("border-b border-[#ededed] h-[64px]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-2.5", 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
  ] }) }),
@@ -1649,11 +2472,11 @@ var ChatIdentity = (props) => {
1649
2472
  size = 46,
1650
2473
  className
1651
2474
  } = props;
1652
- const subtitleClass = clsx18(
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: clsx18("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: clsx18(
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: clsx18(
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
  ),
@@ -1780,10 +2603,10 @@ var ChatListHeader = ({
1780
2603
  onSearchChange,
1781
2604
  hideSearch = false
1782
2605
  }) => {
1783
- const [searching, setSearching] = React10.useState(false);
1784
- const [q, setQ] = React10.useState("");
1785
- const inputRef = React10.useRef(null);
1786
- React10.useEffect(() => {
2606
+ const [searching, setSearching] = React16.useState(false);
2607
+ const [q, setQ] = React16.useState("");
2608
+ const inputRef = React16.useRef(null);
2609
+ React16.useEffect(() => {
1787
2610
  const timer = searching ? setTimeout(() => {
1788
2611
  inputRef.current?.focus();
1789
2612
  }, 220) : void 0;
@@ -1791,7 +2614,7 @@ var ChatListHeader = ({
1791
2614
  clearTimeout(timer);
1792
2615
  };
1793
2616
  }, [searching]);
1794
- React10.useEffect(() => {
2617
+ React16.useEffect(() => {
1795
2618
  if (!searching) {
1796
2619
  return;
1797
2620
  }
@@ -1813,7 +2636,7 @@ var ChatListHeader = ({
1813
2636
  inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
1814
2637
  outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } }
1815
2638
  };
1816
- return /* @__PURE__ */ jsx("div", { className: clsx18("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(
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(
1817
2640
  motion.div,
1818
2641
  {
1819
2642
  className: "flex w-full items-center justify-between",
@@ -1948,7 +2771,7 @@ var ChatAddressCard = ({ mine, card, className }) => {
1948
2771
  return /* @__PURE__ */ jsxs(
1949
2772
  "div",
1950
2773
  {
1951
- className: clsx18(
2774
+ className: clsx3(
1952
2775
  "w-[340px] rounded-md bg-[#f8f8f8] p-2",
1953
2776
  mine ? "ml-auto" : "mr-auto",
1954
2777
  className
@@ -1996,13 +2819,13 @@ var PlayIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20
1996
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" }) });
1997
2820
  var audioRegistry = /* @__PURE__ */ new Set();
1998
2821
  var ChatBubbleAudio = ({ mine, audio }) => {
1999
- const ref = React10.useRef(null);
2000
- const trackRef = React10.useRef(null);
2001
- const [playing, setPlaying] = React10.useState(false);
2002
- const [progress, setProgress] = React10.useState(0);
2003
- const [durSec, setDurSec] = React10.useState(0);
2004
- const [remain, setRemain] = React10.useState(audio.duration ?? "0:00");
2005
- 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(() => {
2006
2829
  const a = ref.current;
2007
2830
  if (!a) {
2008
2831
  return;
@@ -2096,7 +2919,7 @@ var ChatBubbleAudio = ({ mine, audio }) => {
2096
2919
  type: "button",
2097
2920
  "aria-label": playing ? "Pause" : "Play",
2098
2921
  onClick: toggle,
2099
- className: clsx18(
2922
+ className: clsx3(
2100
2923
  "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
2101
2924
  mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]"
2102
2925
  ),
@@ -2167,7 +2990,7 @@ var extColor2 = (ext) => {
2167
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: [
2168
2991
  /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
2169
2992
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
2170
- /* @__PURE__ */ jsx(FileIcon, { className: clsx18("h-[18px] w-[18px]", extColor2(file.ext)) }),
2993
+ /* @__PURE__ */ jsx(FileIcon, { className: clsx3("h-[18px] w-[18px]", extColor2(file.ext)) }),
2171
2994
  " ",
2172
2995
  /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-black", children: file.name })
2173
2996
  ] }),
@@ -2282,14 +3105,14 @@ var ChatBubbleText = ({ mine, text }) => {
2282
3105
  const color = mine ? "bg-[#f8f8f8] border-[#f1f1f1]" : "bg-white border-[#EFEFEF]";
2283
3106
  const corner = mine ? "rounded-tr-[6px]" : "rounded-tl-md";
2284
3107
  const textFormatting = "whitespace-pre-wrap break-words";
2285
- return /* @__PURE__ */ jsx("div", { className: clsx18(base, color, corner, textFormatting), children: text });
3108
+ return /* @__PURE__ */ jsx("div", { className: clsx3(base, color, corner, textFormatting), children: text });
2286
3109
  };
2287
3110
  var ChatBubbleText_default = ChatBubbleText;
2288
3111
  var ChatBusinessCard = ({ mine, card }) => {
2289
3112
  return /* @__PURE__ */ jsx(
2290
3113
  "div",
2291
3114
  {
2292
- className: clsx18(
3115
+ className: clsx3(
2293
3116
  "relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white bg-cover bg-no-repeat",
2294
3117
  "shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
2295
3118
  mine ? "ml-auto" : "mr-auto"
@@ -2349,13 +3172,13 @@ var MessageHoverActions = ({
2349
3172
  const showTranslate = !isItemButton || isItemButton.includes("translate");
2350
3173
  const hasAny = showReplay || showTranslate;
2351
3174
  const isActive = (k) => !!activeButtons?.includes(k);
2352
- return /* @__PURE__ */ jsxs("div", { className: clsx18("relative inline-flex group/message", className), children: [
3175
+ return /* @__PURE__ */ jsxs("div", { className: clsx3("relative inline-flex group/message", className), children: [
2353
3176
  children,
2354
3177
  hasAny && /* @__PURE__ */ jsx(
2355
3178
  "div",
2356
3179
  {
2357
3180
  "aria-hidden": true,
2358
- className: clsx18(
3181
+ className: clsx3(
2359
3182
  "absolute inset-y-0 w-2",
2360
3183
  mine ? "right-full" : "left-full",
2361
3184
  "pointer-events-auto"
@@ -2365,7 +3188,7 @@ var MessageHoverActions = ({
2365
3188
  hasAny && /* @__PURE__ */ jsx(
2366
3189
  "div",
2367
3190
  {
2368
- className: clsx18(
3191
+ className: clsx3(
2369
3192
  "absolute bottom-0 pointer-events-auto transition-opacity",
2370
3193
  sidePos,
2371
3194
  railNudge,
@@ -2385,7 +3208,7 @@ var MessageHoverActions = ({
2385
3208
  e.stopPropagation();
2386
3209
  onReply?.();
2387
3210
  },
2388
- className: clsx18(
3211
+ className: clsx3(
2389
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]",
2390
3213
  isActive("replay") && "bg-[#636363] text-white"
2391
3214
  ),
@@ -2406,7 +3229,7 @@ var MessageHoverActions = ({
2406
3229
  e.stopPropagation();
2407
3230
  onTranslate?.();
2408
3231
  },
2409
- className: clsx18(
3232
+ className: clsx3(
2410
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]",
2411
3234
  isActive("translate") && "!bg-[#636363] text-white"
2412
3235
  ),
@@ -2455,14 +3278,14 @@ var ChatMessageItem = ({
2455
3278
  onTranslate,
2456
3279
  initialSrc
2457
3280
  }) => {
2458
- const originalTextRef = React10.useRef(text ?? "");
2459
- const [translated, setTranslated] = React10.useState(false);
3281
+ const originalTextRef = React16.useRef(text ?? "");
3282
+ const [translated, setTranslated] = React16.useState(false);
2460
3283
  const displayText = translated ? toBanglaDemo(originalTextRef.current) : originalTextRef.current;
2461
3284
  const handleTranslateClick = () => {
2462
3285
  setTranslated((v) => !v);
2463
3286
  onTranslate?.();
2464
3287
  };
2465
- return /* @__PURE__ */ jsx("div", { className: clsx18("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx18("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: [
2466
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: [
2467
3290
  /* @__PURE__ */ jsx(
2468
3291
  "img",
@@ -2484,19 +3307,19 @@ var ChatMessageItem = ({
2484
3307
  ]
2485
3308
  }
2486
3309
  ) }),
2487
- /* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full"), children: [
3310
+ /* @__PURE__ */ jsxs("div", { className: clsx3("flex flex-col gap-1 w-full"), children: [
2488
3311
  /* @__PURE__ */ jsx(
2489
3312
  "div",
2490
3313
  {
2491
- className: clsx18(
3314
+ className: clsx3(
2492
3315
  " text-xs font-light text-[#636363]",
2493
3316
  mine ? "text-right" : "text-left"
2494
3317
  ),
2495
3318
  children: time
2496
3319
  }
2497
3320
  ),
2498
- /* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
2499
- /* @__PURE__ */ jsx("div", { className: clsx18("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" }) }),
2500
3323
  businessCard ? /* @__PURE__ */ jsx(ChatBusinessCard_default, { mine, card: businessCard }) : null,
2501
3324
  addressCard ? /* @__PURE__ */ jsx(ChatAddressCard_default, { mine, card: addressCard }) : null,
2502
3325
  images?.length ? /* @__PURE__ */ jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsx(ChatBubbleImages_default, { images }) }) : null,
@@ -2513,22 +3336,22 @@ var ChatMessageItem = ({
2513
3336
  children: /* @__PURE__ */ jsx(ChatBubbleText_default, { mine, text: displayText })
2514
3337
  }
2515
3338
  ) : null,
2516
- showStatus && /* @__PURE__ */ jsx("div", { className: clsx18("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 })
2517
3340
  ] })
2518
3341
  ] })
2519
3342
  ] }) });
2520
3343
  };
2521
3344
  var ChatMessageItem_default = ChatMessageItem;
2522
- var ChatScroll = React10.forwardRef(function ChatScroll2({ top, children, className, bottomAlignWhenShort = false, scrollKey }, _) {
2523
- const ref = React10.useRef(null);
2524
- 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(() => {
2525
3348
  const el = ref.current;
2526
3349
  if (!el) {
2527
3350
  return;
2528
3351
  }
2529
3352
  el.scrollTop = el.scrollHeight;
2530
3353
  }, []);
2531
- React10.useLayoutEffect(() => {
3354
+ React16.useLayoutEffect(() => {
2532
3355
  scrollToBottom();
2533
3356
  }, [scrollKey, scrollToBottom]);
2534
3357
  return /* @__PURE__ */ jsx(
@@ -2536,14 +3359,14 @@ var ChatScroll = React10.forwardRef(function ChatScroll2({ top, children, classN
2536
3359
  {
2537
3360
  ref,
2538
3361
  "data-chat-scroll": true,
2539
- className: clsx18(
3362
+ className: clsx3(
2540
3363
  "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
2541
3364
  className
2542
3365
  ),
2543
3366
  children: /* @__PURE__ */ jsxs(
2544
3367
  "div",
2545
3368
  {
2546
- className: clsx18(
3369
+ className: clsx3(
2547
3370
  "min-h-full flex flex-col",
2548
3371
  bottomAlignWhenShort ? "justify-end" : "justify-between"
2549
3372
  ),
@@ -2591,7 +3414,7 @@ var ChatThreadItem = ({
2591
3414
  "button",
2592
3415
  {
2593
3416
  onClick,
2594
- className: clsx18(
3417
+ className: clsx3(
2595
3418
  "relative w-full text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
2596
3419
  active && "bg-[#f8f8f8]",
2597
3420
  className
@@ -2884,6 +3707,94 @@ var ChatImagePreviewModal = ({
2884
3707
  ) }) });
2885
3708
  };
2886
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;
2887
3798
  var avatarBgByInitial = {
2888
3799
  K: "#FFE7DB",
2889
3800
  A: "#FFF1EC",
@@ -2989,7 +3900,7 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
2989
3900
  const q = searchQuery.toLowerCase();
2990
3901
  return t.title.toLowerCase().includes(q) || t.last?.toLowerCase().includes(q) || t.orderId?.toLowerCase().includes(q) || t.inquiryId?.toLowerCase().includes(q);
2991
3902
  });
2992
- 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: [
2993
3904
  /* @__PURE__ */ jsx(
2994
3905
  motion.button,
2995
3906
  {
@@ -3057,13 +3968,22 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
3057
3968
  subtitleVariant: "muted"
3058
3969
  }
3059
3970
  ),
3060
- right: uiCallbacks?.renderKebabMenu?.({
3971
+ right: uiCallbacks?.renderKebabMenu ? uiCallbacks.renderKebabMenu({
3061
3972
  pinned: Boolean(activeThread?.pinned),
3062
3973
  onPinToggle: () => {
3063
3974
  if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
3064
3975
  },
3065
3976
  onDelete: () => setShowDelete(true)
3066
- }) ?? 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
+ )
3067
3987
  }
3068
3988
  ) }),
3069
3989
  idValue && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
@@ -3206,13 +4126,14 @@ function getThemeVars2(theme) {
3206
4126
  }
3207
4127
  var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3208
4128
  const { close, reference } = useChatUI();
4129
+ const { isOpen: isGalleryOpen, closeGallery } = useGallery();
3209
4130
  const threads = adapter.threads.list(reference);
3210
- const initialThreadId = React10.useMemo(
4131
+ const initialThreadId = React16.useMemo(
3211
4132
  () => coalesceThreadId(reference, threads),
3212
4133
  // eslint-disable-next-line react-hooks/exhaustive-deps
3213
4134
  [reference]
3214
4135
  );
3215
- const [activeId] = React10.useState(initialThreadId);
4136
+ const [activeId] = React16.useState(initialThreadId);
3216
4137
  const activeThread = threads.find((t) => t.id === activeId);
3217
4138
  const isVerified = activeThread?.badge === true;
3218
4139
  const meta = reference?.meta ?? {};
@@ -3220,12 +4141,13 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3220
4141
  const title = meta.title ?? activeThread?.title ?? "Unknown";
3221
4142
  const online = meta.online ?? activeThread?.online ?? true;
3222
4143
  const subtitle = meta.subtitle ?? "Customer";
3223
- const [messages, setMessages] = React10.useState(
4144
+ const [messages, setMessages] = React16.useState(
3224
4145
  () => activeId ? adapter.messages.list(activeId) : []
3225
4146
  );
3226
- const [scrollKey, setScrollKey] = React10.useState(Date.now());
3227
- const [replyTo, setReplyTo] = React10.useState(void 0);
3228
- 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(() => {
3229
4151
  if (!activeId || !adapter.messages.subscribe) return;
3230
4152
  const unsub = adapter.messages.subscribe(activeId, () => {
3231
4153
  setMessages(adapter.messages.list(activeId));
@@ -3233,11 +4155,25 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3233
4155
  });
3234
4156
  return unsub;
3235
4157
  }, [activeId, adapter]);
3236
- const handleAfterSend = React10.useCallback(() => {
4158
+ const handleAfterSend = React16.useCallback(() => {
3237
4159
  setMessages(adapter.messages.list(activeId));
3238
4160
  setScrollKey(Date.now());
3239
4161
  setReplyTo(void 0);
3240
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]);
3241
4177
  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
3242
4178
  /* @__PURE__ */ jsx(
3243
4179
  motion.button,
@@ -3289,15 +4225,33 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3289
4225
  subtitleVariant: "muted"
3290
4226
  }
3291
4227
  ),
3292
- right: /* @__PURE__ */ jsx(
3293
- "button",
3294
- {
3295
- type: "button",
3296
- onClick: close,
3297
- 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",
3298
- children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
3299
- }
3300
- )
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
+ ] })
3301
4255
  }
3302
4256
  ) }),
3303
4257
  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs(
@@ -3352,7 +4306,16 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
3352
4306
  }
3353
4307
  )
3354
4308
  }
3355
- )
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 })
3356
4319
  ] });
3357
4320
  };
3358
4321
  var SinglePopup_default = SinglePopup;
@@ -3451,6 +4414,6 @@ var ChatSpinner = ({ className, size = 32 }) => /* @__PURE__ */ jsxs(Fragment, {
3451
4414
  ] });
3452
4415
  var ChatSpinner_default = ChatSpinner;
3453
4416
 
3454
- 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 };
3455
4418
  //# sourceMappingURL=index.js.map
3456
4419
  //# sourceMappingURL=index.js.map