@bikdotai/bik-component-library 0.0.808-beta.0 → 0.0.808

package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"WhatsAppTextEditorHeader.js","sources":["../../../../src/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n// import EmojiPicker from 'emoji-picker-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport BoldIcon from '../../assets/icons/bold.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport ItalicIcon from '../../assets/icons/italic.svg';\nimport StrikeThroughIcon from '../../assets/icons/strikeThrough.svg';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport { AIActionToneOption, AIRephraseButton } from './AIRephraseButton';\n\nlet EmojiPicker: any = () => <></>;\nif (typeof window !== 'undefined') {\n\timport('emoji-picker-react').then((_module) => {\n\t\tEmojiPicker = _module.default;\n\t});\n}\n\nconst getIconColor = (isActive: boolean) => {\n\tif (isActive) return COLORS.background.inverseLight;\n\treturn COLORS.content.placeholder;\n};\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 8px 12px;\n\talign-items: center;\n\tborder-radius: 0 0 4px 4px;\n\tgap: 6px;\n\tposition: relative;\n`;\nexport const CustomRightBorder = styled.div`\n\twidth: 2px;\n\theight: 12px;\n\tbackground: #e0e0e0;\n`;\n\nconst ButtonHolder = styled.div<{ active: boolean; disabled?: boolean }>`\n\tpadding: 2px 6px;\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.inactive : 'transparent'};\n\tborder-radius: 4px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.45 : 1)};\n\tdisplay: flex;\n\t:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\tpadding: 3px 6px;\n\t}\n`;\n\nconst CustomRightSideContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: auto;\n`;\n\nconst EmojiContainer = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 8px);\n\tz-index: 1;\n`;\n\nconst AIActionsContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: 8px;\n`;\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 14px;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ highlighted: boolean; disabled?: boolean }>`\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.highlighted ? '#ffe8ef' : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.highlighted ? '#f53f77' : COLORS.content.secondary};\n\tborder-radius: 14px;\n\tpadding: 4px 6px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.disabled ? undefined : COLORS.surface.subdued};\n\t}\n`;\n\nexport enum EditorActionTypes {\n\t'BOLD' = 'BOLD',\n\t'ITALIC' = 'ITALIC',\n\t'STRIKETHROUGH' = 'STRIKETHROUGH',\n\t'EMOJI' = 'EMOJI',\n}\n\nexport enum AIEditorActionTypes {\n\tREPHRASE = 'rephrase',\n\tSHORTEN = 'shorten',\n\tEXPAND = 'expand',\n\tEMOJIFY = 'emojify',\n}\n\nexport type AIEditorActionType = AIEditorActionTypes;\nexport enum AIActionVariant {\n\tDEFAULT = 'default',\n\tREPHRASE = 'rephrase',\n}\n\nexport type AIHeaderAction = {\n\ttype: AIEditorActionType;\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\tshowToneDropdown?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tisPrimary?: boolean;\n};\n\n/** Props passed to optional `RightComponent` (e.g. Add variable). */\nexport type WhatsAppEditorRightSlotProps = {\n\t/**\n\t * True while an AI suggestion session is open (accept/reject) or while the model is generating.\n\t * Host should disable extra actions like “Add variable”.\n\t */\n\trightActionsDisabled?: boolean;\n};\n\nexport type WhatsAppTextEditorHeaderProps = {\n\tonActionSelect: (actionType: EditorActionTypes) => void;\n\tRightComponent?: React.ComponentType<WhatsAppEditorRightSlotProps>;\n\tonEmojiClick?: (emoji: string) => void;\n\tactions?: EditorActionTypes[];\n\taiActions?: AIHeaderAction[];\n\tonAIActionClick?: (\n\t\tactionType: AIEditorActionType,\n\t\tactionVariant?: AIActionVariant,\n\t) => void;\n\tonAIToneChange?: (actionType: AIEditorActionType, toneId: string) => void;\n\tonAIInstructionsClick?: () => void;\n\tinstructionActive?: boolean;\n\tdisableAllActions?: boolean;\n\trightActionsDisabled?: boolean;\n};\n\nexport const WhatsAppTextEditorHeader = React.forwardRef<\n\tHTMLTextAreaElement,\n\tWhatsAppTextEditorHeaderProps\n>(\n\t(\n\t\t{\n\t\t\tonActionSelect,\n\t\t\tRightComponent,\n\t\t\tonEmojiClick,\n\t\t\tactions,\n\t\t\taiActions,\n\t\t\tonAIActionClick,\n\t\t\tonAIToneChange,\n\t\t\tonAIInstructionsClick,\n\t\t\tinstructionActive,\n\t\t\tdisableAllActions,\n\t\t\trightActionsDisabled,\n\t\t},\n\t\t_ref,\n\t) => {\n\t\tvoid _ref;\n\t\tconst emojiPickerRef = useRef(null);\n\t\tconst [active, setActive] = useState({\n\t\t\t[EditorActionTypes.BOLD]: false,\n\t\t\t[EditorActionTypes.ITALIC]: false,\n\t\t\t[EditorActionTypes.STRIKETHROUGH]: false,\n\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t});\n\n\t\tconst closeEmojiPicker = useCallback(() => {\n\t\t\tsetActive((prev) => {\n\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t};\n\t\t\t});\n\t\t}, []);\n\n\t\tuseOutside(emojiPickerRef, () => {\n\t\t\tcloseEmojiPicker();\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (disableAllActions) {\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\t\treturn prev;\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}, [disableAllActions]);\n\n\t\tfunction handleClick(\n\t\t\te:\n\t\t\t\t| React.MouseEvent<HTMLDivElement, MouseEvent>\n\t\t\t\t| React.MouseEvent<SVGElement, MouseEvent>,\n\t\t\ttype: EditorActionTypes,\n\t\t) {\n\t\t\te.preventDefault?.();\n\n\t\t\tif (type === EditorActionTypes.EMOJI) {\n\t\t\t\tif (disableAllActions) return;\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: !active.EMOJI,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tonActionSelect(type);\n\t\t}\n\n\t\tif (!actions?.length && !RightComponent && !aiActions?.length) return <></>;\n\n\t\treturn (\n\t\t\t<Container>\n\t\t\t\t{actions?.includes(EditorActionTypes.EMOJI) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Emoji'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.EMOJI}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.EMOJI);\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<EmojiIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.EMOJI)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t{active.EMOJI && (\n\t\t\t\t\t\t\t<EmojiContainer ref={emojiPickerRef}>\n\t\t\t\t\t\t\t\t<EmojiPicker\n\t\t\t\t\t\t\t\t\tonEmojiClick={(data) => {\n\t\t\t\t\t\t\t\t\t\tcloseEmojiPicker();\n\t\t\t\t\t\t\t\t\t\tonEmojiClick?.(data.emoji);\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</EmojiContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t{actions?.includes(EditorActionTypes.BOLD) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Bold'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.BOLD}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.BOLD);\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<BoldIcon\n\t\t\t\t\t\t\t\t\twidth={10}\n\t\t\t\t\t\t\t\t\theight={17}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.BOLD)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.ITALIC) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Italics'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.ITALIC);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tactive={!!active.ITALIC}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ItalicIcon\n\t\t\t\t\t\t\t\t\twidth={9}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.ITALIC)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.STRIKETHROUGH) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Strikethrough'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.STRIKETHROUGH}\n\t\t\t\t\t\t\t\tstyle={{ borderRight: 0 }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.STRIKETHROUGH);\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<StrikeThroughIcon\n\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.STRIKETHROUGH)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{aiActions?.length ? (\n\t\t\t\t\t<AIActionsContainer>\n\t\t\t\t\t\t{aiActions.map((action) => {\n\t\t\t\t\t\t\tif (action.type === AIEditorActionTypes.REPHRASE) {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AIRephraseButton\n\t\t\t\t\t\t\t\t\t\tkey={action.type}\n\t\t\t\t\t\t\t\t\t\tlabel={action.label}\n\t\t\t\t\t\t\t\t\t\tdisabled={disableAllActions || action.disabled}\n\t\t\t\t\t\t\t\t\t\tloading={action.loading}\n\t\t\t\t\t\t\t\t\t\thighlighted={action.highlighted}\n\t\t\t\t\t\t\t\t\t\ttones={action.tones}\n\t\t\t\t\t\t\t\t\t\tselectedToneId={action.selectedToneId}\n\t\t\t\t\t\t\t\t\t\tinstructionActive={instructionActive}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonToneChange={(toneId) => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIToneChange?.(action.type, toneId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonInstructionsClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIInstructionsClick?.();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tshowSecondaryRephraseOption={\n\t\t\t\t\t\t\t\t\t\t\taction.label.toLowerCase() === 'meta safe rewrite'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSecondaryRephraseClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.REPHRASE);\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}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={action.type}>\n\t\t\t\t\t\t\t\t\t<AIButtonGroup\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\tdisableAllActions || action.disabled || action.loading\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\t\t<AIButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\thighlighted={!!action.highlighted || !!action.isPrimary}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={action.disabled || action.loading}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{action.loading ? '...' : action.label}\n\t\t\t\t\t\t\t\t\t\t</AIButton>\n\t\t\t\t\t\t\t\t\t</AIButtonGroup>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</AIActionsContainer>\n\t\t\t\t) : null}\n\t\t\t\t<CustomRightSideContainer>\n\t\t\t\t\t{RightComponent && (\n\t\t\t\t\t\t<RightComponent rightActionsDisabled={!!rightActionsDisabled} />\n\t\t\t\t\t)}\n\t\t\t\t</CustomRightSideContainer>\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nWhatsAppTextEditorHeader.displayName = 'WhatsAppTextEditorHeader';\n"],"names":["EmojiPicker","_jsx","window","import","then","_module","default","getIconColor","isActive","COLORS","background","inverseLight","content","placeholder","Container","_styled","process","env","NODE_ENV","target","label","surface","standard","CustomRightBorder","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ButtonHolder","props","active","inactive","disabled","CustomRightSideContainer","EmojiContainer","AIActionsContainer","AIButtonGroup","stroke","primary","AIButton","highlighted","secondary","undefined","subdued","EditorActionTypes","AIEditorActionTypes","AIActionVariant","WhatsAppTextEditorHeader","React","forwardRef","onActionSelect","RightComponent","onEmojiClick","actions","aiActions","onAIActionClick","onAIToneChange","onAIInstructionsClick","instructionActive","disableAllActions","rightActionsDisabled","_ref","emojiPickerRef","useRef","setActive","useState","BOLD","ITALIC","STRIKETHROUGH","EMOJI","closeEmojiPicker","useCallback","prev","Object","assign","handleClick","e","type","_a","preventDefault","call","useOutside","useEffect","length","_jsxs","children","includes","Tooltip","body","placement","style","marginLeft","onClick","EmojiIcon","width","height","color","ref","data","emoji","_Fragment","BoldIcon","ItalicIcon","borderRight","StrikeThroughIcon","action","REPHRASE","AIRephraseButton","loading","tones","selectedToneId","DEFAULT","onToneChange","toneId","onInstructionsClick","showSecondaryRephraseOption","toLowerCase","onSecondaryRephraseClick","isPrimary","displayName"],"mappings":"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"}
+{"version":3,"file":"WhatsAppTextEditorHeader.js","sources":["../../../../src/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n// import EmojiPicker from 'emoji-picker-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport BoldIcon from '../../assets/icons/bold.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport ItalicIcon from '../../assets/icons/italic.svg';\nimport StrikeThroughIcon from '../../assets/icons/strikeThrough.svg';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport { AIActionToneOption, AIRephraseButton } from './AIRephraseButton';\n\nlet EmojiPicker: any = () => <></>;\nif (typeof window !== 'undefined') {\n\timport('emoji-picker-react').then((_module) => {\n\t\tEmojiPicker = _module.default;\n\t});\n}\n\nconst getIconColor = (isActive: boolean) => {\n\tif (isActive) return COLORS.background.inverseLight;\n\treturn COLORS.content.placeholder;\n};\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 8px 12px;\n\talign-items: center;\n\tborder-radius: 0 0 4px 4px;\n\tgap: 6px;\n\tposition: relative;\n`;\nexport const CustomRightBorder = styled.div`\n\twidth: 2px;\n\theight: 12px;\n\tbackground: #e0e0e0;\n`;\n\nconst ButtonHolder = styled.div<{ active: boolean; disabled?: boolean }>`\n\tpadding: 2px 6px;\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.inactive : 'transparent'};\n\tborder-radius: 4px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.45 : 1)};\n\tdisplay: flex;\n\t:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\tpadding: 3px 6px;\n\t}\n`;\n\nconst CustomRightSideContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: auto;\n`;\n\nconst EmojiContainer = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 8px);\n\tz-index: 1;\n`;\n\nconst AIActionsContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: 8px;\n`;\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 14px;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ highlighted: boolean; disabled?: boolean }>`\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.highlighted ? '#ffe8ef' : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.highlighted ? '#f53f77' : COLORS.content.secondary};\n\tborder-radius: 14px;\n\tpadding: 4px 6px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.disabled ? undefined : COLORS.surface.subdued};\n\t}\n`;\n\nexport enum EditorActionTypes {\n\t'BOLD' = 'BOLD',\n\t'ITALIC' = 'ITALIC',\n\t'STRIKETHROUGH' = 'STRIKETHROUGH',\n\t'EMOJI' = 'EMOJI',\n}\n\nexport enum AIEditorActionTypes {\n\tREPHRASE = 'rephrase',\n\tSHORTEN = 'shorten',\n\tEXPAND = 'expand',\n\tEMOJIFY = 'emojify',\n}\n\nexport type AIEditorActionType = AIEditorActionTypes;\nexport enum AIActionVariant {\n\tDEFAULT = 'default',\n\tREPHRASE = 'rephrase',\n}\n\nexport type AIHeaderAction = {\n\ttype: AIEditorActionType;\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\tshowToneDropdown?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tisPrimary?: boolean;\n};\n\n/** Props passed to optional `RightComponent` (e.g. Add variable). */\nexport type WhatsAppEditorRightSlotProps = {\n\t/**\n\t * True while an AI suggestion session is open (accept/reject) or while the model is generating.\n\t * Host should disable extra actions like “Add variable”.\n\t */\n\trightActionsDisabled?: boolean;\n};\n\nexport type WhatsAppTextEditorHeaderProps = {\n\tonActionSelect: (actionType: EditorActionTypes) => void;\n\tRightComponent?: React.ComponentType<WhatsAppEditorRightSlotProps>;\n\tonEmojiClick?: (emoji: string) => void;\n\tactions?: EditorActionTypes[];\n\taiActions?: AIHeaderAction[];\n\tonAIActionClick?: (\n\t\tactionType: AIEditorActionType,\n\t\tactionVariant?: AIActionVariant,\n\t) => void;\n\tonAIToneChange?: (actionType: AIEditorActionType, toneId: string) => void;\n\tonAIInstructionsClick?: () => void;\n\tinstructionActive?: boolean;\n\tdisableAllActions?: boolean;\n\trightActionsDisabled?: boolean;\n};\n\nexport const WhatsAppTextEditorHeader = React.forwardRef<\n\tHTMLTextAreaElement,\n\tWhatsAppTextEditorHeaderProps\n>(\n\t(\n\t\t{\n\t\t\tonActionSelect,\n\t\t\tRightComponent,\n\t\t\tonEmojiClick,\n\t\t\tactions,\n\t\t\taiActions,\n\t\t\tonAIActionClick,\n\t\t\tonAIToneChange,\n\t\t\tonAIInstructionsClick,\n\t\t\tinstructionActive,\n\t\t\tdisableAllActions,\n\t\t\trightActionsDisabled,\n\t\t},\n\t\t_ref,\n\t) => {\n\t\tvoid _ref;\n\t\tconst emojiPickerRef = useRef(null);\n\t\tconst [active, setActive] = useState({\n\t\t\t[EditorActionTypes.BOLD]: false,\n\t\t\t[EditorActionTypes.ITALIC]: false,\n\t\t\t[EditorActionTypes.STRIKETHROUGH]: false,\n\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t});\n\n\t\tconst closeEmojiPicker = useCallback(() => {\n\t\t\tsetActive((prev) => {\n\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t};\n\t\t\t});\n\t\t}, []);\n\n\t\tuseOutside(emojiPickerRef, () => {\n\t\t\tcloseEmojiPicker();\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (disableAllActions) {\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\t\treturn prev;\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}, [disableAllActions]);\n\n\t\tfunction handleClick(\n\t\t\te:\n\t\t\t\t| React.MouseEvent<HTMLDivElement, MouseEvent>\n\t\t\t\t| React.MouseEvent<SVGElement, MouseEvent>,\n\t\t\ttype: EditorActionTypes,\n\t\t) {\n\t\t\te.preventDefault?.();\n\n\t\t\tif (type === EditorActionTypes.EMOJI) {\n\t\t\t\tif (disableAllActions) return;\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: !active.EMOJI,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tonActionSelect(type);\n\t\t}\n\n\t\tif (!actions?.length && !RightComponent && !aiActions?.length) return <></>;\n\n\t\treturn (\n\t\t\t<Container>\n\t\t\t\t{actions?.includes(EditorActionTypes.EMOJI) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Emoji'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.EMOJI}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.EMOJI);\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<EmojiIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.EMOJI)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t{active.EMOJI && (\n\t\t\t\t\t\t\t<EmojiContainer ref={emojiPickerRef}>\n\t\t\t\t\t\t\t\t<EmojiPicker\n\t\t\t\t\t\t\t\t\tonEmojiClick={(data) => {\n\t\t\t\t\t\t\t\t\t\tcloseEmojiPicker();\n\t\t\t\t\t\t\t\t\t\tonEmojiClick?.(data.emoji);\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</EmojiContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t{actions?.includes(EditorActionTypes.BOLD) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Bold'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.BOLD}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.BOLD);\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<BoldIcon\n\t\t\t\t\t\t\t\t\twidth={10}\n\t\t\t\t\t\t\t\t\theight={17}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.BOLD)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.ITALIC) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Italics'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.ITALIC);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tactive={!!active.ITALIC}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ItalicIcon\n\t\t\t\t\t\t\t\t\twidth={9}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.ITALIC)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.STRIKETHROUGH) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Strikethrough'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.STRIKETHROUGH}\n\t\t\t\t\t\t\t\tstyle={{ borderRight: 0 }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.STRIKETHROUGH);\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<StrikeThroughIcon\n\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.STRIKETHROUGH)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{aiActions?.length ? (\n\t\t\t\t\t<AIActionsContainer>\n\t\t\t\t\t\t{aiActions.map((action) => {\n\t\t\t\t\t\t\tif (action.type === AIEditorActionTypes.REPHRASE) {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AIRephraseButton\n\t\t\t\t\t\t\t\t\t\tkey={action.type}\n\t\t\t\t\t\t\t\t\t\tlabel={action.label}\n\t\t\t\t\t\t\t\t\t\tdisabled={disableAllActions || action.disabled}\n\t\t\t\t\t\t\t\t\t\tloading={action.loading}\n\t\t\t\t\t\t\t\t\t\thighlighted={action.highlighted}\n\t\t\t\t\t\t\t\t\t\ttones={action.tones}\n\t\t\t\t\t\t\t\t\t\tselectedToneId={action.selectedToneId}\n\t\t\t\t\t\t\t\t\t\tinstructionActive={instructionActive}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonToneChange={(toneId) => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIToneChange?.(action.type, toneId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonInstructionsClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIInstructionsClick?.();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tshowSecondaryRephraseOption={\n\t\t\t\t\t\t\t\t\t\t\taction.label.toLowerCase() === 'meta safe rewrite'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSecondaryRephraseClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.REPHRASE);\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}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={action.type}>\n\t\t\t\t\t\t\t\t\t<AIButtonGroup\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\tdisableAllActions || action.disabled || action.loading\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\t\t<AIButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\thighlighted={!!action.highlighted || !!action.isPrimary}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={action.disabled || action.loading}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{action.loading ? '...' : action.label}\n\t\t\t\t\t\t\t\t\t\t</AIButton>\n\t\t\t\t\t\t\t\t\t</AIButtonGroup>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</AIActionsContainer>\n\t\t\t\t) : null}\n\t\t\t\t<CustomRightSideContainer>\n\t\t\t\t\t{RightComponent && (\n\t\t\t\t\t\t<RightComponent rightActionsDisabled={!!rightActionsDisabled} />\n\t\t\t\t\t)}\n\t\t\t\t</CustomRightSideContainer>\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nWhatsAppTextEditorHeader.displayName = 'WhatsAppTextEditorHeader';\n"],"names":["EmojiPicker","_jsx","window","import","then","_module","default","getIconColor","isActive","COLORS","background","inverseLight","content","placeholder","Container","_styled","process","env","NODE_ENV","target","label","surface","standard","CustomRightBorder","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ButtonHolder","props","active","inactive","disabled","CustomRightSideContainer","EmojiContainer","AIActionsContainer","AIButtonGroup","stroke","primary","AIButton","highlighted","secondary","undefined","subdued","EditorActionTypes","AIEditorActionTypes","AIActionVariant","WhatsAppTextEditorHeader","React","forwardRef","_ref2","_ref","onActionSelect","RightComponent","onEmojiClick","actions","aiActions","onAIActionClick","onAIToneChange","onAIInstructionsClick","instructionActive","disableAllActions","rightActionsDisabled","emojiPickerRef","useRef","setActive","useState","BOLD","ITALIC","STRIKETHROUGH","EMOJI","closeEmojiPicker","useCallback","prev","Object","assign","handleClick","e","type","_a","preventDefault","call","useOutside","useEffect","length","_jsxs","children","includes","Tooltip","body","placement","style","marginLeft","onClick","EmojiIcon","width","height","color","ref","data","emoji","_Fragment","BoldIcon","ItalicIcon","borderRight","StrikeThroughIcon","action","REPHRASE","AIRephraseButton","loading","tones","selectedToneId","DEFAULT","onToneChange","toneId","onInstructionsClick","showSecondaryRephraseOption","toLowerCase","onSecondaryRephraseClick","isPrimary","displayName"],"mappings":"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"}

