@bikdotai/bik-component-library 0.0.814 → 0.0.815

package/dist/cjs/components/bik-chatbot/components/ChatWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWindow.js","sources":["../../../../../src/components/bik-chatbot/components/ChatWindow.tsx"],"sourcesContent":["import AiIcon from '@src/assets/icons/Ai_event_generating.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { ChatState, ChatWindowProps } from '../types';\nimport { renderMarkdownLite } from '../utils/markdown';\nimport ThinkingIndicator from './ThinkingIndicator';\n\n// Single-column layout container\nconst ChatContainer = styled.div<{ chatState: ChatState }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\tmax-height: 100%;\n\tbackground: white;\n\tborder-left: 1px solid #e5e7eb;\n\tposition: relative;\n\n\t/* State-based styling */\n\t${(props) => {\n\t\tswitch (props.chatState) {\n\t\t\tcase 'conversation-starter':\n\t\t\t\treturn `\n          background: linear-gradient(180deg, #FFF6F9 0%, #FFFFFF 100%);\n        `;\n\t\t\tcase 'thinking':\n\t\t\t\treturn `\n          background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);\n        `;\n\t\t\tdefault:\n\t\t\t\treturn `\n          background: white;\n        `;\n\t\t}\n\t}}\n`;\n\nconst Header = styled.div`\n\tpadding: 16px;\n\tborder-bottom: 1px solid #e5e7eb;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: white;\n\tflex-shrink: 0;\n\n\t.header-text {\n\t\tfont-size: 14px;\n\t\tfont-weight: 500;\n\t\tcolor: #374151;\n\t}\n`;\n\n// Main content area - single column\nconst MainContent = styled.div`\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tmin-height: 0;\n`;\n\nconst MessagesWrapper = styled.div`\n\tflex: 1;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tbackground: #fafafa;\n\tscroll-behavior: smooth;\n\tmin-height: 0;\n\n\t/* Custom scrollbar */\n\t&::-webkit-scrollbar {\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground: #f1f1f1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #c1c1c1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground: #a8a8a8;\n\t}\n`;\n\nconst VideoCard = styled.div`\n\tbackground: white;\n\tborder-radius: 12px;\n\tpadding: 16px;\n\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\tborder: 1px solid #e5e7eb;\n`;\n\nconst VideoContainer = styled.div`\n\twidth: 100%;\n\theight: 180px;\n\tbackground: #f3f4f6;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\tmargin-bottom: 12px;\n`;\n\nconst PlayButton = styled.div`\n\twidth: 48px;\n\theight: 48px;\n\tbackground: rgba(0, 0, 0, 0.7);\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbackground: rgba(0, 0, 0, 0.8);\n\t\ttransform: scale(1.05);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tmargin-left: 2px;\n\t}\n`;\n\nconst VideoText = styled.div`\n\tfont-size: 14px;\n\tcolor: #374151;\n\tline-height: 1.5;\n`;\n\nconst Bubble = styled.div<{ role: 'user' | 'assistant' | 'system' }>`\n\tpadding: 12px 16px;\n\tborder-radius: 16px;\n\tfont-size: 14px;\n\tmax-width: 80%;\n\twhite-space: pre-line;\n\tword-wrap: break-word;\n\n\t${(props) =>\n\t\tprops.role === 'user'\n\t\t\t? `\n        background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);\n        margin-left: auto;\n        border-bottom-right-radius: 4px;\n        \n        & > div {\n          background: linear-gradient(92.69deg, #FF166A 0.37%, #FB5F08 100%);\n          -webkit-background-clip: text;\n          -webkit-text-fill-color: transparent;\n          background-clip: text;\n          display: inline-block;\n        }\n      `\n\t\t\t: props.role === 'system'\n\t\t\t? `\n        background: #f3f4f6;\n        color: #6b7280;\n        font-size: 12px;\n        font-style: italic;\n        text-align: center;\n        margin: 0 auto;\n        max-width: 90%;\n      `\n\t\t\t: `\n        background: white;\n        color: #111827;\n        border: 1px solid #e5e7eb;\n        margin-right: auto;\n        border-bottom-left-radius: 4px;\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n      `}\n`;\n\n// Ice breakers section - at the bottom before input\nconst IceBreakersSection = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst IceBreakersGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\talign-items: flex-end;\n`;\n\nconst IceBreakerChip = styled.button<{ disabled?: boolean }>`\n\tborder: 1px dotted #febad2;\n\tbackground: linear-gradient(\n\t\t92.69deg,\n\t\trgba(255, 230, 238, 0.5) 0.37%,\n\t\trgba(255, 240, 231, 0.5) 100%\n\t);\n\tpadding: 8px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\tmax-width: 280px;\n\talign-self: flex-end;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: linear-gradient(\n\t\t\t92.69deg,\n\t\t\trgba(255, 230, 238, 0.7) 0.37%,\n\t\t\trgba(255, 240, 231, 0.7) 100%\n\t\t);\n\t\tborder-color: #f472b6;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\n// Suggestions section - styled like ice breakers but for regular suggestions\nconst SuggestionsSection = styled.div`\n\tpadding: 16px;\n\tbackground: white;\n`;\n\nconst SuggestionsGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nconst SuggestionChip = styled.button<{ disabled?: boolean }>`\n\tbackground: #fef2f2;\n\tcolor: #dc2626;\n\tpadding: 12px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tborder: 1px solid #fecaca;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: #fee2e2;\n\t\tborder-color: #fca5a5;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\nconst InputContainer = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst InputBubble = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nconst TextInput = styled.textarea<{ hasText: boolean; chatState: ChatState }>`\n\tflex: 1;\n\tborder: 1px solid ${(props) => (props.hasText ? '#3b82f6' : '#d1d5db')};\n\tborder-radius: 12px;\n\tpadding: 12px;\n\tpadding-right: 48px;\n\tfont-size: 14px;\n\toutline: none;\n\tcolor: #374151;\n\tbackground: white;\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\ttransition: all 0.2s ease;\n\tresize: none;\n\tmin-height: 44px;\n\tmax-height: 120px;\n\tfont-family: inherit;\n\twidth: 100%;\n\n\t&:focus {\n\t\tborder-color: #3b82f6;\n\t\tbackground: white;\n\t\tbox-shadow: 0px 2px 8px 0px #0000001f, 0 0 0 3px rgba(59, 130, 246, 0.1);\n\t}\n\n\t&::placeholder {\n\t\tcolor: #9ca3af;\n\t}\n`;\n\nconst SendButton = styled.button<{ disabled?: boolean; hasText: boolean }>`\n\tposition: absolute;\n\tbottom: 10px;\n\tright: 10px;\n\twidth: 36px;\n\theight: 36px;\n\tborder-radius: 50%;\n\tbackground: ${(props) =>\n\t\tprops.hasText\n\t\t\t? 'linear-gradient(135deg, #FF166A 0%, #FB5F08 100%)'\n\t\t\t: '#e5e7eb'};\n\tborder: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\tbox-shadow: 0 2px 8px 0px #fa709a1c;\n\tz-index: 2;\n\n\t&:hover:not(:disabled) {\n\t\tbackground: ${(props) =>\n\t\t\tprops.hasText && !props.disabled\n\t\t\t\t? 'linear-gradient(135deg, #F857A6 0%, #FF5858 100%)'\n\t\t\t\t: '#e5e7eb'};\n\t\ttransform: scale(1.05);\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.95);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tfont-weight: bold;\n\t}\n`;\n\n// Customizable gradient text component\nexport const CustomGradientText = styled.span<{\n\tcolors?: string;\n\tangle?: number;\n}>`\n\tbackground: linear-gradient(\n\t\t${(props) => props.angle || 92.69}deg,\n\t\t${(props) => props.colors || '#ff166a 0.37%, #fb5f08 100%'}\n\t);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\tdisplay: inline-block;\n`;\n\n// Export ChatState type for backward compatibility\nexport type { ChatState } from '../types';\n\ninterface ChatWindowWithHeightProps extends ChatWindowProps {\n\tchatWindowHeight?: string | number;\n}\n\nconst ChatWindow: React.FC<ChatWindowWithHeightProps> = ({\n\tmessages,\n\tonSend,\n\theader = 'Create with AI',\n\tplaceholder = 'Discover the right event & launch campaigns for better conversions...',\n\tsuggestions = [\n\t\t'Top festivals for marketing',\n\t\t'Top events this week?',\n\t\t'Top August festivals near you',\n\t],\n\ticeBreakers,\n\tvideoStarter,\n\tdisabled = false,\n\tisThinking = false,\n\tonIceBreakerClick,\n\tchatState,\n\tchatWindowHeight,\n\tinputDisabled = false,\n}) => {\n\tconst [input, setInput] = useState('');\n\tconst [thinking, setThinking] = useState(false);\n\tconst [isTyping, setIsTyping] = useState(false);\n\tconst bottomRef = useRef<HTMLDivElement>(null);\n\tconst textareaRef = useRef<HTMLTextAreaElement>(null);\n\tconst isThinkingState = thinking || isThinking;\n\tconst isInputDisabledState = disabled || inputDisabled;\n\n\t// Determine current chat state\n\tconst getCurrentChatState = (): ChatState => {\n\t\tif (chatState) return chatState; // Explicit state override\n\t\tif (thinking || isThinking) return 'thinking';\n\t\tif (isTyping && input.trim().length > 0) return 'typing';\n\t\tif (messages.length === 0) return 'conversation-starter';\n\t\tif (messages.length > 0) return 'conversation';\n\t\treturn 'default';\n\t};\n\n\tconst currentState = getCurrentChatState();\n\n\t// markdown renderer moved to ../utils/markdown\n\n\tconst handleSend = () => {\n\t\tif (!input.trim() || isInputDisabledState || isThinkingState) return;\n\t\tonSend(input);\n\t\tsetInput('');\n\t\tsetThinking(true);\n\t\tsetTimeout(() => setThinking(false), 1500);\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (isInputDisabledState) return;\n\t\tif (e.key === 'Enter' && !e.shiftKey) {\n\t\t\te.preventDefault();\n\t\t\tif (!isThinkingState && input.trim()) {\n\t\t\t\thandleSend();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\tif (isInputDisabledState) return;\n\t\tconst value = e.target.value;\n\t\tsetInput(value);\n\t\tsetIsTyping(value.trim().length > 0);\n\n\t\t// Auto-resize textarea\n\t\tconst textarea = textareaRef.current;\n\t\tif (textarea) {\n\t\t\ttextarea.style.height = 'auto';\n\t\t\ttextarea.style.height = `${Math.min(textarea.scrollHeight, 117)}px`;\n\t\t}\n\t};\n\n\tconst hasText = input.trim().length > 0;\n\tconst isSendDisabled = isInputDisabledState || isThinkingState || !hasText;\n\n\tuseEffect(() => {\n\t\tbottomRef.current?.scrollIntoView({ behavior: 'smooth' });\n\t}, [messages, thinking, isThinking]);\n\n\t// Use chatWindowHeight if provided, otherwise use 100% if fullHeight is active\n\tconst containerHeight = chatWindowHeight || '100%';\n\n\treturn (\n\t\t<ChatContainer chatState={currentState} style={{ height: containerHeight }}>\n\t\t\t{/* Header */}\n\t\t\t<Header>\n\t\t\t\t<AiIcon height={24} width={24} />\n\t\t\t\t<div className=\"header-text\">{header}</div>\n\t\t\t</Header>\n\n\t\t\t{/* Main Content - Single Column Layout */}\n\t\t\t<MainContent>\n\t\t\t\t{/* Messages Section */}\n\t\t\t\t<MessagesWrapper>\n\t\t\t\t\t{/* Video starter card - only when no messages and videoStarter provided */}\n\t\t\t\t\t{currentState === 'conversation-starter' && videoStarter && (\n\t\t\t\t\t\t<VideoCard>\n\t\t\t\t\t\t\t<VideoContainer>\n\t\t\t\t\t\t\t\t<PlayButton onClick={videoStarter.onPlay}>\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t\t<path d=\"M8 5v14l11-7z\" />\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</PlayButton>\n\t\t\t\t\t\t\t</VideoContainer>\n\t\t\t\t\t\t\t<VideoText>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ fontWeight: 500, marginBottom: '4px' }}>\n\t\t\t\t\t\t\t\t\t{videoStarter.title}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<BodyCaption>{videoStarter.description}</BodyCaption>\n\t\t\t\t\t\t\t</VideoText>\n\t\t\t\t\t\t</VideoCard>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Render messages (assistant supports lite Markdown) */}\n\t\t\t\t\t{messages.map((m) => (\n\t\t\t\t\t\t<Bubble key={m.id} role={m.role}>\n\t\t\t\t\t\t\t{m.role === 'assistant' ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t\t__html: renderMarkdownLite(m.content),\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div style={{ whiteSpace: 'pre-wrap' }}>{m.content}</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Bubble>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{/* Thinking bubble */}\n\t\t\t\t\t{(thinking || isThinking) && <ThinkingIndicator />}\n\n\t\t\t\t\t<div ref={bottomRef} />\n\t\t\t\t</MessagesWrapper>\n\n\t\t\t\t{/* Ice Breakers Section - At bottom when no messages and ice breakers provided */}\n\t\t\t\t{iceBreakers && currentState === 'conversation-starter' && (\n\t\t\t\t\t<IceBreakersSection>\n\t\t\t\t\t\t<IceBreakersGrid>\n\t\t\t\t\t\t\t{iceBreakers.map((iceBreaker) => (\n\t\t\t\t\t\t\t\t<IceBreakerChip\n\t\t\t\t\t\t\t\t\tkey={iceBreaker.id}\n\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (!isInputDisabledState) {\n\t\t\t\t\t\t\t\t\t\t\tonIceBreakerClick?.(iceBreaker);\n\t\t\t\t\t\t\t\t\t\t\tonSend(iceBreaker.text);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CustomGradientText>{iceBreaker.text}</CustomGradientText>\n\t\t\t\t\t\t\t\t</IceBreakerChip>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</IceBreakersGrid>\n\t\t\t\t\t</IceBreakersSection>\n\t\t\t\t)}\n\n\t\t\t\t{/* Regular Suggestions - Show when no ice breakers are provided */}\n\t\t\t\t{!iceBreakers &&\n\t\t\t\t\tsuggestions.length > 0 &&\n\t\t\t\t\tcurrentState === 'default' && (\n\t\t\t\t\t\t<SuggestionsSection>\n\t\t\t\t\t\t\t<SuggestionsGrid>\n\t\t\t\t\t\t\t\t{suggestions.map((s) => (\n\t\t\t\t\t\t\t\t\t<SuggestionChip\n\t\t\t\t\t\t\t\t\t\tkey={s}\n\t\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\t\tonClick={() => !isInputDisabledState && onSend(s)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{s}\n\t\t\t\t\t\t\t\t\t</SuggestionChip>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</SuggestionsGrid>\n\t\t\t\t\t\t</SuggestionsSection>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Input Container - Always at bottom */}\n\t\t\t\t<InputContainer>\n\t\t\t\t\t<InputBubble>\n\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\t\tvalue={input}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\tchatState={currentState}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SendButton\n\t\t\t\t\t\t\tonClick={handleSend}\n\t\t\t\t\t\t\tdisabled={isSendDisabled}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\taria-label=\"Send\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path d=\"M6 12h12\" />\n\t\t\t\t\t\t\t\t<path d=\"M12 6l6 6-6 6\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</SendButton>\n\t\t\t\t\t</InputBubble>\n\t\t\t\t</InputContainer>\n\t\t\t</MainContent>\n\t\t</ChatContainer>\n\t);\n};\n\nexport default ChatWindow;\n"],"names":["ChatContainer","styled","props","Header","MainContent","MessagesWrapper","VideoCard","VideoContainer","PlayButton","VideoText","Bubble","IceBreakersSection","IceBreakersGrid","IceBreakerChip","SuggestionsSection","SuggestionsGrid","SuggestionChip","InputContainer","InputBubble","TextInput","SendButton","CustomGradientText","ChatWindow","messages","onSend","header","placeholder","suggestions","iceBreakers","videoStarter","disabled","isThinking","onIceBreakerClick","chatState","chatWindowHeight","inputDisabled","input","setInput","useState","thinking","setThinking","isTyping","setIsTyping","bottomRef","useRef","textareaRef","isThinkingState","isInputDisabledState","currentState","handleSend","handleKeyDown","e","handleInputChange","value","textarea","hasText","isSendDisabled","useEffect","containerHeight","jsxs","jsx","AiIcon","BodySecondary","BodyCaption","m","renderMarkdownLite","ThinkingIndicator","iceBreaker","s"],"mappings":"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"}
+{"version":3,"file":"ChatWindow.js","sources":["../../../../../src/components/bik-chatbot/components/ChatWindow.tsx"],"sourcesContent":["import AiIcon from '@src/assets/icons/Ai_event_generating.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { ChatState, ChatWindowProps } from '../types';\nimport { renderMarkdownLite } from '../utils/markdown';\nimport ThinkingIndicator from './ThinkingIndicator';\n\n// Single-column layout container\nconst ChatContainer = styled.div<{ chatState: ChatState }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\tmax-height: 100%;\n\tbackground: white;\n\tborder-left: 1px solid #e5e7eb;\n\tposition: relative;\n\n\t/* State-based styling */\n\t${(props) => {\n\t\tswitch (props.chatState) {\n\t\t\tcase 'conversation-starter':\n\t\t\t\treturn `\n          background: linear-gradient(180deg, #FFF6F9 0%, #FFFFFF 100%);\n        `;\n\t\t\tcase 'thinking':\n\t\t\t\treturn `\n          background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);\n        `;\n\t\t\tdefault:\n\t\t\t\treturn `\n          background: white;\n        `;\n\t\t}\n\t}}\n`;\n\nconst Header = styled.div`\n\tpadding: 16px;\n\tborder-bottom: 1px solid #e5e7eb;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: white;\n\tflex-shrink: 0;\n\n\t.header-text {\n\t\tfont-size: 14px;\n\t\tfont-weight: 500;\n\t\tcolor: #374151;\n\t}\n`;\n\n// Main content area - single column\nconst MainContent = styled.div`\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tmin-height: 0;\n`;\n\nconst MessagesWrapper = styled.div`\n\tflex: 1;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tbackground: #fafafa;\n\tscroll-behavior: smooth;\n\tmin-height: 0;\n\n\t/* Custom scrollbar */\n\t&::-webkit-scrollbar {\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground: #f1f1f1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #c1c1c1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground: #a8a8a8;\n\t}\n`;\n\nconst VideoCard = styled.div`\n\tbackground: white;\n\tborder-radius: 12px;\n\tpadding: 16px;\n\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\tborder: 1px solid #e5e7eb;\n`;\n\nconst VideoContainer = styled.div`\n\twidth: 100%;\n\theight: 180px;\n\tbackground: #f3f4f6;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\tmargin-bottom: 12px;\n`;\n\nconst PlayButton = styled.div`\n\twidth: 48px;\n\theight: 48px;\n\tbackground: rgba(0, 0, 0, 0.7);\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbackground: rgba(0, 0, 0, 0.8);\n\t\ttransform: scale(1.05);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tmargin-left: 2px;\n\t}\n`;\n\nconst VideoText = styled.div`\n\tfont-size: 14px;\n\tcolor: #374151;\n\tline-height: 1.5;\n`;\n\nconst Bubble = styled.div<{ role: 'user' | 'assistant' | 'system' }>`\n\tpadding: 12px 16px;\n\tborder-radius: 16px;\n\tfont-size: 14px;\n\tmax-width: 80%;\n\twhite-space: pre-line;\n\tword-wrap: break-word;\n\n\t${(props) =>\n\t\tprops.role === 'user'\n\t\t\t? `\n        background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);\n        margin-left: auto;\n        border-bottom-right-radius: 4px;\n        \n        & > div {\n          background: linear-gradient(92.69deg, #FF166A 0.37%, #FB5F08 100%);\n          -webkit-background-clip: text;\n          -webkit-text-fill-color: transparent;\n          background-clip: text;\n          display: inline-block;\n        }\n      `\n\t\t\t: props.role === 'system'\n\t\t\t? `\n        background: #f3f4f6;\n        color: #6b7280;\n        font-size: 12px;\n        font-style: italic;\n        text-align: center;\n        margin: 0 auto;\n        max-width: 90%;\n      `\n\t\t\t: `\n        background: white;\n        color: #111827;\n        border: 1px solid #e5e7eb;\n        margin-right: auto;\n        border-bottom-left-radius: 4px;\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n      `}\n`;\n\n// Ice breakers section - at the bottom before input\nconst IceBreakersSection = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst IceBreakersGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\talign-items: flex-end;\n`;\n\nconst IceBreakerChip = styled.button<{ disabled?: boolean }>`\n\tborder: 1px dotted #febad2;\n\tbackground: linear-gradient(\n\t\t92.69deg,\n\t\trgba(255, 230, 238, 0.5) 0.37%,\n\t\trgba(255, 240, 231, 0.5) 100%\n\t);\n\tpadding: 8px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\tmax-width: 280px;\n\talign-self: flex-end;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: linear-gradient(\n\t\t\t92.69deg,\n\t\t\trgba(255, 230, 238, 0.7) 0.37%,\n\t\t\trgba(255, 240, 231, 0.7) 100%\n\t\t);\n\t\tborder-color: #f472b6;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\n// Suggestions section - styled like ice breakers but for regular suggestions\nconst SuggestionsSection = styled.div`\n\tpadding: 16px;\n\tbackground: white;\n`;\n\nconst SuggestionsGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nconst SuggestionChip = styled.button<{ disabled?: boolean }>`\n\tbackground: #fef2f2;\n\tcolor: #dc2626;\n\tpadding: 12px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tborder: 1px solid #fecaca;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: #fee2e2;\n\t\tborder-color: #fca5a5;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\nconst InputContainer = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst InputBubble = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nconst TextInput = styled.textarea<{ hasText: boolean; chatState: ChatState }>`\n\tflex: 1;\n\tborder: 1px solid ${(props) => (props.hasText ? '#3b82f6' : '#d1d5db')};\n\tborder-radius: 12px;\n\tpadding: 12px;\n\tpadding-right: 48px;\n\tfont-size: 14px;\n\toutline: none;\n\tcolor: #374151;\n\tbackground: white;\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\ttransition: all 0.2s ease;\n\tresize: none;\n\tmin-height: 44px;\n\tmax-height: 120px;\n\tfont-family: inherit;\n\twidth: 100%;\n\n\t&:focus {\n\t\tborder-color: #3b82f6;\n\t\tbackground: white;\n\t\tbox-shadow: 0px 2px 8px 0px #0000001f, 0 0 0 3px rgba(59, 130, 246, 0.1);\n\t}\n\n\t&::placeholder {\n\t\tcolor: #9ca3af;\n\t}\n`;\n\nconst SendButton = styled.button<{ disabled?: boolean; hasText: boolean }>`\n\tposition: absolute;\n\tbottom: 10px;\n\tright: 10px;\n\twidth: 36px;\n\theight: 36px;\n\tborder-radius: 50%;\n\tbackground: ${(props) =>\n\t\tprops.hasText\n\t\t\t? 'linear-gradient(135deg, #FF166A 0%, #FB5F08 100%)'\n\t\t\t: '#e5e7eb'};\n\tborder: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\tbox-shadow: 0 2px 8px 0px #fa709a1c;\n\tz-index: 2;\n\n\t&:hover:not(:disabled) {\n\t\tbackground: ${(props) =>\n\t\t\tprops.hasText && !props.disabled\n\t\t\t\t? 'linear-gradient(135deg, #F857A6 0%, #FF5858 100%)'\n\t\t\t\t: '#e5e7eb'};\n\t\ttransform: scale(1.05);\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.95);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tfont-weight: bold;\n\t}\n`;\n\n// Customizable gradient text component\nexport const CustomGradientText = styled.span<{\n\tcolors?: string;\n\tangle?: number;\n}>`\n\tbackground: linear-gradient(\n\t\t${(props) => props.angle || 92.69}deg,\n\t\t${(props) => props.colors || '#ff166a 0.37%, #fb5f08 100%'}\n\t);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\tdisplay: inline-block;\n`;\n\n// Export ChatState type for backward compatibility\nexport type { ChatState } from '../types';\n\ninterface ChatWindowWithHeightProps extends ChatWindowProps {\n\tchatWindowHeight?: string | number;\n}\n\nconst ChatWindow: React.FC<ChatWindowWithHeightProps> = ({\n\tmessages,\n\tonSend,\n\theader = 'Create with AI',\n\tplaceholder = 'Discover the right event & launch campaigns for better conversions...',\n\tsuggestions = [\n\t\t'Top festivals for marketing',\n\t\t'Top events this week?',\n\t\t'Top August festivals near you',\n\t],\n\ticeBreakers,\n\tvideoStarter,\n\tdisabled = false,\n\tisThinking = false,\n\tonIceBreakerClick,\n\tchatState,\n\tchatWindowHeight,\n\tinputDisabled = false,\n}) => {\n\tconst [input, setInput] = useState('');\n\tconst [thinking, setThinking] = useState(false);\n\tconst [isTyping, setIsTyping] = useState(false);\n\tconst bottomRef = useRef<HTMLDivElement>(null);\n\tconst textareaRef = useRef<HTMLTextAreaElement>(null);\n\tconst isThinkingState = thinking || isThinking;\n\tconst isInputDisabledState = disabled || inputDisabled;\n\n\t// Determine current chat state\n\tconst getCurrentChatState = (): ChatState => {\n\t\tif (chatState) return chatState; // Explicit state override\n\t\tif (thinking || isThinking) return 'thinking';\n\t\tif (isTyping && input.trim().length > 0) return 'typing';\n\t\tif (messages.length === 0) return 'conversation-starter';\n\t\tif (messages.length > 0) return 'conversation';\n\t\treturn 'default';\n\t};\n\n\tconst currentState = getCurrentChatState();\n\n\t// markdown renderer moved to ../utils/markdown\n\n\tconst handleSend = () => {\n\t\tif (!input.trim() || isInputDisabledState || isThinkingState) return;\n\t\tonSend(input);\n\t\tsetInput('');\n\t\tsetThinking(true);\n\t\tsetTimeout(() => setThinking(false), 1500);\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (isInputDisabledState) return;\n\t\tif (e.key === 'Enter' && !e.shiftKey) {\n\t\t\te.preventDefault();\n\t\t\tif (!isThinkingState && input.trim()) {\n\t\t\t\thandleSend();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\tif (isInputDisabledState) return;\n\t\tconst value = e.target.value;\n\t\tsetInput(value);\n\t\tsetIsTyping(value.trim().length > 0);\n\n\t\t// Auto-resize textarea\n\t\tconst textarea = textareaRef.current;\n\t\tif (textarea) {\n\t\t\ttextarea.style.height = 'auto';\n\t\t\ttextarea.style.height = `${Math.min(textarea.scrollHeight, 117)}px`;\n\t\t}\n\t};\n\n\tconst hasText = input.trim().length > 0;\n\tconst isSendDisabled = isInputDisabledState || isThinkingState || !hasText;\n\n\tuseEffect(() => {\n\t\tbottomRef.current?.scrollIntoView({ behavior: 'smooth' });\n\t}, [messages, thinking, isThinking]);\n\n\t// Use chatWindowHeight if provided, otherwise use 100% if fullHeight is active\n\tconst containerHeight = chatWindowHeight || '100%';\n\n\treturn (\n\t\t<ChatContainer chatState={currentState} style={{ height: containerHeight }}>\n\t\t\t{/* Header */}\n\t\t\t<Header>\n\t\t\t\t<AiIcon height={24} width={24} />\n\t\t\t\t<div className=\"header-text\">{header}</div>\n\t\t\t</Header>\n\n\t\t\t{/* Main Content - Single Column Layout */}\n\t\t\t<MainContent>\n\t\t\t\t{/* Messages Section */}\n\t\t\t\t<MessagesWrapper>\n\t\t\t\t\t{/* Video starter card - only when no messages and videoStarter provided */}\n\t\t\t\t\t{currentState === 'conversation-starter' && videoStarter && (\n\t\t\t\t\t\t<VideoCard>\n\t\t\t\t\t\t\t<VideoContainer>\n\t\t\t\t\t\t\t\t<PlayButton onClick={videoStarter.onPlay}>\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t\t<path d=\"M8 5v14l11-7z\" />\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</PlayButton>\n\t\t\t\t\t\t\t</VideoContainer>\n\t\t\t\t\t\t\t<VideoText>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ fontWeight: 500, marginBottom: '4px' }}>\n\t\t\t\t\t\t\t\t\t{videoStarter.title}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<BodyCaption>{videoStarter.description}</BodyCaption>\n\t\t\t\t\t\t\t</VideoText>\n\t\t\t\t\t\t</VideoCard>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Render messages (assistant supports lite Markdown) */}\n\t\t\t\t\t{messages.map((m) => (\n\t\t\t\t\t\t<Bubble key={m.id} role={m.role}>\n\t\t\t\t\t\t\t{m.role === 'assistant' ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t\t__html: renderMarkdownLite(m.content),\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div style={{ whiteSpace: 'pre-wrap' }}>{m.content}</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Bubble>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{/* Thinking bubble */}\n\t\t\t\t\t{(thinking || isThinking) && <ThinkingIndicator />}\n\n\t\t\t\t\t<div ref={bottomRef} />\n\t\t\t\t</MessagesWrapper>\n\n\t\t\t\t{/* Ice Breakers Section - At bottom when no messages and ice breakers provided */}\n\t\t\t\t{iceBreakers && currentState === 'conversation-starter' && (\n\t\t\t\t\t<IceBreakersSection>\n\t\t\t\t\t\t<IceBreakersGrid>\n\t\t\t\t\t\t\t{iceBreakers.map((iceBreaker) => (\n\t\t\t\t\t\t\t\t<IceBreakerChip\n\t\t\t\t\t\t\t\t\tkey={iceBreaker.id}\n\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (!isInputDisabledState) {\n\t\t\t\t\t\t\t\t\t\t\tonIceBreakerClick?.(iceBreaker);\n\t\t\t\t\t\t\t\t\t\t\tonSend(iceBreaker.text);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CustomGradientText>{iceBreaker.text}</CustomGradientText>\n\t\t\t\t\t\t\t\t</IceBreakerChip>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</IceBreakersGrid>\n\t\t\t\t\t</IceBreakersSection>\n\t\t\t\t)}\n\n\t\t\t\t{/* Regular Suggestions - Show when no ice breakers are provided */}\n\t\t\t\t{!iceBreakers &&\n\t\t\t\t\tsuggestions.length > 0 &&\n\t\t\t\t\tcurrentState === 'default' && (\n\t\t\t\t\t\t<SuggestionsSection>\n\t\t\t\t\t\t\t<SuggestionsGrid>\n\t\t\t\t\t\t\t\t{suggestions.map((s) => (\n\t\t\t\t\t\t\t\t\t<SuggestionChip\n\t\t\t\t\t\t\t\t\t\tkey={s}\n\t\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\t\tonClick={() => !isInputDisabledState && onSend(s)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{s}\n\t\t\t\t\t\t\t\t\t</SuggestionChip>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</SuggestionsGrid>\n\t\t\t\t\t\t</SuggestionsSection>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Input Container - Always at bottom */}\n\t\t\t\t<InputContainer>\n\t\t\t\t\t<InputBubble>\n\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\t\tvalue={input}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\tchatState={currentState}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SendButton\n\t\t\t\t\t\t\tonClick={handleSend}\n\t\t\t\t\t\t\tdisabled={isSendDisabled}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\taria-label=\"Send\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path d=\"M6 12h12\" />\n\t\t\t\t\t\t\t\t<path d=\"M12 6l6 6-6 6\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</SendButton>\n\t\t\t\t\t</InputBubble>\n\t\t\t\t</InputContainer>\n\t\t\t</MainContent>\n\t\t</ChatContainer>\n\t);\n};\n\nexport default ChatWindow;\n"],"names":["ChatContainer","styled","props","Header","MainContent","MessagesWrapper","VideoCard","VideoContainer","PlayButton","VideoText","Bubble","IceBreakersSection","IceBreakersGrid","IceBreakerChip","SuggestionsSection","SuggestionsGrid","SuggestionChip","InputContainer","InputBubble","TextInput","SendButton","CustomGradientText","ChatWindow","messages","onSend","header","placeholder","suggestions","iceBreakers","videoStarter","disabled","isThinking","onIceBreakerClick","chatState","chatWindowHeight","inputDisabled","input","setInput","useState","thinking","setThinking","isTyping","setIsTyping","bottomRef","useRef","textareaRef","isThinkingState","isInputDisabledState","currentState","handleSend","handleKeyDown","e","handleInputChange","value","textarea","hasText","isSendDisabled","useEffect","containerHeight","jsxs","jsx","AiIcon","BodySecondary","BodyCaption","m","renderMarkdownLite","ThinkingIndicator","iceBreaker","s"],"mappings":"4aASMA,EAAgBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAazBC,GAAU,CACZ,OAAQA,EAAM,UAAA,CACb,IAAK,uBACJ,MAAO;AAAA;AAAA,UAGR,IAAK,WACJ,MAAO;AAAA;AAAA,UAGR,QACC,MAAO;AAAA;AAAA,SAAA,CAIV,CAAC;AAAA,EAGIC,EAASF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBhBG,EAAcH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrBI,EAAkBJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+BzBK,EAAYL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQnBM,EAAiBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBO,EAAaP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBpBQ,EAAYR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMnBS,EAAST,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQlBC,GACFA,EAAM,OAAS,OACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaAA,EAAM,OAAS,SACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAOE;AAAA,EAIDS,EAAqBV,EAAAA,QAAO;AAAA;AAAA;AAAA,EAK5BW,EAAkBX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzBY,GAAiBZ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAUlBC,GAAWA,EAAM,SAAW,cAAgB,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA,YAKrDA,GAAWA,EAAM,SAAW,GAAM,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB3CY,GAAqBb,EAAAA,QAAO;AAAA;AAAA;AAAA,EAK5Bc,GAAkBd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMzBe,GAAiBf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOlBC,GAAWA,EAAM,SAAW,cAAgB,SAAU;AAAA;AAAA;AAAA,YAGrDA,GAAWA,EAAM,SAAW,GAAM,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY3Ce,GAAiBhB,EAAAA,QAAO;AAAA;AAAA;AAAA,EAKxBiB,GAAcjB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMrBkB,GAAYlB,EAAAA,QAAO;AAAA;AAAA,qBAEHC,GAAWA,EAAM,QAAU,UAAY,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BjEkB,GAAanB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOVC,GACdA,EAAM,QACH,oDACA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,WAKFA,GAAWA,EAAM,SAAW,cAAgB,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMjDA,GACdA,EAAM,SAAW,CAACA,EAAM,SACrB,oDACA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBFmB,EAAqBpB,EAAAA,QAAO;AAAA;AAAA,IAKpCC,GAAUA,EAAM,OAAS,KAAK;AAAA,IAC9BA,GAAUA,EAAM,QAAU,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAetDoB,GAAkD,CAAC,CACxD,SAAAC,EACA,OAAAC,EACA,OAAAC,EAAS,iBACT,YAAAC,EAAc,wEACd,YAAAC,EAAc,CACb,8BACA,wBACA,+BAAA,EAED,YAAAC,EACA,aAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EAAa,GACb,kBAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,cAAAC,EAAgB,EACjB,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAE,EAC/B,CAACC,EAAUC,CAAW,EAAIF,EAAAA,SAAS,EAAK,EACxC,CAACG,EAAUC,CAAW,EAAIJ,EAAAA,SAAS,EAAK,EACxCK,EAAYC,EAAAA,OAAuB,IAAI,EACvCC,EAAcD,EAAAA,OAA4B,IAAI,EAC9CE,EAAkBP,GAAYR,EAC9BgB,EAAuBjB,GAAYK,EAYnCa,EARDf,IACAM,GAAYR,EAAmB,WAC/BU,GAAYL,EAAM,KAAA,EAAO,OAAS,EAAU,SAC5Cb,EAAS,SAAW,EAAU,uBAC9BA,EAAS,OAAS,EAAU,eACzB,WAOF0B,EAAa,IAAM,CACpB,CAACb,EAAM,QAAUW,GAAwBD,IAC7CtB,EAAOY,CAAK,EACZC,EAAS,EAAE,EACXG,EAAY,EAAI,EAChB,WAAW,IAAMA,EAAY,EAAK,EAAG,IAAI,EAC1C,EAEMU,EAAiBC,GAA2B,CAC7CJ,GACAI,EAAE,MAAQ,SAAW,CAACA,EAAE,WAC3BA,EAAE,eAAA,EACE,CAACL,GAAmBV,EAAM,QAC7Ba,EAAA,EAGH,EAEMG,EAAqBD,GAA8C,CACxE,GAAIJ,EAAsB,OAC1B,MAAMM,EAAQF,EAAE,OAAO,MACvBd,EAASgB,CAAK,EACdX,EAAYW,EAAM,OAAO,OAAS,CAAC,EAGnC,MAAMC,EAAWT,EAAY,QACzBS,IACHA,EAAS,MAAM,OAAS,OACxBA,EAAS,MAAM,OAAS,GAAG,KAAK,IAAIA,EAAS,aAAc,GAAG,CAAC,KAEjE,EAEMC,EAAUnB,EAAM,KAAA,EAAO,OAAS,EAChCoB,EAAiBT,GAAwBD,GAAmB,CAACS,EAEnEE,EAAAA,UAAU,IAAM,CACfd,EAAU,SAAS,eAAe,CAAE,SAAU,SAAU,CACzD,EAAG,CAACpB,EAAUgB,EAAUR,CAAU,CAAC,EAGnC,MAAM2B,EAAkBxB,GAAoB,OAE5C,OACCyB,EAAAA,KAAC3D,GAAc,UAAWgD,EAAc,MAAO,CAAE,OAAQU,GAExD,SAAA,CAAAC,OAACxD,EAAA,CACA,SAAA,CAAAyD,EAAAA,IAACC,EAAAA,QAAA,CAAO,OAAQ,GAAI,MAAO,GAAI,EAC/BD,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAnC,CAAA,CAAO,CAAA,EACtC,SAGCrB,EAAA,CAEA,SAAA,CAAAuD,OAACtD,EAAA,CAEC,SAAA,CAAA2C,IAAiB,wBAA0BnB,GAC3C8B,EAAAA,KAACrD,EAAA,CACA,SAAA,CAAAsD,EAAAA,IAACrD,GACA,SAAAqD,EAAAA,IAACpD,EAAA,CAAW,QAASqB,EAAa,OACjC,eAAC,MAAA,CAAI,QAAQ,YAAY,KAAK,eAC7B,SAAA+B,EAAAA,IAAC,OAAA,CAAK,EAAE,eAAA,CAAgB,EACzB,EACD,CAAA,CACD,SACCnD,EAAA,CACA,SAAA,CAAAmD,EAAAA,IAACE,EAAAA,cAAA,CAAc,MAAO,CAAE,WAAY,IAAK,aAAc,KAAA,EACrD,SAAAjC,EAAa,KAAA,CACf,EACA+B,EAAAA,IAACG,EAAAA,YAAA,CAAa,SAAAlC,EAAa,WAAA,CAAY,CAAA,CAAA,CACxC,CAAA,EACD,EAIAN,EAAS,IAAKyC,GACdJ,EAAAA,IAAClD,EAAA,CAAkB,KAAMsD,EAAE,KACzB,SAAAA,EAAE,OAAS,YACXJ,EAAAA,IAAC,MAAA,CACA,wBAAyB,CACxB,OAAQK,EAAAA,mBAAmBD,EAAE,OAAO,CAAA,CACrC,CAAA,EAGDJ,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,WAAY,UAAA,EAAe,SAAAI,EAAE,OAAA,CAAQ,CAAA,EARxCA,EAAE,EAUf,CACA,GAGCzB,GAAYR,IAAe6B,MAACM,EAAAA,QAAA,CAAA,CAAkB,EAEhDN,EAAAA,IAAC,MAAA,CAAI,IAAKjB,CAAA,CAAW,CAAA,EACtB,EAGCf,GAAeoB,IAAiB,wBAChCY,EAAAA,IAACjD,EAAA,CACA,eAACC,EAAA,CACC,SAAAgB,EAAY,IAAKuC,GACjBP,EAAAA,IAAC/C,GAAA,CAEA,SAAUkC,EACV,QAAS,IAAM,CACTA,IACJf,IAAoBmC,CAAU,EAC9B3C,EAAO2C,EAAW,IAAI,EAExB,EAEA,SAAAP,EAAAA,IAACvC,EAAA,CAAoB,SAAA8C,EAAW,IAAA,CAAK,CAAA,EAThCA,EAAW,EAAA,CAWjB,EACF,CAAA,CACD,EAIA,CAACvC,GACDD,EAAY,OAAS,GACrBqB,IAAiB,WAChBY,EAAAA,IAAC9C,GAAA,CACA,SAAA8C,EAAAA,IAAC7C,GAAA,CACC,SAAAY,EAAY,IAAKyC,GACjBR,EAAAA,IAAC5C,GAAA,CAEA,SAAU+B,EACV,QAAS,IAAM,CAACA,GAAwBvB,EAAO4C,CAAC,EAE/C,SAAAA,CAAA,EAJIA,CAAA,CAMN,EACF,CAAA,CACD,EAIFR,EAAAA,IAAC3C,GAAA,CACA,SAAA0C,EAAAA,KAACzC,GAAA,CACA,SAAA,CAAA0C,EAAAA,IAACzC,GAAA,CACA,IAAK0B,EACL,MAAOT,EACP,SAAUgB,EACV,YAAA1B,EACA,UAAWwB,EACX,SAAUH,EACV,QAAAQ,EACA,UAAWP,CAAA,CAAA,EAEZY,EAAAA,IAACxC,GAAA,CACA,QAAS6B,EACT,SAAUO,EACV,QAAAD,EACA,aAAW,OAEX,SAAAI,EAAAA,KAAC,MAAA,CACA,QAAQ,YACR,MAAM,KACN,OAAO,KACP,OAAO,QACP,YAAY,IACZ,KAAK,OACL,cAAc,QACd,eAAe,QAEf,SAAA,CAAAC,EAAAA,IAAC,OAAA,CAAK,EAAE,UAAA,CAAW,EACnBA,EAAAA,IAAC,OAAA,CAAK,EAAE,eAAA,CAAgB,CAAA,CAAA,CAAA,CACzB,CAAA,CACD,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CACD,CAAA,EACD,CAEF"}

