@clubmed/trident-ui 2.0.0-beta.57 → 2.0.0-beta.58

package/examples/advanced-toast-demo.js

@@ -11,14 +11,14 @@ function l() {
 		n.custom((r) => /* @__PURE__ */ s(t, {
 			title: "Upload Complete",
 			body: "Your file has been successfully uploaded",
-			icon: "CheckDefault",
+			icon: "CheckFilled",
 			isVisible: r.visible,
 			labels: {
 				close: "Close",
 				details: "Details"
 			},
 			onClose: () => n.dismiss(r.id),
-			accentColor: e.orange,
+			accentColor: e.green,
 			toastId: r.id,
 			updateHeight: l.updateHeight
 		}), { duration: Infinity });

package/examples/advanced-toast-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"advanced-toast-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Upload Complete\"\n          body=\"Your file has been successfully uploaded\"\n          icon=\"CheckDefault\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.orange}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAAoB;CAC1C,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}
+{"version":3,"file":"advanced-toast-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Upload Complete\"\n          body=\"Your file has been successfully uploaded\"\n          icon=\"CheckFilled\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.green}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAAoB;CAC1C,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}

package/examples/advanced-toast-green-demo.js

@@ -11,7 +11,7 @@ function l() {
 		n.custom((r) => /* @__PURE__ */ s(t, {
 			title: "Success!",
 			body: "Your changes have been saved successfully",
-			icon: "CheckDefault",
+			icon: "CheckFilled",
 			isVisible: r.visible,
 			labels: {
 				close: "Close",

package/examples/advanced-toast-green-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"advanced-toast-green-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-green-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastGreenDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Success!\"\n          body=\"Your changes have been saved successfully\"\n          icon=\"CheckDefault\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.green}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAAyB;CAC/C,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}
+{"version":3,"file":"advanced-toast-green-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-green-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastGreenDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Success!\"\n          body=\"Your changes have been saved successfully\"\n          icon=\"CheckFilled\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.green}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAAyB;CAC/C,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}

package/examples/advanced-toast-no-dismiss-demo.js

@@ -18,7 +18,7 @@ function l() {
 				details: "Details"
 			},
 			onClose: () => n.dismiss(r.id),
-			accentColor: e.orange,
+			accentColor: e.darkGrey,
 			duration: !1,
 			toastId: r.id,
 			updateHeight: l.updateHeight

package/examples/advanced-toast-no-dismiss-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"advanced-toast-no-dismiss-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-no-dismiss-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastNoDismissDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Important Notice\"\n          body=\"This notification will not auto-dismiss\"\n          icon=\"Trident\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.orange}\n          duration={false}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAA6B;CACnD,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,UAAU;GACV,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}
+{"version":3,"file":"advanced-toast-no-dismiss-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-no-dismiss-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastNoDismissDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Important Notice\"\n          body=\"This notification will not auto-dismiss\"\n          icon=\"Trident\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.darkGrey}\n          duration={false}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAA6B;CACnD,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,UAAU;GACV,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}

package/examples/advanced-toast-red-demo.js

@@ -11,7 +11,7 @@ function l() {
 		n.custom((r) => /* @__PURE__ */ s(t, {
 			title: "Error",
 			body: "Something went wrong. Please try again.",
-			icon: "CrossDefault",
+			icon: "Error",
 			isVisible: r.visible,
 			labels: {
 				close: "Close",

package/examples/advanced-toast-red-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"advanced-toast-red-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-red-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastRedDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Error\"\n          body=\"Something went wrong. Please try again.\"\n          icon=\"CrossDefault\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.red}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAAuB;CAC7C,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}
+{"version":3,"file":"advanced-toast-red-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-red-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastRedDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Error\"\n          body=\"Something went wrong. Please try again.\"\n          icon=\"Error\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.red}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        />\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAAuB;CAC7C,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;GACvB,CAAA,EAEJ,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}

package/examples/advanced-toast-with-details-demo.js

@@ -11,14 +11,14 @@ function l() {
 		n.custom((r) => /* @__PURE__ */ s(t, {
 			title: "Upload Complete",
 			body: "Your file has been successfully uploaded",
-			icon: "CheckDefault",
+			icon: "CheckFilled",
 			isVisible: r.visible,
 			labels: {
 				close: "Close",
 				details: "Details"
 			},
 			onClose: () => n.dismiss(r.id),
-			accentColor: e.orange,
+			accentColor: e.green,
 			toastId: r.id,
 			updateHeight: l.updateHeight,
 			children: /* @__PURE__ */ c("div", {

package/examples/advanced-toast-with-details-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"advanced-toast-with-details-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-with-details-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastWithDetailsDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Upload Complete\"\n          body=\"Your file has been successfully uploaded\"\n          icon=\"CheckDefault\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.orange}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        >\n          <div className=\"text-b4\">\n            <p>File: document.pdf</p>\n            <p>Size: 2.5 MB</p>\n            <p>Uploaded at: {new Date().toLocaleTimeString()}</p>\n          </div>\n        </AdvancedToast>\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAA+B;CACrD,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;aAEvB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD,EAAA,UAAG,sBAAsB,CAAA;KACzB,kBAAC,KAAD,EAAA,UAAG,gBAAgB,CAAA;KACnB,kBAAC,KAAD,EAAA,UAAA,CAAG,kCAAc,IAAI,MAAM,EAAC,oBAAoB,CAAK,EAAA,CAAA;;;GAEzC,CAAA,EAElB,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}
+{"version":3,"file":"advanced-toast-with-details-demo.js","names":[],"sources":["../../lib/examples/advanced-toast-with-details-demo.tsx"],"sourcesContent":["'use client';\n\nimport { AdvancedToast } from '@/ui/AdvancedToast';\nimport { type ToasterProps, Toaster, toast, useToaster } from 'react-hot-toast';\nimport { getHotToastConfig } from '@/ui/AdvancedToast.config';\nimport { Colors } from '@/ui/helpers/colors/colors';\n\nexport default function AdvancedToastWithDetailsDemo() {\n  const { handlers } = useToaster();\n\n  const showToast = () => {\n    toast.custom(\n      (t) => (\n        <AdvancedToast\n          title=\"Upload Complete\"\n          body=\"Your file has been successfully uploaded\"\n          icon=\"CheckFilled\"\n          isVisible={t.visible}\n          labels={{ close: 'Close', details: 'Details' }}\n          onClose={() => toast.dismiss(t.id)}\n          accentColor={Colors.green}\n          toastId={t.id}\n          updateHeight={handlers.updateHeight}\n        >\n          <div className=\"text-b4\">\n            <p>File: document.pdf</p>\n            <p>Size: 2.5 MB</p>\n            <p>Uploaded at: {new Date().toLocaleTimeString()}</p>\n          </div>\n        </AdvancedToast>\n      ),\n      { duration: Infinity },\n    );\n  };\n\n  return (\n    <>\n      <Toaster {...(getHotToastConfig() as ToasterProps)} />\n      <button onClick={showToast}>Show Toast</button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,IAA+B;CACrD,IAAM,EAAE,gBAAa,GAAY,EAE3B,UAAkB;AACtB,IAAM,QACH,MACC,kBAAC,GAAD;GACE,OAAM;GACN,MAAK;GACL,MAAK;GACL,WAAW,EAAE;GACb,QAAQ;IAAE,OAAO;IAAS,SAAS;IAAW;GAC9C,eAAe,EAAM,QAAQ,EAAE,GAAG;GAClC,aAAa,EAAO;GACpB,SAAS,EAAE;GACX,cAAc,EAAS;aAEvB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD,EAAA,UAAG,sBAAsB,CAAA;KACzB,kBAAC,KAAD,EAAA,UAAG,gBAAgB,CAAA;KACnB,kBAAC,KAAD,EAAA,UAAA,CAAG,kCAAc,IAAI,MAAM,EAAC,oBAAoB,CAAK,EAAA,CAAA;;;GAEzC,CAAA,EAElB,EAAE,UAAU,UAAU,CACvB;;AAGH,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,GAAK,GAAmB,EAAqB,CAAA,EACtD,kBAAC,UAAD;EAAQ,SAAS;YAAW;EAAmB,CAAA,CAC9C,EAAA,CAAA"}

package/examples/chat-window-quote-demo.d.ts

@@ -0,0 +1 @@
+export default function ChatWindowQuoteDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chat-window-quote-demo.js

@@ -0,0 +1,47 @@
+"use client";
+import { ChatWindowQuote as e } from "../ui/ChatWindowQuote.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/examples/chat-window-quote-demo.tsx
+var r = {
+	id: "1",
+	resortName: "Cancún",
+	country: "Mexico",
+	imageUrl: "https://picsum.photos/seed/cancun/400/300",
+	dateRange: "15 June 2026 to 24 June 2026",
+	pax: "for 2 adults 2 children",
+	packageIncludes: [
+		"Meals and snacks at any time",
+		"Drinks, alcoholic and non-alcoholic",
+		"Sports and activities"
+	],
+	additionalInfo: "You can customise your transport and room category directly on the website."
+}, i = {
+	id: "2",
+	resortName: "Punta Cana",
+	country: "Dominican Republic",
+	imageUrl: "https://picsum.photos/seed/puntacana/400/300",
+	dateRange: "20 July 2026 to 29 July 2026",
+	pax: "for 2 adults 2 children"
+};
+function a() {
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-32 w-340",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex flex-col gap-8",
+			children: [/* @__PURE__ */ t("p", {
+				className: "text-b4 font-semibold text-black",
+				children: "Single quote"
+			}), /* @__PURE__ */ t(e, { quotes: [r] })]
+		}), /* @__PURE__ */ n("div", {
+			className: "flex flex-col gap-8",
+			children: [/* @__PURE__ */ t("p", {
+				className: "text-b4 font-semibold text-black",
+				children: "Multiple quotes"
+			}), /* @__PURE__ */ t(e, { quotes: [r, i] })]
+		})]
+	});
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=chat-window-quote-demo.js.map

package/examples/chat-window-quote-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-window-quote-demo.js","names":[],"sources":["../../lib/examples/chat-window-quote-demo.tsx"],"sourcesContent":["'use client';\n\nimport { ChatWindowQuote } from '@/ui/ChatWindowQuote';\nimport type { ChatWindowQuoteItem } from '@/ui/ChatWindowQuote';\n\nconst cancun: ChatWindowQuoteItem = {\n  id: '1',\n  resortName: 'Cancún',\n  country: 'Mexico',\n  imageUrl: 'https://picsum.photos/seed/cancun/400/300',\n  dateRange: '15 June 2026 to 24 June 2026',\n  pax: 'for 2 adults 2 children',\n  packageIncludes: [\n    'Meals and snacks at any time',\n    'Drinks, alcoholic and non-alcoholic',\n    'Sports and activities',\n  ],\n  additionalInfo: 'You can customise your transport and room category directly on the website.',\n};\n\nconst puntaCana: ChatWindowQuoteItem = {\n  id: '2',\n  resortName: 'Punta Cana',\n  country: 'Dominican Republic',\n  imageUrl: 'https://picsum.photos/seed/puntacana/400/300',\n  dateRange: '20 July 2026 to 29 July 2026',\n  pax: 'for 2 adults 2 children',\n};\n\nexport default function ChatWindowQuoteDemo() {\n  return (\n    <div className=\"flex flex-col gap-32 w-340\">\n      <div className=\"flex flex-col gap-8\">\n        <p className=\"text-b4 font-semibold text-black\">Single quote</p>\n        <ChatWindowQuote quotes={[cancun]} />\n      </div>\n      <div className=\"flex flex-col gap-8\">\n        <p className=\"text-b4 font-semibold text-black\">Multiple quotes</p>\n        <ChatWindowQuote quotes={[cancun, puntaCana]} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,IAAM,IAA8B;CAClC,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACL,iBAAiB;EACf;EACA;EACA;EACD;CACD,gBAAgB;CACjB,EAEK,IAAiC;CACrC,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACN;AAED,SAAwB,IAAsB;AAC5C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAAgB,CAAA,EAChE,kBAAC,GAAD,EAAiB,QAAQ,CAAC,EAAO,EAAI,CAAA,CAAA;MAEvC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAAmB,CAAA,EACnE,kBAAC,GAAD,EAAiB,QAAQ,CAAC,GAAQ,EAAU,EAAI,CAAA,CAAA"}

package/examples/chat-window-quotes-demo.d.ts

@@ -0,0 +1 @@
+export default function ChatWindowQuotesDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chat-window-quotes-demo.js

@@ -0,0 +1,67 @@
+"use client";
+import { ChatWindow as e } from "../ui/ChatWindow.js";
+import { useRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/chat-window-quotes-demo.tsx
+var i = [
+	{
+		id: "1",
+		sender: "assistant",
+		content: "Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly."
+	},
+	{
+		id: "2",
+		sender: "user",
+		content: "Can you show me some quotes for a family trip to the Caribbean?"
+	},
+	{
+		id: "3",
+		sender: "assistant",
+		content: "Of course! Here are some resorts in the Caribbean that could be perfect for your family vacation."
+	}
+], a = [{
+	id: "1",
+	resortName: "Cancún",
+	country: "Mexico",
+	imageUrl: "https://picsum.photos/seed/cancun/400/300",
+	dateRange: "15 June 2026 to 24 June 2026",
+	pax: "for 2 adults 2 children",
+	packageIncludes: [
+		"Meals and snacks at any time",
+		"Drinks, alcoholic and non-alcoholic",
+		"Sports and activities"
+	],
+	additionalInfo: "You can customise your transport and room category directly on the website."
+}, {
+	id: "2",
+	resortName: "Punta Cana",
+	country: "Dominican Republic",
+	imageUrl: "https://picsum.photos/seed/puntacana/400/300",
+	dateRange: "15 June 2026 to 24 June 2026",
+	pax: "for 2 adults 2 children"
+}];
+function o() {
+	let o = t(null);
+	return /* @__PURE__ */ r("div", {
+		className: "flex flex-col items-center gap-12",
+		children: [/* @__PURE__ */ n(e, {
+			ref: o,
+			messages: i,
+			inputValue: "",
+			onInputChange: () => {},
+			onSubmit: () => {},
+			onQuoteCtaClick: (e) => console.log("Selected quote:", e.resortName),
+			onClose: () => {},
+			className: "w-380 h-660"
+		}), /* @__PURE__ */ n("button", {
+			type: "button",
+			onClick: () => o.current?.showQuotes(a),
+			className: "px-16 py-8 bg-saffron rounded-pill text-black text-b4 font-semibold hover:opacity-80 transition-opacity",
+			children: "Trigger quotes"
+		})]
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=chat-window-quotes-demo.js.map

package/examples/chat-window-quotes-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-window-quotes-demo.js","names":[],"sources":["../../lib/examples/chat-window-quotes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport { ChatWindow } from '@/ui/ChatWindow';\nimport type { ChatWindowHandle, ChatWindowMessage, ChatWindowQuoteItem } from '@/ui/ChatWindow';\n\nconst messages: ChatWindowMessage[] = [\n  {\n    id: '1',\n    sender: 'assistant',\n    content:\n      \"Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly.\",\n  },\n  {\n    id: '2',\n    sender: 'user',\n    content: 'Can you show me some quotes for a family trip to the Caribbean?',\n  },\n  {\n    id: '3',\n    sender: 'assistant',\n    content:\n      'Of course! Here are some resorts in the Caribbean that could be perfect for your family vacation.',\n  },\n];\n\nconst quotes: ChatWindowQuoteItem[] = [\n  {\n    id: '1',\n    resortName: 'Cancún',\n    country: 'Mexico',\n    imageUrl: 'https://picsum.photos/seed/cancun/400/300',\n    dateRange: '15 June 2026 to 24 June 2026',\n    pax: 'for 2 adults 2 children',\n    packageIncludes: [\n      'Meals and snacks at any time',\n      'Drinks, alcoholic and non-alcoholic',\n      'Sports and activities',\n    ],\n    additionalInfo: 'You can customise your transport and room category directly on the website.',\n  },\n  {\n    id: '2',\n    resortName: 'Punta Cana',\n    country: 'Dominican Republic',\n    imageUrl: 'https://picsum.photos/seed/puntacana/400/300',\n    dateRange: '15 June 2026 to 24 June 2026',\n    pax: 'for 2 adults 2 children',\n  },\n];\n\nexport default function ChatWindowQuotesDemo() {\n  const chatRef = useRef<ChatWindowHandle>(null);\n\n  return (\n    <div className=\"flex flex-col items-center gap-12\">\n      <ChatWindow\n        ref={chatRef}\n        messages={messages}\n        inputValue=\"\"\n        onInputChange={() => {}}\n        onSubmit={() => {}}\n        onQuoteCtaClick={(quote) => console.log('Selected quote:', quote.resortName)}\n        onClose={() => {}}\n        className=\"w-380 h-660\"\n      />\n      <button\n        type=\"button\"\n        onClick={() => chatRef.current?.showQuotes(quotes)}\n        className=\"px-16 py-8 bg-saffron rounded-pill text-black text-b4 font-semibold hover:opacity-80 transition-opacity\"\n      >\n        Trigger quotes\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAgC;CACpC;EACE,IAAI;EACJ,QAAQ;EACR,SACE;EACH;CACD;EACE,IAAI;EACJ,QAAQ;EACR,SAAS;EACV;CACD;EACE,IAAI;EACJ,QAAQ;EACR,SACE;;CAEL,EAEK,IAAgC,CACpC;CACE,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACL,iBAAiB;EACf;EACA;EACA;EACD;CACD,gBAAgB;CACjB,EACD;CACE,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACN,CACF;AAED,SAAwB,IAAuB;CAC7C,IAAM,IAAU,EAAyB,KAAK;AAE9C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,KAAK;GACK;GACV,YAAW;GACX,qBAAqB;GACrB,gBAAgB;GAChB,kBAAkB,MAAU,QAAQ,IAAI,mBAAmB,EAAM,WAAW;GAC5E,eAAe;GACf,WAAU;GACV,CAAA,EACF,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAQ,SAAS,WAAW,EAAO;GAClD,WAAU;aACX;GAEQ,CAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.57",
+  "version": "2.0.0-beta.58",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/ui/AdvancedToast.js

@@ -32,10 +32,13 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 		onMouseUp: I,
 		onMouseLeave: L,
 		children: [
-			/* @__PURE__ */ p(f, {
-				name: v,
-				width: "30px",
-				className: e("flex-shrink-0 pt-4", a(S))
+			/* @__PURE__ */ p("span", {
+				className: e("w-30 h-30 pt-4", a(S)),
+				children: /* @__PURE__ */ p(f, {
+					name: v,
+					width: "30px",
+					className: e("flex-shrink-0")
+				})
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "flex flex-1 flex-col gap-12 pe-24 text-b4",

package/ui/AdvancedToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Icon\n        name={icon}\n        width=\"30px\"\n        className={clsx('flex-shrink-0 pt-4', getTextColor(accentColor))}\n      />\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,GAAD;IACE,MAAM;IACN,OAAM;IACN,WAAW,EAAK,sBAAsB,EAAa,EAAY,CAAA;IAC/D,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}
+{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <span className={clsx('w-30 h-30 pt-4', getTextColor(accentColor))}>\n        <Icon name={icon} width=\"30px\" className={clsx('flex-shrink-0')} />\n      </span>\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,QAAD;IAAM,WAAW,EAAK,kBAAkB,EAAa,EAAY,CAAC;cAChE,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAO,WAAW,EAAK,gBAAA;KAAoB,CAAA;IAC9D,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}

package/ui/ChatWindow.d.ts

@@ -2,7 +2,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 import { ChatMessageSender } from './ChatMessage';
 import { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';
 import { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';
-export type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels };
+import { ChatWindowQuoteItem } from './ChatWindowQuote';
+export type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels, ChatWindowQuoteItem };
 export interface ChatWindowMessage {
     id: string;
     sender: ChatMessageSender;
@@ -24,8 +25,10 @@ export interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     csatLabels?: ChatWindowCsatPromptLabels;
     csatRenderRatingLabel?: (rating: number) => ReactNode;
     csatThankYouLabels?: ChatWindowCsatThankYouLabels;
+    onQuoteCtaClick?: (quote: ChatWindowQuoteItem) => void;
 }
 export interface ChatWindowHandle {
     askForFeedback: () => void;
+    showQuotes: (quotes: ChatWindowQuoteItem[]) => void;
 }
 export declare const ChatWindow: import('react').ForwardRefExoticComponent<ChatWindowProps & import('react').RefAttributes<ChatWindowHandle>>;

package/ui/ChatWindow.js

@@ -5,120 +5,131 @@ import { t as n } from "../chunks/ChatMessage.js";
 import { ChatTypingIndicator as r } from "./ChatTypingIndicator.js";
 import { ChatWindowCsatPrompt as i } from "./ChatWindowCsatPrompt.js";
 import { ChatWindowCsatThankYou as a } from "./ChatWindowCsatThankYou.js";
-import { forwardRef as o, useEffect as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
-import { Icon as d } from "@clubmed/trident-icons";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ChatWindowQuote as o } from "./ChatWindowQuote.js";
+import { forwardRef as s, useEffect as c, useImperativeHandle as l, useRef as u, useState as d } from "react";
+import { Icon as f } from "@clubmed/trident-icons";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region lib/ui/ChatWindow.tsx
-var m = /* @__PURE__ */ f("svg", {
+var h = /* @__PURE__ */ p("svg", {
 	className: "absolute top-full inset-x-[50%] -translate-x-1/2",
 	width: "118",
 	height: "27",
 	viewBox: "0 0 118 27",
-	children: /* @__PURE__ */ f("path", {
+	children: /* @__PURE__ */ p("path", {
 		d: "M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z",
 		fill: "#F6EFE7"
 	})
-}), h = o(function({ title: o = "Ask me a question", greeting: h, messages: g, inputValue: _, inputPlaceholder: v, isTyping: y = !1, onInputChange: b, onSubmit: x, onClose: S, onAudioClick: C, logo: w, onFeedbackRate: T, csatLabels: E, csatRenderRatingLabel: D, csatThankYouLabels: O, className: k, ...A }, j) {
-	let M = l(null), [N, P] = u(!1), [F, I] = u(null);
-	c(j, () => ({ askForFeedback() {
-		P(!0);
-	} })), s(() => {
-		let e = M.current;
+}), g = s(function({ title: s = "Ask me a question", greeting: g, messages: _, inputValue: v, inputPlaceholder: y, isTyping: b = !1, onInputChange: x, onSubmit: S, onClose: C, onAudioClick: w, logo: T, onFeedbackRate: E, csatLabels: D, csatRenderRatingLabel: O, csatThankYouLabels: k, onQuoteCtaClick: A, className: j, ...M }, N) {
+	let P = u(null), [F, I] = d(!1), [L, R] = d(null), [z, B] = d([]);
+	l(N, () => ({
+		askForFeedback() {
+			I(!0);
+		},
+		showQuotes(e) {
+			B((t) => [...t, e]);
+		}
+	})), c(() => {
+		let e = P.current;
 		e && e.scrollTo({
 			top: e.scrollHeight,
 			behavior: "smooth"
 		});
 	}, [
-		g,
-		y,
-		N,
-		F
+		_,
+		b,
+		F,
+		L,
+		z
 	]);
-	function L(e) {
-		I(String(D ? D(e) : e)), T?.(e);
+	function V(e) {
+		R(String(O ? O(e) : e)), E?.(e);
 	}
-	let R = N && E && D;
-	return /* @__PURE__ */ p("div", {
-		...A,
-		className: e("flex flex-col gap-20 items-center", k),
-		children: [/* @__PURE__ */ p("div", {
+	let H = F && D && O;
+	return /* @__PURE__ */ m("div", {
+		...M,
+		className: e("flex flex-col gap-20 items-center", j),
+		children: [/* @__PURE__ */ m("div", {
 			className: "chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden",
 			children: [
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ m("div", {
 					className: "relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden",
-					children: [/* @__PURE__ */ f("div", {
+					children: [/* @__PURE__ */ p("div", {
 						className: "absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]",
-						children: m
-					}), /* @__PURE__ */ p("div", {
+						children: h
+					}), /* @__PURE__ */ m("div", {
 						className: "relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "flex items-center justify-center px-12 py-8 w-full",
-							children: /* @__PURE__ */ f("p", {
+							children: /* @__PURE__ */ p("p", {
 								className: "font-serif font-bold italic text-h5 text-center text-black line-clamp-2",
-								children: o
+								children: s
 							})
-						}), w ?? /* @__PURE__ */ f("button", {
+						}), T ?? /* @__PURE__ */ p("button", {
 							type: "button",
 							"aria-label": "AI assistant",
 							className: "chat-border flex items-center justify-center size-48 rounded-full bg-white",
-							children: /* @__PURE__ */ f(d, {
+							children: /* @__PURE__ */ p(f, {
 								name: "Sparkles",
 								width: "24px"
 							})
 						})]
 					})]
 				}),
-				/* @__PURE__ */ p("div", {
-					ref: M,
+				/* @__PURE__ */ m("div", {
+					ref: P,
 					role: "log",
 					"aria-label": "Chat messages",
 					"aria-live": "polite",
 					className: "chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20",
 					children: [
-						h ? /* @__PURE__ */ f("div", {
+						g ? /* @__PURE__ */ p("div", {
 							className: "px-20",
-							children: /* @__PURE__ */ f("p", {
+							children: /* @__PURE__ */ p("p", {
 								className: "text-b3 text-black",
-								children: h
+								children: g
 							})
 						}) : null,
-						g.map((e) => /* @__PURE__ */ f(n, {
+						_.map((e) => /* @__PURE__ */ p(n, {
 							sender: e.sender,
 							children: e.content
 						}, e.id)),
-						y && /* @__PURE__ */ f("div", {
+						b && /* @__PURE__ */ p("div", {
 							className: "px-12",
-							children: /* @__PURE__ */ f(r, {})
+							children: /* @__PURE__ */ p(r, {})
 						}),
-						R && /* @__PURE__ */ f(i, {
-							onRate: L,
-							labels: E,
-							renderRatingLabel: D
+						H && /* @__PURE__ */ p(i, {
+							onRate: V,
+							labels: D,
+							renderRatingLabel: O
 						}),
-						F && /* @__PURE__ */ f(n, {
+						L && /* @__PURE__ */ p(n, {
 							sender: "user",
-							children: F
+							children: L
 						}),
-						F && O && /* @__PURE__ */ f(a, { labels: O })
+						L && k && /* @__PURE__ */ p(a, { labels: k }),
+						z.map((e, t) => /* @__PURE__ */ p(o, {
+							quotes: e,
+							onCtaClick: A
+						}, t))
 					]
 				}),
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ p("div", {
 					className: "shrink-0 px-8 pb-8 pt-12",
-					children: /* @__PURE__ */ f(t, {
-						value: _,
-						placeholder: v,
-						onValueChange: b,
-						onSubmit: x,
-						onAudioClick: C
+					children: /* @__PURE__ */ p(t, {
+						value: v,
+						placeholder: y,
+						onValueChange: x,
+						onSubmit: S,
+						onAudioClick: w
 					})
 				})
 			]
-		}), S && /* @__PURE__ */ f("button", {
+		}), C && /* @__PURE__ */ p("button", {
 			type: "button",
 			"aria-label": "Close chat",
-			onClick: S,
+			onClick: C,
 			className: "flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity",
-			children: /* @__PURE__ */ f(d, {
+			children: /* @__PURE__ */ p(f, {
 				name: "CrossDefault",
 				width: "24px"
 			})
@@ -126,6 +137,6 @@ var m = /* @__PURE__ */ f("svg", {
 	});
 });
 //#endregion
-export { h as ChatWindow };
+export { g as ChatWindow };
 
 //# sourceMappingURL=ChatWindow.js.map

package/ui/ChatWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWindow.js","names":[],"sources":["../../lib/ui/ChatWindow.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { twMerge } from './helpers/twMerge';\nimport { ChatInput } from './ChatInput';\nimport { ChatMessage } from './ChatMessage';\nimport type { ChatMessageSender } from './ChatMessage';\nimport { ChatTypingIndicator } from './ChatTypingIndicator';\nimport { ChatWindowCsatPrompt } from './ChatWindowCsatPrompt';\nimport type { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';\nimport { ChatWindowCsatThankYou } from './ChatWindowCsatThankYou';\nimport type { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';\n\nexport type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels };\n\nexport interface ChatWindowMessage {\n  id: string;\n  sender: ChatMessageSender;\n  content: string;\n}\n\nexport interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  title?: string;\n  greeting?: string;\n  messages: ChatWindowMessage[];\n  inputValue: string;\n  inputPlaceholder?: string;\n  isTyping?: boolean;\n  onInputChange: (value: string) => void;\n  onSubmit: () => void;\n  onClose?: () => void;\n  onAudioClick?: () => void;\n  logo?: ReactNode;\n  onFeedbackRate?: (rating: number) => void;\n  csatLabels?: ChatWindowCsatPromptLabels;\n  csatRenderRatingLabel?: (rating: number) => ReactNode;\n  csatThankYouLabels?: ChatWindowCsatThankYouLabels;\n}\n\nexport interface ChatWindowHandle {\n  askForFeedback: () => void;\n}\n\nconst headerCurve = (\n  <svg\n    className=\"absolute top-full inset-x-[50%] -translate-x-1/2\"\n    width=\"118\"\n    height=\"27\"\n    viewBox=\"0 0 118 27\"\n  >\n    <path\n      d=\"M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z\"\n      fill=\"#F6EFE7\"\n    />\n  </svg>\n);\n\nexport const ChatWindow = forwardRef<ChatWindowHandle, ChatWindowProps>(function ChatWindow(\n  {\n    title = 'Ask me a question',\n    greeting,\n    messages,\n    inputValue,\n    inputPlaceholder,\n    isTyping = false,\n    onInputChange,\n    onSubmit,\n    onClose,\n    onAudioClick,\n    logo,\n    onFeedbackRate,\n    csatLabels,\n    csatRenderRatingLabel,\n    csatThankYouLabels,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const logRef = useRef<HTMLDivElement>(null);\n  const [showCsat, setShowCsat] = useState(false);\n  const [csatRatingMessage, setCsatRatingMessage] = useState<string | null>(null);\n\n  useImperativeHandle(ref, () => ({\n    askForFeedback() {\n      setShowCsat(true);\n    },\n  }));\n\n  useEffect(() => {\n    const el = logRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n  }, [messages, isTyping, showCsat, csatRatingMessage]);\n\n  function handleRate(rating: number) {\n    const label = csatRenderRatingLabel ? String(csatRenderRatingLabel(rating)) : String(rating);\n    setCsatRatingMessage(label);\n    onFeedbackRate?.(rating);\n  }\n\n  const csatReady = showCsat && csatLabels && csatRenderRatingLabel;\n\n  return (\n    <div {...props} className={twMerge('flex flex-col gap-20 items-center', className)}>\n      <div className=\"chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden\">\n        <div className=\"relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden\">\n          <div className=\"absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]\">\n            {headerCurve}\n          </div>\n          <div className=\"relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10\">\n            <div className=\"flex items-center justify-center px-12 py-8 w-full\">\n              <p className=\"font-serif font-bold italic text-h5 text-center text-black line-clamp-2\">\n                {title}\n              </p>\n            </div>\n            {logo ?? (\n              <button\n                type=\"button\"\n                aria-label=\"AI assistant\"\n                className=\"chat-border flex items-center justify-center size-48 rounded-full bg-white\"\n              >\n                <Icon name=\"Sparkles\" width=\"24px\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        <div\n          ref={logRef}\n          role=\"log\"\n          aria-label=\"Chat messages\"\n          aria-live=\"polite\"\n          className=\"chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20\"\n        >\n          {greeting ? (\n            <div className=\"px-20\">\n              <p className=\"text-b3 text-black\">{greeting}</p>\n            </div>\n          ) : null}\n          {messages.map((msg) => (\n            <ChatMessage key={msg.id} sender={msg.sender}>\n              {msg.content}\n            </ChatMessage>\n          ))}\n          {isTyping && (\n            <div className=\"px-12\">\n              <ChatTypingIndicator />\n            </div>\n          )}\n          {csatReady && (\n            <ChatWindowCsatPrompt\n              onRate={handleRate}\n              labels={csatLabels}\n              renderRatingLabel={csatRenderRatingLabel}\n            />\n          )}\n          {csatRatingMessage && <ChatMessage sender=\"user\">{csatRatingMessage}</ChatMessage>}\n          {csatRatingMessage && csatThankYouLabels && (\n            <ChatWindowCsatThankYou labels={csatThankYouLabels} />\n          )}\n        </div>\n\n        <div className=\"shrink-0 px-8 pb-8 pt-12\">\n          <ChatInput\n            value={inputValue}\n            placeholder={inputPlaceholder}\n            onValueChange={onInputChange}\n            onSubmit={onSubmit}\n            onAudioClick={onAudioClick}\n          />\n        </div>\n      </div>\n\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"Close chat\"\n          onClick={onClose}\n          className=\"flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;AA6CA,IAAM,IACJ,kBAAC,OAAD;CACE,WAAU;CACV,OAAM;CACN,QAAO;CACP,SAAQ;WAER,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,CAAA;CACE,CAAA,EAGK,IAAa,EAA8C,SACtE,EACE,WAAQ,qBACR,aACA,aACA,eACA,qBACA,cAAW,IACX,kBACA,aACA,YACA,iBACA,SACA,mBACA,eACA,0BACA,uBACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAS,EAAuB,KAAK,EACrC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAmB,KAAwB,EAAwB,KAAK;AAQ/E,CANA,EAAoB,UAAY,EAC9B,iBAAiB;AACf,IAAY,GAAK;IAEpB,EAAE,EAEH,QAAgB;EACd,IAAM,IAAK,EAAO;AAClB,EAAI,KAAI,EAAG,SAAS;GAAE,KAAK,EAAG;GAAc,UAAU;GAAU,CAAC;IAChE;EAAC;EAAU;EAAU;EAAU;EAAkB,CAAC;CAErD,SAAS,EAAW,GAAgB;AAGlC,EADA,EADsC,OAAxB,IAA+B,EAAsB,EAAO,GAAW,EAAO,CACjE,EAC3B,IAAiB,EAAO;;CAG1B,IAAM,IAAY,KAAY,KAAc;AAE5C,QACE,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAQ,qCAAqC,EAAU;YAAlF,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV;QACC,CAAA;OACA,CAAA,EACL,KACC,kBAAC,UAAD;OACE,MAAK;OACL,cAAW;OACX,WAAU;iBAEV,kBAAC,GAAD;QAAM,MAAK;QAAW,OAAM;QAAS,CAAA;OAC9B,CAAA,CAAA;;;IAKf,kBAAC,OAAD;KACE,KAAK;KACL,MAAK;KACL,cAAW;KACX,aAAU;KACV,WAAU;eALZ;MAOG,IACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAa,CAAA;OAC5C,CAAA,GACJ;MACH,EAAS,KAAK,MACb,kBAAC,GAAD;OAA0B,QAAQ,EAAI;iBACnC,EAAI;OACO,EAFI,EAAI,GAER,CACd;MACD,KACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAuB,CAAA;OACnB,CAAA;MAEP,KACC,kBAAC,GAAD;OACE,QAAQ;OACR,QAAQ;OACR,mBAAmB;OACnB,CAAA;MAEH,KAAqB,kBAAC,GAAD;OAAa,QAAO;iBAAQ;OAAgC,CAAA;MACjF,KAAqB,KACpB,kBAAC,GAAD,EAAwB,QAAQ,GAAsB,CAAA;;;IAI1D,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO;MACP,aAAa;MACb,eAAe;MACL;MACI;MACd,CAAA;KACE,CAAA;;MAGP,KACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAW;GACX,SAAS;GACT,WAAU;aAEV,kBAAC,GAAD;IAAM,MAAK;IAAe,OAAM;IAAS,CAAA;GAClC,CAAA,CAAA;;EAIf"}
+{"version":3,"file":"ChatWindow.js","names":[],"sources":["../../lib/ui/ChatWindow.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { twMerge } from './helpers/twMerge';\nimport { ChatInput } from './ChatInput';\nimport { ChatMessage } from './ChatMessage';\nimport type { ChatMessageSender } from './ChatMessage';\nimport { ChatTypingIndicator } from './ChatTypingIndicator';\nimport { ChatWindowCsatPrompt } from './ChatWindowCsatPrompt';\nimport type { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';\nimport { ChatWindowCsatThankYou } from './ChatWindowCsatThankYou';\nimport type { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';\nimport { ChatWindowQuote } from './ChatWindowQuote';\nimport type { ChatWindowQuoteItem } from './ChatWindowQuote';\n\nexport type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels, ChatWindowQuoteItem };\n\nexport interface ChatWindowMessage {\n  id: string;\n  sender: ChatMessageSender;\n  content: string;\n}\n\nexport interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  title?: string;\n  greeting?: string;\n  messages: ChatWindowMessage[];\n  inputValue: string;\n  inputPlaceholder?: string;\n  isTyping?: boolean;\n  onInputChange: (value: string) => void;\n  onSubmit: () => void;\n  onClose?: () => void;\n  onAudioClick?: () => void;\n  logo?: ReactNode;\n  onFeedbackRate?: (rating: number) => void;\n  csatLabels?: ChatWindowCsatPromptLabels;\n  csatRenderRatingLabel?: (rating: number) => ReactNode;\n  csatThankYouLabels?: ChatWindowCsatThankYouLabels;\n  onQuoteCtaClick?: (quote: ChatWindowQuoteItem) => void;\n}\n\nexport interface ChatWindowHandle {\n  askForFeedback: () => void;\n  showQuotes: (quotes: ChatWindowQuoteItem[]) => void;\n}\n\nconst headerCurve = (\n  <svg\n    className=\"absolute top-full inset-x-[50%] -translate-x-1/2\"\n    width=\"118\"\n    height=\"27\"\n    viewBox=\"0 0 118 27\"\n  >\n    <path\n      d=\"M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z\"\n      fill=\"#F6EFE7\"\n    />\n  </svg>\n);\n\nexport const ChatWindow = forwardRef<ChatWindowHandle, ChatWindowProps>(function ChatWindow(\n  {\n    title = 'Ask me a question',\n    greeting,\n    messages,\n    inputValue,\n    inputPlaceholder,\n    isTyping = false,\n    onInputChange,\n    onSubmit,\n    onClose,\n    onAudioClick,\n    logo,\n    onFeedbackRate,\n    csatLabels,\n    csatRenderRatingLabel,\n    csatThankYouLabels,\n    onQuoteCtaClick,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const logRef = useRef<HTMLDivElement>(null);\n  const [showCsat, setShowCsat] = useState(false);\n  const [csatRatingMessage, setCsatRatingMessage] = useState<string | null>(null);\n  const [quoteGroups, setQuoteGroups] = useState<ChatWindowQuoteItem[][]>([]);\n\n  useImperativeHandle(ref, () => ({\n    askForFeedback() {\n      setShowCsat(true);\n    },\n    showQuotes(quotes: ChatWindowQuoteItem[]) {\n      setQuoteGroups((prev) => [...prev, quotes]);\n    },\n  }));\n\n  useEffect(() => {\n    const el = logRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n  }, [messages, isTyping, showCsat, csatRatingMessage, quoteGroups]);\n\n  function handleRate(rating: number) {\n    const label = csatRenderRatingLabel ? String(csatRenderRatingLabel(rating)) : String(rating);\n    setCsatRatingMessage(label);\n    onFeedbackRate?.(rating);\n  }\n\n  const csatReady = showCsat && csatLabels && csatRenderRatingLabel;\n\n  return (\n    <div {...props} className={twMerge('flex flex-col gap-20 items-center', className)}>\n      <div className=\"chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden\">\n        <div className=\"relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden\">\n          <div className=\"absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]\">\n            {headerCurve}\n          </div>\n          <div className=\"relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10\">\n            <div className=\"flex items-center justify-center px-12 py-8 w-full\">\n              <p className=\"font-serif font-bold italic text-h5 text-center text-black line-clamp-2\">\n                {title}\n              </p>\n            </div>\n            {logo ?? (\n              <button\n                type=\"button\"\n                aria-label=\"AI assistant\"\n                className=\"chat-border flex items-center justify-center size-48 rounded-full bg-white\"\n              >\n                <Icon name=\"Sparkles\" width=\"24px\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        <div\n          ref={logRef}\n          role=\"log\"\n          aria-label=\"Chat messages\"\n          aria-live=\"polite\"\n          className=\"chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20\"\n        >\n          {greeting ? (\n            <div className=\"px-20\">\n              <p className=\"text-b3 text-black\">{greeting}</p>\n            </div>\n          ) : null}\n          {messages.map((msg) => (\n            <ChatMessage key={msg.id} sender={msg.sender}>\n              {msg.content}\n            </ChatMessage>\n          ))}\n          {isTyping && (\n            <div className=\"px-12\">\n              <ChatTypingIndicator />\n            </div>\n          )}\n          {csatReady && (\n            <ChatWindowCsatPrompt\n              onRate={handleRate}\n              labels={csatLabels}\n              renderRatingLabel={csatRenderRatingLabel}\n            />\n          )}\n          {csatRatingMessage && <ChatMessage sender=\"user\">{csatRatingMessage}</ChatMessage>}\n          {csatRatingMessage && csatThankYouLabels && (\n            <ChatWindowCsatThankYou labels={csatThankYouLabels} />\n          )}\n          {quoteGroups.map((quotes, idx) => (\n            <ChatWindowQuote key={idx} quotes={quotes} onCtaClick={onQuoteCtaClick} />\n          ))}\n        </div>\n\n        <div className=\"shrink-0 px-8 pb-8 pt-12\">\n          <ChatInput\n            value={inputValue}\n            placeholder={inputPlaceholder}\n            onValueChange={onInputChange}\n            onSubmit={onSubmit}\n            onAudioClick={onAudioClick}\n          />\n        </div>\n      </div>\n\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"Close chat\"\n          onClick={onClose}\n          className=\"flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAiDA,IAAM,IACJ,kBAAC,OAAD;CACE,WAAU;CACV,OAAM;CACN,QAAO;CACP,SAAQ;WAER,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,CAAA;CACE,CAAA,EAGK,IAAa,EAA8C,SACtE,EACE,WAAQ,qBACR,aACA,aACA,eACA,qBACA,cAAW,IACX,kBACA,aACA,YACA,iBACA,SACA,mBACA,eACA,0BACA,uBACA,oBACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAS,EAAuB,KAAK,EACrC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAmB,KAAwB,EAAwB,KAAK,EACzE,CAAC,GAAa,KAAkB,EAAkC,EAAE,CAAC;AAW3E,CATA,EAAoB,UAAY;EAC9B,iBAAiB;AACf,KAAY,GAAK;;EAEnB,WAAW,GAA+B;AACxC,MAAgB,MAAS,CAAC,GAAG,GAAM,EAAO,CAAC;;EAE9C,EAAE,EAEH,QAAgB;EACd,IAAM,IAAK,EAAO;AAClB,EAAI,KAAI,EAAG,SAAS;GAAE,KAAK,EAAG;GAAc,UAAU;GAAU,CAAC;IAChE;EAAC;EAAU;EAAU;EAAU;EAAmB;EAAY,CAAC;CAElE,SAAS,EAAW,GAAgB;AAGlC,EADA,EADsC,OAAxB,IAA+B,EAAsB,EAAO,GAAW,EAAO,CACjE,EAC3B,IAAiB,EAAO;;CAG1B,IAAM,IAAY,KAAY,KAAc;AAE5C,QACE,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAQ,qCAAqC,EAAU;YAAlF,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV;QACC,CAAA;OACA,CAAA,EACL,KACC,kBAAC,UAAD;OACE,MAAK;OACL,cAAW;OACX,WAAU;iBAEV,kBAAC,GAAD;QAAM,MAAK;QAAW,OAAM;QAAS,CAAA;OAC9B,CAAA,CAAA;;;IAKf,kBAAC,OAAD;KACE,KAAK;KACL,MAAK;KACL,cAAW;KACX,aAAU;KACV,WAAU;eALZ;MAOG,IACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAa,CAAA;OAC5C,CAAA,GACJ;MACH,EAAS,KAAK,MACb,kBAAC,GAAD;OAA0B,QAAQ,EAAI;iBACnC,EAAI;OACO,EAFI,EAAI,GAER,CACd;MACD,KACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAuB,CAAA;OACnB,CAAA;MAEP,KACC,kBAAC,GAAD;OACE,QAAQ;OACR,QAAQ;OACR,mBAAmB;OACnB,CAAA;MAEH,KAAqB,kBAAC,GAAD;OAAa,QAAO;iBAAQ;OAAgC,CAAA;MACjF,KAAqB,KACpB,kBAAC,GAAD,EAAwB,QAAQ,GAAsB,CAAA;MAEvD,EAAY,KAAK,GAAQ,MACxB,kBAAC,GAAD;OAAmC;OAAQ,YAAY;OAAmB,EAApD,EAAoD,CAAA;;;IAI9E,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO;MACP,aAAa;MACb,eAAe;MACL;MACI;MACd,CAAA;KACE,CAAA;;MAGP,KACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAW;GACX,SAAS;GACT,WAAU;aAEV,kBAAC,GAAD;IAAM,MAAK;IAAe,OAAM;IAAS,CAAA;GAClC,CAAA,CAAA;;EAIf"}

package/ui/ChatWindowQuote.d.ts

@@ -0,0 +1,22 @@
+export interface ChatWindowQuoteItem {
+    id: string;
+    resortName: string;
+    country: string;
+    imageUrl: string;
+    /** Date range, e.g. "15 June 2026 to 24 June 2026" */
+    dateRange: string;
+    /** Pax info, e.g. "for 2 adults 2 children" */
+    pax: string;
+    /** CTA button label. Defaults to "See prices" */
+    ctaLabel?: string;
+    /** Bullet-point package items. Shown in single-quote inline mode only */
+    packageIncludes?: string[];
+    /** Free-text paragraph shown in single-quote inline mode only */
+    additionalInfo?: string;
+}
+export interface ChatWindowQuoteProps {
+    quotes: ChatWindowQuoteItem[];
+    onCtaClick?: (quote: ChatWindowQuoteItem) => void;
+    className?: string;
+}
+export declare function ChatWindowQuote({ quotes, onCtaClick, className }: ChatWindowQuoteProps): import("react/jsx-runtime").JSX.Element | null;

package/ui/ChatWindowQuote.js

@@ -0,0 +1,141 @@
+"use client";
+import { Button as e } from "./buttons/Button.js";
+import { twMerge as t } from "./helpers/twMerge.js";
+import { Scrollbar as n } from "./Scrollbar.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/ChatWindowQuote.tsx
+function a({ quote: t, onCtaClick: n }) {
+	return /* @__PURE__ */ i("article", {
+		"aria-label": t.resortName,
+		className: "flex flex-col bg-white border border-lightGrey rounded-32 shadow-[0px_2px_14px_0px_rgba(0,0,0,0.25)] overflow-hidden p-24 gap-16",
+		children: [/* @__PURE__ */ i("div", {
+			className: "relative h-210 w-full overflow-hidden rounded-16",
+			children: [
+				/* @__PURE__ */ r("img", {
+					src: t.imageUrl,
+					alt: "",
+					className: "absolute inset-0 size-full object-cover"
+				}),
+				/* @__PURE__ */ r("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]" }),
+				/* @__PURE__ */ i("div", {
+					className: "absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-20",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b2 font-semibold",
+						children: t.resortName
+					}), /* @__PURE__ */ r("p", {
+						className: "text-b3",
+						children: t.country
+					})]
+				})
+			]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-16 items-center",
+			children: [
+				/* @__PURE__ */ i("p", {
+					className: "text-b4 font-semibold text-black text-center",
+					children: [
+						t.resortName,
+						", ",
+						t.dateRange,
+						", ",
+						t.pax
+					]
+				}),
+				/* @__PURE__ */ r(e, {
+					color: "saffron",
+					onClick: () => n?.(t),
+					children: t.ctaLabel ?? "See prices"
+				}),
+				t.packageIncludes && t.packageIncludes.length > 0 && /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-4 w-full",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b3 font-semibold text-black",
+						children: "Your All-Inclusive package includes:"
+					}), /* @__PURE__ */ r("ul", {
+						className: "flex flex-col gap-2",
+						children: t.packageIncludes.map((e) => /* @__PURE__ */ i("li", {
+							className: "text-b3 text-black",
+							children: ["• ", e]
+						}, e))
+					})]
+				}),
+				t.additionalInfo && /* @__PURE__ */ r("p", {
+					className: "text-b3 text-black",
+					children: t.additionalInfo
+				})
+			]
+		})]
+	});
+}
+function o({ quote: t, onCtaClick: n }) {
+	return /* @__PURE__ */ i("article", {
+		"aria-label": t.resortName,
+		className: "flex flex-col gap-12 items-center shrink-0 w-200",
+		children: [/* @__PURE__ */ i("div", {
+			className: "relative size-200 rounded-16 overflow-hidden",
+			children: [
+				/* @__PURE__ */ r("img", {
+					src: t.imageUrl,
+					alt: "",
+					className: "absolute inset-0 size-full object-cover"
+				}),
+				/* @__PURE__ */ r("div", { className: "absolute inset-0 rounded-16 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]" }),
+				/* @__PURE__ */ i("div", {
+					className: "absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-8",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b4 font-semibold",
+						children: t.resortName
+					}), /* @__PURE__ */ r("p", {
+						className: "text-b5",
+						children: t.country
+					})]
+				})
+			]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-8 items-center",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-b5 font-semibold text-black text-center",
+				children: [
+					t.resortName,
+					/* @__PURE__ */ r("br", {}),
+					t.dateRange,
+					",",
+					/* @__PURE__ */ r("br", {}),
+					t.pax
+				]
+			}), /* @__PURE__ */ r(e, {
+				color: "black",
+				onClick: () => n?.(t),
+				children: t.ctaLabel ?? "See prices"
+			})]
+		})]
+	});
+}
+function s({ quotes: e, onCtaClick: i, className: s }) {
+	return e.length === 0 ? null : e.length === 1 ? /* @__PURE__ */ r("div", {
+		className: t(s),
+		children: /* @__PURE__ */ r(a, {
+			quote: e[0],
+			onCtaClick: i
+		})
+	}) : /* @__PURE__ */ r("div", {
+		className: t("flex flex-col gap-8", s),
+		children: /* @__PURE__ */ r(n, {
+			timelineName: "--chat-quote-scroller",
+			scrollerClassName: "pb-24",
+			scrollbarWidth: "60%",
+			"aria-label": "Quote options",
+			children: /* @__PURE__ */ r("div", {
+				className: "flex gap-12",
+				children: e.map((e) => /* @__PURE__ */ r(o, {
+					quote: e,
+					onCtaClick: i
+				}, e.id))
+			})
+		})
+	});
+}
+//#endregion
+export { s as ChatWindowQuote };
+
+//# sourceMappingURL=ChatWindowQuote.js.map

package/ui/ChatWindowQuote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowQuote.js","names":[],"sources":["../../lib/ui/ChatWindowQuote.tsx"],"sourcesContent":["'use client';\n\nimport { twMerge } from './helpers/twMerge';\nimport { Button } from './buttons/Button';\nimport { Scrollbar } from './Scrollbar';\n\nexport interface ChatWindowQuoteItem {\n  id: string;\n  resortName: string;\n  country: string;\n  imageUrl: string;\n  /** Date range, e.g. \"15 June 2026 to 24 June 2026\" */\n  dateRange: string;\n  /** Pax info, e.g. \"for 2 adults 2 children\" */\n  pax: string;\n  /** CTA button label. Defaults to \"See prices\" */\n  ctaLabel?: string;\n  /** Bullet-point package items. Shown in single-quote inline mode only */\n  packageIncludes?: string[];\n  /** Free-text paragraph shown in single-quote inline mode only */\n  additionalInfo?: string;\n}\n\nexport interface ChatWindowQuoteProps {\n  quotes: ChatWindowQuoteItem[];\n  onCtaClick?: (quote: ChatWindowQuoteItem) => void;\n  className?: string;\n}\n\ninterface QuoteCardProps {\n  quote: ChatWindowQuoteItem;\n  onCtaClick?: (quote: ChatWindowQuoteItem) => void;\n}\n\nfunction SingleQuoteCard({ quote, onCtaClick }: QuoteCardProps) {\n  return (\n    <article\n      aria-label={quote.resortName}\n      className=\"flex flex-col bg-white border border-lightGrey rounded-32 shadow-[0px_2px_14px_0px_rgba(0,0,0,0.25)] overflow-hidden p-24 gap-16\"\n    >\n      <div className=\"relative h-210 w-full overflow-hidden rounded-16\">\n        <img src={quote.imageUrl} alt=\"\" className=\"absolute inset-0 size-full object-cover\" />\n        <div className=\"absolute inset-0 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]\" />\n        <div className=\"absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-20\">\n          <p className=\"text-b2 font-semibold\">{quote.resortName}</p>\n          <p className=\"text-b3\">{quote.country}</p>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-16 items-center\">\n        <p className=\"text-b4 font-semibold text-black text-center\">\n          {quote.resortName}, {quote.dateRange}, {quote.pax}\n        </p>\n        <Button color=\"saffron\" onClick={() => onCtaClick?.(quote)}>\n          {quote.ctaLabel ?? 'See prices'}\n        </Button>\n        {quote.packageIncludes && quote.packageIncludes.length > 0 && (\n          <div className=\"flex flex-col gap-4 w-full\">\n            <p className=\"text-b3 font-semibold text-black\">Your All-Inclusive package includes:</p>\n            <ul className=\"flex flex-col gap-2\">\n              {quote.packageIncludes.map((item) => (\n                <li key={item} className=\"text-b3 text-black\">\n                  • {item}\n                </li>\n              ))}\n            </ul>\n          </div>\n        )}\n        {quote.additionalInfo && <p className=\"text-b3 text-black\">{quote.additionalInfo}</p>}\n      </div>\n    </article>\n  );\n}\n\nfunction CompactQuoteCard({ quote, onCtaClick }: QuoteCardProps) {\n  return (\n    <article\n      aria-label={quote.resortName}\n      className=\"flex flex-col gap-12 items-center shrink-0 w-200\"\n    >\n      <div className=\"relative size-200 rounded-16 overflow-hidden\">\n        <img src={quote.imageUrl} alt=\"\" className=\"absolute inset-0 size-full object-cover\" />\n        <div className=\"absolute inset-0 rounded-16 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]\" />\n        <div className=\"absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-8\">\n          <p className=\"text-b4 font-semibold\">{quote.resortName}</p>\n          <p className=\"text-b5\">{quote.country}</p>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-8 items-center\">\n        <p className=\"text-b5 font-semibold text-black text-center\">\n          {quote.resortName}\n          <br />\n          {quote.dateRange},\n          <br />\n          {quote.pax}\n        </p>\n        <Button color=\"black\" onClick={() => onCtaClick?.(quote)}>\n          {quote.ctaLabel ?? 'See prices'}\n        </Button>\n      </div>\n    </article>\n  );\n}\n\nexport function ChatWindowQuote({ quotes, onCtaClick, className }: ChatWindowQuoteProps) {\n  if (quotes.length === 0) return null;\n\n  if (quotes.length === 1) {\n    return (\n      <div className={twMerge(className)}>\n        <SingleQuoteCard quote={quotes[0]} onCtaClick={onCtaClick} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={twMerge('flex flex-col gap-8', className)}>\n      <Scrollbar\n        timelineName=\"--chat-quote-scroller\"\n        scrollerClassName=\"pb-24\"\n        scrollbarWidth=\"60%\"\n        aria-label=\"Quote options\"\n      >\n        <div className=\"flex gap-12\">\n          {quotes.map((quote) => (\n            <CompactQuoteCard key={quote.id} quote={quote} onCtaClick={onCtaClick} />\n          ))}\n        </div>\n      </Scrollbar>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAkCA,SAAS,EAAgB,EAAE,UAAO,iBAA8B;AAC9D,QACE,kBAAC,WAAD;EACE,cAAY,EAAM;EAClB,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,KAAK,EAAM;KAAU,KAAI;KAAG,WAAU;KAA4C,CAAA;IACvF,kBAAC,OAAD,EAAK,WAAU,uFAAwF,CAAA;IACvG,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAyB,EAAM;MAAe,CAAA,EAC3D,kBAAC,KAAD;MAAG,WAAU;gBAAW,EAAM;MAAY,CAAA,CAAA;;;MAG9C,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAM;MAAW;MAAG,EAAM;MAAU;MAAG,EAAM;;;IAEhD,kBAAC,GAAD;KAAQ,OAAM;KAAU,eAAe,IAAa,EAAM;eACvD,EAAM,YAAY;KACZ,CAAA;IACR,EAAM,mBAAmB,EAAM,gBAAgB,SAAS,KACvD,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAAwC,CAAA,EACxF,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAM,gBAAgB,KAAK,MAC1B,kBAAC,MAAD;OAAe,WAAU;iBAAzB,CAA8C,MACzC,EAAA;SADI,EAEJ,CAAA;MAEJ,CAAA,CAAA;;IAGR,EAAM,kBAAkB,kBAAC,KAAD;KAAG,WAAU;eAAsB,EAAM;KAAmB,CAAA;;;;;AAM7F,SAAS,EAAiB,EAAE,UAAO,iBAA8B;AAC/D,QACE,kBAAC,WAAD;EACE,cAAY,EAAM;EAClB,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,KAAK,EAAM;KAAU,KAAI;KAAG,WAAU;KAA4C,CAAA;IACvF,kBAAC,OAAD,EAAK,WAAU,kGAAmG,CAAA;IAClH,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAyB,EAAM;MAAe,CAAA,EAC3D,kBAAC,KAAD;MAAG,WAAU;gBAAW,EAAM;MAAY,CAAA,CAAA;;;MAG9C,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAb;KACG,EAAM;KACP,kBAAC,MAAD,EAAM,CAAA;KACL,EAAM;KAAU;KACjB,kBAAC,MAAD,EAAM,CAAA;KACL,EAAM;;OAET,kBAAC,GAAD;IAAQ,OAAM;IAAQ,eAAe,IAAa,EAAM;cACrD,EAAM,YAAY;IACZ,CAAA,CAAA;;;;AAMjB,SAAgB,EAAgB,EAAE,WAAQ,eAAY,gBAAmC;AAWvF,QAVI,EAAO,WAAW,IAAU,OAE5B,EAAO,WAAW,IAElB,kBAAC,OAAD;EAAK,WAAW,EAAQ,EAAU;YAChC,kBAAC,GAAD;GAAiB,OAAO,EAAO;GAAgB;GAAc,CAAA;EACzD,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAW,EAAQ,uBAAuB,EAAU;YACvD,kBAAC,GAAD;GACE,cAAa;GACb,mBAAkB;GAClB,gBAAe;GACf,cAAW;aAEX,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAO,KAAK,MACX,kBAAC,GAAD;KAAwC;KAAmB;KAAc,EAAlD,EAAM,GAA4C,CAAA;IAEvE,CAAA;GACI,CAAA;EACR,CAAA"}