package/dist/esm/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/alert.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{StyledModal as s}from"../modals/styledModal.js";import{TitleMedium as i,BodySecondary as r,TitleSmall as c,BodyCaption as a}from"../TypographyStyle.js";import{Header as h,IconContainer as d,Description as m,StepsContainer as p,EachStep as y,BulletWrapper as g,Bullet as u}from"./AccessTokenTroubleshootDialog.styles.js";const j=({info:n,hideBullet:o,last:l})=>t(y,Object.assign({last:l},{children:[!o&&e(g,{children:e(u,{})}),e(a,{dangerouslySetInnerHTML:{__html:n}})]})),T=({onCancel:a,titleIconContainerStyles:y,isModalOpen:g,title:u,desc:T,primaryButton:f,TitleIcon:b,stepsDetails:B,titleIconColor:C,secondaryButtonText:I,content:O})=>t(s,Object.assign({open:!!g,primaryButton:f?Object.assign({},f):void 0,secondaryButton:{buttonText:null!=I?I:"Cancel",onClick:a,buttonType:"tertiaryGray"},onClose:a},{children:[t(h,{children:[e(d,Object.assign({style:Object.assign({},y)},{children:b?e(b,{width:18,height:18,color:C}):e(o,{width:18,height:18,color:l.content.negative})})),e(i,{children:u})]}),e(m,{children:e(r,{dangerouslySetInnerHTML:{__html:T}})}),t(p,{children:[B&&!!B.length&&t(n,{children:[e(c,{children:"Follow the steps:"}),B.map(((t,n)=>e(j,{info:t.info,hideBullet:t.hideBullet,last:B.length-1===n},n)))]}),O&&e(r,{dangerouslySetInnerHTML:{__html:O}})]})]}));export{T as AccessTokenTroubleshootDialog};
+import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/alert.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{StyledModal as r}from"../modals/styledModal.js";import{TitleMedium as s,BodySecondary as i,TitleSmall as c,BodyCaption as a}from"../TypographyStyle.js";import{Header as h,IconContainer as d,Description as m,StepsContainer as p,EachStep as u,BulletWrapper as y,Bullet as g}from"./AccessTokenTroubleshootDialog.styles.js";const j=n=>{let{info:o,hideBullet:l,last:r}=n;return t(u,Object.assign({last:r},{children:[!l&&e(y,{children:e(g,{})}),e(a,{dangerouslySetInnerHTML:{__html:o}})]}))},T=a=>{let{onCancel:u,titleIconContainerStyles:y,isModalOpen:g,title:T,desc:f,primaryButton:b,TitleIcon:B,stepsDetails:C,titleIconColor:I,secondaryButtonText:O,content:_}=a;return t(r,Object.assign({open:!!g,primaryButton:b?Object.assign({},b):void 0,secondaryButton:{buttonText:null!=O?O:"Cancel",onClick:u,buttonType:"tertiaryGray"},onClose:u},{children:[t(h,{children:[e(d,Object.assign({style:Object.assign({},y)},{children:B?e(B,{width:18,height:18,color:I}):e(o,{width:18,height:18,color:l.content.negative})})),e(s,{children:T})]}),e(m,{children:e(i,{dangerouslySetInnerHTML:{__html:f}})}),t(p,{children:[C&&!!C.length&&t(n,{children:[e(c,{children:"Follow the steps:"}),C.map(((t,n)=>e(j,{info:t.info,hideBullet:t.hideBullet,last:C.length-1===n},n)))]}),_&&e(i,{dangerouslySetInnerHTML:{__html:_}})]})]}))};export{T as AccessTokenTroubleshootDialog};
 //# sourceMappingURL=AccessTokenTroubleshootDialog.js.map