package/dist/cjs/components/bik-chatbot/components/ThinkingIndicator.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("react"),l=require("styled-components"),d=require("../../../assets/icons/Idea.svg.js"),c=require("../../../assets/icons/AiEdit.svg.js"),m=require("../../../assets/icons/HelpIcon.svg.js"),p=l.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),d=require("../../../assets/icons/Idea.svg.js"),c=require("../../../assets/icons/AiEdit.svg.js"),m=require("../../../assets/icons/HelpIcon.svg.js"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},h=p(l),u=h.default.div`
     background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);
 	padding: 24px;
 	border-radius: 16px;
@@ -144,5 +144,5 @@
 			transform: translateY(0);
 		}
 	}
-`,r=[{icon:d.default,text:"Analyzing your questions..."},{icon:c.default,text:"Gathering insights..."},{icon:m.default,text:"Crafting the perfect response..."}],h=()=>{const[n,o]=s.useState(0);s.useEffect(()=>{const t=window.setInterval(()=>{o(a=>(a+1)%r.length)},1800);return()=>window.clearInterval(t)},[]);const i=r[n];return e.jsxs(p,{role:"status","aria-live":"polite",children:[e.jsx(i.icon,{height:24,width:24}),e.jsxs("div",{className:"bubble-content",children:[e.jsx("div",{className:"status-text",children:i.text}),e.jsx("div",{className:"dots",children:[0,1,2,3,4].map(t=>e.jsx("span",{className:"dot",style:{animationDelay:`${t*.15}s`}},t))}),e.jsx("div",{className:"shimmer-group",children:[70,85,50].map((t,a)=>e.jsx("div",{className:"shimmer-line",style:{width:`${t}%`,animationDelay:`${.25+a*.12}s`},children:e.jsx("span",{className:"shimmer-highlight"})},t))})]})]})};exports.default=h;
+`,n=[{icon:d.default,text:"Analyzing your questions..."},{icon:c.default,text:"Gathering insights..."},{icon:m.default,text:"Crafting the perfect response..."}],f=()=>{const[t,o]=r.useState(0);r.useEffect(()=>{const a=window.setInterval(()=>{o(i=>(i+1)%n.length)},1800);return()=>window.clearInterval(a)},[]);const s=n[t];return e.jsxs(u,{role:"status","aria-live":"polite",children:[e.jsx(s.icon,{height:24,width:24}),e.jsxs("div",{className:"bubble-content",children:[e.jsx("div",{className:"status-text",children:s.text}),e.jsx("div",{className:"dots",children:[0,1,2,3,4].map(a=>e.jsx("span",{className:"dot",style:{animationDelay:`${a*.15}s`}},a))}),e.jsx("div",{className:"shimmer-group",children:[70,85,50].map((a,i)=>e.jsx("div",{className:"shimmer-line",style:{width:`${a}%`,animationDelay:`${.25+i*.12}s`},children:e.jsx("span",{className:"shimmer-highlight"})},a))})]})]})};exports.default=f;
 //# sourceMappingURL=ThinkingIndicator.js.map

package/dist/cjs/components/bik-chatbot/components/ThinkingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThinkingIndicator.js","sources":["../../../../../src/components/bik-chatbot/components/ThinkingIndicator.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport Idea from '@src/assets/icons/Idea.svg';\nimport AiEdit from '@src/assets/icons/AiEdit.svg';\nimport HelpIcon from '@src/assets/icons/HelpIcon.svg';\n\n\nconst ThinkingBubble = styled.div`\n    background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);\n\tpadding: 24px;\n\tborder-radius: 16px;\n\tborder-bottom-left-radius: 6px;\n\twidth: clamp(260px, 70vw, 340px);\n\tmin-height: 108px;\n\tmargin-right: auto;\n\tfont-size: 14px;\n\tcolor: #1f2937;\n\tbox-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 14px;\n\tposition: relative;\n\toverflow: hidden;\n\tflex-shrink: 0;\n\n\t\n\n\t.icon-svg {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tflex-shrink: 0;\n\t\tanimation: iconPulse 2.4s ease-in-out infinite;\n\t}\n\n\t.bubble-content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 12px;\n\t\twidth: 100%;\n\t}\n\n\t.status-text {\n\t\tfont-weight: 500;\n\t\tcolor: #1f2937;\n\t\tline-height: 1.45;\n\t\tanimation: textFade 0.35s ease forwards;\n\t\tmin-height: 20px;\n\t}\n\n\t.dots {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t}\n\n\t.dot {\n\t\twidth: 6px;\n\t\theight: 6px;\n\t\tborder-radius: 50%;\n\t\tbackground: #EC4899;\n\t\tbox-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);\n\t\tanimation: dotBounce 1.3s ease-in-out infinite;\n\t}\n\n\t.shimmer-group {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 6px;\n\t}\n\n\t.shimmer-line {\n        height: 10px;\n\t\tborder-radius: 20px;\n\t\tbackground: linear-gradient(92.69deg, #FEBAD2 0.37%, #FDD1B9 100%);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tanimation: shimmerAppear 0.4s ease forwards;\n\t}\n\n\t.shimmer-highlight {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\trgba(255, 255, 255, 0) 0%,\n\t\t\trgba(255, 255, 255, 0.75) 50%,\n\t\t\trgba(255, 255, 255, 0) 100%\n\t\t);\n\t\ttransform: translateX(-100%);\n\t\tanimation: shimmerMove 1.8s linear infinite;\n\t}\n\n\t@keyframes iconPulse {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: scale(0.95) rotate(-3deg);\n\t\t}\n\t\t50% {\n\t\t\ttransform: scale(1.05) rotate(3deg);\n\t\t}\n\t}\n\n\t@keyframes dotBounce {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: translateY(0) scale(1);\n\t\t\topacity: 0.35;\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateY(-6px) scale(1.2);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes shimmerMove {\n\t\t0% {\n\t\t\ttransform: translateX(-120%);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(140%);\n\t\t}\n\t}\n\n\t@keyframes shimmerAppear {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@keyframes glowPulse {\n\t\t0%,\n\t\t100% {\n\t\t\topacity: 0.2;\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.55;\n\t\t}\n\t}\n\n\t@keyframes textFade {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(4px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n`;\n\nconst thinkingStates = [\n\t{\n\t\ticon: Idea,\n\t\ttext: 'Analyzing your questions...',\n\t},\n\t{\n\t\ticon: AiEdit,\n\t\ttext: 'Gathering insights...',\n\t},\n\t{\n\t\ticon: HelpIcon,\n\t\ttext: 'Crafting the perfect response...',\n\t},\n\n];\n\nconst ThinkingIndicator: React.FC = () => {\n\tconst [stateIndex, setStateIndex] = useState(0);\n\n\tuseEffect(() => {\n\t\tconst interval = window.setInterval(() => {\n\t\t\tsetStateIndex((prev) => (prev + 1) % thinkingStates.length);\n\t\t}, 1800);\n\n\t\treturn () => window.clearInterval(interval);\n\t}, []);\n\n\tconst currentState = thinkingStates[stateIndex];\n\n\treturn (\n\t\t<ThinkingBubble\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t>\n\t\t\t<currentState.icon height={24} width={24} />\n\t\t\t<div className=\"bubble-content\">\n\t\t\t\t<div className=\"status-text\">{currentState.text}</div>\n\t\t\t\t<div className=\"dots\">\n\t\t\t\t\t{[0, 1, 2, 3, 4].map((dot) => (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tkey={dot}\n\t\t\t\t\t\t\tclassName=\"dot\"\n\t\t\t\t\t\t\tstyle={{ animationDelay: `${dot * 0.15}s` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"shimmer-group\">\n\t\t\t\t\t{[70, 85, 50].map((width, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={width}\n\t\t\t\t\t\t\tclassName=\"shimmer-line\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: `${width}%`,\n\t\t\t\t\t\t\t\tanimationDelay: `${0.25 + index * 0.12}s`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"shimmer-highlight\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ThinkingBubble>\n\t);\n};\n\nexport default ThinkingIndicator;\n"],"names":["ThinkingBubble","styled","thinkingStates","Idea","AiEdit","HelpIcon","ThinkingIndicator","stateIndex","setStateIndex","useState","useEffect","interval","prev","currentState","jsxs","jsx","dot","width","index"],"mappings":"sVAOMA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoJxBC,EAAiB,CACtB,CACC,KAAMC,EAAAA,QACN,KAAM,6BAAA,EAEP,CACC,KAAMC,EAAAA,QACN,KAAM,uBAAA,EAEP,CACC,KAAMC,EAAAA,QACN,KAAM,kCAAA,CAGR,EAEMC,EAA8B,IAAM,CACzC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,CAAC,EAE9CC,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAW,OAAO,YAAY,IAAM,CACzCH,EAAeI,IAAUA,EAAO,GAAKV,EAAe,MAAM,CAC3D,EAAG,IAAI,EAEP,MAAO,IAAM,OAAO,cAAcS,CAAQ,CAC3C,EAAG,CAAA,CAAE,EAEL,MAAME,EAAeX,EAAeK,CAAU,EAE9C,OACCO,EAAAA,KAACd,EAAA,CACA,KAAK,SACL,YAAU,SAEV,SAAA,CAAAe,EAAAA,IAACF,EAAa,KAAb,CAAkB,OAAQ,GAAI,MAAO,GAAI,EAC1CC,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAF,EAAa,KAAK,EAChDE,EAAAA,IAAC,MAAA,CAAI,UAAU,OACb,SAAA,CAAC,EAAG,EAAG,EAAG,EAAG,CAAC,EAAE,IAAKC,GACrBD,EAAAA,IAAC,OAAA,CAEA,UAAU,MACV,MAAO,CAAE,eAAgB,GAAGC,EAAM,GAAI,GAAA,CAAI,EAFrCA,CAAA,CAIN,EACF,EACAD,EAAAA,IAAC,MAAA,CAAI,UAAU,gBACb,SAAA,CAAC,GAAI,GAAI,EAAE,EAAE,IAAI,CAACE,EAAOC,IACzBH,EAAAA,IAAC,MAAA,CAEA,UAAU,eACV,MAAO,CACN,MAAO,GAAGE,CAAK,IACf,eAAgB,GAAG,IAAOC,EAAQ,GAAI,GAAA,EAGvC,SAAAH,EAAAA,IAAC,OAAA,CAAK,UAAU,mBAAA,CAAoB,CAAA,EAP/BE,CAAA,CASN,CAAA,CACF,CAAA,CAAA,CACD,CAAA,CAAA,CAAA,CAGH"}
+{"version":3,"file":"ThinkingIndicator.js","sources":["../../../../../src/components/bik-chatbot/components/ThinkingIndicator.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport Idea from '@src/assets/icons/Idea.svg';\nimport AiEdit from '@src/assets/icons/AiEdit.svg';\nimport HelpIcon from '@src/assets/icons/HelpIcon.svg';\n\n\nconst ThinkingBubble = styled.div`\n    background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);\n\tpadding: 24px;\n\tborder-radius: 16px;\n\tborder-bottom-left-radius: 6px;\n\twidth: clamp(260px, 70vw, 340px);\n\tmin-height: 108px;\n\tmargin-right: auto;\n\tfont-size: 14px;\n\tcolor: #1f2937;\n\tbox-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 14px;\n\tposition: relative;\n\toverflow: hidden;\n\tflex-shrink: 0;\n\n\t\n\n\t.icon-svg {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tflex-shrink: 0;\n\t\tanimation: iconPulse 2.4s ease-in-out infinite;\n\t}\n\n\t.bubble-content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 12px;\n\t\twidth: 100%;\n\t}\n\n\t.status-text {\n\t\tfont-weight: 500;\n\t\tcolor: #1f2937;\n\t\tline-height: 1.45;\n\t\tanimation: textFade 0.35s ease forwards;\n\t\tmin-height: 20px;\n\t}\n\n\t.dots {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t}\n\n\t.dot {\n\t\twidth: 6px;\n\t\theight: 6px;\n\t\tborder-radius: 50%;\n\t\tbackground: #EC4899;\n\t\tbox-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);\n\t\tanimation: dotBounce 1.3s ease-in-out infinite;\n\t}\n\n\t.shimmer-group {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 6px;\n\t}\n\n\t.shimmer-line {\n        height: 10px;\n\t\tborder-radius: 20px;\n\t\tbackground: linear-gradient(92.69deg, #FEBAD2 0.37%, #FDD1B9 100%);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tanimation: shimmerAppear 0.4s ease forwards;\n\t}\n\n\t.shimmer-highlight {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\trgba(255, 255, 255, 0) 0%,\n\t\t\trgba(255, 255, 255, 0.75) 50%,\n\t\t\trgba(255, 255, 255, 0) 100%\n\t\t);\n\t\ttransform: translateX(-100%);\n\t\tanimation: shimmerMove 1.8s linear infinite;\n\t}\n\n\t@keyframes iconPulse {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: scale(0.95) rotate(-3deg);\n\t\t}\n\t\t50% {\n\t\t\ttransform: scale(1.05) rotate(3deg);\n\t\t}\n\t}\n\n\t@keyframes dotBounce {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: translateY(0) scale(1);\n\t\t\topacity: 0.35;\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateY(-6px) scale(1.2);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes shimmerMove {\n\t\t0% {\n\t\t\ttransform: translateX(-120%);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(140%);\n\t\t}\n\t}\n\n\t@keyframes shimmerAppear {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@keyframes glowPulse {\n\t\t0%,\n\t\t100% {\n\t\t\topacity: 0.2;\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.55;\n\t\t}\n\t}\n\n\t@keyframes textFade {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(4px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n`;\n\nconst thinkingStates = [\n\t{\n\t\ticon: Idea,\n\t\ttext: 'Analyzing your questions...',\n\t},\n\t{\n\t\ticon: AiEdit,\n\t\ttext: 'Gathering insights...',\n\t},\n\t{\n\t\ticon: HelpIcon,\n\t\ttext: 'Crafting the perfect response...',\n\t},\n\n];\n\nconst ThinkingIndicator: React.FC = () => {\n\tconst [stateIndex, setStateIndex] = useState(0);\n\n\tuseEffect(() => {\n\t\tconst interval = window.setInterval(() => {\n\t\t\tsetStateIndex((prev) => (prev + 1) % thinkingStates.length);\n\t\t}, 1800);\n\n\t\treturn () => window.clearInterval(interval);\n\t}, []);\n\n\tconst currentState = thinkingStates[stateIndex];\n\n\treturn (\n\t\t<ThinkingBubble\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t>\n\t\t\t<currentState.icon height={24} width={24} />\n\t\t\t<div className=\"bubble-content\">\n\t\t\t\t<div className=\"status-text\">{currentState.text}</div>\n\t\t\t\t<div className=\"dots\">\n\t\t\t\t\t{[0, 1, 2, 3, 4].map((dot) => (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tkey={dot}\n\t\t\t\t\t\t\tclassName=\"dot\"\n\t\t\t\t\t\t\tstyle={{ animationDelay: `${dot * 0.15}s` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"shimmer-group\">\n\t\t\t\t\t{[70, 85, 50].map((width, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={width}\n\t\t\t\t\t\t\tclassName=\"shimmer-line\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: `${width}%`,\n\t\t\t\t\t\t\t\tanimationDelay: `${0.25 + index * 0.12}s`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"shimmer-highlight\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ThinkingBubble>\n\t);\n};\n\nexport default ThinkingIndicator;\n"],"names":["ThinkingBubble","styled","thinkingStates","Idea","AiEdit","HelpIcon","ThinkingIndicator","stateIndex","setStateIndex","useState","useEffect","interval","prev","currentState","jsxs","jsx","dot","width","index"],"mappings":"qZAOMA,EAAiBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoJxBC,EAAiB,CACtB,CACC,KAAMC,EAAAA,QACN,KAAM,6BAAA,EAEP,CACC,KAAMC,EAAAA,QACN,KAAM,uBAAA,EAEP,CACC,KAAMC,EAAAA,QACN,KAAM,kCAAA,CAGR,EAEMC,EAA8B,IAAM,CACzC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,CAAC,EAE9CC,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAW,OAAO,YAAY,IAAM,CACzCH,EAAeI,IAAUA,EAAO,GAAKV,EAAe,MAAM,CAC3D,EAAG,IAAI,EAEP,MAAO,IAAM,OAAO,cAAcS,CAAQ,CAC3C,EAAG,CAAA,CAAE,EAEL,MAAME,EAAeX,EAAeK,CAAU,EAE9C,OACCO,EAAAA,KAACd,EAAA,CACA,KAAK,SACL,YAAU,SAEV,SAAA,CAAAe,EAAAA,IAACF,EAAa,KAAb,CAAkB,OAAQ,GAAI,MAAO,GAAI,EAC1CC,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAF,EAAa,KAAK,EAChDE,EAAAA,IAAC,MAAA,CAAI,UAAU,OACb,SAAA,CAAC,EAAG,EAAG,EAAG,EAAG,CAAC,EAAE,IAAKC,GACrBD,EAAAA,IAAC,OAAA,CAEA,UAAU,MACV,MAAO,CAAE,eAAgB,GAAGC,EAAM,GAAI,GAAA,CAAI,EAFrCA,CAAA,CAIN,EACF,EACAD,EAAAA,IAAC,MAAA,CAAI,UAAU,gBACb,SAAA,CAAC,GAAI,GAAI,EAAE,EAAE,IAAI,CAACE,EAAOC,IACzBH,EAAAA,IAAC,MAAA,CAEA,UAAU,eACV,MAAO,CACN,MAAO,GAAGE,CAAK,IACf,eAAgB,GAAG,IAAOC,EAAQ,GAAI,GAAA,EAGvC,SAAAH,EAAAA,IAAC,OAAA,CAAK,UAAU,mBAAA,CAAoB,CAAA,EAP/BE,CAAA,CASN,CAAA,CACF,CAAA,CAAA,CACD,CAAA,CAAA,CAAA,CAGH"}

package/dist/cjs/components/bik-layout/CommonStyles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react-bootstrap"),t=require("styled-components"),e=require("../../constants/Theme.js"),n=require("../../constants/zindex.js"),i=require("../TypographyStyle.js");t.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react-bootstrap"),n=require("styled-components"),t=require("../../constants/Theme.js"),a=require("../../constants/zindex.js"),i=require("../TypographyStyle.js"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=d(n);o.default.div`
 	.global-container {
 		display: flex;
 		flex-direction: row;
@@ -8,7 +8,7 @@
 	.component-container {
 		flex: 1 1 0%;
 	}
-`;const a=t.div`
+`;const l=o.default.div`
 	width: 100%;
 	height: 100vh;
 	margin: 0;
@@ -24,7 +24,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: 40px;
-		background-color: ${e.DEFAULT_THEME.colorsV2.surface.standard};
+		background-color: ${t.DEFAULT_THEME.colorsV2.surface.standard};
 		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
 		border-radius: 4px;
 		flex-direction: column;
@@ -33,7 +33,7 @@
 	.loader {
 		width: 48px;
 		height: 48px;
-		border: 5px solid ${e.DEFAULT_THEME.colorsV2.stroke.brand};
+		border: 5px solid ${t.DEFAULT_THEME.colorsV2.stroke.brand};
 		border-bottom-color: transparent;
 		border-radius: 50%;
 		display: inline-block;
@@ -49,18 +49,18 @@
 			transform: rotate(360deg);
 		}
 	}
-`,d=t.div`
+`,c=o.default.div`
 	margin-top: 16px;
-`,l=t.div`
+`,s=o.default.div`
 	display: flex;
 	flex-direction: row;
-	${o=>o.type==="overflow-within"?`
+	${e=>e.type==="overflow-within"?`
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
       flex-basis: calc(100vh - 56px) !important;
       overflow: scroll;
     `:"flex: 1;"}
-	background-color: ${o=>o.backgroundColor??e.DEFAULT_THEME.colorsV2.surface.hovered};
+	background-color: ${e=>e.backgroundColor??t.DEFAULT_THEME.colorsV2.surface.hovered};
 	.pd-24 {
 		padding: 24px;
 	}
@@ -73,14 +73,14 @@
 		z-index: 4;
 		height: 500vh;
 		width: 100%;
-		background-color: ${e.DEFAULT_THEME.colorsV2.surface.hovered};
+		background-color: ${t.DEFAULT_THEME.colorsV2.surface.hovered};
 	}