package/dist/esm/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessTokenTroubleshootDialog.js","sources":["../../../../src/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.tsx"],"sourcesContent":["import AlertIcon from '@src/assets/icons/alert.svg';\nimport React, { CSSProperties } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\nimport { StyledModal } from '../modals';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBullet,\n\tBulletWrapper,\n\tDescription,\n\tEachStep,\n\tHeader,\n\tIconContainer,\n\tStepsContainer,\n} from './AccessTokenTroubleshootDialog.styles';\n\nexport interface StepsDetails {\n\tinfo: string;\n\thideBullet?: boolean;\n}\n\nconst Step: React.FC<{\n\tinfo: string;\n\thideBullet?: boolean;\n\tlast?: boolean;\n}> = ({ info, hideBullet, last }) => {\n\treturn (\n\t\t<EachStep last={last}>\n\t\t\t{!hideBullet && (\n\t\t\t\t<BulletWrapper>\n\t\t\t\t\t<Bullet />\n\t\t\t\t</BulletWrapper>\n\t\t\t)}\n\t\t\t<BodyCaption dangerouslySetInnerHTML={{ __html: info }} />\n\t\t</EachStep>\n\t);\n};\n\nexport const AccessTokenTroubleshootDialog: React.FC<{\n\tonCancel: () => void;\n\ttitleIconContainerStyles?: CSSProperties;\n\ttitle: string;\n\tTitleIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tdesc: string;\n\tprimaryButton: ButtonProps | undefined;\n\tisModalOpen: boolean;\n\tstepsDetails?: StepsDetails[];\n\ttitleIconColor?: string;\n\tcontent?: string;\n\tsecondaryButtonText?: string;\n}> = ({\n\tonCancel,\n\ttitleIconContainerStyles,\n\tisModalOpen,\n\ttitle,\n\tdesc,\n\tprimaryButton,\n\tTitleIcon,\n\tstepsDetails,\n\ttitleIconColor,\n\tsecondaryButtonText,\n\tcontent,\n}) => {\n\treturn (\n\t\t<StyledModal\n\t\t\topen={!!isModalOpen}\n\t\t\tprimaryButton={\n\t\t\t\tprimaryButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...primaryButton,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\tbuttonText: secondaryButtonText ?? 'Cancel',\n\t\t\t\tonClick: onCancel,\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t}}\n\t\t\tonClose={onCancel}\n\t\t>\n\t\t\t<Header>\n\t\t\t\t<IconContainer style={{ ...titleIconContainerStyles }}>\n\t\t\t\t\t{TitleIcon ? (\n\t\t\t\t\t\t<TitleIcon width={18} height={18} color={titleIconColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<AlertIcon width={18} height={18} color={COLORS.content.negative} />\n\t\t\t\t\t)}\n\t\t\t\t</IconContainer>\n\t\t\t\t<TitleMedium>{title}</TitleMedium>\n\t\t\t</Header>\n\t\t\t<Description>\n\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: desc }} />\n\t\t\t</Description>\n\t\t\t<StepsContainer>\n\t\t\t\t{stepsDetails && !!stepsDetails.length && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<TitleSmall>Follow the steps:</TitleSmall>\n\t\t\t\t\t\t{stepsDetails.map((step, ind) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Step\n\t\t\t\t\t\t\t\t\tkey={ind}\n\t\t\t\t\t\t\t\t\tinfo={step.info}\n\t\t\t\t\t\t\t\t\thideBullet={step.hideBullet}\n\t\t\t\t\t\t\t\t\tlast={stepsDetails.length - 1 === ind}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: content }} />\n\t\t\t\t)}\n\t\t\t</StepsContainer>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["Step","info","hideBullet","last","_jsxs","EachStep","Object","assign","children","_jsx","BulletWrapper","Bullet","BodyCaption","dangerouslySetInnerHTML","__html","AccessTokenTroubleshootDialog","onCancel","titleIconContainerStyles","isModalOpen","title","desc","primaryButton","TitleIcon","stepsDetails","titleIconColor","secondaryButtonText","content","StyledModal","open","undefined","secondaryButton","buttonText","onClick","buttonType","onClose","Header","IconContainer","style","width","height","color","AlertIcon","COLORS","negative","TitleMedium","Description","BodySecondary","StepsContainer","length","_Fragment","TitleSmall","map","step","ind"],"mappings":"weA0BA,MAAMA,EAIDA,EAAGC,OAAMC,aAAYC,UAExBC,EAACC,EAAQC,OAAAC,OAAA,CAACJ,KAAMA,GACd,CAAAK,SAAA,EAACN,GACDO,EAACC,YACAD,EAACE,EAAS,MAGZF,EAACG,GAAYC,wBAAyB,CAAEC,OAAQb,SAKtCc,EAYRA,EACJC,WACAC,2BACAC,cACAC,QACAC,OACAC,gBACAC,YACAC,eACAC,iBACAC,sBACAC,aAGCtB,EAACuB,EAAWrB,OAAAC,OAAA,CACXqB,OAAQV,EACRG,cACCA,EACEf,OAAAC,OAAA,CAAA,EACIc,QAEHQ,EAEJC,gBAAiB,CAChBC,WAAYN,QAAAA,EAAuB,SACnCO,QAAShB,EACTiB,WAAY,gBAEbC,QAASlB,GAET,CAAAR,SAAA,CAAAJ,EAAC+B,EACA,CAAA3B,SAAA,CAAAC,EAAC2B,EAAa9B,OAAAC,OAAA,CAAC8B,MAAK/B,OAAAC,OAAA,CAAA,EAAOU,IACzB,CAAAT,SAAAc,EACAb,EAACa,EAAS,CAACgB,MAAO,GAAIC,OAAQ,GAAIC,MAAOhB,IAEzCf,EAACgC,EAAU,CAAAH,MAAO,GAAIC,OAAQ,GAAIC,MAAOE,EAAOhB,QAAQiB,cAG1DlC,EAACmC,EAAa,CAAApC,SAAAW,OAEfV,EAACoC,EACA,CAAArC,SAAAC,EAACqC,EAAa,CAACjC,wBAAyB,CAAEC,OAAQM,OAEnDhB,EAAC2C,EACC,CAAAvC,SAAA,CAAAe,KAAkBA,EAAayB,QAC/B5C,EAAA6C,EAAA,CAAAzC,SAAA,CACCC,EAACyC,EAAU,CAAA1C,SAAA,sBACVe,EAAa4B,KAAI,CAACC,EAAMC,IAEvB5C,EAACT,EAAI,CAEJC,KAAMmD,EAAKnD,KACXC,WAAYkD,EAAKlD,WACjBC,KAAMoB,EAAayB,OAAS,IAAMK,GAH7BA,QAST3B,GACAjB,EAACqC,EAAc,CAAAjC,wBAAyB,CAAEC,OAAQY"}
+{"version":3,"file":"AccessTokenTroubleshootDialog.js","sources":["../../../../src/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.tsx"],"sourcesContent":["import AlertIcon from '@src/assets/icons/alert.svg';\nimport React, { CSSProperties } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\nimport { StyledModal } from '../modals';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBullet,\n\tBulletWrapper,\n\tDescription,\n\tEachStep,\n\tHeader,\n\tIconContainer,\n\tStepsContainer,\n} from './AccessTokenTroubleshootDialog.styles';\n\nexport interface StepsDetails {\n\tinfo: string;\n\thideBullet?: boolean;\n}\n\nconst Step: React.FC<{\n\tinfo: string;\n\thideBullet?: boolean;\n\tlast?: boolean;\n}> = ({ info, hideBullet, last }) => {\n\treturn (\n\t\t<EachStep last={last}>\n\t\t\t{!hideBullet && (\n\t\t\t\t<BulletWrapper>\n\t\t\t\t\t<Bullet />\n\t\t\t\t</BulletWrapper>\n\t\t\t)}\n\t\t\t<BodyCaption dangerouslySetInnerHTML={{ __html: info }} />\n\t\t</EachStep>\n\t);\n};\n\nexport const AccessTokenTroubleshootDialog: React.FC<{\n\tonCancel: () => void;\n\ttitleIconContainerStyles?: CSSProperties;\n\ttitle: string;\n\tTitleIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tdesc: string;\n\tprimaryButton: ButtonProps | undefined;\n\tisModalOpen: boolean;\n\tstepsDetails?: StepsDetails[];\n\ttitleIconColor?: string;\n\tcontent?: string;\n\tsecondaryButtonText?: string;\n}> = ({\n\tonCancel,\n\ttitleIconContainerStyles,\n\tisModalOpen,\n\ttitle,\n\tdesc,\n\tprimaryButton,\n\tTitleIcon,\n\tstepsDetails,\n\ttitleIconColor,\n\tsecondaryButtonText,\n\tcontent,\n}) => {\n\treturn (\n\t\t<StyledModal\n\t\t\topen={!!isModalOpen}\n\t\t\tprimaryButton={\n\t\t\t\tprimaryButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...primaryButton,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\tbuttonText: secondaryButtonText ?? 'Cancel',\n\t\t\t\tonClick: onCancel,\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t}}\n\t\t\tonClose={onCancel}\n\t\t>\n\t\t\t<Header>\n\t\t\t\t<IconContainer style={{ ...titleIconContainerStyles }}>\n\t\t\t\t\t{TitleIcon ? (\n\t\t\t\t\t\t<TitleIcon width={18} height={18} color={titleIconColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<AlertIcon width={18} height={18} color={COLORS.content.negative} />\n\t\t\t\t\t)}\n\t\t\t\t</IconContainer>\n\t\t\t\t<TitleMedium>{title}</TitleMedium>\n\t\t\t</Header>\n\t\t\t<Description>\n\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: desc }} />\n\t\t\t</Description>\n\t\t\t<StepsContainer>\n\t\t\t\t{stepsDetails && !!stepsDetails.length && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<TitleSmall>Follow the steps:</TitleSmall>\n\t\t\t\t\t\t{stepsDetails.map((step, ind) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Step\n\t\t\t\t\t\t\t\t\tkey={ind}\n\t\t\t\t\t\t\t\t\tinfo={step.info}\n\t\t\t\t\t\t\t\t\thideBullet={step.hideBullet}\n\t\t\t\t\t\t\t\t\tlast={stepsDetails.length - 1 === ind}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: content }} />\n\t\t\t\t)}\n\t\t\t</StepsContainer>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["Step","_ref","info","hideBullet","last","_jsxs","EachStep","Object","assign","children","_jsx","BulletWrapper","Bullet","BodyCaption","dangerouslySetInnerHTML","__html","AccessTokenTroubleshootDialog","_ref2","onCancel","titleIconContainerStyles","isModalOpen","title","desc","primaryButton","TitleIcon","stepsDetails","titleIconColor","secondaryButtonText","content","StyledModal","open","undefined","secondaryButton","buttonText","onClick","buttonType","onClose","Header","IconContainer","style","width","height","color","AlertIcon","COLORS","negative","TitleMedium","Description","BodySecondary","StepsContainer","length","_Fragment","TitleSmall","map","step","ind"],"mappings":"weA0BA,MAAMA,EAIDC,IAA+B,IAA9BC,KAAEA,EAAIC,WAAEA,EAAUC,KAAEA,GAAMH,EAC/B,OACCI,EAACC,EAAQC,OAAAC,OAAA,CAACJ,KAAMA,GACd,CAAAK,SAAA,EAACN,GACDO,EAACC,YACAD,EAACE,EAAS,MAGZF,EAACG,GAAYC,wBAAyB,CAAEC,OAAQb,QACtC,EAIAc,EAYRC,IAYA,IAZCC,SACLA,EAAQC,yBACRA,EAAwBC,YACxBA,EAAWC,MACXA,EAAKC,KACLA,EAAIC,cACJA,EAAaC,UACbA,EAASC,aACTA,EAAYC,eACZA,EAAcC,oBACdA,EAAmBC,QACnBA,GACAX,EACA,OACCZ,EAACwB,EAAWtB,OAAAC,OAAA,CACXsB,OAAQV,EACRG,cACCA,EACEhB,OAAAC,OAAA,CAAA,EACIe,QAEHQ,EAEJC,gBAAiB,CAChBC,WAAYN,QAAAA,EAAuB,SACnCO,QAAShB,EACTiB,WAAY,gBAEbC,QAASlB,GAET,CAAAT,SAAA,CAAAJ,EAACgC,EACA,CAAA5B,SAAA,CAAAC,EAAC4B,EAAa/B,OAAAC,OAAA,CAAC+B,MAAKhC,OAAAC,OAAA,CAAA,EAAOW,IACzB,CAAAV,SAAAe,EACAd,EAACc,EAAS,CAACgB,MAAO,GAAIC,OAAQ,GAAIC,MAAOhB,IAEzChB,EAACiC,EAAU,CAAAH,MAAO,GAAIC,OAAQ,GAAIC,MAAOE,EAAOhB,QAAQiB,cAG1DnC,EAACoC,EAAa,CAAArC,SAAAY,OAEfX,EAACqC,EACA,CAAAtC,SAAAC,EAACsC,EAAa,CAAClC,wBAAyB,CAAEC,OAAQO,OAEnDjB,EAAC4C,EACC,CAAAxC,SAAA,CAAAgB,KAAkBA,EAAayB,QAC/B7C,EAAA8C,EAAA,CAAA1C,SAAA,CACCC,EAAC0C,EAAU,CAAA3C,SAAA,sBACVgB,EAAa4B,KAAI,CAACC,EAAMC,IAEvB7C,EAACV,EAAI,CAEJE,KAAMoD,EAAKpD,KACXC,WAAYmD,EAAKnD,WACjBC,KAAMqB,EAAayB,OAAS,IAAMK,GAH7BA,QAST3B,GACAlB,EAACsC,EAAc,CAAAlC,wBAAyB,CAAEC,OAAQa,WAGvC"}

package/dist/esm/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import React, { LegacyRef, useEffect, useRef, useState } from 'react';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { Button } from '../button';\nimport { IconButton } from '../icon-button';\nimport { AccordionProps } from './Accordion.model';\nimport AccordionStyle, {\n\tAccordionHeaderGroup,\n\tAccordionHeaderGroup2,\n} from './Accordion.style';\nimport BikAccordionArrow from './AccordionArrow';\n\nexport const BikAccordion: React.FC<AccordionProps> = (props) => {\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst accordionArrowRef = useRef<HTMLDivElement>(null);\n\tconst accordionContentRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (props.autoOpen) {\n\t\t\ttoggleAccordion(props.autoOpen, {});\n\t\t}\n\t}, [props.autoOpen]);\n\n\t// Listen to changes in the isOpen prop to control the accordion state\n\tuseEffect(() => {\n\t\tif (props.isOpen !== undefined) {\n\t\t\ttoggleAccordion(props.isOpen, {});\n\t\t}\n\t}, [props.isOpen]);\n\n\tconst toggleAccordion = (state: boolean, event: any) => {\n\t\tif (!accordionContentRef.current || !accordionArrowRef.current) return;\n\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update state only if it's different from the current state\n\t\tif (state !== isActive) {\n\t\t\tsetIsActive(state);\n\t\t}\n\n\t\tif (state) {\n\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t(props.childrenMaxHeight ?? accordionContentRef.current.scrollHeight) +\n\t\t\t\t'px';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(180deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition =\n\t\t\t\t'max-height 0.25s ease-in-out';\n\t\t} else {\n\t\t\taccordionContentRef.current.style.maxHeight = '';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(0deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition = 'padding 0s';\n\t\t}\n\n\t\tprops.onToggleAccordion?.(state);\n\t};\n\n\t// Monitor changes in accordion content\n\tuseEffect(() => {\n\t\tconst observer = new MutationObserver(() => {\n\t\t\tif (isActive && accordionContentRef.current) {\n\t\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current.scrollHeight + 'px';\n\t\t\t}\n\t\t});\n\n\t\tif (accordionContentRef.current) {\n\t\t\tobserver.observe(accordionContentRef.current, {\n\t\t\t\tchildList: true,\n\t\t\t\tsubtree: true,\n\t\t\t});\n\t\t}\n\n\t\t// Cleanup observer on unmount\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [isActive]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tisActive &&\n\t\t\tprops?.refresh &&\n\t\t\taccordionContentRef?.current?.scrollHeight &&\n\t\t\t!props.childrenMaxHeight\n\t\t) {\n\t\t\tsetTimeout(() => {\n\t\t\t\taccordionContentRef.current!.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current!.scrollHeight + 'px';\n\t\t\t}, 100);\n\t\t}\n\t}, [isActive, props?.refresh, accordionContentRef?.current?.scrollHeight]);\n\n\treturn (\n\t\t<AccordionStyle\n\t\t\tclassName=\"accordion\"\n\t\t\tisActive={isActive}\n\t\t\twidth={props?.width}\n\t\t\tcontentMargin={props?.contentMargin}\n\t\t\theaderPadding={props.headerPadding}\n\t\t\tskipHoverState={props.skipHoverHeader}\n\t\t\tshowBorders={props.showBorders}\n\t\t\tborderColor={props.borderColor}\n\t\t\tbackgroundColor={props.backgroundColor}\n\t\t\topenDirection={props.openDirection}\n\t\t\tborderRadius={props.borderRadius}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`accordion__overview ${isActive ? 'active' : ''}`}\n\t\t\t\tstyle={props?.containerStyle ?? {}}\n\t\t\t\tonClick={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\tonKeyDown={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t>\n\t\t\t\t{!props.rightActionComponent && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"accordion__overview__header\"\n\t\t\t\t\t\t\tstyle={props.headerStyles ?? {}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AccordionHeaderGroup>\n\t\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.buttonLinkText && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tbuttonText={props.buttonLinkText}\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\t\t\tdarkMode\n\t\t\t\t\t\t\t\t\t\tonClick={props.onButtonLinkClick}\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</AccordionHeaderGroup>\n\t\t\t\t\t\t\t<AccordionHeaderGroup2>\n\t\t\t\t\t\t\t\t{props.headerButtons && (\n\t\t\t\t\t\t\t\t\t<div className=\"accordion__overview__header-buttons\">\n\t\t\t\t\t\t\t\t\t\t{props.headerButtons?.map((button) => (\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tkey={button.title}\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={button.icon}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tbutton.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={button.style}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={button.title}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</AccordionHeaderGroup2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props?.subHeader ? props?.subHeader : null}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{props.rightActionComponent && (\n\t\t\t\t\t<div className=\"accordion__overview__header\">\n\t\t\t\t\t\t<div className=\"accordion__overview__title-wrapper\">\n\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter') e.stopPropagation();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.rightActionComponent}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props?.caption && (\n\t\t\t\t\t<div className=\"accordion__overview__caption\">\n\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t<div style={props.captionStyle}>{props.caption}</div>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tref={accordionContentRef as LegacyRef<HTMLDivElement>}\n\t\t\t\tclassName=\"accordion__content\"\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t</AccordionStyle>\n\t);\n};\n"],"names":["BikAccordion","props","isActive","setIsActive","useState","accordionArrowRef","useRef","accordionContentRef","useEffect","autoOpen","toggleAccordion","undefined","isOpen","state","event","current","type","key","style","maxHeight","_a","childrenMaxHeight","scrollHeight","transform","transition","_b","onToggleAccordion","call","observer","MutationObserver","observe","childList","subtree","disconnect","refresh","setTimeout","_jsxs","AccordionStyle","Object","assign","className","width","contentMargin","headerPadding","skipHoverState","skipHoverHeader","showBorders","borderColor","backgroundColor","openDirection","borderRadius","children","containerStyle","onClick","onKeyDown","role","tabIndex","rightActionComponent","_Fragment","_c","headerStyles","AccordionHeaderGroup","header","_jsx","TitleRegular","buttonLinkText","Button","buttonText","buttonType","darkMode","onButtonLinkClick","AccordionHeaderGroup2","headerButtons","_d","map","button","IconButton","Icon","icon","e","stopPropagation","height","title","BikAccordionArrow","arrowColor","isNewIcon","ref","subHeader","caption","BodySecondary","captionStyle"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import React, { LegacyRef, useEffect, useRef, useState } from 'react';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { Button } from '../button';\nimport { IconButton } from '../icon-button';\nimport { AccordionProps } from './Accordion.model';\nimport AccordionStyle, {\n\tAccordionHeaderGroup,\n\tAccordionHeaderGroup2,\n} from './Accordion.style';\nimport BikAccordionArrow from './AccordionArrow';\n\nexport const BikAccordion: React.FC<AccordionProps> = (props) => {\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst accordionArrowRef = useRef<HTMLDivElement>(null);\n\tconst accordionContentRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (props.autoOpen) {\n\t\t\ttoggleAccordion(props.autoOpen, {});\n\t\t}\n\t}, [props.autoOpen]);\n\n\t// Listen to changes in the isOpen prop to control the accordion state\n\tuseEffect(() => {\n\t\tif (props.isOpen !== undefined) {\n\t\t\ttoggleAccordion(props.isOpen, {});\n\t\t}\n\t}, [props.isOpen]);\n\n\tconst toggleAccordion = (state: boolean, event: any) => {\n\t\tif (!accordionContentRef.current || !accordionArrowRef.current) return;\n\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update state only if it's different from the current state\n\t\tif (state !== isActive) {\n\t\t\tsetIsActive(state);\n\t\t}\n\n\t\tif (state) {\n\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t(props.childrenMaxHeight ?? accordionContentRef.current.scrollHeight) +\n\t\t\t\t'px';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(180deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition =\n\t\t\t\t'max-height 0.25s ease-in-out';\n\t\t} else {\n\t\t\taccordionContentRef.current.style.maxHeight = '';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(0deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition = 'padding 0s';\n\t\t}\n\n\t\tprops.onToggleAccordion?.(state);\n\t};\n\n\t// Monitor changes in accordion content\n\tuseEffect(() => {\n\t\tconst observer = new MutationObserver(() => {\n\t\t\tif (isActive && accordionContentRef.current) {\n\t\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current.scrollHeight + 'px';\n\t\t\t}\n\t\t});\n\n\t\tif (accordionContentRef.current) {\n\t\t\tobserver.observe(accordionContentRef.current, {\n\t\t\t\tchildList: true,\n\t\t\t\tsubtree: true,\n\t\t\t});\n\t\t}\n\n\t\t// Cleanup observer on unmount\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [isActive]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tisActive &&\n\t\t\tprops?.refresh &&\n\t\t\taccordionContentRef?.current?.scrollHeight &&\n\t\t\t!props.childrenMaxHeight\n\t\t) {\n\t\t\tsetTimeout(() => {\n\t\t\t\taccordionContentRef.current!.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current!.scrollHeight + 'px';\n\t\t\t}, 100);\n\t\t}\n\t}, [isActive, props?.refresh, accordionContentRef?.current?.scrollHeight]);\n\n\treturn (\n\t\t<AccordionStyle\n\t\t\tclassName=\"accordion\"\n\t\t\tisActive={isActive}\n\t\t\twidth={props?.width}\n\t\t\tcontentMargin={props?.contentMargin}\n\t\t\theaderPadding={props.headerPadding}\n\t\t\tskipHoverState={props.skipHoverHeader}\n\t\t\tshowBorders={props.showBorders}\n\t\t\tborderColor={props.borderColor}\n\t\t\tbackgroundColor={props.backgroundColor}\n\t\t\topenDirection={props.openDirection}\n\t\t\tborderRadius={props.borderRadius}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`accordion__overview ${isActive ? 'active' : ''}`}\n\t\t\t\tstyle={props?.containerStyle ?? {}}\n\t\t\t\tonClick={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\tonKeyDown={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t>\n\t\t\t\t{!props.rightActionComponent && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"accordion__overview__header\"\n\t\t\t\t\t\t\tstyle={props.headerStyles ?? {}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AccordionHeaderGroup>\n\t\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.buttonLinkText && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tbuttonText={props.buttonLinkText}\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\t\t\tdarkMode\n\t\t\t\t\t\t\t\t\t\tonClick={props.onButtonLinkClick}\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</AccordionHeaderGroup>\n\t\t\t\t\t\t\t<AccordionHeaderGroup2>\n\t\t\t\t\t\t\t\t{props.headerButtons && (\n\t\t\t\t\t\t\t\t\t<div className=\"accordion__overview__header-buttons\">\n\t\t\t\t\t\t\t\t\t\t{props.headerButtons?.map((button) => (\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tkey={button.title}\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={button.icon}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tbutton.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={button.style}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={button.title}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</AccordionHeaderGroup2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props?.subHeader ? props?.subHeader : null}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{props.rightActionComponent && (\n\t\t\t\t\t<div className=\"accordion__overview__header\">\n\t\t\t\t\t\t<div className=\"accordion__overview__title-wrapper\">\n\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter') e.stopPropagation();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.rightActionComponent}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props?.caption && (\n\t\t\t\t\t<div className=\"accordion__overview__caption\">\n\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t<div style={props.captionStyle}>{props.caption}</div>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tref={accordionContentRef as LegacyRef<HTMLDivElement>}\n\t\t\t\tclassName=\"accordion__content\"\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t</AccordionStyle>\n\t);\n};\n"],"names":["BikAccordion","props","isActive","setIsActive","useState","accordionArrowRef","useRef","accordionContentRef","useEffect","autoOpen","toggleAccordion","undefined","isOpen","state","event","current","type","key","style","maxHeight","_a","childrenMaxHeight","scrollHeight","transform","transition","_b","onToggleAccordion","call","observer","MutationObserver","observe","childList","subtree","disconnect","refresh","setTimeout","_jsxs","AccordionStyle","Object","assign","className","width","contentMargin","headerPadding","skipHoverState","skipHoverHeader","showBorders","borderColor","backgroundColor","openDirection","borderRadius","children","containerStyle","onClick","onKeyDown","role","tabIndex","rightActionComponent","_Fragment","_c","headerStyles","AccordionHeaderGroup","header","_jsx","TitleRegular","buttonLinkText","Button","buttonText","buttonType","darkMode","onButtonLinkClick","AccordionHeaderGroup2","headerButtons","_d","map","button","IconButton","Icon","icon","e","stopPropagation","height","title","BikAccordionArrow","arrowColor","isNewIcon","ref","subHeader","caption","BodySecondary","captionStyle"],"mappings":"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"}

package/dist/esm/components/action-button/ActionButton.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.styled.js","sources":["../../../../src/components/action-button/ActionButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS } from '@src/constants/Theme';\n\nexport const ActionButtonContainer = styled.div<{\n\tisSelected: boolean;\n\tisError: boolean;\n\tborder: string;\n\tisConfigured: boolean;\n\twidth?: string;\n}>`\n\twidth: ${(props) => props.width ?? '100%'};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 14px 0px;\n\tbox-shadow: ${(props) =>\n\t\tprops.isConfigured || props.isSelected || props.isError\n\t\t\t? '0px 2px 8px 0px #0000001f'\n\t\t\t: ''};\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.border ?? `1px solid ${BASE_COLORS.grayscale['200']}`};\n\tcursor: pointer;\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected || props.isError ? '' : BASE_COLORS.grayscale['200']};\n\t\tborder: ${(props) =>\n\t\t\tprops.isSelected || props.isError\n\t\t\t\t? ''\n\t\t\t\t: props.isConfigured\n\t\t\t\t? `1px solid ${BASE_COLORS.grayscale['400']}`\n\t\t\t\t: `1px dashed ${BASE_COLORS.grayscale['400']}`};\n\t}\n\n\t.action__icon {\n\t\theight: 20px;\n\t\twidth: 20px;\n\t}\n`;\n"],"names":["ActionButtonContainer","styled","div","props","_a","width","isConfigured","isSelected","isError","border","BASE_COLORS","grayscale"],"mappings":"wFAGaA,MAAAA,EAAwBC,EAAOC,GAM1C;UACSC,IAAS,IAAAC,EAAC,OAAW,QAAXA,EAAAD,EAAME,aAAK,IAAAD,EAAAA,EAAI,MAAM;;;;;;;eAO1BD,GACdA,EAAMG,cAAgBH,EAAMI,YAAcJ,EAAMK,QAC7C,4BACA;;;WAGOL,UACV,eAAAC,EAAAD,EAAMM,sBAAU,aAAaC,EAAYC,UAAU,MAAQ;;;sBAGtCR,GACpBA,EAAMI,YAAcJ,EAAMK,QAAU,GAAKE,EAAYC,UAAU;YACrDR,GACVA,EAAMI,YAAcJ,EAAMK,QACvB,GACAL,EAAMG,aACN,aAAaI,EAAYC,UAAU,OACnC,cAAcD,EAAYC,UAAU;;;;;;;"}
+{"version":3,"file":"ActionButton.styled.js","sources":["../../../../src/components/action-button/ActionButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS } from '@src/constants/Theme';\n\nexport const ActionButtonContainer = styled.div<{\n\tisSelected: boolean;\n\tisError: boolean;\n\tborder: string;\n\tisConfigured: boolean;\n\twidth?: string;\n}>`\n\twidth: ${(props) => props.width ?? '100%'};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 14px 0px;\n\tbox-shadow: ${(props) =>\n\t\tprops.isConfigured || props.isSelected || props.isError\n\t\t\t? '0px 2px 8px 0px #0000001f'\n\t\t\t: ''};\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.border ?? `1px solid ${BASE_COLORS.grayscale['200']}`};\n\tcursor: pointer;\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected || props.isError ? '' : BASE_COLORS.grayscale['200']};\n\t\tborder: ${(props) =>\n\t\t\tprops.isSelected || props.isError\n\t\t\t\t? ''\n\t\t\t\t: props.isConfigured\n\t\t\t\t? `1px solid ${BASE_COLORS.grayscale['400']}`\n\t\t\t\t: `1px dashed ${BASE_COLORS.grayscale['400']}`};\n\t}\n\n\t.action__icon {\n\t\theight: 20px;\n\t\twidth: 20px;\n\t}\n`;\n"],"names":["ActionButtonContainer","styled","div","props","_a","width","isConfigured","isSelected","isError","border","BASE_COLORS","grayscale"],"mappings":"wFAGaA,MAAAA,EAAwBC,EAAOC,GAM1C;UACSC,IAAS,IAAAC,EAAC,OAAW,QAAXA,EAAAD,EAAME,aAAK,IAAAD,EAAAA,EAAI,MAAM;;;;;;;eAO1BD,GACdA,EAAMG,cAAgBH,EAAMI,YAAcJ,EAAMK,QAC7C,4BACA;;;WAGOL,UACV,eAAAC,EAAAD,EAAMM,sBAAuB,aAAAC,EAAYC,UAAU,MAAQ;;;sBAGtCR,GACpBA,EAAMI,YAAcJ,EAAMK,QAAU,GAAKE,EAAYC,UAAU;YACrDR,GACVA,EAAMI,YAAcJ,EAAMK,QACvB,GACAL,EAAMG,0BACOI,EAAYC,UAAU,qBACrBD,EAAYC,UAAU;;;;;;;"}