-`,c=t.div`
+`,p=o.default.div`
 	position: sticky;
 	top: 0;
 	z-index: 10;
-`,s=t.div`
-	background-color: ${e.DEFAULT_THEME.colorsV2.surface.standard};
+`,x=o.default.div`
+	background-color: ${t.DEFAULT_THEME.colorsV2.surface.standard};
 	border-bottom: 0.5px solid #e0e0e0;
 	display: flex;
 	flex-direction: row;
@@ -88,13 +88,13 @@
 	align-items: center;
 	height: 56px;
 	border-bottom-width: 0.5px;
-	border-color: ${e.DEFAULT_THEME.colorsV2.background.inactive};
+	border-color: ${t.DEFAULT_THEME.colorsV2.background.inactive};
 	padding: 16px;
 	.cursor {
 		cursor: pointer;
 	}
 	.brand {
-		color: ${e.DEFAULT_THEME.colorsV2.stroke.brand};
+		color: ${t.DEFAULT_THEME.colorsV2.stroke.brand};
 	}
 	.row--flex {
 		display: flex;
@@ -102,7 +102,7 @@
 		align-items: center;
 		gap: 8px;
 	}
-`,p=t.div`
+`,f=o.default.div`
 	z-index: 1;
 	padding-top: 16px;
 	padding: 8px;
@@ -110,7 +110,7 @@
 	flex-direction: column;
 	width: 291px;
 	.divider {
-		border: 1px solid ${e.DEFAULT_THEME.colorsV2.background.inactive};
+		border: 1px solid ${t.DEFAULT_THEME.colorsV2.background.inactive};
 		margin: 0px 4px;
 	}
 	.logout--container {
@@ -123,10 +123,10 @@
 		cursor: pointer;
 		margin-top: 10px;
 		&:hover {
-			background-color: ${e.DEFAULT_THEME.colorsV2.background.negative.light};
+			background-color: ${t.DEFAULT_THEME.colorsV2.background.negative.light};
 		}
 	}
-`,x=t(r.Dropdown.Toggle)`
+`,g=o.default(r.Dropdown.Toggle)`
 	border-radius: 4px;
 	display: flex;
 	flex-direction: row;
@@ -137,7 +137,7 @@
 	font-size: 14px;
 	line-height: 20px;
    .inner
-`,g=t.div`
+`,u=o.default.div`
 	display: flex;
 	flex-direction: row;
 	gap: 0px 8px;
@@ -145,16 +145,16 @@
 	align-items: center;
 	border-radius: 50%;
 	padding: 6px;
-	background-color: ${o=>o.isDropdownOpen&&e.DEFAULT_THEME.colorsV2.background.brandLight};
+	background-color: ${e=>e.isDropdownOpen&&t.DEFAULT_THEME.colorsV2.background.brandLight};
 	&:hover {
-		background-color: ${o=>o.isDropdownOpen?e.DEFAULT_THEME.colorsV2.background.brandLight:e.DEFAULT_THEME.colorsV2.surface.hovered};
+		background-color: ${e=>e.isDropdownOpen?t.DEFAULT_THEME.colorsV2.background.brandLight:t.DEFAULT_THEME.colorsV2.surface.hovered};
 	}