package/dist/esm/components/action-button/ActionButtons.js

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as o}from"react/jsx-runtime";import{BASE_COLORS as e}from"../../constants/Theme.js";import s from"../../assets/icons/similar.svg.js";import{BodyPrimary as i}from"../TypographyStyle.js";import{ActionButtonContainer as t}from"./ActionButton.styled.js";const c=({state:c,buttonText:l,icon:a=s,isSelected:d,isError:n,onClick:g})=>{const{color:b,border:p}="CONFIGURED"===c?(({isSelected:r,isError:o})=>r&&o?{color:e.negative[700],border:`1px solid ${e.negative[700]}`}:r?{color:e.brand[500],border:`1px solid ${e.brand[500]}`}:o?{color:e.grayscale[900],border:`1px solid ${e.negative[700]}`}:{color:e.grayscale[900],border:`1px solid ${e.grayscale[200]}`})({isSelected:d,isError:n}):(({isSelected:r,isError:o})=>r&&o?{color:e.negative[700],border:`1px solid ${e.negative[700]}`}:r?{color:e.brand[500],border:`1px solid ${e.brand[500]}`}:o?{color:e.grayscale[700],border:`1px solid ${e.negative[700]}`}:{color:e.grayscale[700],border:`1px dashed ${e.grayscale[200]}`})({isSelected:d,isError:n}),m={height:20,width:20,color:b,style:{display:"block"},className:"icon"};return r(t,Object.assign({isSelected:d,isError:n,border:p,isConfigured:"CONFIGURED"===c,onClick:g},{children:[o("div",Object.assign({className:"action__icon"},{children:o(a,Object.assign({},m))})),o(i,Object.assign({style:{fontWeight:600,color:b}},{children:l}))]}))};export{c as ActionButtons};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{BASE_COLORS as o}from"../../constants/Theme.js";import s from"../../assets/icons/similar.svg.js";import{BodyPrimary as i}from"../TypographyStyle.js";import{ActionButtonContainer as t}from"./ActionButton.styled.js";const l=l=>{let{state:c,buttonText:a,icon:d=s,isSelected:n,isError:g,onClick:b}=l;const{color:p,border:m}="CONFIGURED"===c?(r=>{let{isSelected:e,isError:s}=r;return e&&s?{color:o.negative[700],border:`1px solid ${o.negative[700]}`}:e?{color:o.brand[500],border:`1px solid ${o.brand[500]}`}:s?{color:o.grayscale[900],border:`1px solid ${o.negative[700]}`}:{color:o.grayscale[900],border:`1px solid ${o.grayscale[200]}`}})({isSelected:n,isError:g}):(r=>{let{isSelected:e,isError:s}=r;return e&&s?{color:o.negative[700],border:`1px solid ${o.negative[700]}`}:e?{color:o.brand[500],border:`1px solid ${o.brand[500]}`}:s?{color:o.grayscale[700],border:`1px solid ${o.negative[700]}`}:{color:o.grayscale[700],border:`1px dashed ${o.grayscale[200]}`}})({isSelected:n,isError:g}),y={height:20,width:20,color:p,style:{display:"block"},className:"icon"};return r(t,Object.assign({isSelected:n,isError:g,border:m,isConfigured:"CONFIGURED"===c,onClick:b},{children:[e("div",Object.assign({className:"action__icon"},{children:e(d,Object.assign({},y))})),e(i,Object.assign({style:{fontWeight:600,color:p}},{children:a}))]}))};export{l as ActionButtons};
 //# sourceMappingURL=ActionButtons.js.map