-`,f=t(i.TitleSmall)`
+`,b=o.default(i.TitleSmall)`
 	white-space: nowrap;
 	max-width: 161px;
 	overflow: hidden;
 	text-overflow: ellipsis;
-`,u=t.div`
+`,h=o.default.div`
 	width: 32px;
 	height: 32px;
 	border-radius: 50%;
@@ -163,7 +163,7 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-		background-color: ${e.DEFAULT_THEME.colorsV2.background.inverse};
+		background-color: ${t.DEFAULT_THEME.colorsV2.background.inverse};
 		border-radius: 50%;
 		width: 32px;
 		height: 32px;
@@ -173,16 +173,16 @@
 		height: 100%;
 		width: 100%;
 	}
-`,b=t(r.Tooltip)`
+`,m=o.default(r.Tooltip)`
 	.tooltip-inner {
-		background-color: ${e.DEFAULT_THEME.colorsV2.surface.standard};
+		background-color: ${t.DEFAULT_THEME.colorsV2.surface.standard};
 		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
 	}
 	.tooltip-arrow::before {
 		display: none;
 	}
-`,h=t.div`
-	background-color: ${e.DEFAULT_THEME.colorsV2.surface.standard};
+`,y=o.default.div`
+	background-color: ${t.DEFAULT_THEME.colorsV2.surface.standard};
 	min-width: 188px;
 	display: flex;
 	flex-direction: row;
@@ -193,9 +193,9 @@
 	border-radius: 8px;
 	cursor: pointer;
 	&:hover {
-		background: ${e.DEFAULT_THEME.colorsV2.surface.hovered};
+		background: ${t.DEFAULT_THEME.colorsV2.surface.hovered};
 	}
-`,m=t.div`
+`,w=o.default.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -206,19 +206,19 @@
 		height: 6px;
 		width: 6px;
 		border-style: solid;
-		border-color: ${o=>o.isAvailable?e.DEFAULT_THEME.colorsV2.background.positive.vibrant:e.DEFAULT_THEME.colorsV2.content.secondary};
-		background-color: ${o=>o.isAvailable?e.DEFAULT_THEME.colorsV2.background.positive.vibrant:e.DEFAULT_THEME.colorsV2.surface.standard};
+		border-color: ${e=>e.isAvailable?t.DEFAULT_THEME.colorsV2.background.positive.vibrant:t.DEFAULT_THEME.colorsV2.content.secondary};
+		background-color: ${e=>e.isAvailable?t.DEFAULT_THEME.colorsV2.background.positive.vibrant:t.DEFAULT_THEME.colorsV2.surface.standard};
 		border-radius: 4px;
 	}
-`,w=t.div`
+`,E=o.default.div`
 	display: flex;
 	flex-direction: column;
 	margin-left: 16px;
 	justify-content: space-between;
 	justify-content: flex-start;
-`,y=t(i.BodyCaption)`
-	color: ${o=>o.isAvailable?e.DEFAULT_THEME.colorsV2.background.positive.vibrant:e.DEFAULT_THEME.colorsV2.content.secondary};
-`,E=t.div`
+`,v=o.default(i.BodyCaption)`
+	color: ${e=>e.isAvailable?t.DEFAULT_THEME.colorsV2.background.positive.vibrant:t.DEFAULT_THEME.colorsV2.content.secondary};
+`,T=o.default.div`
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
@@ -226,9 +226,9 @@
 	position: fixed;
 	bottom: 0;
 	width: fill-available;
-	height: ${o=>o.resetHeight?"fit-content":"650px"};
+	height: ${e=>e.resetHeight?"fit-content":"650px"};
 	padding: 24px;
-	z-index: ${o=>o.zIndex?o.zIndex:n.ComponentZindex.FEATURE_MODAL};
+	z-index: ${e=>e.zIndex?e.zIndex:a.ComponentZindex.FEATURE_MODAL};
 	background: linear-gradient(
 		180deg,
 		rgba(255, 255, 255, 0) 0%,
@@ -238,7 +238,7 @@
 	.cross-button {
 		width: 40px;
 		height: 40px;
-		background-color: ${e.COLORS.scrim.standard};
+		background-color: ${t.COLORS.scrim.standard};
 		border-radius: 50%;
 		position: fixed;
 		margin: auto;
@@ -246,14 +246,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid ${e.COLORS.stroke.primary};
+		border: 1px solid ${t.COLORS.stroke.primary};
 		cursor: pointer;
-		z-index: ${o=>o.zIndex?o.zIndex:5};
+		z-index: ${e=>e.zIndex?e.zIndex:5};
 	}
-`,v=t.div`
+`,k=o.default.div`
 	width: 100%;
 	height: 132px;
-	background: ${e.COLORS.background.inverse};
+	background: ${t.COLORS.background.inverse};
 	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
 	border-radius: 8px;
 
@@ -275,12 +275,12 @@
 		gap: 16px;
 	}
 	.title-color {
-		color: ${e.COLORS.surface.subdued};
+		color: ${t.COLORS.surface.subdued};
 	}
 	.subtitle-color {
-		color: ${e.COLORS.content.secondaryInverse};
+		color: ${t.COLORS.content.secondaryInverse};
 	}
-`,T=t.div`
+`,C=o.default.div`
 	width: fit-content;
 	border-radius: 8px;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
@@ -334,7 +334,7 @@
 		gap: 16px;
 		margin-top: 16px;
 	}
-`,k=t.div`
+`,L=o.default.div`
 	.top-feature-content {
 		max-height: 285px;
 		img {
@@ -368,5 +368,5 @@
 	.text-align-center {
 		text-align: center;
 	}
-`;exports.BikHeaderContainer=s;exports.BikHeaderWrapper=c;exports.BikLayoutContainer=l;exports.FeatureModalContainer=E;exports.FeatureModalV2Container=k;exports.InnerModalContainer=v;exports.LoaderWrapper=a;exports.LoadingMessageWrapper=d;exports.MenuInnerContainer=p;exports.ProfileDropdownInnerContainer=g;exports.ProfileDropdownToggleContainer=x;exports.RelativeModalContainer=T;exports.StatusContainer=m;exports.StyledBodyCaption=y;exports.StyledTooltip=b;exports.UserAvatarContainer=u;exports.UserInfoContainer=h;exports.UserNameTitleSmall=f;exports.UserStatusContainer=w;
+`;exports.BikHeaderContainer=x;exports.BikHeaderWrapper=p;exports.BikLayoutContainer=s;exports.FeatureModalContainer=T;exports.FeatureModalV2Container=L;exports.InnerModalContainer=k;exports.LoaderWrapper=l;exports.LoadingMessageWrapper=c;exports.MenuInnerContainer=f;exports.ProfileDropdownInnerContainer=u;exports.ProfileDropdownToggleContainer=g;exports.RelativeModalContainer=C;exports.StatusContainer=w;exports.StyledBodyCaption=v;exports.StyledTooltip=m;exports.UserAvatarContainer=h;exports.UserInfoContainer=y;exports.UserNameTitleSmall=b;exports.UserStatusContainer=E;
 //# sourceMappingURL=CommonStyles.js.map

package/dist/cjs/components/bik-layout/CommonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' | 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n      flex-grow: 0 !important;\n      flex-shrink: 0 !important;\n      flex-basis: calc(100vh - 56px) !important;\n      overflow: scroll;\n    `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 0.5px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n   .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}
+{"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' | 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n      flex-grow: 0 !important;\n      flex-shrink: 0 !important;\n      flex-basis: calc(100vh - 56px) !important;\n      overflow: scroll;\n    `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 0.5px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n   .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}

package/dist/cjs/components/bik-layout/FeatureModal.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react-dom"),g=require("../../constants/Theme.js"),T=require("../../assets/icons/cross.svg.js"),o=require("../TypographyStyle.js"),r=require("./CommonStyles.js"),s=require("../button/Button.js"),C=i=>{const{zIndex:a,disableCross:c=!1,otherContent:t,onClickingCross:l,onUpgrade:n,title:u,subTitle:d,showBookADemo:h,demoLink:m,primaryButtonText:x}=i,p=()=>{window.open(m,"_blank")},y=u||"Upgrade to access this feature",b=d||"This feature is not included in the current plan. Upgrade to get access and use this feature.";return j.createPortal(e.jsxs(r.FeatureModalContainer,{zIndex:a,children:[!c&&e.jsx("div",{className:"cross-button",onClick:()=>l(),"aria-hidden":"true",children:e.jsx(T.default,{height:20,width:20,color:g.COLORS.surface.subdued})}),e.jsx(r.InnerModalContainer,{children:t?e.jsx(e.Fragment,{children:t}):e.jsxs("div",{className:"content-layout",children:[e.jsxs("div",{children:[e.jsx(o.TitleMedium,{className:"title-color",children:y}),e.jsx(o.BodyPrimary,{className:"title-color mt-8",children:b})]}),e.jsxs("div",{className:"cta-buttons",children:[h&&e.jsx(s.Button,{buttonText:"Book a demo",buttonType:"secondary",size:"large",inverse:!0,onClick:()=>p()}),e.jsx(s.Button,{buttonText:x||"Upgrade plan",buttonType:"primary",size:"large",inverse:!0,onClick:()=>n?n():""})]})]})})]}),document.body)};exports.FeatureModal=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react-dom"),j=require("../../constants/Theme.js"),g=require("../../assets/icons/cross.svg.js"),r=require("../TypographyStyle.js"),s=require("./CommonStyles.js"),i=require("../button/Button.js"),T=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},C=T(f),k=t=>{const{zIndex:a,disableCross:l=!1,otherContent:o,onClickingCross:c,onUpgrade:n,title:u,subTitle:d,showBookADemo:m,demoLink:h,primaryButtonText:p}=t,x=()=>{window.open(h,"_blank")},y=u||"Upgrade to access this feature",b=d||"This feature is not included in the current plan. Upgrade to get access and use this feature.";return C.default.createPortal(e.jsxs(s.FeatureModalContainer,{zIndex:a,children:[!l&&e.jsx("div",{className:"cross-button",onClick:()=>c(),"aria-hidden":"true",children:e.jsx(g.default,{height:20,width:20,color:j.COLORS.surface.subdued})}),e.jsx(s.InnerModalContainer,{children:o?e.jsx(e.Fragment,{children:o}):e.jsxs("div",{className:"content-layout",children:[e.jsxs("div",{children:[e.jsx(r.TitleMedium,{className:"title-color",children:y}),e.jsx(r.BodyPrimary,{className:"title-color mt-8",children:b})]}),e.jsxs("div",{className:"cta-buttons",children:[m&&e.jsx(i.Button,{buttonText:"Book a demo",buttonType:"secondary",size:"large",inverse:!0,onClick:()=>x()}),e.jsx(i.Button,{buttonText:p||"Upgrade plan",buttonType:"primary",size:"large",inverse:!0,onClick:()=>n?n():""})]})]})})]}),document.body)};exports.FeatureModal=k;
 //# sourceMappingURL=FeatureModal.js.map

package/dist/cjs/components/bik-layout/FeatureModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureModal.js","sources":["../../../../src/components/bik-layout/FeatureModal.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { BodyPrimary, TitleMedium } from '../TypographyStyle';\nimport { FeatureModalContainer, InnerModalContainer } from './CommonStyles';\n\nexport interface FeatureModalProps {\n\tzIndex?: number;\n\tdisableCross?: boolean;\n\tonClickingCross: () => void;\n\totherContent?: JSX.Element;\n\tonUpgrade?: () => void;\n\tprimaryButtonText?: string;\n\ttitle?: string;\n\tsubTitle?: string;\n\tshowBookADemo?: boolean;\n\tdemoLink?: string;\n}\n\nexport const FeatureModal: React.FC<FeatureModalProps> = (\n\tFeatureModalProps,\n) => {\n\tconst {\n\t\tzIndex,\n\t\tdisableCross = false,\n\t\totherContent,\n\t\tonClickingCross,\n\t\tonUpgrade,\n\t\ttitle,\n\t\tsubTitle,\n\t\tshowBookADemo,\n\t\tdemoLink,\n\t\tprimaryButtonText,\n\t} = FeatureModalProps;\n\n\tconst openDemoLink = () => {\n\t\twindow.open(demoLink, '_blank');\n\t};\n\n\tconst finalTitle = title || 'Upgrade to access this feature';\n\tconst finalSubTitle =\n\t\tsubTitle ||\n\t\t'This feature is not included in the current plan. Upgrade to get access and use this feature.';\n\n\treturn ReactDOM.createPortal(\n\t\t<FeatureModalContainer zIndex={zIndex}>\n\t\t\t{!disableCross && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"cross-button\"\n\t\t\t\t\tonClick={() => onClickingCross()}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<CrossIcon height={20} width={20} color={COLORS.surface.subdued} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<InnerModalContainer>\n\t\t\t\t{otherContent ? (\n\t\t\t\t\t<>{otherContent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"content-layout\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<TitleMedium className=\"title-color\">{finalTitle}</TitleMedium>\n\t\t\t\t\t\t\t<BodyPrimary className=\"title-color mt-8\">\n\t\t\t\t\t\t\t\t{finalSubTitle}\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"cta-buttons\">\n\t\t\t\t\t\t\t{showBookADemo && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText=\"Book a demo\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t\t\t\tinverse\n\t\t\t\t\t\t\t\t\tonClick={() => openDemoLink()}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tbuttonText={primaryButtonText || 'Upgrade plan'}\n\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t\t\tinverse\n\t\t\t\t\t\t\t\tonClick={() => (onUpgrade ? onUpgrade() : '')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</InnerModalContainer>\n\t\t</FeatureModalContainer>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["FeatureModal","FeatureModalProps","zIndex","disableCross","otherContent","onClickingCross","onUpgrade","title","subTitle","showBookADemo","demoLink","primaryButtonText","openDemoLink","finalTitle","finalSubTitle","ReactDOM","jsxs","FeatureModalContainer","jsx","CrossIcon","COLORS","InnerModalContainer","Fragment","TitleMedium","BodyPrimary","Button"],"mappings":"kUAoBaA,EACZC,GACI,CACJ,KAAM,CACL,OAAAC,EACA,aAAAC,EAAe,GACf,aAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,kBAAAC,CAAA,EACGV,EAEEW,EAAe,IAAM,CAC1B,OAAO,KAAKF,EAAU,QAAQ,CAC/B,EAEMG,EAAaN,GAAS,iCACtBO,EACLN,GACA,gGAED,OAAOO,EAAS,aACfC,EAAAA,KAACC,EAAAA,uBAAsB,OAAAf,EACrB,SAAA,CAAA,CAACC,GACDe,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,QAAS,IAAMb,EAAA,EACf,cAAY,OAEZ,SAAAa,EAAAA,IAACC,WAAU,OAAQ,GAAI,MAAO,GAAI,MAAOC,SAAO,QAAQ,OAAA,CAAS,CAAA,CAAA,EAGnEF,EAAAA,IAACG,EAAAA,qBACC,SAAAjB,EACAc,EAAAA,IAAAI,EAAAA,SAAA,CAAG,WAAa,EAEhBN,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAA,OAAC,MAAA,CACA,SAAA,CAAAE,EAAAA,IAACK,EAAAA,YAAA,CAAY,UAAU,cAAe,SAAAV,EAAW,EACjDK,EAAAA,IAACM,EAAAA,YAAA,CAAY,UAAU,mBACrB,SAAAV,CAAA,CACF,CAAA,EACD,EACAE,EAAAA,KAAC,MAAA,CAAI,UAAU,cACb,SAAA,CAAAP,GACAS,EAAAA,IAACO,EAAAA,OAAA,CACA,WAAW,cACX,WAAW,YACX,KAAK,QACL,QAAO,GACP,QAAS,IAAMb,EAAA,CAAa,CAAA,EAG9BM,EAAAA,IAACO,EAAAA,OAAA,CACA,WAAYd,GAAqB,eACjC,WAAW,UACX,KAAK,QACL,QAAO,GACP,QAAS,IAAOL,EAAYA,IAAc,EAAA,CAAA,CAC3C,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,EACD,EACA,SAAS,IAAA,CAEX"}
+{"version":3,"file":"FeatureModal.js","sources":["../../../../src/components/bik-layout/FeatureModal.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { BodyPrimary, TitleMedium } from '../TypographyStyle';\nimport { FeatureModalContainer, InnerModalContainer } from './CommonStyles';\n\nexport interface FeatureModalProps {\n\tzIndex?: number;\n\tdisableCross?: boolean;\n\tonClickingCross: () => void;\n\totherContent?: JSX.Element;\n\tonUpgrade?: () => void;\n\tprimaryButtonText?: string;\n\ttitle?: string;\n\tsubTitle?: string;\n\tshowBookADemo?: boolean;\n\tdemoLink?: string;\n}\n\nexport const FeatureModal: React.FC<FeatureModalProps> = (\n\tFeatureModalProps,\n) => {\n\tconst {\n\t\tzIndex,\n\t\tdisableCross = false,\n\t\totherContent,\n\t\tonClickingCross,\n\t\tonUpgrade,\n\t\ttitle,\n\t\tsubTitle,\n\t\tshowBookADemo,\n\t\tdemoLink,\n\t\tprimaryButtonText,\n\t} = FeatureModalProps;\n\n\tconst openDemoLink = () => {\n\t\twindow.open(demoLink, '_blank');\n\t};\n\n\tconst finalTitle = title || 'Upgrade to access this feature';\n\tconst finalSubTitle =\n\t\tsubTitle ||\n\t\t'This feature is not included in the current plan. Upgrade to get access and use this feature.';\n\n\treturn ReactDOM.createPortal(\n\t\t<FeatureModalContainer zIndex={zIndex}>\n\t\t\t{!disableCross && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"cross-button\"\n\t\t\t\t\tonClick={() => onClickingCross()}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<CrossIcon height={20} width={20} color={COLORS.surface.subdued} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<InnerModalContainer>\n\t\t\t\t{otherContent ? (\n\t\t\t\t\t<>{otherContent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"content-layout\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<TitleMedium className=\"title-color\">{finalTitle}</TitleMedium>\n\t\t\t\t\t\t\t<BodyPrimary className=\"title-color mt-8\">\n\t\t\t\t\t\t\t\t{finalSubTitle}\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"cta-buttons\">\n\t\t\t\t\t\t\t{showBookADemo && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText=\"Book a demo\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t\t\t\tinverse\n\t\t\t\t\t\t\t\t\tonClick={() => openDemoLink()}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tbuttonText={primaryButtonText || 'Upgrade plan'}\n\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t\t\tinverse\n\t\t\t\t\t\t\t\tonClick={() => (onUpgrade ? onUpgrade() : '')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</InnerModalContainer>\n\t\t</FeatureModalContainer>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["FeatureModal","FeatureModalProps","zIndex","disableCross","otherContent","onClickingCross","onUpgrade","title","subTitle","showBookADemo","demoLink","primaryButtonText","openDemoLink","finalTitle","finalSubTitle","ReactDOM","jsxs","FeatureModalContainer","jsx","CrossIcon","COLORS","InnerModalContainer","Fragment","TitleMedium","BodyPrimary","Button"],"mappings":"iYAoBaA,EACZC,GACI,CACJ,KAAM,CACL,OAAAC,EACA,aAAAC,EAAe,GACf,aAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,kBAAAC,CAAA,EACGV,EAEEW,EAAe,IAAM,CAC1B,OAAO,KAAKF,EAAU,QAAQ,CAC/B,EAEMG,EAAaN,GAAS,iCACtBO,EACLN,GACA,gGAED,OAAOO,EAAAA,QAAS,aACfC,EAAAA,KAACC,EAAAA,uBAAsB,OAAAf,EACrB,SAAA,CAAA,CAACC,GACDe,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,QAAS,IAAMb,EAAA,EACf,cAAY,OAEZ,SAAAa,EAAAA,IAACC,WAAU,OAAQ,GAAI,MAAO,GAAI,MAAOC,SAAO,QAAQ,OAAA,CAAS,CAAA,CAAA,EAGnEF,EAAAA,IAACG,EAAAA,qBACC,SAAAjB,EACAc,EAAAA,IAAAI,EAAAA,SAAA,CAAG,WAAa,EAEhBN,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAA,OAAC,MAAA,CACA,SAAA,CAAAE,EAAAA,IAACK,EAAAA,YAAA,CAAY,UAAU,cAAe,SAAAV,EAAW,EACjDK,EAAAA,IAACM,EAAAA,YAAA,CAAY,UAAU,mBACrB,SAAAV,CAAA,CACF,CAAA,EACD,EACAE,EAAAA,KAAC,MAAA,CAAI,UAAU,cACb,SAAA,CAAAP,GACAS,EAAAA,IAACO,EAAAA,OAAA,CACA,WAAW,cACX,WAAW,YACX,KAAK,QACL,QAAO,GACP,QAAS,IAAMb,EAAA,CAAa,CAAA,EAG9BM,EAAAA,IAACO,EAAAA,OAAA,CACA,WAAYd,GAAqB,eACjC,WAAW,UACX,KAAK,QACL,QAAO,GACP,QAAS,IAAOL,EAAYA,IAAc,EAAA,CAAA,CAC3C,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,EACD,EACA,SAAS,IAAA,CAEX"}

package/dist/cjs/components/bik-layout/FeatureModalV2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),p=require("react-dom"),j=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),S=require("./CommonStyles.js"),T=require("../modals/styledModal.js"),C=require("../button/Button.js"),M=l=>{const{zIndex:c,otherContent:t,onUpgrade:n,title:o,subTitle:d,primaryButtonText:u,onClose:a,featureImage:y,id:m}=l,b=o===void 0?"Start your 14-day free trial to test your AI assistant on your website":o,g=d||"Test your assistant on your website and unlock many other features for free by starting your trial now. Don't worry, you can cancel anytime before the trial ends and no charges will be deducted.",x=y||"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb74e0e4c-9b3b-47ca-b0af-704b246e3c54?alt=media&token=bb48a397-1981-4c93-a835-eb4f400d5a60",[h,r]=s.useState(!0);function f(){a&&a(),r(!1)}return p.createPortal(e.jsx(T.StyledModal,{zIndex:c,open:h,onClose:f,closeOnOutsideClick:!0,centralContainerStyles:{maxWidth:"568px"},innerModalId:m,children:e.jsx(S.FeatureModalV2Container,{children:t?e.jsx(e.Fragment,{children:t}):e.jsxs(s.Fragment,{children:[e.jsx("div",{className:"top-feature-content",children:e.jsx("img",{src:x,alt:"general-icon"})}),e.jsxs("div",{className:"bottom-feature-content",children:[e.jsx(i.TitleMedium,{className:"title-class text-align-center mt-8",style:{textAlign:"center"},children:b}),e.jsx(i.BodySecondary,{className:"text-align-center",style:{color:j.COLORS.content.secondary},children:g}),e.jsx("div",{className:"cta-buttons",children:e.jsx(C.Button,{buttonText:u||"Upgrade to growth plan",buttonType:"primary",size:"large",onClick:()=>{n&&n(),r(!1)}})})]})]})})}),document.body)};exports.FeatureModalV2=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),h=require("react-dom"),j=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),C=require("./CommonStyles.js"),M=require("../modals/styledModal.js"),S=require("../button/Button.js"),T=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},q=T(h),O=t=>{const{zIndex:c,otherContent:o,onUpgrade:n,title:a,subTitle:d,primaryButtonText:u,onClose:r,featureImage:y,id:m}=t,b=a===void 0?"Start your 14-day free trial to test your AI assistant on your website":a,f=d||"Test your assistant on your website and unlock many other features for free by starting your trial now. Don't worry, you can cancel anytime before the trial ends and no charges will be deducted.",g=y||"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb74e0e4c-9b3b-47ca-b0af-704b246e3c54?alt=media&token=bb48a397-1981-4c93-a835-eb4f400d5a60",[p,s]=i.useState(!0);function x(){r&&r(),s(!1)}return q.default.createPortal(e.jsx(M.StyledModal,{zIndex:c,open:p,onClose:x,closeOnOutsideClick:!0,centralContainerStyles:{maxWidth:"568px"},innerModalId:m,children:e.jsx(C.FeatureModalV2Container,{children:o?e.jsx(e.Fragment,{children:o}):e.jsxs(i.Fragment,{children:[e.jsx("div",{className:"top-feature-content",children:e.jsx("img",{src:g,alt:"general-icon"})}),e.jsxs("div",{className:"bottom-feature-content",children:[e.jsx(l.TitleMedium,{className:"title-class text-align-center mt-8",style:{textAlign:"center"},children:b}),e.jsx(l.BodySecondary,{className:"text-align-center",style:{color:j.COLORS.content.secondary},children:f}),e.jsx("div",{className:"cta-buttons",children:e.jsx(S.Button,{buttonText:u||"Upgrade to growth plan",buttonType:"primary",size:"large",onClick:()=>{n&&n(),s(!1)}})})]})]})})}),document.body)};exports.FeatureModalV2=O;
 //# sourceMappingURL=FeatureModalV2.js.map