package/dist/esm/components/action-button/ActionButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButtons.js","sources":["../../../../src/components/action-button/ActionButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport SimilarIcon from '../../assets/icons/similar.svg';\nimport { BodyPrimary } from '../TypographyStyle';\nimport { ActionButtonContainer } from './ActionButton.styled';\n\nexport interface ActionButtonInterface {\n\tstate: 'CONFIGURED' | 'NOT-CONFIGURED';\n\tbuttonText: string;\n\tisSelected: boolean;\n\tisError: boolean;\n\tonClick: () => void;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nconst getColorForConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nconst getColorForNotConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px dashed ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nexport const ActionButtons: React.FC<ActionButtonInterface> = ({\n\tstate,\n\tbuttonText,\n\ticon: IconComponent = SimilarIcon,\n\tisSelected,\n\tisError,\n\tonClick,\n}) => {\n\tconst getColor = () => {\n\t\tif (state === 'CONFIGURED') {\n\t\t\treturn getColorForConfiguredState({ isSelected, isError });\n\t\t} else {\n\t\t\treturn getColorForNotConfiguredState({ isSelected, isError });\n\t\t}\n\t};\n\n\tconst { color, border } = getColor();\n\n\tconst iconProps = {\n\t\theight: 20,\n\t\twidth: 20,\n\t\tcolor,\n\t\tstyle: { display: 'block' },\n\t\tclassName: 'icon',\n\t};\n\n\treturn (\n\t\t<ActionButtonContainer\n\t\t\tisSelected={isSelected}\n\t\t\tisError={isError}\n\t\t\tborder={border}\n\t\t\tisConfigured={state === 'CONFIGURED'}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<div className=\"action__icon\">\n\t\t\t\t<IconComponent {...iconProps} />\n\t\t\t</div>\n\t\t\t<BodyPrimary style={{ fontWeight: 600, color }}>{buttonText}</BodyPrimary>\n\t\t</ActionButtonContainer>\n\t);\n};\n"],"names":["ActionButtons","state","buttonText","icon","IconComponent","SimilarIcon","isSelected","isError","onClick","color","border","getColorForConfiguredState","BASE_COLORS","negative","brand","grayscale","getColorForNotConfiguredState","iconProps","height","width","style","display","className","_jsxs","ActionButtonContainer","Object","assign","isConfigured","children","_jsx","BodyPrimary","fontWeight"],"mappings":"+QAeA,MA4DaA,EAAiDA,EAC7DC,QACAC,aACAC,KAAMC,EAAgBC,EACtBC,aACAC,UACAC,cAEA,MAQMC,MAAEA,EAAKC,OAAEA,GAPA,eAAVT,EArE6BU,GAClCL,aACAC,aAKID,GAAcC,EACV,CACNE,MAAOG,EAAYC,SAAS,KAC5BH,OAAQ,aAAaE,EAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAYE,MAAM,KACzBJ,OAAQ,aAAaE,EAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAYG,UAAU,KAC7BL,OAAQ,aAAaE,EAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAYG,UAAU,KAC7BL,OAAQ,aAAaE,EAAYG,UAAU,QA6CpCJ,CAA2B,CAAEL,aAAYC,YAxCbS,GACrCV,aACAC,aAKID,GAAcC,EACV,CACNE,MAAOG,EAAYC,SAAS,KAC5BH,OAAQ,aAAaE,EAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAYE,MAAM,KACzBJ,OAAQ,aAAaE,EAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAYG,UAAU,KAC7BL,OAAQ,aAAaE,EAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAYG,UAAU,KAC7BL,OAAQ,cAAcE,EAAYG,UAAU,QAiBrCC,CAA8B,CAAEV,aAAYC,YAM/CU,EAAY,CACjBC,OAAQ,GACRC,MAAO,GACPV,QACAW,MAAO,CAAEC,QAAS,SAClBC,UAAW,QAGZ,OACCC,EAACC,EACAC,OAAAC,OAAA,CAAApB,WAAYA,EACZC,QAASA,EACTG,OAAQA,EACRiB,aAAwB,eAAV1B,EACdO,QAASA,GAET,CAAAoB,SAAA,CAAAC,EAAA,MAAAJ,OAAAC,OAAA,CAAKJ,UAAU,gBACd,CAAAM,SAAAC,EAACzB,EAAaqB,OAAAC,OAAA,CAAA,EAAKT,OAEpBY,EAACC,EAAYL,OAAAC,OAAA,CAAAN,MAAO,CAAEW,WAAY,IAAKtB,UAAO,CAAAmB,SAAG1B,QAC1B"}
+{"version":3,"file":"ActionButtons.js","sources":["../../../../src/components/action-button/ActionButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport SimilarIcon from '../../assets/icons/similar.svg';\nimport { BodyPrimary } from '../TypographyStyle';\nimport { ActionButtonContainer } from './ActionButton.styled';\n\nexport interface ActionButtonInterface {\n\tstate: 'CONFIGURED' | 'NOT-CONFIGURED';\n\tbuttonText: string;\n\tisSelected: boolean;\n\tisError: boolean;\n\tonClick: () => void;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nconst getColorForConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nconst getColorForNotConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px dashed ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nexport const ActionButtons: React.FC<ActionButtonInterface> = ({\n\tstate,\n\tbuttonText,\n\ticon: IconComponent = SimilarIcon,\n\tisSelected,\n\tisError,\n\tonClick,\n}) => {\n\tconst getColor = () => {\n\t\tif (state === 'CONFIGURED') {\n\t\t\treturn getColorForConfiguredState({ isSelected, isError });\n\t\t} else {\n\t\t\treturn getColorForNotConfiguredState({ isSelected, isError });\n\t\t}\n\t};\n\n\tconst { color, border } = getColor();\n\n\tconst iconProps = {\n\t\theight: 20,\n\t\twidth: 20,\n\t\tcolor,\n\t\tstyle: { display: 'block' },\n\t\tclassName: 'icon',\n\t};\n\n\treturn (\n\t\t<ActionButtonContainer\n\t\t\tisSelected={isSelected}\n\t\t\tisError={isError}\n\t\t\tborder={border}\n\t\t\tisConfigured={state === 'CONFIGURED'}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<div className=\"action__icon\">\n\t\t\t\t<IconComponent {...iconProps} />\n\t\t\t</div>\n\t\t\t<BodyPrimary style={{ fontWeight: 600, color }}>{buttonText}</BodyPrimary>\n\t\t</ActionButtonContainer>\n\t);\n};\n"],"names":["ActionButtons","_ref3","state","buttonText","icon","IconComponent","SimilarIcon","isSelected","isError","onClick","color","border","_ref","BASE_COLORS","negative","brand","grayscale","getColorForConfiguredState","_ref2","getColorForNotConfiguredState","iconProps","height","width","style","display","className","_jsxs","ActionButtonContainer","Object","assign","isConfigured","children","_jsx","BodyPrimary","fontWeight"],"mappings":"+QAeA,MA4DaA,EAAiDC,IAOzD,IAP0DC,MAC9DA,EAAKC,WACLA,EACAC,KAAMC,EAAgBC,EAAWC,WACjCA,EAAUC,QACVA,EAAOC,QACPA,GACAR,EACA,MAQMS,MAAEA,EAAKC,OAAEA,GAPA,eAAVT,EArE6BU,KAM9B,IAN+BL,WACnCA,EAAUC,QACVA,GAIAI,EACA,OAAIL,GAAcC,EACV,CACNE,MAAOG,EAAYC,SAAS,KAC5BH,oBAAqBE,EAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAYE,MAAM,KACzBJ,oBAAqBE,EAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAYG,UAAU,KAC7BL,oBAAqBE,EAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAYG,UAAU,KAC7BL,oBAAqBE,EAAYG,UAAU,OAE5C,EA2CQC,CAA2B,CAAEV,aAAYC,YAxCbU,KAMjC,IANkCX,WACtCA,EAAUC,QACVA,GAIAU,EACA,OAAIX,GAAcC,EACV,CACNE,MAAOG,EAAYC,SAAS,KAC5BH,oBAAqBE,EAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAYE,MAAM,KACzBJ,oBAAqBE,EAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAYG,UAAU,KAC7BL,oBAAqBE,EAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAYG,UAAU,KAC7BL,qBAAsBE,EAAYG,UAAU,OAE7C,EAeQG,CAA8B,CAAEZ,aAAYC,YAM/CY,EAAY,CACjBC,OAAQ,GACRC,MAAO,GACPZ,QACAa,MAAO,CAAEC,QAAS,SAClBC,UAAW,QAGZ,OACCC,EAACC,EACAC,OAAAC,OAAA,CAAAtB,WAAYA,EACZC,QAASA,EACTG,OAAQA,EACRmB,aAAwB,eAAV5B,EACdO,QAASA,GAET,CAAAsB,SAAA,CAAAC,EAAA,MAAAJ,OAAAC,OAAA,CAAKJ,UAAU,gBACd,CAAAM,SAAAC,EAAC3B,EAAauB,OAAAC,OAAA,CAAA,EAAKT,OAEpBY,EAACC,EAAYL,OAAAC,OAAA,CAAAN,MAAO,CAAEW,WAAY,IAAKxB,UAAO,CAAAqB,SAAG5B,QAC1B"}

package/dist/esm/components/add-variableV2/AddVariableV2.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as a,jsxs as i,Fragment as s}from"react/jsx-runtime";import l from"../../assets/icons/back_icon.svg.js";import t from"../../assets/icons/chevronRightAlt.svg.js";import n from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import o from"../../assets/icons/undo.svg.js";import{memo as c,useState as d,useEffect as b}from"react";import{AddVariableStyled as v}from"./AddVariableV2.styled.js";import{Button as m}from"../button/Button.js";import{IconButton as h}from"../icon-button/IconButton.js";import{SearchBar as p}from"../searchBar/searchBar.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{COLORS as u}from"../../constants/Theme.js";import{CloseButtonContainer as y}from"../modals/modal.styled.js";import{Switch as f}from"../switch/Switch.js";import{BodySecondary as j,TitleSmall as O,BodyCaption as N}from"../TypographyStyle.js";const V=c((c=>{const{data:V,hasHeader:w=!0,needsBorder:S=!0,styledCloseBtn:_=!1,readonly:C=!1}=c,[T,k]=d({}),[x,L]=d(),[B,I]=d(""),[A,E]=d(""),[F,H]=d(!0),z=/.*\..*/,[P,$]=d(c.data),[R,M]=d(!0);b((()=>{const e={};V.forEach((a=>{e[a.displayName]=[]})),L(e)}),[V]),b((()=>{G(!0)}),[]),b((()=>{G(R,!B)}),[T,B]),b((()=>{M(!0),E(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("");const e=c.data.map((e=>J(e))).filter((e=>null!==e));$(e),e.length>0?H(!0):H(!1)}),[c.reRender]),b((()=>{let e=c.data;B&&(e=[T[B]]);W(e,R).length>0?H(!0):H(!1)}),[A]);const W=(e,a=!1)=>e.flatMap((e=>Object.keys(e.variables).filter((i=>{var s;return(null===(s=e.variables[i].displayName)||void 0===s?void 0:s.toLowerCase().includes(A.toLowerCase()))&&(!a||e.variables[i].isAvailable===a)||q(e.variables[i])})))),D=(e,a)=>{const i=V.find((e=>e.displayName===a));if(i){let s=i;e.forEach(((e,a)=>{s=s.variables[e]})),k((e=>Object.assign(Object.assign({},e),{[a]:s})))}},q=e=>{let a=!1;if(e.isSubHeader&&e.variables){const i=Object.keys(e.variables);for(let s=0;s<i.length;s++){const l=i[s];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(A.toLowerCase())&&e.variables[l].isAvailable===R){a=!0;break}}}return a},G=(e,a=!1)=>{if(M(e),e){let i=[];if(!B||a)i=c.data.map((e=>J(e))).filter((e=>null!==e));else{const e=T[B];i=c.data.filter((e=>e.displayName===B)).map((a=>J(a,e))).filter((e=>null!=e))}$(i),A&&(i=W(i,e)),i.length>0?H(!0):H(!1)}else if($(c.data),A){W(c.data,e).length>0?H(!0):H(!1)}else H(!0)};function J(e,a,i={}){if(a)for(const s in e.variables)if(e.variables[s].displayName===a.displayName)for(const a in e.variables[s].variables)e.variables[s].variables[a].isAvailable&&(i[a]=e.variables[s].variables[a]);else e.variables[s].isSubHeader&&J(e.variables[s],a,i);else for(const a in e.variables)e.variables[a].isAvailable&&(i[a]=e.variables[a]);return 0===Object.keys(i).length?null:Object.assign(Object.assign({},e),{variables:i})}const K=e=>{const i=e.item.description;return e.readonly?a("div",{children:a(Q,{item:e.item,readonly:e.readonly})}):a(s,{children:a(g,Object.assign({body:"",tooltipContent:a(N,Object.assign({color:u.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?i?`• ${i}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a("div",{children:a(Q,{item:e.item})})}))})},Q=e=>a(m,{darkMode:c.enableVariable?c.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:r,TrailingIcon:()=>e.item.isSubHeader?a("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a(t,{})})):a(s,{}),buttonText:e.item.displayName}),U=(e,i)=>R&&!e.isAvailable?a(s,{}):a("div",Object.assign({onClick:e.isSubHeader?()=>{W([e],R).length||H(!1),E("");const a=[...x[B],i];D(a,B),L((e=>Object.assign(Object.assign({},e),{[B]:a})))}:()=>{c.customTrigger?(c.customTrigger(e),c.setShowVariable(!1)):c.isEvaluationList?Y(e):c.setVariableValue(c.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a(K,{item:e,readonly:C})})),X=(e,a)=>{const i=[...x[e.displayName],a];D(i,e.displayName),L((a=>Object.assign(Object.assign({},a),{[e.displayName]:i}))),I(e.displayName)},Y=e=>{if(e.actualValue.match(z)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let i=a[0];a.forEach(((e,a)=>{if(0===a)return;const s=(e=>/\w+\[\d+\]/g.test(e))(e);if(s){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],s=a[2];i+=`['${e}'][${s}]`}}else i+=`['${e}']`})),c.setVariableValue(c.selectWithTypes?{actualValue:i,variableType:e.variableType,needsFetching:e.needsFetching}:i)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;c.setVariableValue(c.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},Z=(e,a)=>{if(c.customTrigger)c.customTrigger(e.variables[a]),c.setShowVariable(!1);else if(c.isEvaluationList){const i=e.variables[a];Y(i)}else c.setVariableValue(c.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},ee=c.isModalState?void 0:{top:`${c.topPosition?c.topPosition:"small"===c.pickerSize?"300px":"60px"}`,left:`${c.leftPosition?c.leftPosition+24:430}px`};return a("div",Object.assign({id:"varList",tabIndex:-1},{children:i(v,Object.assign({style:ee,onClick:e=>{e.stopPropagation()},pickerSize:c.pickerSize||"large",isModalState:c.isModalState,positionStrategy:c.positionStrategy,zIndex:c.zindex,height:c.height,needsBorder:S,width:c.width},{children:[_&&a(y,Object.assign({onClick:()=>{c.setShowVariable(!1)},style:{zIndex:300}},{children:a(n,{height:20,width:20,color:u.content.secondary})})),c.showVariable&&i("div",Object.assign({className:"popup"},{children:[i("div",Object.assign({className:"sticky__bar"},{children:[w&&i("div",Object.assign({className:"header__bar"},{children:[a("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!_&&a("div",Object.assign({onClick:()=>{c.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a(h,{iconButtonType:"default",Icon:n})}))]})),i("div",Object.assign({className:"search__bar",onBlur:e=>{c.onSearchBlur&&c.onSearchBlur(e)}},{children:[a(p,{width:"100%",isEnabled:!0,onChange:e=>{E(e)},onEnter:()=>{},reset:!A,placeholder:"Search...",variant:"default"}),i("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a(j,Object.assign({style:{color:u.content.secondary}},{children:"Show only recommended variables"})),a(f,{value:R,onValueChange:a=>e(void 0,void 0,void 0,(function*(){return yield G(a)}))})]}))]})),B&&x[B].length>0&&i("div",Object.assign({className:"nav__bar"},{children:[i("div",Object.assign({className:"left__nav"},{children:[a(h,{Icon:l,style:{color:"#919191",display:"flex"},onClick:()=>{E("");const e=x[B].slice(0,-1);D(e,B),L((a=>Object.assign(Object.assign({},a),{[B]:e}))),e.length||I("")}}),i("div",Object.assign({className:"block"},{children:[a(O,{children:T[B].displayName}),T[B].description&&a(N,{children:T[B].description})]}))]})),i("div",Object.assign({className:"right__nav"},{children:[a(h,{Icon:o,style:{display:"flex"},onClick:()=>{E(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("")}}),a("div",{children:"First page"})]}))]}))]})),!F&&i("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a(O,{children:"No results found!"}),a(N,R?{children:"Sorry we could not find any recommended variables"}:{children:`Sorry we could not find any results for "${A}"`})]})),a("div",Object.assign({className:"wrapper"},{children:a("div",Object.assign({className:"list__map"},{children:i("div",Object.assign({className:"items"},{children:[!B&&P.map((e=>{let l=[];return A&&(l=Object.keys(e.variables).filter((a=>{var i;return(null===(i=e.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(A.toLowerCase()))||q(e.variables[a])}))),i(s,{children:[A?l.length>0?i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(N,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a(s,{}):i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(N,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((i=>{var l;return A?(null===(l=e.variables[i].displayName)||void 0===l?void 0:l.toLowerCase().includes(A.toLowerCase()))||q(e.variables[i])?a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>X(e,i):()=>Z(e,i)},{children:a(K,{item:e.variables[i],readonly:C})})):a(s,{}):a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>X(e,i):()=>Z(e,i)},{children:a(K,{item:e.variables[i],readonly:C})}))}))]})})),B&&a("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(T[B].variables).map(((e,i)=>{var l;return A?(null===(l=T[B].variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(A.toLowerCase()))||q(T[B].variables[e])?U(T[B].variables[e],e):a(s,{}):U(T[B].variables[e],e)}))}))}))]}))}))})),a("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));export{V as AddVariableV2};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as a,jsxs as i,Fragment as s}from"react/jsx-runtime";import l from"../../assets/icons/back_icon.svg.js";import t from"../../assets/icons/chevronRightAlt.svg.js";import n from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import o from"../../assets/icons/undo.svg.js";import{memo as c,useState as d,useEffect as b}from"react";import{AddVariableStyled as v}from"./AddVariableV2.styled.js";import{Button as m}from"../button/Button.js";import{IconButton as h}from"../icon-button/IconButton.js";import{SearchBar as g}from"../searchBar/searchBar.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{COLORS as u}from"../../constants/Theme.js";import{CloseButtonContainer as y}from"../modals/modal.styled.js";import{Switch as f}from"../switch/Switch.js";import{BodySecondary as j,TitleSmall as O,BodyCaption as N}from"../TypographyStyle.js";const V=c((c=>{const{data:V,hasHeader:w=!0,needsBorder:S=!0,styledCloseBtn:_=!1,readonly:C=!1}=c,[T,k]=d({}),[x,L]=d(),[B,I]=d(""),[A,E]=d(""),[F,H]=d(!0),z=/.*\..*/,[P,$]=d(c.data),[R,M]=d(!0);b((()=>{const e={};V.forEach((a=>{e[a.displayName]=[]})),L(e)}),[V]),b((()=>{G(!0)}),[]),b((()=>{G(R,!B)}),[T,B]),b((()=>{M(!0),E(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("");const e=c.data.map((e=>J(e))).filter((e=>null!==e));$(e),e.length>0?H(!0):H(!1)}),[c.reRender]),b((()=>{let e=c.data;B&&(e=[T[B]]);W(e,R).length>0?H(!0):H(!1)}),[A]);const W=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((i=>{var s;return(null===(s=e.variables[i].displayName)||void 0===s?void 0:s.toLowerCase().includes(A.toLowerCase()))&&(!a||e.variables[i].isAvailable===a)||q(e.variables[i])}))))},D=(e,a)=>{const i=V.find((e=>e.displayName===a));if(i){let s=i;e.forEach(((e,a)=>{s=s.variables[e]})),k((e=>Object.assign(Object.assign({},e),{[a]:s})))}},q=e=>{let a=!1;if(e.isSubHeader&&e.variables){const i=Object.keys(e.variables);for(let s=0;s<i.length;s++){const l=i[s];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(A.toLowerCase())&&e.variables[l].isAvailable===R){a=!0;break}}}return a},G=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(M(e),e){let i=[];if(!B||a)i=c.data.map((e=>J(e))).filter((e=>null!==e));else{const e=T[B];i=c.data.filter((e=>e.displayName===B)).map((a=>J(a,e))).filter((e=>null!=e))}$(i),A&&(i=W(i,e)),i.length>0?H(!0):H(!1)}else if($(c.data),A){W(c.data,e).length>0?H(!0):H(!1)}else H(!0)};function J(e,a){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(a)for(const s in e.variables)if(e.variables[s].displayName===a.displayName)for(const a in e.variables[s].variables)e.variables[s].variables[a].isAvailable&&(i[a]=e.variables[s].variables[a]);else e.variables[s].isSubHeader&&J(e.variables[s],a,i);else for(const a in e.variables)e.variables[a].isAvailable&&(i[a]=e.variables[a]);return 0===Object.keys(i).length?null:Object.assign(Object.assign({},e),{variables:i})}const K=e=>{const i=e.item.description;return e.readonly?a("div",{children:a(Q,{item:e.item,readonly:e.readonly})}):a(s,{children:a(p,Object.assign({body:"",tooltipContent:a(N,Object.assign({color:u.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?i?`• ${i}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a("div",{children:a(Q,{item:e.item})})}))})},Q=e=>a(m,{darkMode:c.enableVariable?c.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:r,TrailingIcon:()=>e.item.isSubHeader?a("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a(t,{})})):a(s,{}),buttonText:e.item.displayName}),U=(e,i)=>R&&!e.isAvailable?a(s,{}):a("div",Object.assign({onClick:e.isSubHeader?()=>{W([e],R).length||H(!1),E("");const a=[...x[B],i];D(a,B),L((e=>Object.assign(Object.assign({},e),{[B]:a})))}:()=>{c.customTrigger?(c.customTrigger(e),c.setShowVariable(!1)):c.isEvaluationList?Y(e):c.setVariableValue(c.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a(K,{item:e,readonly:C})})),X=(e,a)=>{const i=[...x[e.displayName],a];D(i,e.displayName),L((a=>Object.assign(Object.assign({},a),{[e.displayName]:i}))),I(e.displayName)},Y=e=>{if(e.actualValue.match(z)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let i=a[0];a.forEach(((e,a)=>{if(0===a)return;const s=(e=>/\w+\[\d+\]/g.test(e))(e);if(s){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],s=a[2];i+=`['${e}'][${s}]`}}else i+=`['${e}']`})),c.setVariableValue(c.selectWithTypes?{actualValue:i,variableType:e.variableType,needsFetching:e.needsFetching}:i)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;c.setVariableValue(c.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},Z=(e,a)=>{if(c.customTrigger)c.customTrigger(e.variables[a]),c.setShowVariable(!1);else if(c.isEvaluationList){const i=e.variables[a];Y(i)}else c.setVariableValue(c.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},ee=c.isModalState?void 0:{top:`${c.topPosition?c.topPosition:"small"===c.pickerSize?"300px":"60px"}`,left:`${c.leftPosition?c.leftPosition+24:430}px`};return a("div",Object.assign({id:"varList",tabIndex:-1},{children:i(v,Object.assign({style:ee,onClick:e=>{e.stopPropagation()},pickerSize:c.pickerSize||"large",isModalState:c.isModalState,positionStrategy:c.positionStrategy,zIndex:c.zindex,height:c.height,needsBorder:S,width:c.width},{children:[_&&a(y,Object.assign({onClick:()=>{c.setShowVariable(!1)},style:{zIndex:300}},{children:a(n,{height:20,width:20,color:u.content.secondary})})),c.showVariable&&i("div",Object.assign({className:"popup"},{children:[i("div",Object.assign({className:"sticky__bar"},{children:[w&&i("div",Object.assign({className:"header__bar"},{children:[a("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!_&&a("div",Object.assign({onClick:()=>{c.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a(h,{iconButtonType:"default",Icon:n})}))]})),i("div",Object.assign({className:"search__bar",onBlur:e=>{c.onSearchBlur&&c.onSearchBlur(e)}},{children:[a(g,{width:"100%",isEnabled:!0,onChange:e=>{E(e)},onEnter:()=>{},reset:!A,placeholder:"Search...",variant:"default"}),i("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a(j,Object.assign({style:{color:u.content.secondary}},{children:"Show only recommended variables"})),a(f,{value:R,onValueChange:a=>e(void 0,void 0,void 0,(function*(){return yield G(a)}))})]}))]})),B&&x[B].length>0&&i("div",Object.assign({className:"nav__bar"},{children:[i("div",Object.assign({className:"left__nav"},{children:[a(h,{Icon:l,style:{color:"#919191",display:"flex"},onClick:()=>{E("");const e=x[B].slice(0,-1);D(e,B),L((a=>Object.assign(Object.assign({},a),{[B]:e}))),e.length||I("")}}),i("div",Object.assign({className:"block"},{children:[a(O,{children:T[B].displayName}),T[B].description&&a(N,{children:T[B].description})]}))]})),i("div",Object.assign({className:"right__nav"},{children:[a(h,{Icon:o,style:{display:"flex"},onClick:()=>{E(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("")}}),a("div",{children:"First page"})]}))]}))]})),!F&&i("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a(O,{children:"No results found!"}),a(N,R?{children:"Sorry we could not find any recommended variables"}:{children:`Sorry we could not find any results for "${A}"`})]})),a("div",Object.assign({className:"wrapper"},{children:a("div",Object.assign({className:"list__map"},{children:i("div",Object.assign({className:"items"},{children:[!B&&P.map((e=>{let l=[];return A&&(l=Object.keys(e.variables).filter((a=>{var i;return(null===(i=e.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(A.toLowerCase()))||q(e.variables[a])}))),i(s,{children:[A?l.length>0?i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(N,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a(s,{}):i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(N,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((i=>{var l;return A?(null===(l=e.variables[i].displayName)||void 0===l?void 0:l.toLowerCase().includes(A.toLowerCase()))||q(e.variables[i])?a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>X(e,i):()=>Z(e,i)},{children:a(K,{item:e.variables[i],readonly:C})})):a(s,{}):a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>X(e,i):()=>Z(e,i)},{children:a(K,{item:e.variables[i],readonly:C})}))}))]})})),B&&a("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(T[B].variables).map(((e,i)=>{var l;return A?(null===(l=T[B].variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(A.toLowerCase()))||q(T[B].variables[e])?U(T[B].variables[e],e):a(s,{}):U(T[B].variables[e],e)}))}))}))]}))}))})),a("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));export{V as AddVariableV2};
 //# sourceMappingURL=AddVariableV2.js.map

package/dist/esm/components/add-variableV2/AddVariableV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddVariableV2.js","sources":["../../../../src/components/add-variableV2/AddVariableV2.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n\n/* eslint-disable react/prop-types */\nimport BackIcon from '@src/assets/icons/back_icon.svg';\nimport RightFilled from '@src/assets/icons/chevronRightAlt.svg';\nimport CloseIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport UndoIcon from '@src/assets/icons/undo.svg';\nimport React, { memo, useEffect, useState } from 'react';\nimport { AddVariableStyled } from '@src/components/add-variableV2/AddVariableV2.styled';\nimport { Button } from '@src/components/button';\nimport { IconButton } from '@src/components/icon-button';\nimport { SearchBar } from '@src/components/searchBar';\nimport { Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { CloseButtonContainer } from '../modals/modal.styled';\nimport { Switch } from '../switch';\nimport { BodyCaption, BodySecondary, TitleSmall } from '../TypographyStyle';\n\nexport interface VariableListInterfaceV2 {\n\tdisplayName: string;\n\tdescription: string;\n\torderId: number;\n\tvariables?: any;\n}\n\nexport interface Variable {\n\tdescription?: string;\n\tdefaultValue?: string;\n\tdisplayName: string;\n\tactualValue: string;\n\tvariableType: string;\n\tisAvailable: boolean;\n\tactualValueEval?: string;\n\tisSubHeader?: boolean;\n\tvariables?: { [key: string]: Variable };\n\tneedsFetching?: boolean;\n}\n\nexport interface AddVariableProps {\n\tdata: VariableListInterfaceV2[];\n\tshowVariable: any;\n\tsetShowVariable: any;\n\tvariableValue?: any;\n\tsetVariableValue?: any;\n\tplaceholder: string;\n\tcustomTrigger?: any;\n\tisSearchRequired?: boolean;\n\tisModalState?: boolean;\n\tleftPosition?: number;\n\ttopPosition?: string;\n\tpickerSize?: string;\n\tenableVariable?: boolean;\n\tisEvaluationList?: boolean;\n\tonSearchBlur?: (e: any) => void;\n\tid?: string;\n\tselectWithTypes?: boolean;\n\tpositionStrategy?: 'static' | 'fixed';\n\tzindex?: number;\n\thasHeader?: boolean;\n\theight?: string;\n\tneedsBorder?: boolean;\n\treRender?: string;\n\tstyledCloseBtn?: boolean;\n\twidth?: string;\n\treadonly?: boolean;\n}\n\ntype Props = AddVariableProps;\n\nexport interface VariableBoxProps {\n\titem: Variable;\n\traw?: string;\n\tparentKey?: string;\n\treadonly?: boolean;\n}\n\nexport const AddVariableV2: React.FC<Props> = memo(\n\t(props) => {\n\t\tconst {\n\t\t\tdata,\n\t\t\thasHeader = true,\n\t\t\tneedsBorder = true,\n\t\t\tstyledCloseBtn = false,\n\t\t\treadonly = false,\n\t\t} = props;\n\t\tconst [payloadVar, setPayloadVar] = useState<any>({});\n\t\tconst [navigationStack, setNavigationStack] = useState<any>();\n\t\tconst [variableKey, setVariableKey] = useState<string>('');\n\t\tconst [searchWord, setSearchWord] = useState<string>('');\n\t\tconst [variableFound, setVariableFound] = useState<boolean>(true);\n\t\tconst variableRegex = /.*\\..*/;\n\n\t\tconst [variableList, setVariableList] = useState<VariableListInterfaceV2[]>(\n\t\t\tprops.data,\n\t\t);\n\t\tconst [showOnlyRecommended, setShowOnlyRecommended] =\n\t\t\tuseState<boolean>(true);\n\n\t\tuseEffect(() => {\n\t\t\tconst navStack: any = {};\n\t\t\tdata.forEach((value) => {\n\t\t\t\tnavStack[value.displayName] = [];\n\t\t\t});\n\t\t\tsetNavigationStack(navStack);\n\t\t}, [data]);\n\n\t\tuseEffect(() => {\n\t\t\thandleRecommendedToggle(true);\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tconst isFirstPage = !variableKey;\n\t\t\thandleRecommendedToggle(showOnlyRecommended, isFirstPage);\n\t\t}, [payloadVar, variableKey]);\n\n\t\tuseEffect(() => {\n\t\t\tsetShowOnlyRecommended(true);\n\t\t\tsetSearchWord('');\n\t\t\tupdatePayloadvar([], variableKey);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[variableKey]: [],\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey('');\n\n\t\t\t// for recommended variables\n\t\t\tconst newList = props.data\n\t\t\t\t.map((value) => {\n\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t})\n\t\t\t\t.filter((value) => value !== null);\n\t\t\tsetVariableList(newList);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [props.reRender]);\n\n\t\tuseEffect(() => {\n\t\t\t// For showing empty UI when no results are found\n\t\t\tlet data = props.data;\n\t\t\tif (variableKey) {\n\t\t\t\tdata = [payloadVar[variableKey]];\n\t\t\t}\n\t\t\tconst newList = shouldShowNoResult(data, showOnlyRecommended);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [searchWord]);\n\n\t\tconst shouldShowNoResult = (data: any[], showOnlyRecommended = false) => {\n\t\t\treturn data.flatMap((value) => {\n\t\t\t\treturn Object.keys(value.variables).filter(\n\t\t\t\t\t(key) =>\n\t\t\t\t\t\t(value.variables[key].displayName\n\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\t\t(!showOnlyRecommended ||\n\t\t\t\t\t\t\t\tvalue.variables[key].isAvailable === showOnlyRecommended)) ||\n\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t);\n\t\t\t});\n\t\t};\n\n\t\tconst updatePayloadvar = (stack: Array<string>, key: string) => {\n\t\t\tconst variable = data.find((variable) => variable.displayName === key);\n\t\t\tif (variable) {\n\t\t\t\tlet temp = variable;\n\t\t\t\tstack.forEach((level, key) => {\n\t\t\t\t\ttemp = temp.variables[level];\n\t\t\t\t});\n\t\t\t\tsetPayloadVar((prev: any) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[key]: temp,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst hasVariablesInSubheader = (variable: Variable) => {\n\t\t\tlet isAvailable = false;\n\t\t\tif (variable.isSubHeader && variable.variables) {\n\t\t\t\tconst keys = Object.keys(variable.variables);\n\t\t\t\tfor (let i = 0; i < keys.length; i++) {\n\t\t\t\t\tconst key = keys[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\tvariable.variables &&\n\t\t\t\t\t\tvariable.variables[key].displayName\n\t\t\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\tvariable.variables[key].isAvailable === showOnlyRecommended\n\t\t\t\t\t) {\n\t\t\t\t\t\tisAvailable = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn isAvailable;\n\t\t};\n\n\t\tconst handleRecommendedToggle = (val: boolean, firstPage = false) => {\n\t\t\tsetShowOnlyRecommended(val);\n\t\t\tif (val) {\n\t\t\t\tlet newList: any[] = [];\n\t\t\t\tif (!variableKey || firstPage) {\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null);\n\t\t\t\t} else {\n\t\t\t\t\tconst selectedSubHeader = payloadVar[variableKey];\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.filter((value) => value.displayName === variableKey)\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value, selectedSubHeader);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null && value !== undefined);\n\t\t\t\t}\n\t\t\t\tsetVariableList(newList);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tnewList = shouldShowNoResult(newList, val);\n\t\t\t\t}\n\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetVariableList(props.data);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tconst newList = shouldShowNoResult(props.data, val);\n\t\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfunction removeUnavailableVariables(\n\t\t\tcustomerVariables: any,\n\t\t\tselectedSubHeader?: any,\n\t\t\tnewVariables: any = {},\n\t\t) {\n\t\t\tif (!selectedSubHeader) {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (customerVariables.variables[key].isAvailable) {\n\t\t\t\t\t\tnewVariables[key] = customerVariables.variables[key];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tcustomerVariables.variables[key].displayName ===\n\t\t\t\t\t\tselectedSubHeader.displayName\n\t\t\t\t\t) {\n\t\t\t\t\t\tfor (const subKey in customerVariables.variables[key].variables) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey].isAvailable\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewVariables[subKey] =\n\t\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// recursively find the match and available variables if its a subheader\n\t\t\t\t\t\tif (customerVariables.variables[key].isSubHeader) {\n\t\t\t\t\t\t\tremoveUnavailableVariables(\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key],\n\t\t\t\t\t\t\t\tselectedSubHeader,\n\t\t\t\t\t\t\t\tnewVariables,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (Object.keys(newVariables).length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn { ...customerVariables, variables: newVariables };\n\t\t}\n\n\t\tconst VariableBoxWithToolTip: React.FC<VariableBoxProps> = (props) => {\n\t\t\tconst description = props.item.description;\n\n\t\t\treturn props.readonly ? (\n\t\t\t\t<div>\n\t\t\t\t\t<VariableBox item={props.item} readonly={props.readonly} />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'pre-line', padding: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.item.isAvailable\n\t\t\t\t\t\t\t\t\t? description\n\t\t\t\t\t\t\t\t\t\t? `• ${description}\\n• Recommended here`\n\t\t\t\t\t\t\t\t\t\t: 'Recommended here'\n\t\t\t\t\t\t\t\t\t: 'Not recommended here'}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tdelay={300}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<VariableBox item={props.item} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\tconst VariableBox: React.FC<VariableBoxProps> = (varProps) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdarkMode={\n\t\t\t\t\t\tprops.enableVariable\n\t\t\t\t\t\t\t? props.enableVariable\n\t\t\t\t\t\t\t: varProps.item.isAvailable\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tvarProps.readonly\n\t\t\t\t\t\t\t? varProps.item.isSubHeader\n\t\t\t\t\t\t\t\t? false\n\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t: false\n\t\t\t\t\t}\n\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\tvarProps.item.isSubHeader\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: varProps.readonly\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: PlusIcon\n\t\t\t\t\t}\n\t\t\t\t\tTrailingIcon={() =>\n\t\t\t\t\t\tvarProps.item.isSubHeader ? (\n\t\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<RightFilled />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tbuttonText={varProps.item.displayName}\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\n\t\tconst renderPayloadvars = (variable: Variable, key: string) => {\n\t\t\t// Show only recommended variables\n\t\t\tif (showOnlyRecommended) {\n\t\t\t\tif (!variable.isAvailable) {\n\t\t\t\t\treturn <></>;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvariable.isSubHeader\n\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t// check if subheader has any available variables\n\t\t\t\t\t\t\t\t\tconst isAvailable = shouldShowNoResult(\n\t\t\t\t\t\t\t\t\t\t[variable],\n\t\t\t\t\t\t\t\t\t\tshowOnlyRecommended,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (!isAvailable.length) {\n\t\t\t\t\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// reset search word when subheader is clicked\n\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\tconst newStack = [\n\t\t\t\t\t\t\t\t\t\t...(navigationStack as any)[variableKey],\n\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\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  }\n\t\t\t\t\t\t\t: () => {\n\t\t\t\t\t\t\t\t\tif (props.customTrigger) {\n\t\t\t\t\t\t\t\t\t\tprops.customTrigger(variable);\n\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\t\t\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\t\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactualValue: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t);\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  }\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<VariableBoxWithToolTip item={variable} readonly={readonly} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t};\n\n\t\tconst variableClick = (value: VariableListInterfaceV2, key: string) => {\n\t\t\tconst newStack = [...(navigationStack as any)[value.displayName], key];\n\t\t\tupdatePayloadvar(newStack, value.displayName);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[value.displayName]: newStack,\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey(value.displayName);\n\t\t};\n\n\t\tconst checkIfArray = (value: string) => {\n\t\t\tconst regex = /\\w+\\[\\d+\\]/g;\n\t\t\treturn regex.test(value);\n\t\t};\n\n\t\tconst matchVariable = (variable: Variable) => {\n\t\t\tif (variable.actualValue.match(variableRegex)) {\n\t\t\t\tconst path = variable.actualValue\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.split('.');\n\t\t\t\tlet evalVariableValue = path[0];\n\t\t\t\tpath.forEach((value, index) => {\n\t\t\t\t\tif (index === 0) return;\n\t\t\t\t\tconst isArray = checkIfArray(value);\n\t\t\t\t\tif (isArray) {\n\t\t\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\t\t\tif (matches) {\n\t\t\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\t\t\tevalVariableValue =\n\t\t\t\t\t\t\t\tevalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: evalVariableValue,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: evalVariableValue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst value = variable.actualValueEval\n\t\t\t\t\t? variable.actualValueEval\n\t\t\t\t\t: variable.actualValue;\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: value,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: value,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst variableCustomClick = (\n\t\t\tvariableListInterfaceV2: VariableListInterfaceV2,\n\t\t\tkey: string,\n\t\t) => {\n\t\t\tif (props.customTrigger) {\n\t\t\t\tprops.customTrigger(variableListInterfaceV2.variables[key]);\n\t\t\t\tprops.setShowVariable(false);\n\t\t\t} else {\n\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\tconst variable = variableListInterfaceV2.variables[key];\n\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t} else {\n\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tactualValue:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t\t\t\t\tvariableType:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].variableType,\n\t\t\t\t\t\t\t\t\tneedsFetching:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].needsFetching,\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: variableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst getStyle = !props.isModalState\n\t\t\t? {\n\t\t\t\t\ttop: `${\n\t\t\t\t\t\tprops.topPosition\n\t\t\t\t\t\t\t? props.topPosition\n\t\t\t\t\t\t\t: props.pickerSize === 'small'\n\t\t\t\t\t\t\t? '300px'\n\t\t\t\t\t\t\t: '60px'\n\t\t\t\t\t}`,\n\t\t\t\t\tleft: `${props.leftPosition ? props.leftPosition + 24 : 430}px`,\n\t\t\t  }\n\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div id=\"varList\" tabIndex={-1}>\n\t\t\t\t<AddVariableStyled\n\t\t\t\t\tstyle={getStyle}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t\tpickerSize={props.pickerSize || 'large'}\n\t\t\t\t\tisModalState={props.isModalState}\n\t\t\t\t\tpositionStrategy={props.positionStrategy}\n\t\t\t\t\tzIndex={props.zindex}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\tneedsBorder={needsBorder}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t>\n\t\t\t\t\t{styledCloseBtn && (\n\t\t\t\t\t\t<CloseButtonContainer\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ zIndex: 300 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CloseButtonContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.showVariable && (\n\t\t\t\t\t\t<div className=\"popup\">\n\t\t\t\t\t\t\t<div className=\"sticky__bar\">\n\t\t\t\t\t\t\t\t{hasHeader && (\n\t\t\t\t\t\t\t\t\t<div className=\"header__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"add__variable\">Add a new variable</div>\n\t\t\t\t\t\t\t\t\t\t{!styledCloseBtn && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\t\ticonButtonType={'default'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIcon={CloseIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"search__bar\"\n\t\t\t\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\t\t\t\tprops.onSearchBlur && props.onSearchBlur(e);\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<SearchBar\n\t\t\t\t\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\t\t\t\t\tisEnabled={true}\n\t\t\t\t\t\t\t\t\t\tonChange={(searchText) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSearchWord(searchText);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonEnter={() => {\n\t\t\t\t\t\t\t\t\t\t\t// Do Nothing\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\treset={!searchWord ? true : false}\n\t\t\t\t\t\t\t\t\t\tplaceholder={'Search...'}\n\t\t\t\t\t\t\t\t\t\tvariant={'default'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\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\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\tShow only recommended variables\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tvalue={showOnlyRecommended}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={async (val) =>\n\t\t\t\t\t\t\t\t\t\t\t\tawait handleRecommendedToggle(val)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{variableKey && navigationStack[variableKey].length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"nav__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"left__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#919191', display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when back is clicked\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst newStack = navigationStack[variableKey].slice(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t-1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!newStack.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"right__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={UndoIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when navigating to first page\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar([], variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: [],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>First page</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\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\t{!variableFound && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\tmarginTop: 16,\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<TitleSmall>No results found!</TitleSmall>\n\t\t\t\t\t\t\t\t\t{showOnlyRecommended ? (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any recommended variables`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any results for \"${searchWord}\"`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"wrapper\">\n\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t<div className=\"items\">\n\t\t\t\t\t\t\t\t\t\t{!variableKey &&\n\t\t\t\t\t\t\t\t\t\t\tvariableList.map((value) => {\n\t\t\t\t\t\t\t\t\t\t\t\tlet searchList: any = [];\n\t\t\t\t\t\t\t\t\t\t\t\tif (searchWord) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList = Object.keys(value.variables).filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: '#616161',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 8, color: '#616161' }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(value.variables).map((key) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t{variableKey && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"items\" style={{ marginTop: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(payloadVar[variableKey].variables).map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key, _) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"bottom__padding\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</AddVariableStyled>\n\t\t\t</div>\n\t\t);\n\t},\n\t(prev, next) => {\n\t\tif (prev.enableVariable !== next.enableVariable) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.leftPosition !== next.leftPosition) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.reRender !== next.reRender) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t},\n);\n"],"names":["AddVariableV2","memo","props","data","hasHeader","needsBorder","styledCloseBtn","readonly","payloadVar","setPayloadVar","useState","navigationStack","setNavigationStack","variableKey","setVariableKey","searchWord","setSearchWord","variableFound","setVariableFound","variableRegex","variableList","setVariableList","showOnlyRecommended","setShowOnlyRecommended","useEffect","navStack","forEach","value","displayName","handleRecommendedToggle","updatePayloadvar","prev","Object","assign","newList","map","removeUnavailableVariables","filter","length","reRender","shouldShowNoResult","flatMap","keys","variables","key","_a","toLowerCase","includes","isAvailable","hasVariablesInSubheader","stack","variable","find","temp","level","isSubHeader","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","item","_jsx","children","VariableBox","_Fragment","Tooltip","body","tooltipContent","BodyCaption","color","COLORS","content","primaryInverse","style","whiteSpace","padding","width","delay","placement","varProps","Button","darkMode","enableVariable","size","disabled","LeadingIcon","undefined","PlusIcon","TrailingIcon","className","display","RightFilled","buttonText","renderPayloadvars","onClick","newStack","customTrigger","setShowVariable","isEvaluationList","matchVariable","setVariableValue","selectWithTypes","actualValue","variableType","needsFetching","variableClick","match","path","replace","split","evalVariableValue","index","isArray","test","checkIfArray","matches","arrayName","actualValueEval","variableCustomClick","variableListInterfaceV2","getStyle","isModalState","top","topPosition","pickerSize","left","leftPosition","id","tabIndex","_jsxs","AddVariableStyled","e","stopPropagation","positionStrategy","zIndex","zindex","height","CloseButtonContainer","CrossIcon","secondary","showVariable","alignItems","justifyContent","IconButton","iconButtonType","Icon","CloseIcon","onBlur","onSearchBlur","SearchBar","isEnabled","onChange","searchText","onEnter","reset","placeholder","variant","marginTop","BodySecondary","Switch","onValueChange","__awaiter","BackIcon","slice","TitleSmall","UndoIcon","flexDirection","searchList","marginBottom","_","next"],"mappings":"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"}
+{"version":3,"file":"AddVariableV2.js","sources":["../../../../src/components/add-variableV2/AddVariableV2.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n\n/* eslint-disable react/prop-types */\nimport BackIcon from '@src/assets/icons/back_icon.svg';\nimport RightFilled from '@src/assets/icons/chevronRightAlt.svg';\nimport CloseIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport UndoIcon from '@src/assets/icons/undo.svg';\nimport React, { memo, useEffect, useState } from 'react';\nimport { AddVariableStyled } from '@src/components/add-variableV2/AddVariableV2.styled';\nimport { Button } from '@src/components/button';\nimport { IconButton } from '@src/components/icon-button';\nimport { SearchBar } from '@src/components/searchBar';\nimport { Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { CloseButtonContainer } from '../modals/modal.styled';\nimport { Switch } from '../switch';\nimport { BodyCaption, BodySecondary, TitleSmall } from '../TypographyStyle';\n\nexport interface VariableListInterfaceV2 {\n\tdisplayName: string;\n\tdescription: string;\n\torderId: number;\n\tvariables?: any;\n}\n\nexport interface Variable {\n\tdescription?: string;\n\tdefaultValue?: string;\n\tdisplayName: string;\n\tactualValue: string;\n\tvariableType: string;\n\tisAvailable: boolean;\n\tactualValueEval?: string;\n\tisSubHeader?: boolean;\n\tvariables?: { [key: string]: Variable };\n\tneedsFetching?: boolean;\n}\n\nexport interface AddVariableProps {\n\tdata: VariableListInterfaceV2[];\n\tshowVariable: any;\n\tsetShowVariable: any;\n\tvariableValue?: any;\n\tsetVariableValue?: any;\n\tplaceholder: string;\n\tcustomTrigger?: any;\n\tisSearchRequired?: boolean;\n\tisModalState?: boolean;\n\tleftPosition?: number;\n\ttopPosition?: string;\n\tpickerSize?: string;\n\tenableVariable?: boolean;\n\tisEvaluationList?: boolean;\n\tonSearchBlur?: (e: any) => void;\n\tid?: string;\n\tselectWithTypes?: boolean;\n\tpositionStrategy?: 'static' | 'fixed';\n\tzindex?: number;\n\thasHeader?: boolean;\n\theight?: string;\n\tneedsBorder?: boolean;\n\treRender?: string;\n\tstyledCloseBtn?: boolean;\n\twidth?: string;\n\treadonly?: boolean;\n}\n\ntype Props = AddVariableProps;\n\nexport interface VariableBoxProps {\n\titem: Variable;\n\traw?: string;\n\tparentKey?: string;\n\treadonly?: boolean;\n}\n\nexport const AddVariableV2: React.FC<Props> = memo(\n\t(props) => {\n\t\tconst {\n\t\t\tdata,\n\t\t\thasHeader = true,\n\t\t\tneedsBorder = true,\n\t\t\tstyledCloseBtn = false,\n\t\t\treadonly = false,\n\t\t} = props;\n\t\tconst [payloadVar, setPayloadVar] = useState<any>({});\n\t\tconst [navigationStack, setNavigationStack] = useState<any>();\n\t\tconst [variableKey, setVariableKey] = useState<string>('');\n\t\tconst [searchWord, setSearchWord] = useState<string>('');\n\t\tconst [variableFound, setVariableFound] = useState<boolean>(true);\n\t\tconst variableRegex = /.*\\..*/;\n\n\t\tconst [variableList, setVariableList] = useState<VariableListInterfaceV2[]>(\n\t\t\tprops.data,\n\t\t);\n\t\tconst [showOnlyRecommended, setShowOnlyRecommended] =\n\t\t\tuseState<boolean>(true);\n\n\t\tuseEffect(() => {\n\t\t\tconst navStack: any = {};\n\t\t\tdata.forEach((value) => {\n\t\t\t\tnavStack[value.displayName] = [];\n\t\t\t});\n\t\t\tsetNavigationStack(navStack);\n\t\t}, [data]);\n\n\t\tuseEffect(() => {\n\t\t\thandleRecommendedToggle(true);\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tconst isFirstPage = !variableKey;\n\t\t\thandleRecommendedToggle(showOnlyRecommended, isFirstPage);\n\t\t}, [payloadVar, variableKey]);\n\n\t\tuseEffect(() => {\n\t\t\tsetShowOnlyRecommended(true);\n\t\t\tsetSearchWord('');\n\t\t\tupdatePayloadvar([], variableKey);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[variableKey]: [],\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey('');\n\n\t\t\t// for recommended variables\n\t\t\tconst newList = props.data\n\t\t\t\t.map((value) => {\n\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t})\n\t\t\t\t.filter((value) => value !== null);\n\t\t\tsetVariableList(newList);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [props.reRender]);\n\n\t\tuseEffect(() => {\n\t\t\t// For showing empty UI when no results are found\n\t\t\tlet data = props.data;\n\t\t\tif (variableKey) {\n\t\t\t\tdata = [payloadVar[variableKey]];\n\t\t\t}\n\t\t\tconst newList = shouldShowNoResult(data, showOnlyRecommended);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [searchWord]);\n\n\t\tconst shouldShowNoResult = (data: any[], showOnlyRecommended = false) => {\n\t\t\treturn data.flatMap((value) => {\n\t\t\t\treturn Object.keys(value.variables).filter(\n\t\t\t\t\t(key) =>\n\t\t\t\t\t\t(value.variables[key].displayName\n\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\t\t(!showOnlyRecommended ||\n\t\t\t\t\t\t\t\tvalue.variables[key].isAvailable === showOnlyRecommended)) ||\n\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t);\n\t\t\t});\n\t\t};\n\n\t\tconst updatePayloadvar = (stack: Array<string>, key: string) => {\n\t\t\tconst variable = data.find((variable) => variable.displayName === key);\n\t\t\tif (variable) {\n\t\t\t\tlet temp = variable;\n\t\t\t\tstack.forEach((level, key) => {\n\t\t\t\t\ttemp = temp.variables[level];\n\t\t\t\t});\n\t\t\t\tsetPayloadVar((prev: any) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[key]: temp,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst hasVariablesInSubheader = (variable: Variable) => {\n\t\t\tlet isAvailable = false;\n\t\t\tif (variable.isSubHeader && variable.variables) {\n\t\t\t\tconst keys = Object.keys(variable.variables);\n\t\t\t\tfor (let i = 0; i < keys.length; i++) {\n\t\t\t\t\tconst key = keys[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\tvariable.variables &&\n\t\t\t\t\t\tvariable.variables[key].displayName\n\t\t\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\tvariable.variables[key].isAvailable === showOnlyRecommended\n\t\t\t\t\t) {\n\t\t\t\t\t\tisAvailable = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn isAvailable;\n\t\t};\n\n\t\tconst handleRecommendedToggle = (val: boolean, firstPage = false) => {\n\t\t\tsetShowOnlyRecommended(val);\n\t\t\tif (val) {\n\t\t\t\tlet newList: any[] = [];\n\t\t\t\tif (!variableKey || firstPage) {\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null);\n\t\t\t\t} else {\n\t\t\t\t\tconst selectedSubHeader = payloadVar[variableKey];\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.filter((value) => value.displayName === variableKey)\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value, selectedSubHeader);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null && value !== undefined);\n\t\t\t\t}\n\t\t\t\tsetVariableList(newList);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tnewList = shouldShowNoResult(newList, val);\n\t\t\t\t}\n\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetVariableList(props.data);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tconst newList = shouldShowNoResult(props.data, val);\n\t\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfunction removeUnavailableVariables(\n\t\t\tcustomerVariables: any,\n\t\t\tselectedSubHeader?: any,\n\t\t\tnewVariables: any = {},\n\t\t) {\n\t\t\tif (!selectedSubHeader) {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (customerVariables.variables[key].isAvailable) {\n\t\t\t\t\t\tnewVariables[key] = customerVariables.variables[key];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tcustomerVariables.variables[key].displayName ===\n\t\t\t\t\t\tselectedSubHeader.displayName\n\t\t\t\t\t) {\n\t\t\t\t\t\tfor (const subKey in customerVariables.variables[key].variables) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey].isAvailable\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewVariables[subKey] =\n\t\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// recursively find the match and available variables if its a subheader\n\t\t\t\t\t\tif (customerVariables.variables[key].isSubHeader) {\n\t\t\t\t\t\t\tremoveUnavailableVariables(\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key],\n\t\t\t\t\t\t\t\tselectedSubHeader,\n\t\t\t\t\t\t\t\tnewVariables,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (Object.keys(newVariables).length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn { ...customerVariables, variables: newVariables };\n\t\t}\n\n\t\tconst VariableBoxWithToolTip: React.FC<VariableBoxProps> = (props) => {\n\t\t\tconst description = props.item.description;\n\n\t\t\treturn props.readonly ? (\n\t\t\t\t<div>\n\t\t\t\t\t<VariableBox item={props.item} readonly={props.readonly} />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'pre-line', padding: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.item.isAvailable\n\t\t\t\t\t\t\t\t\t? description\n\t\t\t\t\t\t\t\t\t\t? `• ${description}\\n• Recommended here`\n\t\t\t\t\t\t\t\t\t\t: 'Recommended here'\n\t\t\t\t\t\t\t\t\t: 'Not recommended here'}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tdelay={300}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<VariableBox item={props.item} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\tconst VariableBox: React.FC<VariableBoxProps> = (varProps) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdarkMode={\n\t\t\t\t\t\tprops.enableVariable\n\t\t\t\t\t\t\t? props.enableVariable\n\t\t\t\t\t\t\t: varProps.item.isAvailable\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tvarProps.readonly\n\t\t\t\t\t\t\t? varProps.item.isSubHeader\n\t\t\t\t\t\t\t\t? false\n\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t: false\n\t\t\t\t\t}\n\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\tvarProps.item.isSubHeader\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: varProps.readonly\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: PlusIcon\n\t\t\t\t\t}\n\t\t\t\t\tTrailingIcon={() =>\n\t\t\t\t\t\tvarProps.item.isSubHeader ? (\n\t\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<RightFilled />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tbuttonText={varProps.item.displayName}\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\n\t\tconst renderPayloadvars = (variable: Variable, key: string) => {\n\t\t\t// Show only recommended variables\n\t\t\tif (showOnlyRecommended) {\n\t\t\t\tif (!variable.isAvailable) {\n\t\t\t\t\treturn <></>;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvariable.isSubHeader\n\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t// check if subheader has any available variables\n\t\t\t\t\t\t\t\t\tconst isAvailable = shouldShowNoResult(\n\t\t\t\t\t\t\t\t\t\t[variable],\n\t\t\t\t\t\t\t\t\t\tshowOnlyRecommended,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (!isAvailable.length) {\n\t\t\t\t\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// reset search word when subheader is clicked\n\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\tconst newStack = [\n\t\t\t\t\t\t\t\t\t\t...(navigationStack as any)[variableKey],\n\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\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  }\n\t\t\t\t\t\t\t: () => {\n\t\t\t\t\t\t\t\t\tif (props.customTrigger) {\n\t\t\t\t\t\t\t\t\t\tprops.customTrigger(variable);\n\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\t\t\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\t\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactualValue: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t);\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  }\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<VariableBoxWithToolTip item={variable} readonly={readonly} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t};\n\n\t\tconst variableClick = (value: VariableListInterfaceV2, key: string) => {\n\t\t\tconst newStack = [...(navigationStack as any)[value.displayName], key];\n\t\t\tupdatePayloadvar(newStack, value.displayName);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[value.displayName]: newStack,\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey(value.displayName);\n\t\t};\n\n\t\tconst checkIfArray = (value: string) => {\n\t\t\tconst regex = /\\w+\\[\\d+\\]/g;\n\t\t\treturn regex.test(value);\n\t\t};\n\n\t\tconst matchVariable = (variable: Variable) => {\n\t\t\tif (variable.actualValue.match(variableRegex)) {\n\t\t\t\tconst path = variable.actualValue\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.split('.');\n\t\t\t\tlet evalVariableValue = path[0];\n\t\t\t\tpath.forEach((value, index) => {\n\t\t\t\t\tif (index === 0) return;\n\t\t\t\t\tconst isArray = checkIfArray(value);\n\t\t\t\t\tif (isArray) {\n\t\t\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\t\t\tif (matches) {\n\t\t\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\t\t\tevalVariableValue =\n\t\t\t\t\t\t\t\tevalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: evalVariableValue,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: evalVariableValue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst value = variable.actualValueEval\n\t\t\t\t\t? variable.actualValueEval\n\t\t\t\t\t: variable.actualValue;\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: value,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: value,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst variableCustomClick = (\n\t\t\tvariableListInterfaceV2: VariableListInterfaceV2,\n\t\t\tkey: string,\n\t\t) => {\n\t\t\tif (props.customTrigger) {\n\t\t\t\tprops.customTrigger(variableListInterfaceV2.variables[key]);\n\t\t\t\tprops.setShowVariable(false);\n\t\t\t} else {\n\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\tconst variable = variableListInterfaceV2.variables[key];\n\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t} else {\n\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tactualValue:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t\t\t\t\tvariableType:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].variableType,\n\t\t\t\t\t\t\t\t\tneedsFetching:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].needsFetching,\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: variableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst getStyle = !props.isModalState\n\t\t\t? {\n\t\t\t\t\ttop: `${\n\t\t\t\t\t\tprops.topPosition\n\t\t\t\t\t\t\t? props.topPosition\n\t\t\t\t\t\t\t: props.pickerSize === 'small'\n\t\t\t\t\t\t\t? '300px'\n\t\t\t\t\t\t\t: '60px'\n\t\t\t\t\t}`,\n\t\t\t\t\tleft: `${props.leftPosition ? props.leftPosition + 24 : 430}px`,\n\t\t\t  }\n\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div id=\"varList\" tabIndex={-1}>\n\t\t\t\t<AddVariableStyled\n\t\t\t\t\tstyle={getStyle}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t\tpickerSize={props.pickerSize || 'large'}\n\t\t\t\t\tisModalState={props.isModalState}\n\t\t\t\t\tpositionStrategy={props.positionStrategy}\n\t\t\t\t\tzIndex={props.zindex}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\tneedsBorder={needsBorder}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t>\n\t\t\t\t\t{styledCloseBtn && (\n\t\t\t\t\t\t<CloseButtonContainer\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ zIndex: 300 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CloseButtonContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.showVariable && (\n\t\t\t\t\t\t<div className=\"popup\">\n\t\t\t\t\t\t\t<div className=\"sticky__bar\">\n\t\t\t\t\t\t\t\t{hasHeader && (\n\t\t\t\t\t\t\t\t\t<div className=\"header__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"add__variable\">Add a new variable</div>\n\t\t\t\t\t\t\t\t\t\t{!styledCloseBtn && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\t\ticonButtonType={'default'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIcon={CloseIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"search__bar\"\n\t\t\t\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\t\t\t\tprops.onSearchBlur && props.onSearchBlur(e);\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<SearchBar\n\t\t\t\t\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\t\t\t\t\tisEnabled={true}\n\t\t\t\t\t\t\t\t\t\tonChange={(searchText) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSearchWord(searchText);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonEnter={() => {\n\t\t\t\t\t\t\t\t\t\t\t// Do Nothing\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\treset={!searchWord ? true : false}\n\t\t\t\t\t\t\t\t\t\tplaceholder={'Search...'}\n\t\t\t\t\t\t\t\t\t\tvariant={'default'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\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\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\tShow only recommended variables\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tvalue={showOnlyRecommended}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={async (val) =>\n\t\t\t\t\t\t\t\t\t\t\t\tawait handleRecommendedToggle(val)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{variableKey && navigationStack[variableKey].length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"nav__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"left__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#919191', display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when back is clicked\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst newStack = navigationStack[variableKey].slice(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t-1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!newStack.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"right__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={UndoIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when navigating to first page\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar([], variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: [],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>First page</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\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\t{!variableFound && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\tmarginTop: 16,\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<TitleSmall>No results found!</TitleSmall>\n\t\t\t\t\t\t\t\t\t{showOnlyRecommended ? (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any recommended variables`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any results for \"${searchWord}\"`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"wrapper\">\n\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t<div className=\"items\">\n\t\t\t\t\t\t\t\t\t\t{!variableKey &&\n\t\t\t\t\t\t\t\t\t\t\tvariableList.map((value) => {\n\t\t\t\t\t\t\t\t\t\t\t\tlet searchList: any = [];\n\t\t\t\t\t\t\t\t\t\t\t\tif (searchWord) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList = Object.keys(value.variables).filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: '#616161',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 8, color: '#616161' }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(value.variables).map((key) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t{variableKey && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"items\" style={{ marginTop: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(payloadVar[variableKey].variables).map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key, _) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"bottom__padding\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</AddVariableStyled>\n\t\t\t</div>\n\t\t);\n\t},\n\t(prev, next) => {\n\t\tif (prev.enableVariable !== next.enableVariable) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.leftPosition !== next.leftPosition) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.reRender !== next.reRender) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t},\n);\n"],"names":["AddVariableV2","memo","props","data","hasHeader","needsBorder","styledCloseBtn","readonly","payloadVar","setPayloadVar","useState","navigationStack","setNavigationStack","variableKey","setVariableKey","searchWord","setSearchWord","variableFound","setVariableFound","variableRegex","variableList","setVariableList","showOnlyRecommended","setShowOnlyRecommended","useEffect","navStack","forEach","value","displayName","handleRecommendedToggle","updatePayloadvar","prev","Object","assign","newList","map","removeUnavailableVariables","filter","length","reRender","shouldShowNoResult","arguments","undefined","flatMap","keys","variables","key","_a","toLowerCase","includes","isAvailable","hasVariablesInSubheader","stack","variable","find","temp","level","isSubHeader","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","item","_jsx","children","VariableBox","_Fragment","Tooltip","body","tooltipContent","BodyCaption","color","COLORS","content","primaryInverse","style","whiteSpace","padding","width","delay","placement","varProps","Button","darkMode","enableVariable","size","disabled","LeadingIcon","PlusIcon","TrailingIcon","className","display","RightFilled","buttonText","renderPayloadvars","onClick","newStack","customTrigger","setShowVariable","isEvaluationList","matchVariable","setVariableValue","selectWithTypes","actualValue","variableType","needsFetching","variableClick","match","path","replace","split","evalVariableValue","index","isArray","test","checkIfArray","matches","arrayName","actualValueEval","variableCustomClick","variableListInterfaceV2","getStyle","isModalState","top","topPosition","pickerSize","left","leftPosition","id","tabIndex","_jsxs","AddVariableStyled","e","stopPropagation","positionStrategy","zIndex","zindex","height","CloseButtonContainer","CrossIcon","secondary","showVariable","alignItems","justifyContent","IconButton","iconButtonType","Icon","CloseIcon","onBlur","onSearchBlur","SearchBar","isEnabled","onChange","searchText","onEnter","reset","placeholder","variant","marginTop","BodySecondary","Switch","onValueChange","__awaiter","BackIcon","slice","TitleSmall","UndoIcon","flexDirection","searchList","marginBottom","_","next"],"mappings":"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"}

package/dist/esm/components/ai-modals/ActivateBikAI.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import n from"../../assets/icons/graph.svg.js";import o from"../../assets/icons/sparkle.svg.js";import{Button as r}from"../button/Button.js";import{Modal as s}from"../modals/Modal.js";import{TitleMedium as c,TitleLarge as l,BodyPrimary as a}from"../TypographyStyle.js";const d=({open:d,onModalClose:g,onRightBtnClick:p,onLeftBtnClick:h,source:y})=>e(s,Object.assign({open:d,centralContainerStyles:{height:"430px",width:"464px",borderRadius:"12px"},zIndex:40,onClose:g,closeOnOutsideClick:!0},{children:t("div",{children:[t("div",Object.assign({style:{height:"180px",width:"100%",backgroundColor:"rgba(142, 142, 142, 0.2)",display:"flex",justifyContent:"center",alignItems:"center",gap:"18px",padding:"24px"}},{children:[e("div",{children:e(n,{width:100,height:90})}),e("div",{children:e(c,"CHATBOT"===y?{children:"Unlock higher conversion and ease agent work with BIK.AI"}:{children:"Experience reduced Average Handling Time of your tickets with Bik.AI!"})})]})),t("div",Object.assign({style:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",gap:"16px",padding:"24px"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"4px"}},{children:[e(l,{children:"Activate BIK AI"}),e(o,{width:32,height:32})]})),t("div","CHATBOT"===y?Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e(a,Object.assign({color:"#888888"},{children:"Sync your Shopify Data to Bik.AI to supercharge it with"})),e(a,Object.assign({color:"#888888"},{children:"your store’s data to start personalizing it to your"})),e(a,Object.assign({color:"#888888"},{children:"customers!"}))]}):Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[t(a,Object.assign({color:"#888888"},{children:["Sync your Shopify Data to Bik.AI to supercharge it with"," "]})),e(a,Object.assign({color:"#888888"},{children:"your store’s data to start responding to customer"})),e(a,Object.assign({color:"#888888"},{children:"queries right away!"}))]}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px"}},{children:[e(r,{buttonText:"Learn More",buttonType:"text",size:"large",onClick:h}),e(r,{buttonText:"Sync Shopify Data",size:"large",style:{backgroundColor:i.background.brand},onClick:p})]}))]})}));export{d as ActivateBikAi};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import n from"../../assets/icons/graph.svg.js";import o from"../../assets/icons/sparkle.svg.js";import{Button as r}from"../button/Button.js";import{Modal as s}from"../modals/Modal.js";import{TitleMedium as c,TitleLarge as l,BodyPrimary as a}from"../TypographyStyle.js";const d=d=>{let{open:g,onModalClose:p,onRightBtnClick:h,onLeftBtnClick:y,source:u}=d;return e(s,Object.assign({open:g,centralContainerStyles:{height:"430px",width:"464px",borderRadius:"12px"},zIndex:40,onClose:p,closeOnOutsideClick:!0},{children:t("div",{children:[t("div",Object.assign({style:{height:"180px",width:"100%",backgroundColor:"rgba(142, 142, 142, 0.2)",display:"flex",justifyContent:"center",alignItems:"center",gap:"18px",padding:"24px"}},{children:[e("div",{children:e(n,{width:100,height:90})}),e("div",{children:e(c,"CHATBOT"===u?{children:"Unlock higher conversion and ease agent work with BIK.AI"}:{children:"Experience reduced Average Handling Time of your tickets with Bik.AI!"})})]})),t("div",Object.assign({style:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",gap:"16px",padding:"24px"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"4px"}},{children:[e(l,{children:"Activate BIK AI"}),e(o,{width:32,height:32})]})),t("div","CHATBOT"===u?Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e(a,Object.assign({color:"#888888"},{children:"Sync your Shopify Data to Bik.AI to supercharge it with"})),e(a,Object.assign({color:"#888888"},{children:"your store’s data to start personalizing it to your"})),e(a,Object.assign({color:"#888888"},{children:"customers!"}))]}):Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[t(a,Object.assign({color:"#888888"},{children:["Sync your Shopify Data to Bik.AI to supercharge it with"," "]})),e(a,Object.assign({color:"#888888"},{children:"your store’s data to start responding to customer"})),e(a,Object.assign({color:"#888888"},{children:"queries right away!"}))]}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px"}},{children:[e(r,{buttonText:"Learn More",buttonType:"text",size:"large",onClick:y}),e(r,{buttonText:"Sync Shopify Data",size:"large",style:{backgroundColor:i.background.brand},onClick:h})]}))]})}))};export{d as ActivateBikAi};
 //# sourceMappingURL=ActivateBikAI.js.map