package/dist/cjs/components/bik-layout/FeatureModalV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureModalV2.js","sources":["../../../../src/components/bik-layout/FeatureModalV2.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { StyledModal } from '../modals';\nimport { BodySecondary, TitleMedium } from '../TypographyStyle';\nimport { FeatureModalV2Container } from './CommonStyles';\n\nexport interface FeatureModalV2Props {\n\tzIndex?: number;\n\totherContent?: JSX.Element;\n\tonUpgrade?: () => void;\n\tprimaryButtonText?: string;\n\ttitle?: string;\n\tsubTitle?: string;\n\tonClose?: () => void;\n\tfeatureImage?: string;\n\tid?: string;\n}\n\nexport const FeatureModalV2: React.FC<FeatureModalV2Props> = (\n\tFeatureModalProps,\n) => {\n\tconst {\n\t\tzIndex,\n\t\totherContent,\n\t\tonUpgrade,\n\t\ttitle,\n\t\tsubTitle,\n\t\tprimaryButtonText,\n\t\tonClose,\n\t\tfeatureImage,\n\t\tid,\n\t} = FeatureModalProps;\n\n\tconst finalTitle =\n\t\ttitle === undefined\n\t\t\t? 'Start your 14-day free trial to test your AI assistant on your website'\n\t\t\t: title;\n\tconst finalSubTitle =\n\t\tsubTitle ||\n\t\t\"Test your assistant on your website and unlock many other features for free by starting your trial now. Don't worry, you can cancel anytime before the trial ends and no charges will be deducted.\";\n\tconst imageUrl =\n\t\tfeatureImage ||\n\t\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb74e0e4c-9b3b-47ca-b0af-704b246e3c54?alt=media&token=bb48a397-1981-4c93-a835-eb4f400d5a60';\n\n\tconst [open, setOpen] = useState(true);\n\tfunction onClosingModal() {\n\t\tif (onClose) {\n\t\t\tonClose();\n\t\t}\n\t\tsetOpen(false);\n\t}\n\n\treturn ReactDOM.createPortal(\n\t\t<StyledModal\n\t\t\tzIndex={zIndex}\n\t\t\topen={open}\n\t\t\tonClose={onClosingModal}\n\t\t\tcloseOnOutsideClick\n\t\t\tcentralContainerStyles={{ maxWidth: '568px' }}\n\t\t\tinnerModalId={id}\n\t\t>\n\t\t\t<FeatureModalV2Container>\n\t\t\t\t{otherContent ? (\n\t\t\t\t\t<>{otherContent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<div className=\"top-feature-content\">\n\t\t\t\t\t\t\t<img src={imageUrl} alt=\"general-icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"bottom-feature-content\">\n\t\t\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\t\t\tclassName=\"title-class text-align-center mt-8\"\n\t\t\t\t\t\t\t\tstyle={{ textAlign: 'center' }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{finalTitle}\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tclassName=\"text-align-center\"\n\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{finalSubTitle}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t<div className=\"cta-buttons\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText={primaryButtonText || 'Upgrade to growth plan'}\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tonUpgrade ? onUpgrade() : '';\n\t\t\t\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</FeatureModalV2Container>\n\t\t</StyledModal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["FeatureModalV2","FeatureModalProps","zIndex","otherContent","onUpgrade","title","subTitle","primaryButtonText","onClose","featureImage","id","finalTitle","finalSubTitle","imageUrl","open","setOpen","useState","onClosingModal","ReactDOM","jsx","StyledModal","FeatureModalV2Container","Fragment","jsxs","TitleMedium","BodySecondary","COLORS","Button"],"mappings":"8UAoBaA,EACZC,GACI,CACJ,KAAM,CACL,OAAAC,EACA,aAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,GAAAC,CAAA,EACGT,EAEEU,EACLN,IAAU,OACP,yEACAA,EACEO,EACLN,GACA,qMACKO,EACLJ,GACA,+KAEK,CAACK,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAI,EACrC,SAASC,GAAiB,CACrBT,GACHA,EAAA,EAEDO,EAAQ,EAAK,CACd,CAEA,OAAOG,EAAS,aACfC,EAAAA,IAACC,EAAAA,YAAA,CACA,OAAAlB,EACA,KAAAY,EACA,QAASG,EACT,oBAAmB,GACnB,uBAAwB,CAAE,SAAU,OAAA,EACpC,aAAcP,EAEd,SAAAS,EAAAA,IAACE,EAAAA,yBACC,SAAAlB,EACAgB,EAAAA,IAAAG,EAAAA,SAAA,CAAG,WAAa,EAEhBC,EAAAA,KAACD,EAAAA,SAAA,CACA,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACd,SAAAA,EAAAA,IAAC,OAAI,IAAKN,EAAU,IAAI,cAAA,CAAe,CAAA,CACxC,EACAU,EAAAA,KAAC,MAAA,CAAI,UAAU,yBACd,SAAA,CAAAJ,EAAAA,IAACK,EAAAA,YAAA,CACA,UAAU,qCACV,MAAO,CAAE,UAAW,QAAA,EAEnB,SAAAb,CAAA,CAAA,EAEFQ,EAAAA,IAACM,EAAAA,cAAA,CACA,UAAU,oBACV,MAAO,CAAE,MAAOC,SAAO,QAAQ,SAAA,EAE9B,SAAAd,CAAA,CAAA,EAEFO,EAAAA,IAAC,MAAA,CAAI,UAAU,cACd,SAAAA,EAAAA,IAACQ,EAAAA,OAAA,CACA,WAAYpB,GAAqB,yBACjC,WAAW,UACX,KAAK,QACL,QAAS,IAAM,CACdH,GAAYA,IACZW,EAAQ,EAAK,CACd,CAAA,CAAA,CACD,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CAAA,EAED,SAAS,IAAA,CAEX"}
+{"version":3,"file":"FeatureModalV2.js","sources":["../../../../src/components/bik-layout/FeatureModalV2.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { StyledModal } from '../modals';\nimport { BodySecondary, TitleMedium } from '../TypographyStyle';\nimport { FeatureModalV2Container } from './CommonStyles';\n\nexport interface FeatureModalV2Props {\n\tzIndex?: number;\n\totherContent?: JSX.Element;\n\tonUpgrade?: () => void;\n\tprimaryButtonText?: string;\n\ttitle?: string;\n\tsubTitle?: string;\n\tonClose?: () => void;\n\tfeatureImage?: string;\n\tid?: string;\n}\n\nexport const FeatureModalV2: React.FC<FeatureModalV2Props> = (\n\tFeatureModalProps,\n) => {\n\tconst {\n\t\tzIndex,\n\t\totherContent,\n\t\tonUpgrade,\n\t\ttitle,\n\t\tsubTitle,\n\t\tprimaryButtonText,\n\t\tonClose,\n\t\tfeatureImage,\n\t\tid,\n\t} = FeatureModalProps;\n\n\tconst finalTitle =\n\t\ttitle === undefined\n\t\t\t? 'Start your 14-day free trial to test your AI assistant on your website'\n\t\t\t: title;\n\tconst finalSubTitle =\n\t\tsubTitle ||\n\t\t\"Test your assistant on your website and unlock many other features for free by starting your trial now. Don't worry, you can cancel anytime before the trial ends and no charges will be deducted.\";\n\tconst imageUrl =\n\t\tfeatureImage ||\n\t\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb74e0e4c-9b3b-47ca-b0af-704b246e3c54?alt=media&token=bb48a397-1981-4c93-a835-eb4f400d5a60';\n\n\tconst [open, setOpen] = useState(true);\n\tfunction onClosingModal() {\n\t\tif (onClose) {\n\t\t\tonClose();\n\t\t}\n\t\tsetOpen(false);\n\t}\n\n\treturn ReactDOM.createPortal(\n\t\t<StyledModal\n\t\t\tzIndex={zIndex}\n\t\t\topen={open}\n\t\t\tonClose={onClosingModal}\n\t\t\tcloseOnOutsideClick\n\t\t\tcentralContainerStyles={{ maxWidth: '568px' }}\n\t\t\tinnerModalId={id}\n\t\t>\n\t\t\t<FeatureModalV2Container>\n\t\t\t\t{otherContent ? (\n\t\t\t\t\t<>{otherContent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<div className=\"top-feature-content\">\n\t\t\t\t\t\t\t<img src={imageUrl} alt=\"general-icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"bottom-feature-content\">\n\t\t\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\t\t\tclassName=\"title-class text-align-center mt-8\"\n\t\t\t\t\t\t\t\tstyle={{ textAlign: 'center' }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{finalTitle}\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tclassName=\"text-align-center\"\n\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{finalSubTitle}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t<div className=\"cta-buttons\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText={primaryButtonText || 'Upgrade to growth plan'}\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tonUpgrade ? onUpgrade() : '';\n\t\t\t\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</FeatureModalV2Container>\n\t\t</StyledModal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["FeatureModalV2","FeatureModalProps","zIndex","otherContent","onUpgrade","title","subTitle","primaryButtonText","onClose","featureImage","id","finalTitle","finalSubTitle","imageUrl","open","setOpen","useState","onClosingModal","ReactDOM","jsx","StyledModal","FeatureModalV2Container","Fragment","jsxs","TitleMedium","BodySecondary","COLORS","Button"],"mappings":"6YAoBaA,EACZC,GACI,CACJ,KAAM,CACL,OAAAC,EACA,aAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,GAAAC,CAAA,EACGT,EAEEU,EACLN,IAAU,OACP,yEACAA,EACEO,EACLN,GACA,qMACKO,EACLJ,GACA,+KAEK,CAACK,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAI,EACrC,SAASC,GAAiB,CACrBT,GACHA,EAAA,EAEDO,EAAQ,EAAK,CACd,CAEA,OAAOG,EAAAA,QAAS,aACfC,EAAAA,IAACC,EAAAA,YAAA,CACA,OAAAlB,EACA,KAAAY,EACA,QAASG,EACT,oBAAmB,GACnB,uBAAwB,CAAE,SAAU,OAAA,EACpC,aAAcP,EAEd,SAAAS,EAAAA,IAACE,EAAAA,yBACC,SAAAlB,EACAgB,EAAAA,IAAAG,EAAAA,SAAA,CAAG,WAAa,EAEhBC,EAAAA,KAACD,EAAAA,SAAA,CACA,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACd,SAAAA,EAAAA,IAAC,OAAI,IAAKN,EAAU,IAAI,cAAA,CAAe,CAAA,CACxC,EACAU,EAAAA,KAAC,MAAA,CAAI,UAAU,yBACd,SAAA,CAAAJ,EAAAA,IAACK,EAAAA,YAAA,CACA,UAAU,qCACV,MAAO,CAAE,UAAW,QAAA,EAEnB,SAAAb,CAAA,CAAA,EAEFQ,EAAAA,IAACM,EAAAA,cAAA,CACA,UAAU,oBACV,MAAO,CAAE,MAAOC,SAAO,QAAQ,SAAA,EAE9B,SAAAd,CAAA,CAAA,EAEFO,EAAAA,IAAC,MAAA,CAAI,UAAU,cACd,SAAAA,EAAAA,IAACQ,EAAAA,OAAA,CACA,WAAYpB,GAAqB,yBACjC,WAAW,UACX,KAAK,QACL,QAAS,IAAM,CACdH,GAAYA,IACZW,EAAQ,EAAK,CACd,CAAA,CAAA,CACD,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CAAA,EAED,SAAS,IAAA,CAEX"}