@bikdotai/bik-component-library 0.0.853-beta.0 → 0.0.854

package/dist/cjs/components/toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import AlertTriangle from '@src/assets/icons/alert_triangle.svg';\nimport Check from '@src/assets/icons/check.svg';\nimport Cross from '@src/assets/icons/cross.svg';\nimport Error from '@src/assets/icons/errorInfo.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport React, {\n\tFunctionComponent,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tcssTransition,\n\tId,\n\ttoast,\n\tToastContainer,\n\tToastPosition,\n\tTypeOptions,\n} from 'react-toastify';\nimport { IconProps } from 'react-toastify/dist/components';\nimport { Button } from '@src/components/button';\nimport { ToasterStyled } from '@src/components/toaster/Toaster.styled';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type ToasterButtonProps = {\n\tshowButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n};\nexport type ToasterProps = {\n\ttext: string;\n\tsubText?: string;\n\tposition?: ToastPosition;\n\ttype?: 'info' | 'success' | 'error' | 'default' | 'warning';\n\tduration?: number;\n\tblocking?: boolean;\n\tcloseOnClick?: boolean;\n\thideProgressBar?: boolean;\n\tautoClose?: number | false | undefined;\n\tleftIcon?: React.ReactElement<IconProps>;\n\thideLeftIcon?: boolean;\n\tbuttonProps?: ToasterButtonProps;\n\tsecondButtonProps?: ToasterButtonProps;\n\tonCloseToast?: <T>(props: T) => void;\n\twidth?: string;\n\theight?: string;\n\thideCloseButton?: boolean;\n\tzIndex?: number;\n\ttoastId?: string;\n};\n\nconst CountDownBar: React.FC<{ duration: number }> = (props) => {\n\treturn (\n\t\t<BodySecondary\n\t\t\tcolor={`#9E9E9E`}\n\t\t\tcustomStyles={{\n\t\t\t\tfontWeight: 600,\n\t\t\t\tfontSize: 14,\n\t\t\t\twidth: 25,\n\t\t\t}}\n\t\t>\n\t\t\t{props.duration}s\n\t\t</BodySecondary>\n\t);\n};\n\nconst CloseButton: React.FC<{\n\ttype: string;\n\tcloseToast?: () => Record<string, never>;\n\talignTop?: boolean;\n\tblocking?: boolean;\n\tduration?: number;\n}> = (props) => {\n\tconst iconColor =\n\t\tprops.type === 'default'\n\t\t\t? COLORS.content.primary\n\t\t\t: props.type === 'success'\n\t\t\t? COLORS.content.positive\n\t\t\t: props.type === 'error'\n\t\t\t? COLORS.content.negative\n\t\t\t: props.type === 'warning'\n\t\t\t? COLORS.content.warning\n\t\t\t: COLORS.content.brand;\n\n\t// Each CloseButton has its own independent timer\n\tconst [timerValue, setTimerValue] = useState<number>(props.duration || -1);\n\n\tuseEffect(() => {\n\t\tif (!props.duration || props.duration <= 0) {\n\t\t\tsetTimerValue(-1);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimerValue(props.duration);\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetTimerValue((prev) => {\n\t\t\t\tconst next = prev - 1;\n\t\t\t\tif (next <= 0) {\n\t\t\t\t\tclearInterval(interval);\n\t\t\t\t\treturn -1;\n\t\t\t\t}\n\t\t\t\treturn next;\n\t\t\t});\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t}, [props.duration]);\n\n\t// Enable button when timerValue is -1, otherwise check blocking and timer\n\tconst isDisabled =\n\t\tprops.blocking && timerValue === -1\n\t\t\t? false\n\t\t\t: props.blocking && timerValue > 0;\n\n\tconst handleClick = () => {\n\t\tif (!isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' && !isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\trole={'button'}\n\t\t\tstyle={{\n\t\t\t\twidth: timerValue > 0 ? 25 : 20,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tcursor: isDisabled ? 'not-allowed' : 'pointer',\n\t\t\t\talignSelf: `${props.alignTop ? 'flex-start' : 'center'}`,\n\t\t\t\topacity: isDisabled ? 0.5 : 1,\n\t\t\t}}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t>\n\t\t\t{timerValue > 0 ? (\n\t\t\t\t<CountDownBar duration={timerValue} />\n\t\t\t) : (\n\t\t\t\t<Cross height={20} width={20} color={iconColor} />\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nconst RenderContent: React.FC<{\n\ttoastText?: string;\n\ttype: TypeOptions;\n\tshowButton?: boolean;\n\tshowSecondButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tonSecondButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n\tsecondButtonText?: string;\n\tsubText?: string;\n}> = (props) => {\n\tconst strokeColor = COLORS.content.placeholder;\n\n\tconst { toasterText: toasterTextContext } = useContext(ToastContext);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\tmarginRight: 16,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\toverflowWrap: 'break-word',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.subText ? (\n\t\t\t\t\t\t\t<TitleSmall color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<BodySecondary color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subText && (\n\t\t\t\t\t\t\t<div style={{ marginTop: 2 }}>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{props.subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{props.showButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t\tmarginRight: props.showSecondButton ? 4 : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.buttonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props.showSecondButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.secondButtonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onSecondButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!(props.showButton || props.showSecondButton) ? null : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: 28,\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\tborderRight: `1px solid ${strokeColor}`,\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\ntype Props = ToasterProps;\n\nexport const Toaster: FunctionComponent<Props> = (props) => {\n\tconst toastId = useRef<Id>(props.toastId || 'default-toast');\n\tconst [toastLocal, setToastLocal] = useState(props.text);\n\tconst bounce = cssTransition({\n\t\tenter: 'Toastify__slide-enter',\n\t\texit: 'Toastify__slide-exit',\n\t});\n\n\tconst leftIcon =\n\t\tprops.type === 'default' ? null : props.type === 'success' ? (\n\t\t\t<Check width={20} height={20} color={COLORS.content.positive} />\n\t\t) : props.type === 'error' ? (\n\t\t\t<Error width={20} height={20} color={COLORS.content.negative} />\n\t\t) : props.type === 'warning' ? (\n\t\t\t<AlertTriangle width={20} height={20} color={COLORS.content.warning} />\n\t\t) : (\n\t\t\t<Info width={20} height={20} color={COLORS.content.brand} />\n\t\t);\n\n\tuseEffect(() => {\n\t\t// When toast id is same but text needed to change, we change the text in context and let the toast re-render on its own.\n\t\tif (toastId.current && toastId.current === props.toastId) {\n\t\t\tsetToastLocal(props.text);\n\t\t\ttoast.update(toastId.current, {\n\t\t\t\tautoClose: props.autoClose,\n\t\t\t});\n\t\t\t// If toast ids are different, we call notify again which will stack the toasts up\n\t\t} else if (toastId.current && toastId.current !== props.toastId) {\n\t\t\tnotify(props.text);\n\t\t}\n\t}, [props.toastId, props.text]);\n\n\tconst notify = (toastText?: string) => {\n\t\tif (props.hideLeftIcon !== undefined || props.leftIcon) {\n\t\t\ttoast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.hideLeftIcon === true ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : props.leftIcon ? (\n\t\t\t\t\t\t\tprops.leftIcon\n\t\t\t\t\t\t) : props.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\tcloseButton: (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t} else {\n\t\t\ttoastId.current = toast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\tcloseButton: (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tnotify();\n\t}, []);\n\n\treturn ReactDOM.createPortal(\n\t\t<ToasterStyled\n\t\t\twidth={props.width}\n\t\t\theight={props.height}\n\t\t\tzIndex={props.zIndex}\n\t\t\tisSubTextIncluded={!!props.subText}\n\t\t\ttype={props.type}\n\t\t>\n\t\t\t<ToastContext.Provider value={{ toasterText: toastLocal }}>\n\t\t\t\t<ToastContainer\n\t\t\t\t\tposition={props.position || 'top-right'}\n\t\t\t\t\tcloseOnClick={props.closeOnClick || false}\n\t\t\t\t\thideProgressBar={props.hideProgressBar || false}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tautoClose={props.autoClose || false}\n\t\t\t\t\ttheme={'colored'}\n\t\t\t\t/>\n\t\t\t</ToastContext.Provider>\n\t\t</ToasterStyled>,\n\t\tdocument.body,\n\t);\n};\n\nconst ToastContext = React.createContext({\n\ttoasterText: '',\n});\n"],"names":["CountDownBar","props","jsxs","BodySecondary","CloseButton","iconColor","COLORS","timerValue","setTimerValue","useState","useEffect","interval","prev","next","isDisabled","handleClick","handleKeyDown","e","jsx","Cross","RenderContent","strokeColor","toasterTextContext","useContext","ToastContext","Fragment","TitleSmall","BodyCaption","Button","Toaster","toastId","useRef","toastLocal","setToastLocal","bounce","cssTransition","leftIcon","Check","Error","AlertTriangle","Info","toast","notify","toastText","ReactDOM","ToasterStyled","ToastContainer","React"],"mappings":"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"}
+{"version":3,"file":"Toaster.js","sources":["../../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import AlertTriangle from '@src/assets/icons/alert_triangle.svg';\nimport Check from '@src/assets/icons/check.svg';\nimport Cross from '@src/assets/icons/cross.svg';\nimport Error from '@src/assets/icons/errorInfo.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport React, {\n\tFunctionComponent,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tcssTransition,\n\tId,\n\ttoast,\n\tToastContainer,\n\tToastPosition,\n\tTypeOptions,\n} from 'react-toastify';\nimport { IconProps } from 'react-toastify/dist/components';\nimport { Button } from '@src/components/button';\nimport { ToasterStyled } from '@src/components/toaster/Toaster.styled';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type ToasterButtonProps = {\n\tshowButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n};\nexport type ToasterProps = {\n\ttext: string;\n\tsubText?: string;\n\tposition?: ToastPosition;\n\ttype?: 'info' | 'success' | 'error' | 'default' | 'warning';\n\tduration?: number;\n\tblocking?: boolean;\n\tcloseOnClick?: boolean;\n\thideProgressBar?: boolean;\n\tautoClose?: number | false | undefined;\n\tleftIcon?: React.ReactElement<IconProps>;\n\thideLeftIcon?: boolean;\n\tbuttonProps?: ToasterButtonProps;\n\tsecondButtonProps?: ToasterButtonProps;\n\tonCloseToast?: <T>(props: T) => void;\n\twidth?: string;\n\theight?: string;\n\thideCloseButton?: boolean;\n\tzIndex?: number;\n\ttoastId?: string;\n};\n\nconst CountDownBar: React.FC<{ duration: number }> = (props) => {\n\treturn (\n\t\t<BodySecondary\n\t\t\tcolor={`#9E9E9E`}\n\t\t\tcustomStyles={{\n\t\t\t\tfontWeight: 600,\n\t\t\t\tfontSize: 14,\n\t\t\t\twidth: 25,\n\t\t\t}}\n\t\t>\n\t\t\t{props.duration}s\n\t\t</BodySecondary>\n\t);\n};\n\nconst CloseButton: React.FC<{\n\ttype: string;\n\tcloseToast?: () => Record<string, never>;\n\talignTop?: boolean;\n\tblocking?: boolean;\n\tduration?: number;\n}> = (props) => {\n\tconst iconColor =\n\t\tprops.type === 'default'\n\t\t\t? COLORS.content.primary\n\t\t\t: props.type === 'success'\n\t\t\t? COLORS.content.positive\n\t\t\t: props.type === 'error'\n\t\t\t? COLORS.content.negative\n\t\t\t: props.type === 'warning'\n\t\t\t? COLORS.content.warning\n\t\t\t: COLORS.content.brand;\n\n\t// Each CloseButton has its own independent timer\n\tconst [timerValue, setTimerValue] = useState<number>(props.duration || -1);\n\n\tuseEffect(() => {\n\t\tif (!props.duration || props.duration <= 0) {\n\t\t\tsetTimerValue(-1);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimerValue(props.duration);\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetTimerValue((prev) => {\n\t\t\t\tconst next = prev - 1;\n\t\t\t\tif (next <= 0) {\n\t\t\t\t\tclearInterval(interval);\n\t\t\t\t\treturn -1;\n\t\t\t\t}\n\t\t\t\treturn next;\n\t\t\t});\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t}, [props.duration]);\n\n\t// Enable button when timerValue is -1, otherwise check blocking and timer\n\tconst isDisabled =\n\t\tprops.blocking && timerValue === -1\n\t\t\t? false\n\t\t\t: props.blocking && timerValue > 0;\n\n\tconst handleClick = () => {\n\t\tif (!isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' && !isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\trole={'button'}\n\t\t\tstyle={{\n\t\t\t\twidth: timerValue > 0 ? 25 : 20,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tcursor: isDisabled ? 'not-allowed' : 'pointer',\n\t\t\t\talignSelf: `${props.alignTop ? 'flex-start' : 'center'}`,\n\t\t\t\topacity: isDisabled ? 0.5 : 1,\n\t\t\t\t// Pin to the toast's right edge. react-toastify clones this element\n\t\t\t\t// without adding the `Toastify__close-button` class, so the toast's\n\t\t\t\t// own stylesheet cannot position it.\n\t\t\t\tmarginLeft: 'auto',\n\t\t\t\tflexShrink: 0,\n\t\t\t}}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t>\n\t\t\t{timerValue > 0 ? (\n\t\t\t\t<CountDownBar duration={timerValue} />\n\t\t\t) : (\n\t\t\t\t<Cross height={20} width={20} color={iconColor} />\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nconst RenderContent: React.FC<{\n\ttoastText?: string;\n\ttype: TypeOptions;\n\tshowButton?: boolean;\n\tshowSecondButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tonSecondButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n\tsecondButtonText?: string;\n\tsubText?: string;\n}> = (props) => {\n\tconst strokeColor = COLORS.content.placeholder;\n\n\tconst { toasterText: toasterTextContext } = useContext(ToastContext);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\tmarginRight: 16,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\toverflowWrap: 'break-word',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.subText ? (\n\t\t\t\t\t\t\t<TitleSmall color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<BodySecondary color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subText && (\n\t\t\t\t\t\t\t<div style={{ marginTop: 2 }}>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{props.subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{props.showButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t\tmarginRight: props.showSecondButton ? 4 : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.buttonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props.showSecondButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.secondButtonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onSecondButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!(props.showButton || props.showSecondButton) ? null : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: 28,\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\tborderRight: `1px solid ${strokeColor}`,\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\ntype Props = ToasterProps;\n\nexport const Toaster: FunctionComponent<Props> = (props) => {\n\tconst toastId = useRef<Id>(props.toastId || 'default-toast');\n\tconst [toastLocal, setToastLocal] = useState(props.text);\n\tconst bounce = cssTransition({\n\t\tenter: 'Toastify__slide-enter',\n\t\texit: 'Toastify__slide-exit',\n\t});\n\n\tconst leftIcon =\n\t\tprops.type === 'default' ? null : props.type === 'success' ? (\n\t\t\t<Check width={20} height={20} color={COLORS.content.positive} />\n\t\t) : props.type === 'error' ? (\n\t\t\t<Error width={20} height={20} color={COLORS.content.negative} />\n\t\t) : props.type === 'warning' ? (\n\t\t\t<AlertTriangle width={20} height={20} color={COLORS.content.warning} />\n\t\t) : (\n\t\t\t<Info width={20} height={20} color={COLORS.content.brand} />\n\t\t);\n\n\tuseEffect(() => {\n\t\t// When toast id is same but text needed to change, we change the text in context and let the toast re-render on its own.\n\t\tif (toastId.current && toastId.current === props.toastId) {\n\t\t\tsetToastLocal(props.text);\n\t\t\ttoast.update(toastId.current, {\n\t\t\t\tautoClose: props.autoClose,\n\t\t\t});\n\t\t\t// If toast ids are different, we call notify again which will stack the toasts up\n\t\t} else if (toastId.current && toastId.current !== props.toastId) {\n\t\t\tnotify(props.text);\n\t\t}\n\t}, [props.toastId, props.text]);\n\n\tconst notify = (toastText?: string) => {\n\t\tif (props.hideLeftIcon !== undefined || props.leftIcon) {\n\t\t\ttoast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.hideLeftIcon === true ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : props.leftIcon ? (\n\t\t\t\t\t\t\tprops.leftIcon\n\t\t\t\t\t\t) : props.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\tcloseButton: props.hideCloseButton ? (\n\t\t\t\t\t\tfalse\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t} else {\n\t\t\ttoastId.current = toast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\tcloseButton: props.hideCloseButton ? (\n\t\t\t\t\t\tfalse\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tnotify();\n\t}, []);\n\n\treturn ReactDOM.createPortal(\n\t\t<ToasterStyled\n\t\t\twidth={props.width}\n\t\t\theight={props.height}\n\t\t\tzIndex={props.zIndex}\n\t\t\tisSubTextIncluded={!!props.subText}\n\t\t\ttype={props.type}\n\t\t>\n\t\t\t<ToastContext.Provider value={{ toasterText: toastLocal }}>\n\t\t\t\t<ToastContainer\n\t\t\t\t\tposition={props.position || 'top-right'}\n\t\t\t\t\tcloseOnClick={props.closeOnClick || false}\n\t\t\t\t\thideProgressBar={props.hideProgressBar || false}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tautoClose={props.autoClose || false}\n\t\t\t\t\ttheme={'colored'}\n\t\t\t\t/>\n\t\t\t</ToastContext.Provider>\n\t\t</ToasterStyled>,\n\t\tdocument.body,\n\t);\n};\n\nconst ToastContext = React.createContext({\n\ttoasterText: '',\n});\n"],"names":["CountDownBar","props","jsxs","BodySecondary","CloseButton","iconColor","COLORS","timerValue","setTimerValue","useState","useEffect","interval","prev","next","isDisabled","handleClick","handleKeyDown","e","jsx","Cross","RenderContent","strokeColor","toasterTextContext","useContext","ToastContext","Fragment","TitleSmall","BodyCaption","Button","Toaster","toastId","useRef","toastLocal","setToastLocal","bounce","cssTransition","leftIcon","Check","Error","AlertTriangle","Info","toast","notify","toastText","ReactDOM","ToasterStyled","ToastContainer","React"],"mappings":"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"}

package/dist/cjs/components/toaster/Toaster.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),o=require("../../constants/Theme.js"),a=require("../../constants/zindex.js"),e=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=e(i),s=r.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),o=require("../../constants/Theme.js"),e=require("../../constants/zindex.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=a(i),s=r.default.div`
 	--toastify-color-light: #fff;
 	--toastify-color-dark: #121212;
 	--toastify-text-color-success: ${o.COLORS.content.primary};
@@ -14,7 +14,7 @@
 	--toastify-toast-min-height: ${t=>t.height||(t.isSubTextIncluded?"70px":"56px")};
 	--toastify-toast-max-height: ${t=>t.height||"fit-content"};
 	font-family: inherit;
-	z-index: ${t=>t.zIndex||a.ComponentZindex.TOASTER};
+	z-index: ${t=>t.zIndex||e.ComponentZindex.TOASTER};
 
 	.custom-position {
 		position: relative;
@@ -95,7 +95,8 @@
 		border-radius: 8px;
 		word-wrap: break-word;
 		overflow-wrap: break-word;
-		overflow: visible;
+		/* Clips the absolutely positioned progress bar to the 8px radius */
+		overflow: hidden;
 
 		@media (max-width: 768px) {
 			min-width: 80vw;
@@ -108,10 +109,9 @@
 		height: 4px;
 	}
 
-	.Toastify__close-button {
-		display: block;
-		margin: auto;
-	}
+	/* NOTE: no .Toastify__close-button rule here — the close button is always a
+	   custom element passed via the closeButton option, and react-toastify
+	   clones it without adding that class. It is positioned inline instead. */
 
 	.Toastify__toast-icon {
 		align-self: center;

package/dist/cjs/components/toaster/Toaster.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tmargin: 0 32px;\n\t\t}\n\t}\n\n\t/* Mobile positioning - only for top-right (default) */\n\t.Toastify__toast-container--top-right {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 35%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-left */\n\t.Toastify__toast-container--top-left {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for bottom positions */\n\t.Toastify__toast-container--bottom-right,\n\t.Toastify__toast-container--bottom-left,\n\t.Toastify__toast-container--bottom-center {\n\t\t@media (max-width: 768px) {\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-center */\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\toverflow: visible;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmin-width: 80vw;\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.isSubTextIncluded ? '16px 16px' : '12px 16px'};\n\t\t}\n\t}\n\n\t.Toastify__progress-bar {\n\t\theight: 4px;\n\t}\n\n\t.Toastify__close-button {\n\t\tdisplay: block;\n\t\tmargin: auto;\n\t}\n\n\t.Toastify__toast-icon {\n\t\talign-self: center;\n\t\tmargin-inline-end: 12px;\n\t\theight: ${(props) => (props.isSubTextIncluded ? '38px' : '20px')};\n\t}\n\n\t.Toastify__toast-body {\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {\n\t\tbackground: ${COLORS.content.warning};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {\n\t\tbackground: ${COLORS.content.positive};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n\t\tbackground: ${COLORS.content.negative};\n\t}\n\n\t.Toastify__toast-body > div:last-child {\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__slide-enter {\n\t\tanimation: slideIn 1s ease forwards,\n\t\t\tbounce cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s both;\n\t}\n\t.Toastify__slide-exit {\n\t\tanimation: slideOut 0.5s ease-in-out forwards;\n\t}\n\t@keyframes bounce {\n\t\t0%,\n\t\t20%,\n\t\t50%,\n\t\t80%,\n\t\t100% {\n\t\t\ttransform: translateY(0); /* Start and end at the original position */\n\t\t}\n\t\t40% {\n\t\t\ttransform: translateX(-20px); /* Bouncing up */\n\t\t}\n\t\t60% {\n\t\t\ttransform: translateX(20px); /* Small bounce before settling */\n\t\t}\n\t}\n\t@keyframes slideIn {\n\t\t0% {\n\t\t\ttransform: translateX(-100%); /* Start off-screen to the left */\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0); /* End at the original position */\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes slideOut {\n\t\t0% {\n\t\t\ttransform: translateX(0); /* Start from the original position */\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(100%); /* Slide out to the right */\n\t\t\topacity: 0;\n\t\t}\n\t}\n`;\n"],"names":["ToasterStyled","styled","COLORS","props","ComponentZindex"],"mappings":"iQAKaA,EAAgBC,EAAAA,QAAO;AAAA;AAAA;AAAA,kCASFC,EAAAA,OAAO,QAAQ,OAAO;AAAA,gCACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,kCACpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,+BACzBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,0BAC3BA,EAAAA,OAAO,WAAW,UAAU;AAAA,6BACzBA,SAAO,WAAW,SAAS,KAAK;AAAA,2BAClCA,SAAO,WAAW,SAAS,KAAK;AAAA,6BAC9BA,SAAO,WAAW,QAAQ,KAAK;AAAA,gCAC5BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,gCAErBC,GAC/BA,EAAM,SAAWA,EAAM,kBAAoB,OAAS,OAAO;AAAA,gCAC5BA,GAAUA,EAAM,QAAU,aAAa;AAAA;AAAA,YAE3DA,GAAUA,EAAM,QAAUC,EAAAA,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAuDxCF,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAAA,OAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,sBAI3BA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrBA,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,SAAO,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,aAItCC,GAAWA,EAAM,kBAAoB,WAAa,UAAW;AAAA,eAC3DA,GAAUA,EAAM,OAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUjCA,GACXA,EAAM,kBAAoB,YAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAgB1CA,GAAWA,EAAM,kBAAoB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASlDD,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIvBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tmargin: 0 32px;\n\t\t}\n\t}\n\n\t/* Mobile positioning - only for top-right (default) */\n\t.Toastify__toast-container--top-right {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 35%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-left */\n\t.Toastify__toast-container--top-left {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for bottom positions */\n\t.Toastify__toast-container--bottom-right,\n\t.Toastify__toast-container--bottom-left,\n\t.Toastify__toast-container--bottom-center {\n\t\t@media (max-width: 768px) {\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-center */\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\t/* Clips the absolutely positioned progress bar to the 8px radius */\n\t\toverflow: hidden;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmin-width: 80vw;\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.isSubTextIncluded ? '16px 16px' : '12px 16px'};\n\t\t}\n\t}\n\n\t.Toastify__progress-bar {\n\t\theight: 4px;\n\t}\n\n\t/* NOTE: no .Toastify__close-button rule here — the close button is always a\n\t   custom element passed via the closeButton option, and react-toastify\n\t   clones it without adding that class. It is positioned inline instead. */\n\n\t.Toastify__toast-icon {\n\t\talign-self: center;\n\t\tmargin-inline-end: 12px;\n\t\theight: ${(props) => (props.isSubTextIncluded ? '38px' : '20px')};\n\t}\n\n\t.Toastify__toast-body {\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {\n\t\tbackground: ${COLORS.content.warning};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {\n\t\tbackground: ${COLORS.content.positive};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n\t\tbackground: ${COLORS.content.negative};\n\t}\n\n\t.Toastify__toast-body > div:last-child {\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__slide-enter {\n\t\tanimation: slideIn 1s ease forwards,\n\t\t\tbounce cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s both;\n\t}\n\t.Toastify__slide-exit {\n\t\tanimation: slideOut 0.5s ease-in-out forwards;\n\t}\n\t@keyframes bounce {\n\t\t0%,\n\t\t20%,\n\t\t50%,\n\t\t80%,\n\t\t100% {\n\t\t\ttransform: translateY(0); /* Start and end at the original position */\n\t\t}\n\t\t40% {\n\t\t\ttransform: translateX(-20px); /* Bouncing up */\n\t\t}\n\t\t60% {\n\t\t\ttransform: translateX(20px); /* Small bounce before settling */\n\t\t}\n\t}\n\t@keyframes slideIn {\n\t\t0% {\n\t\t\ttransform: translateX(-100%); /* Start off-screen to the left */\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0); /* End at the original position */\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes slideOut {\n\t\t0% {\n\t\t\ttransform: translateX(0); /* Start from the original position */\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(100%); /* Slide out to the right */\n\t\t\topacity: 0;\n\t\t}\n\t}\n`;\n"],"names":["ToasterStyled","styled","COLORS","props","ComponentZindex"],"mappings":"iQAKaA,EAAgBC,EAAAA,QAAO;AAAA;AAAA;AAAA,kCASFC,EAAAA,OAAO,QAAQ,OAAO;AAAA,gCACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,kCACpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,+BACzBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,0BAC3BA,EAAAA,OAAO,WAAW,UAAU;AAAA,6BACzBA,SAAO,WAAW,SAAS,KAAK;AAAA,2BAClCA,SAAO,WAAW,SAAS,KAAK;AAAA,6BAC9BA,SAAO,WAAW,QAAQ,KAAK;AAAA,gCAC5BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,gCAErBC,GAC/BA,EAAM,SAAWA,EAAM,kBAAoB,OAAS,OAAO;AAAA,gCAC5BA,GAAUA,EAAM,QAAU,aAAa;AAAA;AAAA,YAE3DA,GAAUA,EAAM,QAAUC,EAAAA,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAuDxCF,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAAA,OAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,sBAI3BA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrBA,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,SAAO,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,aAItCC,GAAWA,EAAM,kBAAoB,WAAa,UAAW;AAAA,eAC3DA,GAAUA,EAAM,OAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWjCA,GACXA,EAAM,kBAAoB,YAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAe1CA,GAAWA,EAAM,kBAAoB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASlDD,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIvBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/variable-picker-v3/Content.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),J=require("../../assets/icons/arrow_back.svg.js"),oe=require("../../assets/icons/cross.svg.js"),re=require("../../assets/icons/plus.svg.js"),le=require("../../assets/icons/triangle_error.svg.js"),c=require("react"),ce=require("react-dom"),u=require("../../constants/Theme.js"),S=require("../TypographyStyle.js"),ie=require("./context.js"),de=require("./DefaultVariableContent.js"),Q=require("./highlightSearchText.js"),ue=require("./model.js"),he=require("./NoResult.js"),x=require("./recommendVaribles.js"),C=require("./searchVariables.js"),R=require("./styles.js"),D=require("./SubHeaderItems.js"),L=require("../icon-button/IconButton.js"),me=require("../input/Input.js"),fe=require("../switch/Switch.js"),ye=require("../accordion/Accordion.js"),U=require("../tooltips/Tooltip.js"),ge=require("../list-item/ListItem.js"),Se=/.*\..*/,xe=n=>/\w+\[\d+\]/g.test(n),pe=n=>{if(n.actualValue.match(Se)){const i=n.actualValue.replace("{{","").replace("}}","").split(".");let d=i[0];return i.forEach((y,p)=>{if(p===0)return;if(xe(y)){const g=y.match(/(\w+)\[(\d+)\]/);if(g){const k=g[1],w=g[2];d=d+`['${k}'][${w}]`}}else d=d+`['${y}']`}),d}else return n.actualValueEval?n.actualValueEval:n.actualValue},be=n=>{const{data:i,onSelect:d,showHeader:y,showBackButton:p,hideHeaderCross:H,onBackButtonClick:g,isEvaluationList:k,autoOpenFirst:w,headerText:X,contentHeight:N,onDefaultVariableSelect:Y,skipDefaultVariableContent:O}=n,[b,r]=c.useState(i),[l,B]=c.useState(""),[a,P]=c.useState([]),[T,v]=c.useState(""),[m,E]=c.useState(!1),[q,F]=c.useState([]),[h,I]=c.useState(!1),[A,$]=c.useState(),j=c.useRef(null),M=c.useRef([]),Z=h&&n.type===ue.PickerType.EMBEDDED&&!H;c.useEffect(()=>{_(n.showRecommendedBar??!0)},[]),c.useEffect(()=>{a.length>0?F([a[a.length-1]]):F(i)},[a]);const ee=e=>{e.stopPropagation();let o=l;const s=[...a],V=s.pop();V.displayName===T&&(o="");const G=M.current.pop()??0;if(ce.flushSync(()=>{if(P(s),V.displayName===T&&B(""),o.length>0){const f=s.length>0?[s[s.length-1]]:i,K=C.searchVariables(o,f,s);if(m){const ae=x.showOnlyRecommendedVariables(K,s);r(ae)}else r(K)}else if(s.length>0)if(m){const f=x.showOnlyRecommendedVariables([s[s.length-1].variables],s);r(f)}else r([s[s.length-1].variables]);else if(m){const f=x.showOnlyRecommendedVariables(i,s);r(f)}else r(i)}),j.current&&G>0){const f=j.current;setTimeout(()=>{f.scrollTo({top:G,behavior:"smooth"})},300)}},_=async e=>{if(E(e),e){const o=x.showOnlyRecommendedVariables(b,a);r(o)}else if(a.length>0){const o=T==a[a.length-1].displayName;if(l.length>0&&o){const s=C.searchVariables(l,q,a);r(s)}else r([a[a.length-1].variables])}else if(l.length>0){const o=C.searchVariables(l,q,a);r(o)}else r(i)},W=()=>{if(N)return N;let e=131;return(n.showSearch??!0)||(e-=52),(n.showRecommendedBar??!0)||(e-=45),a.length>0&&(e+=32),(n.showHeader||n.showBackButton)&&(e+=40),`calc(100% - ${e}px)`},te=e=>{e||v("");const o=C.searchVariables(e,q,a);if(m){const V=x.showOnlyRecommendedVariables(o,a);r(V)}else r(o);B(e);const s=a.length>0?a[a.length-1].displayName:"home";v(s)},ne=()=>t.jsx(J.default,{width:16,height:16,style:{display:"flex",color:u.COLORS.content.primary}}),se=()=>t.jsx(J.default,{width:12,height:12,style:{color:u.COLORS.content.secondary}}),z=e=>{if(!n.disabled)if(k){const o=pe(e);d({...e,actualValue:o})}else{if(e.isDefaultValueSupported&&!O){$(e),I(!0);return}d(e)}};return t.jsx(ie.VariablePickerContext.Provider,{value:{variables:b,searchText:l,subHeaderStack:a,showRecommended:m,setSubHeaderStack:P,setSearchText:B,setVariables:r,setShowRecommended:E,containerRef:j,scrollPositionStack:M},children:t.jsxs("div",{tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:8,height:"100%",outline:"none"},onClick:e=>e.stopPropagation(),children:[(y||p||h)&&t.jsxs(R.HeaderWrapper,{openDefault:h,children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[(p||h)&&t.jsx(L.IconButton,{Icon:ne,onClick:()=>{h?I(!1):g&&g()}}),(y||h)&&t.jsx(S.TitleRegular,{children:h?"Set up":X??"Select Variable"})]}),Z&&t.jsx(L.IconButton,{style:{color:"#212121"},Icon:oe.default,onClick:()=>n.onClose&&n.onClose()})]}),h&&A&&!O?t.jsx(de.DefaultVariableContent,{variable:A,onInsertVariable:e=>{d(e),Y?.(e)}}):t.jsxs(t.Fragment,{children:[(n.showSearch??!0)&&t.jsx("div",{style:{padding:"0 16px",paddingTop:12,backgroundColor:u.COLORS.surface.subdued,borderTopLeftRadius:8,borderTopRightRadius:8},children:t.jsx(me.Input,{id:"search-bar-v3-picker",onBlur:e=>{n.onSearchBlur&&n.onSearchBlur(e)},value:l,noKeyDownChange:!0,placeholder:"Search",onChangeText:te})}),(n.showRecommendedBar??!0)&&t.jsxs(R.RecommendWrapper,{children:[t.jsx(S.BodySecondary,{style:{color:u.COLORS.content.secondary},children:"Only Recommended"}),t.jsx(fe.Switch,{"data-test":"variable-recommended-toggle",value:m,onValueChange:async e=>{await _(e)}})]}),a.length>0&&t.jsxs(R.BackHeader,{children:[t.jsx("div",{style:{position:"absolute",left:16},children:t.jsx(L.IconButton,{id:"back-btn-v3",style:{display:"flex"},Icon:se,onClick:ee})}),t.jsx(S.BodyCaption,{style:{color:u.COLORS.content.secondary},children:a[a.length-1].displayName})]}),t.jsx(t.Fragment,{children:b.length>0?t.jsx(R.Container,{ref:j,height:W(),children:b.map((e,o)=>e.displayName&&typeof e.variables<"u"?t.jsx("div",{style:{borderBottom:`1px solid ${u.COLORS.stroke.primary}`},children:t.jsx(ye.BikAccordion,{arrowColor:u.COLORS.content.primary,autoOpen:w&&o===0,headerPadding:"12px 16px",header:t.jsx(S.TitleSmall,{style:{color:u.COLORS.content.secondary},children:Q.highlightSearchText(e.displayName,l)}),children:t.jsx(D.default,{parentVariable:e,disabled:n.disabled??!1,searchText:l,variable:e.variables,onSelect:s=>{if(s.isDefaultValueSupported&&!O){$(s),I(!0);return}d(s)}})})},e.displayName+m):e.displayName?t.jsx(U.Tooltip,{body:D.renderTooltipBody(e),placement:"bottom",children:t.jsx(ge.ListItem,{variant:n.disabled?"readonly":e?.selected?"selected":"default",version:"2.0",leadingIcon:e?.selected||n.disabled?t.jsx(t.Fragment,{}):t.jsx("div",{style:{flexShrink:0},children:t.jsx(re.default,{width:14,height:14})}),customListItemLabel:t.jsxs("div",{style:{display:"flex",gap:4},children:[t.jsx(S.BodySecondary,{style:{fontSize:"14px",color:u.COLORS.text.primary},children:Q.highlightSearchText(e.displayName,l)}),!e.isAvailable&&t.jsx(U.Tooltip,{body:"Not Recommended",children:t.jsx("div",{style:{display:"flex",marginTop:2},children:t.jsx(le.default,{width:16,height:16,color:u.COLORS.content.secondary})})})]}),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>z(e)},o)},o):t.jsx(D.default,{disabled:n.disabled??!1,searchText:l,variable:e,onSelect:s=>z(s)},o))}):t.jsx(he.default,{height:W(),searchText:l})})]})]})})};exports.VariablePickerContent=be;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),J=require("../../assets/icons/arrow_back.svg.js"),ae=require("../../assets/icons/cross.svg.js"),re=require("../../assets/icons/plus.svg.js"),le=require("../../assets/icons/triangle_error.svg.js"),c=require("react"),ce=require("react-dom"),u=require("../../constants/Theme.js"),S=require("../TypographyStyle.js"),ie=require("./context.js"),de=require("./DefaultVariableContent.js"),Q=require("./highlightSearchText.js"),ue=require("./model.js"),he=require("./NoResult.js"),x=require("./recommendVaribles.js"),C=require("./searchVariables.js"),R=require("./styles.js"),D=require("./SubHeaderItems.js"),L=require("../icon-button/IconButton.js"),me=require("../input/Input.js"),fe=require("../switch/Switch.js"),ye=require("../accordion/Accordion.js"),U=require("../tooltips/Tooltip.js"),ge=require("../list-item/ListItem.js"),Se=/.*\..*/,xe=n=>/\w+\[\d+\]/g.test(n),pe=n=>{if(n.actualValue.match(Se)){const i=n.actualValue.replace("{{","").replace("}}","").split(".");let d=i[0];return i.forEach((y,p)=>{if(p===0)return;if(xe(y)){const g=y.match(/(\w+)\[(\d+)\]/);if(g){const k=g[1],w=g[2];d=d+`['${k}'][${w}]`}}else d=d+`['${y}']`}),d}else return n.actualValueEval?n.actualValueEval:n.actualValue},be=n=>{const{data:i,onSelect:d,showHeader:y,showBackButton:p,hideHeaderCross:H,onBackButtonClick:g,isEvaluationList:k,autoOpenFirst:w,headerText:X,contentHeight:N,onDefaultVariableSelect:Y,skipDefaultVariableContent:O}=n,[b,r]=c.useState(i),[l,B]=c.useState(""),[o,P]=c.useState([]),[T,v]=c.useState(""),[m,E]=c.useState(!1),[q,F]=c.useState([]),[h,I]=c.useState(!1),[A,$]=c.useState(),j=c.useRef(null),M=c.useRef([]),Z=h&&n.type===ue.PickerType.EMBEDDED&&!H;c.useEffect(()=>{_(n.showRecommendedBar??!0)},[]),c.useEffect(()=>{o.length>0?F([o[o.length-1]]):F(i)},[o]);const ee=e=>{e.stopPropagation();let a=l;const s=[...o],V=s.pop();V.displayName===T&&(a="");const G=M.current.pop()??0;if(ce.flushSync(()=>{if(P(s),V.displayName===T&&B(""),a.length>0){const f=s.length>0?[s[s.length-1]]:i,K=C.searchVariables(a,f,s);if(m){const oe=x.showOnlyRecommendedVariables(K,s);r(oe)}else r(K)}else if(s.length>0)if(m){const f=x.showOnlyRecommendedVariables([s[s.length-1].variables],s);r(f)}else r([s[s.length-1].variables]);else if(m){const f=x.showOnlyRecommendedVariables(i,s);r(f)}else r(i)}),j.current&&G>0){const f=j.current;setTimeout(()=>{f.scrollTo({top:G,behavior:"smooth"})},300)}},_=async e=>{if(E(e),e){const a=x.showOnlyRecommendedVariables(b,o);r(a)}else if(o.length>0){const a=T==o[o.length-1].displayName;if(l.length>0&&a){const s=C.searchVariables(l,q,o);r(s)}else r([o[o.length-1].variables])}else if(l.length>0){const a=C.searchVariables(l,q,o);r(a)}else r(i)},W=()=>{if(N)return N;let e=131;return(n.showSearch??!0)||(e-=52),(n.showRecommendedBar??!0)||(e-=45),o.length>0&&(e+=32),(n.showHeader||n.showBackButton)&&(e+=40),`calc(100% - ${e}px)`},te=e=>{e||v("");const a=C.searchVariables(e,q,o);if(m){const V=x.showOnlyRecommendedVariables(a,o);r(V)}else r(a);B(e);const s=o.length>0?o[o.length-1].displayName:"home";v(s)},ne=()=>t.jsx(J.default,{width:16,height:16,style:{display:"flex",color:u.COLORS.content.primary}}),se=()=>t.jsx(J.default,{width:12,height:12,style:{color:u.COLORS.content.secondary}}),z=e=>{if(!n.disabled)if(k){const a=pe(e);d({...e,actualValue:a})}else{if(e.isDefaultValueSupported&&!O){$(e),I(!0);return}d(e)}};return t.jsx(ie.VariablePickerContext.Provider,{value:{variables:b,searchText:l,subHeaderStack:o,showRecommended:m,setSubHeaderStack:P,setSearchText:B,setVariables:r,setShowRecommended:E,containerRef:j,scrollPositionStack:M},children:t.jsxs("div",{tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:8,height:"100%",outline:"none"},onClick:e=>e.stopPropagation(),children:[(y||p||h)&&t.jsxs(R.HeaderWrapper,{openDefault:h,children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[(p||h)&&t.jsx(L.IconButton,{Icon:ne,onClick:()=>{h?I(!1):g&&g()}}),(y||h)&&t.jsx(S.TitleRegular,{children:h?"Set up":X??"Select Variable"})]}),Z&&t.jsx(L.IconButton,{style:{color:"#212121"},Icon:ae.default,onClick:()=>n.onClose&&n.onClose()})]}),h&&A&&!O?t.jsx(de.DefaultVariableContent,{variable:A,onInsertVariable:e=>{d(e),Y?.(e)}}):t.jsxs(t.Fragment,{children:[(n.showSearch??!0)&&t.jsx("div",{style:{padding:"0 16px",paddingTop:12,backgroundColor:u.COLORS.surface.subdued,borderTopLeftRadius:8,borderTopRightRadius:8},children:t.jsx(me.Input,{id:"search-bar-v3-picker",onBlur:e=>{n.onSearchBlur&&n.onSearchBlur(e)},value:l,noKeyDownChange:!0,placeholder:"Search",onChangeText:te})}),(n.showRecommendedBar??!0)&&t.jsxs(R.RecommendWrapper,{children:[t.jsx(S.BodySecondary,{style:{color:u.COLORS.content.secondary},children:"Only Recommended"}),t.jsx(fe.Switch,{value:m,onValueChange:async e=>{await _(e)}})]}),o.length>0&&t.jsxs(R.BackHeader,{children:[t.jsx("div",{style:{position:"absolute",left:16},children:t.jsx(L.IconButton,{id:"back-btn-v3",style:{display:"flex"},Icon:se,onClick:ee})}),t.jsx(S.BodyCaption,{style:{color:u.COLORS.content.secondary},children:o[o.length-1].displayName})]}),t.jsx(t.Fragment,{children:b.length>0?t.jsx(R.Container,{ref:j,height:W(),children:b.map((e,a)=>e.displayName&&typeof e.variables<"u"?t.jsx("div",{style:{borderBottom:`1px solid ${u.COLORS.stroke.primary}`},children:t.jsx(ye.BikAccordion,{arrowColor:u.COLORS.content.primary,autoOpen:w&&a===0,headerPadding:"12px 16px",header:t.jsx(S.TitleSmall,{style:{color:u.COLORS.content.secondary},children:Q.highlightSearchText(e.displayName,l)}),children:t.jsx(D.default,{parentVariable:e,disabled:n.disabled??!1,searchText:l,variable:e.variables,onSelect:s=>{if(s.isDefaultValueSupported&&!O){$(s),I(!0);return}d(s)}})})},e.displayName+m):e.displayName?t.jsx(U.Tooltip,{body:D.renderTooltipBody(e),placement:"bottom",children:t.jsx(ge.ListItem,{variant:n.disabled?"readonly":e?.selected?"selected":"default",version:"2.0",leadingIcon:e?.selected||n.disabled?t.jsx(t.Fragment,{}):t.jsx("div",{style:{flexShrink:0},children:t.jsx(re.default,{width:14,height:14})}),customListItemLabel:t.jsxs("div",{style:{display:"flex",gap:4},children:[t.jsx(S.BodySecondary,{style:{fontSize:"14px",color:u.COLORS.text.primary},children:Q.highlightSearchText(e.displayName,l)}),!e.isAvailable&&t.jsx(U.Tooltip,{body:"Not Recommended",children:t.jsx("div",{style:{display:"flex",marginTop:2},children:t.jsx(le.default,{width:16,height:16,color:u.COLORS.content.secondary})})})]}),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>z(e)},a)},a):t.jsx(D.default,{disabled:n.disabled??!1,searchText:l,variable:e,onSelect:s=>z(s)},a))}):t.jsx(he.default,{height:W(),searchText:l})})]})]})})};exports.VariablePickerContent=be;
 //# sourceMappingURL=Content.js.map

package/dist/cjs/components/variable-picker-v3/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/variable-picker-v3/Content.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport CrossIcon from '@src/assets/icons/cross.svg';\nimport AddIcon from '@src/assets/icons/plus.svg';\nimport WarnIcon from '@src/assets/icons/triangle_error.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport { BikAccordion } from '../accordion';\nimport { IconButton } from '../icon-button';\nimport { Input } from '../input';\nimport { ListItem } from '../list-item';\nimport { Switch } from '../switch';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport { VariablePickerContext } from './context';\nimport { DefaultVariableContent } from './DefaultVariableContent';\nimport { highlightSearchText } from './highlightSearchText';\nimport {\n\tPickerType,\n\tSubHeader,\n\tVariablePickerV3Props,\n\tVariableV3,\n} from './model';\nimport NoResult from './NoResult';\nimport { showOnlyRecommendedVariables } from './recommendVaribles';\nimport { searchVariables } from './searchVariables';\nimport {\n\tBackHeader,\n\tContainer,\n\tHeaderWrapper,\n\tRecommendWrapper,\n} from './styles';\nimport SubHeaderItems, { renderTooltipBody } from './SubHeaderItems';\n\ntype Props = VariablePickerV3Props;\n\nconst variableRegex = /.*\\..*/;\nconst checkIfArray = (value: string) => {\n\tconst regex = /\\w+\\[\\d+\\]/g;\n\treturn regex.test(value);\n};\n\nconst matchVariable = (variable: VariableV3) => {\n\tif (variable.actualValue.match(variableRegex)) {\n\t\tconst path = variable.actualValue\n\t\t\t.replace('{{', '')\n\t\t\t.replace('}}', '')\n\t\t\t.split('.');\n\t\tlet evalVariableValue = path[0];\n\t\tpath.forEach((value, index) => {\n\t\t\tif (index === 0) return;\n\t\t\tconst isArray = checkIfArray(value);\n\t\t\tif (isArray) {\n\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\tif (matches) {\n\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\tevalVariableValue = evalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t}\n\t\t});\n\t\treturn evalVariableValue;\n\t} else {\n\t\tconst value = variable.actualValueEval\n\t\t\t? variable.actualValueEval\n\t\t\t: variable.actualValue;\n\t\treturn value;\n\t}\n};\n\nexport const VariablePickerContent: React.FC<Props> = (\n\tprops: VariablePickerV3Props,\n) => {\n\tconst {\n\t\tdata,\n\t\tonSelect,\n\t\tshowHeader,\n\t\tshowBackButton,\n\t\thideHeaderCross,\n\t\tonBackButtonClick,\n\t\tisEvaluationList,\n\t\tautoOpenFirst,\n\t\theaderText,\n\t\tcontentHeight,\n\t\tonDefaultVariableSelect,\n\t\tskipDefaultVariableContent,\n\t} = props;\n\n\tconst [variables, setVariables] = useState(data); // modified data after search\n\tconst [searchText, setSearchText] = useState<string>('');\n\tconst [subHeaderStack, setSubHeaderStack] = useState<any[]>([]); // push variable object after every level\n\tconst [searchedFrom, setSearchedFrom] = useState<string>(''); // from which level did the user search from\n\tconst [showRecommended, setShowRecommended] = useState<boolean>(false);\n\tconst [dataSource, setDataSource] = useState<any[]>([]); // for search, maintaining original copy\n\tconst [openDefaultVariablePanel, setOpenDefaultVariablePanel] =\n\t\tuseState(false);\n\tconst [chosenForDefault, setChosenForDefault] = useState<VariableV3 | null>();\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst scrollPositionStack = useRef<number[]>([]);\n\tconst shouldShowHeaderInsideCross =\n\t\topenDefaultVariablePanel &&\n\t\tprops.type === PickerType.EMBEDDED &&\n\t\t!hideHeaderCross;\n\n\t// useEffect(() => {\n\t// \t// TODO: based on new data, update existing variables if available\n\t// \tsetVariables(data);\n\t// }, [data]);\n\n\tuseEffect(() => {\n\t\thandleRecommendedChange(props.showRecommendedBar ?? true);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (subHeaderStack.length > 0) {\n\t\t\tsetDataSource([subHeaderStack[subHeaderStack.length - 1]]);\n\t\t} else {\n\t\t\tsetDataSource(data);\n\t\t}\n\t}, [subHeaderStack]);\n\n\tconst handleBackClick = (e: any) => {\n\t\te.stopPropagation();\n\t\tlet _searchText = searchText;\n\t\tconst newSubHeaderStack = [...subHeaderStack];\n\t\tconst poppedElement = newSubHeaderStack.pop();\n\t\tif (poppedElement.displayName === searchedFrom) {\n\t\t\t_searchText = ''; // so that search is not trigerred in the below code\n\t\t}\n\t\tconst savedScrollTop = scrollPositionStack.current.pop() ?? 0;\n\n\t\t// Use flushSync to force synchronous DOM update so scroll can be\n\t\t// restored immediately after the new content is rendered\n\t\tflushSync(() => {\n\t\t\tsetSubHeaderStack(newSubHeaderStack);\n\t\t\tif (poppedElement.displayName === searchedFrom) {\n\t\t\t\tsetSearchText('');\n\t\t\t}\n\t\t\tif (_searchText.length > 0) {\n\t\t\t\t// maintain the search result when going back\n\t\t\t\tconst dataSource =\n\t\t\t\t\tnewSubHeaderStack.length > 0\n\t\t\t\t\t\t? [newSubHeaderStack[newSubHeaderStack.length - 1]]\n\t\t\t\t\t\t: data;\n\t\t\t\tconst result = searchVariables(\n\t\t\t\t\t_searchText,\n\t\t\t\t\tdataSource,\n\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t);\n\t\t\t\tif (showRecommended) {\n\t\t\t\t\tconst recommended = showOnlyRecommendedVariables(\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t\t);\n\t\t\t\t\tsetVariables(recommended);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariables(result);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (newSubHeaderStack.length > 0) {\n\t\t\t\t\tif (showRecommended) {\n\t\t\t\t\t\tconst recommended = showOnlyRecommendedVariables(\n\t\t\t\t\t\t\t[newSubHeaderStack[newSubHeaderStack.length - 1].variables],\n\t\t\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t\t\t);\n\t\t\t\t\t\tsetVariables(recommended);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariables([\n\t\t\t\t\t\t\tnewSubHeaderStack[newSubHeaderStack.length - 1].variables,\n\t\t\t\t\t\t]);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (showRecommended) {\n\t\t\t\t\t\tconst recommended = showOnlyRecommendedVariables(\n\t\t\t\t\t\t\tdata,\n\t\t\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t\t\t);\n\t\t\t\t\t\tsetVariables(recommended);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariables(data);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\t// Restore scroll after accordion expand animation completes.\n\t\t// The BikAccordion uses a 250ms CSS transition on max-height when\n\t\t// autoOpen fires. We must wait for that to finish so the Container\n\t\t// has enough scrollHeight to scroll to the saved position.\n\t\tif (containerRef.current && savedScrollTop > 0) {\n\t\t\tconst el = containerRef.current;\n\t\t\tsetTimeout(() => {\n\t\t\t\tel.scrollTo({ top: savedScrollTop, behavior: 'smooth' });\n\t\t\t}, 300);\n\t\t}\n\t};\n\n\tconst handleRecommendedChange = async (val) => {\n\t\tsetShowRecommended(val);\n\t\tif (val) {\n\t\t\tconst output = showOnlyRecommendedVariables(variables, subHeaderStack);\n\t\t\tsetVariables(output);\n\t\t} else {\n\t\t\tif (subHeaderStack.length > 0) {\n\t\t\t\t// dont apply search if not in the page where search started\n\t\t\t\tconst isInSearchStartPage =\n\t\t\t\t\tsearchedFrom == subHeaderStack[subHeaderStack.length - 1].displayName;\n\t\t\t\tif (searchText.length > 0 && isInSearchStartPage) {\n\t\t\t\t\tconst result = searchVariables(\n\t\t\t\t\t\tsearchText,\n\t\t\t\t\t\tdataSource,\n\t\t\t\t\t\tsubHeaderStack,\n\t\t\t\t\t);\n\t\t\t\t\tsetVariables(result);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariables([subHeaderStack[subHeaderStack.length - 1].variables]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (searchText.length > 0) {\n\t\t\t\t\tconst result = searchVariables(\n\t\t\t\t\t\tsearchText,\n\t\t\t\t\t\tdataSource,\n\t\t\t\t\t\tsubHeaderStack,\n\t\t\t\t\t);\n\t\t\t\t\tsetVariables(result);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariables(data);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tconst calculateHeight = () => {\n\t\tif (contentHeight) {\n\t\t\treturn contentHeight;\n\t\t}\n\t\tlet pickerContentHeight = 131;\n\t\tif (!(props.showSearch ?? true)) {\n\t\t\tpickerContentHeight -= 52;\n\t\t}\n\t\tif (!(props.showRecommendedBar ?? true)) {\n\t\t\tpickerContentHeight -= 45;\n\t\t}\n\t\tif (subHeaderStack.length > 0) {\n\t\t\tpickerContentHeight += 32;\n\t\t}\n\t\tif (props.showHeader || props.showBackButton) {\n\t\t\tpickerContentHeight += 40;\n\t\t}\n\t\treturn `calc(100% - ${pickerContentHeight}px)`;\n\t};\n\n\tconst onSearch = (text: string) => {\n\t\tif (!text) {\n\t\t\tsetSearchedFrom('');\n\t\t}\n\t\tconst result = searchVariables(text, dataSource, subHeaderStack);\n\t\tif (showRecommended) {\n\t\t\tconst recommended = showOnlyRecommendedVariables(result, subHeaderStack);\n\t\t\tsetVariables(recommended);\n\t\t} else {\n\t\t\tsetVariables(result);\n\t\t}\n\t\tsetSearchText(text);\n\t\tconst latestSubHeader =\n\t\t\tsubHeaderStack.length > 0\n\t\t\t\t? subHeaderStack[subHeaderStack.length - 1].displayName\n\t\t\t\t: 'home';\n\t\tsetSearchedFrom(latestSubHeader);\n\t};\n\n\tconst HeaderBackIcon = () => {\n\t\treturn (\n\t\t\t<BackIcon\n\t\t\t\twidth={16}\n\t\t\t\theight={16}\n\t\t\t\tstyle={{ display: 'flex', color: COLORS.content.primary }}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst GoBackIcon = () => {\n\t\treturn (\n\t\t\t<BackIcon\n\t\t\t\twidth={12}\n\t\t\t\theight={12}\n\t\t\t\tstyle={{ color: COLORS.content.secondary }}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst onSelectingVariable = (variable: VariableV3) => {\n\t\tif (props.disabled) return;\n\t\tif (isEvaluationList) {\n\t\t\tconst evalVariableValue = matchVariable(variable as VariableV3);\n\t\t\tonSelect({\n\t\t\t\t...variable,\n\t\t\t\tactualValue: evalVariableValue,\n\t\t\t} as VariableV3);\n\t\t} else {\n\t\t\tif (variable.isDefaultValueSupported && !skipDefaultVariableContent) {\n\t\t\t\tsetChosenForDefault(variable);\n\t\t\t\tsetOpenDefaultVariablePanel(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonSelect(variable as VariableV3);\n\t\t}\n\t};\n\n\treturn (\n\t\t<VariablePickerContext.Provider\n\t\t\tvalue={{\n\t\t\t\tvariables,\n\t\t\t\tsearchText,\n\t\t\t\tsubHeaderStack,\n\t\t\t\tshowRecommended,\n\t\t\t\tsetSubHeaderStack,\n\t\t\t\tsetSearchText,\n\t\t\t\tsetVariables,\n\t\t\t\tsetShowRecommended,\n\t\t\t\tcontainerRef,\n\t\t\t\tscrollPositionStack,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\ttabIndex={-1}\n\t\t\t\tid=\"variable-picker-v3\"\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: 'white',\n\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\toutline: 'none',\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t{(showHeader || showBackButton || openDefaultVariablePanel) && (\n\t\t\t\t\t<HeaderWrapper openDefault={openDefaultVariablePanel}>\n\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n\t\t\t\t\t\t\t{(showBackButton || openDefaultVariablePanel) && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={HeaderBackIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (openDefaultVariablePanel) {\n\t\t\t\t\t\t\t\t\t\t\tsetOpenDefaultVariablePanel(false);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonBackButtonClick && onBackButtonClick();\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\t\t\t\t\t\t\t{(showHeader || openDefaultVariablePanel) && (\n\t\t\t\t\t\t\t\t<TitleRegular>\n\t\t\t\t\t\t\t\t\t{openDefaultVariablePanel\n\t\t\t\t\t\t\t\t\t\t? 'Set up'\n\t\t\t\t\t\t\t\t\t\t: headerText ?? 'Select Variable'}\n\t\t\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{shouldShowHeaderInsideCross && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tstyle={{ color: '#212121' }}\n\t\t\t\t\t\t\t\tIcon={CrossIcon}\n\t\t\t\t\t\t\t\tonClick={() => props.onClose && props.onClose()}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</HeaderWrapper>\n\t\t\t\t)}\n\t\t\t\t{openDefaultVariablePanel &&\n\t\t\t\tchosenForDefault &&\n\t\t\t\t!skipDefaultVariableContent ? (\n\t\t\t\t\t<DefaultVariableContent\n\t\t\t\t\t\tvariable={chosenForDefault}\n\t\t\t\t\t\tonInsertVariable={(updated) => {\n\t\t\t\t\t\t\tonSelect(updated);\n\t\t\t\t\t\t\tonDefaultVariableSelect?.(updated);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{(props.showSearch ?? true) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpadding: '0 16px',\n\t\t\t\t\t\t\t\t\tpaddingTop: 12,\n\t\t\t\t\t\t\t\t\tbackgroundColor: COLORS.surface.subdued,\n\t\t\t\t\t\t\t\t\tborderTopLeftRadius: 8,\n\t\t\t\t\t\t\t\t\tborderTopRightRadius: 8,\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<Input\n\t\t\t\t\t\t\t\t\tid=\"search-bar-v3-picker\"\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\tvalue={searchText}\n\t\t\t\t\t\t\t\t\tnoKeyDownChange\n\t\t\t\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\t\t\t\tonChangeText={onSearch}\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)}\n\t\t\t\t\t\t{(props.showRecommendedBar ?? true) && (\n\t\t\t\t\t\t\t<RecommendWrapper>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tOnly Recommended\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\tdata-test=\"variable-recommended-toggle\"\n\t\t\t\t\t\t\t\t\tvalue={showRecommended}\n\t\t\t\t\t\t\t\t\tonValueChange={async (val) => {\n\t\t\t\t\t\t\t\t\t\tawait handleRecommendedChange(val);\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</RecommendWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{subHeaderStack.length > 0 && (\n\t\t\t\t\t\t\t<BackHeader>\n\t\t\t\t\t\t\t\t<div style={{ position: 'absolute', left: 16 }}>\n\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\tid=\"back-btn-v3\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\tIcon={GoBackIcon}\n\t\t\t\t\t\t\t\t\t\tonClick={handleBackClick}\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\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\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{subHeaderStack[subHeaderStack.length - 1].displayName}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</BackHeader>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{variables.length > 0 ? (\n\t\t\t\t\t\t\t\t<Container ref={containerRef} height={calculateHeight()}>\n\t\t\t\t\t\t\t\t\t{variables.map((variable, index) => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tvariable.displayName &&\n\t\t\t\t\t\t\t\t\t\t\ttypeof variable.variables !== 'undefined'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn (\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\t\tkey={variable.displayName + showRecommended} // to re-render the component\n\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\tborderBottom: `1px solid ${COLORS.stroke.primary}`,\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\t\t<BikAccordion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tarrowColor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tautoOpen={autoOpenFirst && index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theaderPadding=\"12px 16px\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader={\n\t\t\t\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\t\t\tstyle={{ color: COLORS.content.secondary }}\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{highlightSearchText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable.displayName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText,\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</TitleSmall>\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\t\t<SubHeaderItems\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tparentVariable={variable}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText={searchText}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable={variable.variables}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelect={(variable) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable.isDefaultValueSupported &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!skipDefaultVariableContent\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\tsetChosenForDefault(variable);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetOpenDefaultVariablePanel(true);\n\t\t\t\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\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelect(variable as VariableV3);\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</BikAccordion>\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);\n\t\t\t\t\t\t\t\t\t\t} else if (variable.displayName) {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbody={renderTooltipBody(variable as VariableV3)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tplacement=\"bottom\"\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\t\t<ListItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops.disabled\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'readonly'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: (variable as VariableV3)?.selected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'default'\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\tversion=\"2.0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tleadingIcon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(variable as VariableV3)?.selected ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops.disabled ? (\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 style={{ flexShrink: 0 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<AddIcon width={14} height={14} />\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\tcustomListItemLabel={\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\t\tstyle={{\n\t\t\t\t\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\t\t\t\t\tgap: 4,\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<BodySecondary\n\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\tfontSize: '14px',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\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{highlightSearchText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable.displayName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText,\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</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{!variable.isAvailable && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip body=\"Not Recommended\">\n\t\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\t\tstyle={{ display: 'flex', marginTop: 2 }}\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\t\t<WarnIcon\n\t\t\t\t\t\t\t\t\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\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\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\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\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</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\tlistItem={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: variable.displayName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: variable.displayName,\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\tsubText={variable.description || ''}\n\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\tonSelectingVariable(variable as VariableV3)\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</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<SubHeaderItems\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText={searchText}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariable={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable as unknown as {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[key: string]: SubHeader | VariableV3;\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\tonSelect={(variable: VariableV3) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelectingVariable(variable as VariableV3)\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}\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</Container>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<NoResult height={calculateHeight()} searchText={searchText} />\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</div>\n\t\t</VariablePickerContext.Provider>\n\t);\n};\n"],"names":["variableRegex","checkIfArray","value","matchVariable","variable","path","evalVariableValue","index","matches","arrayName","VariablePickerContent","props","data","onSelect","showHeader","showBackButton","hideHeaderCross","onBackButtonClick","isEvaluationList","autoOpenFirst","headerText","contentHeight","onDefaultVariableSelect","skipDefaultVariableContent","variables","setVariables","useState","searchText","setSearchText","subHeaderStack","setSubHeaderStack","searchedFrom","setSearchedFrom","showRecommended","setShowRecommended","dataSource","setDataSource","openDefaultVariablePanel","setOpenDefaultVariablePanel","chosenForDefault","setChosenForDefault","containerRef","useRef","scrollPositionStack","shouldShowHeaderInsideCross","PickerType","useEffect","handleRecommendedChange","handleBackClick","_searchText","newSubHeaderStack","poppedElement","savedScrollTop","flushSync","result","searchVariables","recommended","showOnlyRecommendedVariables","el","val","output","isInSearchStartPage","calculateHeight","pickerContentHeight","onSearch","text","latestSubHeader","HeaderBackIcon","jsx","BackIcon","COLORS","GoBackIcon","onSelectingVariable","VariablePickerContext","jsxs","HeaderWrapper","IconButton","TitleRegular","CrossIcon","DefaultVariableContent","updated","Fragment","Input","RecommendWrapper","BodySecondary","Switch","BackHeader","BodyCaption","Container","BikAccordion","TitleSmall","highlightSearchText","SubHeaderItems","Tooltip","renderTooltipBody","ListItem","AddIcon","WarnIcon","NoResult"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../src/components/variable-picker-v3/Content.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport CrossIcon from '@src/assets/icons/cross.svg';\nimport AddIcon from '@src/assets/icons/plus.svg';\nimport WarnIcon from '@src/assets/icons/triangle_error.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport { BikAccordion } from '../accordion';\nimport { IconButton } from '../icon-button';\nimport { Input } from '../input';\nimport { ListItem } from '../list-item';\nimport { Switch } from '../switch';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport { VariablePickerContext } from './context';\nimport { DefaultVariableContent } from './DefaultVariableContent';\nimport { highlightSearchText } from './highlightSearchText';\nimport {\n\tPickerType,\n\tSubHeader,\n\tVariablePickerV3Props,\n\tVariableV3,\n} from './model';\nimport NoResult from './NoResult';\nimport { showOnlyRecommendedVariables } from './recommendVaribles';\nimport { searchVariables } from './searchVariables';\nimport {\n\tBackHeader,\n\tContainer,\n\tHeaderWrapper,\n\tRecommendWrapper,\n} from './styles';\nimport SubHeaderItems, { renderTooltipBody } from './SubHeaderItems';\n\ntype Props = VariablePickerV3Props;\n\nconst variableRegex = /.*\\..*/;\nconst checkIfArray = (value: string) => {\n\tconst regex = /\\w+\\[\\d+\\]/g;\n\treturn regex.test(value);\n};\n\nconst matchVariable = (variable: VariableV3) => {\n\tif (variable.actualValue.match(variableRegex)) {\n\t\tconst path = variable.actualValue\n\t\t\t.replace('{{', '')\n\t\t\t.replace('}}', '')\n\t\t\t.split('.');\n\t\tlet evalVariableValue = path[0];\n\t\tpath.forEach((value, index) => {\n\t\t\tif (index === 0) return;\n\t\t\tconst isArray = checkIfArray(value);\n\t\t\tif (isArray) {\n\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\tif (matches) {\n\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\tevalVariableValue = evalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t}\n\t\t});\n\t\treturn evalVariableValue;\n\t} else {\n\t\tconst value = variable.actualValueEval\n\t\t\t? variable.actualValueEval\n\t\t\t: variable.actualValue;\n\t\treturn value;\n\t}\n};\n\nexport const VariablePickerContent: React.FC<Props> = (\n\tprops: VariablePickerV3Props,\n) => {\n\tconst {\n\t\tdata,\n\t\tonSelect,\n\t\tshowHeader,\n\t\tshowBackButton,\n\t\thideHeaderCross,\n\t\tonBackButtonClick,\n\t\tisEvaluationList,\n\t\tautoOpenFirst,\n\t\theaderText,\n\t\tcontentHeight,\n\t\tonDefaultVariableSelect,\n\t\tskipDefaultVariableContent,\n\t} = props;\n\n\tconst [variables, setVariables] = useState(data); // modified data after search\n\tconst [searchText, setSearchText] = useState<string>('');\n\tconst [subHeaderStack, setSubHeaderStack] = useState<any[]>([]); // push variable object after every level\n\tconst [searchedFrom, setSearchedFrom] = useState<string>(''); // from which level did the user search from\n\tconst [showRecommended, setShowRecommended] = useState<boolean>(false);\n\tconst [dataSource, setDataSource] = useState<any[]>([]); // for search, maintaining original copy\n\tconst [openDefaultVariablePanel, setOpenDefaultVariablePanel] =\n\t\tuseState(false);\n\tconst [chosenForDefault, setChosenForDefault] = useState<VariableV3 | null>();\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst scrollPositionStack = useRef<number[]>([]);\n\tconst shouldShowHeaderInsideCross =\n\t\topenDefaultVariablePanel &&\n\t\tprops.type === PickerType.EMBEDDED &&\n\t\t!hideHeaderCross;\n\n\t// useEffect(() => {\n\t// \t// TODO: based on new data, update existing variables if available\n\t// \tsetVariables(data);\n\t// }, [data]);\n\n\tuseEffect(() => {\n\t\thandleRecommendedChange(props.showRecommendedBar ?? true);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (subHeaderStack.length > 0) {\n\t\t\tsetDataSource([subHeaderStack[subHeaderStack.length - 1]]);\n\t\t} else {\n\t\t\tsetDataSource(data);\n\t\t}\n\t}, [subHeaderStack]);\n\n\tconst handleBackClick = (e: any) => {\n\t\te.stopPropagation();\n\t\tlet _searchText = searchText;\n\t\tconst newSubHeaderStack = [...subHeaderStack];\n\t\tconst poppedElement = newSubHeaderStack.pop();\n\t\tif (poppedElement.displayName === searchedFrom) {\n\t\t\t_searchText = ''; // so that search is not trigerred in the below code\n\t\t}\n\t\tconst savedScrollTop = scrollPositionStack.current.pop() ?? 0;\n\n\t\t// Use flushSync to force synchronous DOM update so scroll can be\n\t\t// restored immediately after the new content is rendered\n\t\tflushSync(() => {\n\t\t\tsetSubHeaderStack(newSubHeaderStack);\n\t\t\tif (poppedElement.displayName === searchedFrom) {\n\t\t\t\tsetSearchText('');\n\t\t\t}\n\t\t\tif (_searchText.length > 0) {\n\t\t\t\t// maintain the search result when going back\n\t\t\t\tconst dataSource =\n\t\t\t\t\tnewSubHeaderStack.length > 0\n\t\t\t\t\t\t? [newSubHeaderStack[newSubHeaderStack.length - 1]]\n\t\t\t\t\t\t: data;\n\t\t\t\tconst result = searchVariables(\n\t\t\t\t\t_searchText,\n\t\t\t\t\tdataSource,\n\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t);\n\t\t\t\tif (showRecommended) {\n\t\t\t\t\tconst recommended = showOnlyRecommendedVariables(\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t\t);\n\t\t\t\t\tsetVariables(recommended);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariables(result);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (newSubHeaderStack.length > 0) {\n\t\t\t\t\tif (showRecommended) {\n\t\t\t\t\t\tconst recommended = showOnlyRecommendedVariables(\n\t\t\t\t\t\t\t[newSubHeaderStack[newSubHeaderStack.length - 1].variables],\n\t\t\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t\t\t);\n\t\t\t\t\t\tsetVariables(recommended);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariables([\n\t\t\t\t\t\t\tnewSubHeaderStack[newSubHeaderStack.length - 1].variables,\n\t\t\t\t\t\t]);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (showRecommended) {\n\t\t\t\t\t\tconst recommended = showOnlyRecommendedVariables(\n\t\t\t\t\t\t\tdata,\n\t\t\t\t\t\t\tnewSubHeaderStack,\n\t\t\t\t\t\t);\n\t\t\t\t\t\tsetVariables(recommended);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariables(data);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\t// Restore scroll after accordion expand animation completes.\n\t\t// The BikAccordion uses a 250ms CSS transition on max-height when\n\t\t// autoOpen fires. We must wait for that to finish so the Container\n\t\t// has enough scrollHeight to scroll to the saved position.\n\t\tif (containerRef.current && savedScrollTop > 0) {\n\t\t\tconst el = containerRef.current;\n\t\t\tsetTimeout(() => {\n\t\t\t\tel.scrollTo({ top: savedScrollTop, behavior: 'smooth' });\n\t\t\t}, 300);\n\t\t}\n\t};\n\n\tconst handleRecommendedChange = async (val) => {\n\t\tsetShowRecommended(val);\n\t\tif (val) {\n\t\t\tconst output = showOnlyRecommendedVariables(variables, subHeaderStack);\n\t\t\tsetVariables(output);\n\t\t} else {\n\t\t\tif (subHeaderStack.length > 0) {\n\t\t\t\t// dont apply search if not in the page where search started\n\t\t\t\tconst isInSearchStartPage =\n\t\t\t\t\tsearchedFrom == subHeaderStack[subHeaderStack.length - 1].displayName;\n\t\t\t\tif (searchText.length > 0 && isInSearchStartPage) {\n\t\t\t\t\tconst result = searchVariables(\n\t\t\t\t\t\tsearchText,\n\t\t\t\t\t\tdataSource,\n\t\t\t\t\t\tsubHeaderStack,\n\t\t\t\t\t);\n\t\t\t\t\tsetVariables(result);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariables([subHeaderStack[subHeaderStack.length - 1].variables]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (searchText.length > 0) {\n\t\t\t\t\tconst result = searchVariables(\n\t\t\t\t\t\tsearchText,\n\t\t\t\t\t\tdataSource,\n\t\t\t\t\t\tsubHeaderStack,\n\t\t\t\t\t);\n\t\t\t\t\tsetVariables(result);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariables(data);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tconst calculateHeight = () => {\n\t\tif (contentHeight) {\n\t\t\treturn contentHeight;\n\t\t}\n\t\tlet pickerContentHeight = 131;\n\t\tif (!(props.showSearch ?? true)) {\n\t\t\tpickerContentHeight -= 52;\n\t\t}\n\t\tif (!(props.showRecommendedBar ?? true)) {\n\t\t\tpickerContentHeight -= 45;\n\t\t}\n\t\tif (subHeaderStack.length > 0) {\n\t\t\tpickerContentHeight += 32;\n\t\t}\n\t\tif (props.showHeader || props.showBackButton) {\n\t\t\tpickerContentHeight += 40;\n\t\t}\n\t\treturn `calc(100% - ${pickerContentHeight}px)`;\n\t};\n\n\tconst onSearch = (text: string) => {\n\t\tif (!text) {\n\t\t\tsetSearchedFrom('');\n\t\t}\n\t\tconst result = searchVariables(text, dataSource, subHeaderStack);\n\t\tif (showRecommended) {\n\t\t\tconst recommended = showOnlyRecommendedVariables(result, subHeaderStack);\n\t\t\tsetVariables(recommended);\n\t\t} else {\n\t\t\tsetVariables(result);\n\t\t}\n\t\tsetSearchText(text);\n\t\tconst latestSubHeader =\n\t\t\tsubHeaderStack.length > 0\n\t\t\t\t? subHeaderStack[subHeaderStack.length - 1].displayName\n\t\t\t\t: 'home';\n\t\tsetSearchedFrom(latestSubHeader);\n\t};\n\n\tconst HeaderBackIcon = () => {\n\t\treturn (\n\t\t\t<BackIcon\n\t\t\t\twidth={16}\n\t\t\t\theight={16}\n\t\t\t\tstyle={{ display: 'flex', color: COLORS.content.primary }}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst GoBackIcon = () => {\n\t\treturn (\n\t\t\t<BackIcon\n\t\t\t\twidth={12}\n\t\t\t\theight={12}\n\t\t\t\tstyle={{ color: COLORS.content.secondary }}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst onSelectingVariable = (variable: VariableV3) => {\n\t\tif (props.disabled) return;\n\t\tif (isEvaluationList) {\n\t\t\tconst evalVariableValue = matchVariable(variable as VariableV3);\n\t\t\tonSelect({\n\t\t\t\t...variable,\n\t\t\t\tactualValue: evalVariableValue,\n\t\t\t} as VariableV3);\n\t\t} else {\n\t\t\tif (variable.isDefaultValueSupported && !skipDefaultVariableContent) {\n\t\t\t\tsetChosenForDefault(variable);\n\t\t\t\tsetOpenDefaultVariablePanel(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonSelect(variable as VariableV3);\n\t\t}\n\t};\n\n\treturn (\n\t\t<VariablePickerContext.Provider\n\t\t\tvalue={{\n\t\t\t\tvariables,\n\t\t\t\tsearchText,\n\t\t\t\tsubHeaderStack,\n\t\t\t\tshowRecommended,\n\t\t\t\tsetSubHeaderStack,\n\t\t\t\tsetSearchText,\n\t\t\t\tsetVariables,\n\t\t\t\tsetShowRecommended,\n\t\t\t\tcontainerRef,\n\t\t\t\tscrollPositionStack,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\ttabIndex={-1}\n\t\t\t\tid=\"variable-picker-v3\"\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: 'white',\n\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\toutline: 'none',\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t{(showHeader || showBackButton || openDefaultVariablePanel) && (\n\t\t\t\t\t<HeaderWrapper openDefault={openDefaultVariablePanel}>\n\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n\t\t\t\t\t\t\t{(showBackButton || openDefaultVariablePanel) && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={HeaderBackIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (openDefaultVariablePanel) {\n\t\t\t\t\t\t\t\t\t\t\tsetOpenDefaultVariablePanel(false);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonBackButtonClick && onBackButtonClick();\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\t\t\t\t\t\t\t{(showHeader || openDefaultVariablePanel) && (\n\t\t\t\t\t\t\t\t<TitleRegular>\n\t\t\t\t\t\t\t\t\t{openDefaultVariablePanel\n\t\t\t\t\t\t\t\t\t\t? 'Set up'\n\t\t\t\t\t\t\t\t\t\t: headerText ?? 'Select Variable'}\n\t\t\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{shouldShowHeaderInsideCross && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tstyle={{ color: '#212121' }}\n\t\t\t\t\t\t\t\tIcon={CrossIcon}\n\t\t\t\t\t\t\t\tonClick={() => props.onClose && props.onClose()}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</HeaderWrapper>\n\t\t\t\t)}\n\t\t\t\t{openDefaultVariablePanel &&\n\t\t\t\tchosenForDefault &&\n\t\t\t\t!skipDefaultVariableContent ? (\n\t\t\t\t\t<DefaultVariableContent\n\t\t\t\t\t\tvariable={chosenForDefault}\n\t\t\t\t\t\tonInsertVariable={(updated) => {\n\t\t\t\t\t\t\tonSelect(updated);\n\t\t\t\t\t\t\tonDefaultVariableSelect?.(updated);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{(props.showSearch ?? true) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpadding: '0 16px',\n\t\t\t\t\t\t\t\t\tpaddingTop: 12,\n\t\t\t\t\t\t\t\t\tbackgroundColor: COLORS.surface.subdued,\n\t\t\t\t\t\t\t\t\tborderTopLeftRadius: 8,\n\t\t\t\t\t\t\t\t\tborderTopRightRadius: 8,\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<Input\n\t\t\t\t\t\t\t\t\tid=\"search-bar-v3-picker\"\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\tvalue={searchText}\n\t\t\t\t\t\t\t\t\tnoKeyDownChange\n\t\t\t\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\t\t\t\tonChangeText={onSearch}\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)}\n\t\t\t\t\t\t{(props.showRecommendedBar ?? true) && (\n\t\t\t\t\t\t\t<RecommendWrapper>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tOnly Recommended\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\tvalue={showRecommended}\n\t\t\t\t\t\t\t\t\tonValueChange={async (val) => {\n\t\t\t\t\t\t\t\t\t\tawait handleRecommendedChange(val);\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</RecommendWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{subHeaderStack.length > 0 && (\n\t\t\t\t\t\t\t<BackHeader>\n\t\t\t\t\t\t\t\t<div style={{ position: 'absolute', left: 16 }}>\n\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\tid=\"back-btn-v3\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\tIcon={GoBackIcon}\n\t\t\t\t\t\t\t\t\t\tonClick={handleBackClick}\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\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\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{subHeaderStack[subHeaderStack.length - 1].displayName}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</BackHeader>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{variables.length > 0 ? (\n\t\t\t\t\t\t\t\t<Container ref={containerRef} height={calculateHeight()}>\n\t\t\t\t\t\t\t\t\t{variables.map((variable, index) => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tvariable.displayName &&\n\t\t\t\t\t\t\t\t\t\t\ttypeof variable.variables !== 'undefined'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn (\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\t\tkey={variable.displayName + showRecommended} // to re-render the component\n\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\tborderBottom: `1px solid ${COLORS.stroke.primary}`,\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\t\t<BikAccordion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tarrowColor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tautoOpen={autoOpenFirst && index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theaderPadding=\"12px 16px\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader={\n\t\t\t\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\t\t\tstyle={{ color: COLORS.content.secondary }}\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{highlightSearchText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable.displayName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText,\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</TitleSmall>\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\t\t<SubHeaderItems\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tparentVariable={variable}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText={searchText}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable={variable.variables}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelect={(variable) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable.isDefaultValueSupported &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!skipDefaultVariableContent\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\tsetChosenForDefault(variable);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetOpenDefaultVariablePanel(true);\n\t\t\t\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\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelect(variable as VariableV3);\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</BikAccordion>\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);\n\t\t\t\t\t\t\t\t\t\t} else if (variable.displayName) {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbody={renderTooltipBody(variable as VariableV3)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tplacement=\"bottom\"\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\t\t<ListItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops.disabled\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'readonly'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: (variable as VariableV3)?.selected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'default'\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\tversion=\"2.0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tleadingIcon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(variable as VariableV3)?.selected ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops.disabled ? (\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 style={{ flexShrink: 0 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<AddIcon width={14} height={14} />\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\tcustomListItemLabel={\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\t\tstyle={{\n\t\t\t\t\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\t\t\t\t\tgap: 4,\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<BodySecondary\n\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\tfontSize: '14px',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\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{highlightSearchText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable.displayName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText,\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</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{!variable.isAvailable && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip body=\"Not Recommended\">\n\t\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\t\tstyle={{ display: 'flex', marginTop: 2 }}\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\t\t<WarnIcon\n\t\t\t\t\t\t\t\t\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\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\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\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\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</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\tlistItem={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: variable.displayName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: variable.displayName,\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\tsubText={variable.description || ''}\n\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\tonSelectingVariable(variable as VariableV3)\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</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<SubHeaderItems\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchText={searchText}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariable={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariable as unknown as {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[key: string]: SubHeader | VariableV3;\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\tonSelect={(variable: VariableV3) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelectingVariable(variable as VariableV3)\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}\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</Container>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<NoResult height={calculateHeight()} searchText={searchText} />\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</div>\n\t\t</VariablePickerContext.Provider>\n\t);\n};\n"],"names":["variableRegex","checkIfArray","value","matchVariable","variable","path","evalVariableValue","index","matches","arrayName","VariablePickerContent","props","data","onSelect","showHeader","showBackButton","hideHeaderCross","onBackButtonClick","isEvaluationList","autoOpenFirst","headerText","contentHeight","onDefaultVariableSelect","skipDefaultVariableContent","variables","setVariables","useState","searchText","setSearchText","subHeaderStack","setSubHeaderStack","searchedFrom","setSearchedFrom","showRecommended","setShowRecommended","dataSource","setDataSource","openDefaultVariablePanel","setOpenDefaultVariablePanel","chosenForDefault","setChosenForDefault","containerRef","useRef","scrollPositionStack","shouldShowHeaderInsideCross","PickerType","useEffect","handleRecommendedChange","handleBackClick","_searchText","newSubHeaderStack","poppedElement","savedScrollTop","flushSync","result","searchVariables","recommended","showOnlyRecommendedVariables","el","val","output","isInSearchStartPage","calculateHeight","pickerContentHeight","onSearch","text","latestSubHeader","HeaderBackIcon","jsx","BackIcon","COLORS","GoBackIcon","onSelectingVariable","VariablePickerContext","jsxs","HeaderWrapper","IconButton","TitleRegular","CrossIcon","DefaultVariableContent","updated","Fragment","Input","RecommendWrapper","BodySecondary","Switch","BackHeader","BodyCaption","Container","BikAccordion","TitleSmall","highlightSearchText","SubHeaderItems","Tooltip","renderTooltipBody","ListItem","AddIcon","WarnIcon","NoResult"],"mappings":"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"}

package/dist/cjs/components/zeroState/ZeroState.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("styled-components"),i=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),f=require("../../assets/icons/alert.svg.js"),p=require("../spinner/Spinner.js"),h=require("../button/Button.js"),g=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},s=g(x),S=s.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("styled-components"),i=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),p=require("../../assets/icons/alert.svg.js"),h=require("../spinner/Spinner.js"),g=require("../button/Button.js"),S=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},s=S(f),j=s.default.div`
 	background: ${n.COLORS.surface.standard};
 	display: flex;
 	flex-direction: column;
@@ -6,7 +6,7 @@
 	justify-content: center;
 	flex: 1;
 	gap: 6px;
-`,j=s.default.div`
+`,O=s.default.div`
 	background: ${n.COLORS.background.base};
 	width: 48px;
 	height: 48px;
@@ -15,5 +15,5 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`,O=({subTitle:t,title:d,IconHolderStyle:u,style:y,isLoading:r,containerWidth:c,...o})=>{let a=i.TitleRegular;const l=c?parseFloat(c):0;return l&&!isNaN(l)&&l<=150&&(a=i.TitleSmall),e.jsxs(S,{style:y??{},children:[r?e.jsx(p.Spinner,{size:"large",color:n.COLORS.stroke.brand}):e.jsx(j,{"data-test":"zero-state-icon-holder",style:u??{},children:o?.Icon||e.jsx(f.default,{color:n.COLORS.content.placeholder,height:24,width:24})}),e.jsx(a,{style:{color:n.COLORS.content.primary},children:r?"Loading...":d||"No results found"}),!!t&&!r&&e.jsx(i.BodyCaption,{style:{color:n.COLORS.content.secondary,textAlign:"center",maxWidth:184},children:t}),!!o?.actionButton&&e.jsx("div",{style:o?.buttonWidth?{width:o?.buttonWidth,display:"flex"}:{},children:e.jsx(h.Button,{...o?.actionButton})})]})};exports.ZeroState=O;
+`,m=({subTitle:t,title:d,IconHolderStyle:u,style:y,isLoading:r,containerWidth:c,subTitleMaxWidth:x=184,...o})=>{let a=i.TitleRegular;const l=c?parseFloat(c):0;return l&&!isNaN(l)&&l<=150&&(a=i.TitleSmall),e.jsxs(j,{style:y??{},children:[r?e.jsx(h.Spinner,{size:"large",color:n.COLORS.stroke.brand}):e.jsx(O,{"data-test":"zero-state-icon-holder",style:u??{},children:o?.Icon||e.jsx(p.default,{color:n.COLORS.content.placeholder,height:24,width:24})}),e.jsx(a,{style:{color:n.COLORS.content.primary},children:r?"Loading...":d||"No results found"}),!!t&&!r&&e.jsx(i.BodyCaption,{style:{color:n.COLORS.content.secondary,textAlign:"center",maxWidth:x},children:t}),!!o?.actionButton&&e.jsx("div",{style:o?.buttonWidth?{width:o?.buttonWidth,display:"flex"}:{},children:e.jsx(g.Button,{...o?.actionButton})})]})};exports.ZeroState=m;
 //# sourceMappingURL=ZeroState.js.map

package/dist/cjs/components/zeroState/ZeroState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZeroState.js","sources":["../../../../src/components/zeroState/ZeroState.tsx"],"sourcesContent":["// import SearchIcon from '@bik-icons/search.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner';\nimport {\n\tBodyCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertIcon from '../../assets/icons/alert.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n\tgap: 6px;\n`;\n\nconst IconHolder = styled.div`\n\tbackground: ${COLORS.background.base};\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n`;\n\nexport const ZeroState: React.FC<{\n\tisLoading?: boolean;\n\ttitle: string;\n\tsubTitle?: string;\n\tIconHolderStyle?: React.CSSProperties;\n\tstyle?: React.CSSProperties /** now this component is extendable through styled-component */;\n\tactionButton?: ButtonProps;\n\tbuttonWidth?: number;\n\tIcon?: React.ReactNode;\n\tcontainerWidth?: string;\n}> = ({\n\tsubTitle,\n\ttitle,\n\tIconHolderStyle,\n\tstyle,\n\tisLoading,\n\tcontainerWidth,\n\t...otherProps\n}) => {\n\tlet TitleTypography = TitleRegular;\n\tconst numericWidth = containerWidth ? parseFloat(containerWidth) : 0;\n\n\tif (numericWidth && !isNaN(numericWidth) && numericWidth <= 150) {\n\t\tTitleTypography = TitleSmall;\n\t}\n\treturn (\n\t\t<Container style={style ?? {}}>\n\t\t\t{isLoading ? (\n\t\t\t\t<Spinner size={'large'} color={COLORS.stroke.brand} />\n\t\t\t) : (\n\t\t\t\t<IconHolder\n\t\t\t\t\tdata-test=\"zero-state-icon-holder\"\n\t\t\t\t\tstyle={IconHolderStyle ?? {}}\n\t\t\t\t>\n\t\t\t\t\t{otherProps?.Icon || (\n\t\t\t\t\t\t<AlertIcon\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</IconHolder>\n\t\t\t)}\n\n\t\t\t<TitleTypography\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isLoading ? 'Loading...' : title || 'No results found'}\n\t\t\t</TitleTypography>\n\t\t\t{!!subTitle && !isLoading && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\tmaxWidth: 184,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{subTitle}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t\t{!!otherProps?.actionButton && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={\n\t\t\t\t\t\totherProps?.buttonWidth\n\t\t\t\t\t\t\t? { width: otherProps?.buttonWidth, display: 'flex' }\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<Button {...otherProps?.actionButton} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","COLORS","IconHolder","ZeroState","subTitle","title","IconHolderStyle","style","isLoading","containerWidth","otherProps","TitleTypography","TitleRegular","numericWidth","TitleSmall","jsxs","jsx","Spinner","AlertIcon","BodyCaption","Button"],"mappings":"6YAcMA,EAAYC,EAAAA,QAAO;AAAA,eACVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShCC,EAAaF,EAAAA,QAAO;AAAA,eACXC,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUxBE,EAUR,CAAC,CACL,SAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,UAAAC,EACA,eAAAC,EACA,GAAGC,CACJ,IAAM,CACL,IAAIC,EAAkBC,EAAAA,aACtB,MAAMC,EAAeJ,EAAiB,WAAWA,CAAc,EAAI,EAEnE,OAAII,GAAgB,CAAC,MAAMA,CAAY,GAAKA,GAAgB,MAC3DF,EAAkBG,EAAAA,YAGlBC,EAAAA,KAAChB,EAAA,CAAU,MAAOQ,GAAS,CAAA,EACzB,SAAA,CAAAC,EACAQ,EAAAA,IAACC,WAAQ,KAAM,QAAS,MAAOhB,SAAO,OAAO,MAAO,EAEpDe,EAAAA,IAACd,EAAA,CACA,YAAU,yBACV,MAAOI,GAAmB,CAAA,EAEzB,YAAY,MACZU,EAAAA,IAACE,EAAAA,QAAA,CACA,MAAOjB,EAAAA,OAAO,QAAQ,YACtB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,EAKHe,EAAAA,IAACL,EAAA,CACA,MAAO,CACN,MAAOV,EAAAA,OAAO,QAAQ,OAAA,EAGtB,SAAAO,EAAY,aAAeH,GAAS,kBAAA,CAAA,EAErC,CAAC,CAACD,GAAY,CAACI,GACfQ,EAAAA,IAACG,EAAAA,YAAA,CACA,MAAO,CACN,MAAOlB,EAAAA,OAAO,QAAQ,UACtB,UAAW,SACX,SAAU,GAAA,EAGV,SAAAG,CAAA,CAAA,EAGF,CAAC,CAACM,GAAY,cACdM,EAAAA,IAAC,MAAA,CACA,MACCN,GAAY,YACT,CAAE,MAAOA,GAAY,YAAa,QAAS,MAAA,EAC3C,CAAA,EAGJ,SAAAM,EAAAA,IAACI,EAAAA,OAAA,CAAQ,GAAGV,GAAY,YAAA,CAAc,CAAA,CAAA,CACvC,EAEF,CAEF"}
+{"version":3,"file":"ZeroState.js","sources":["../../../../src/components/zeroState/ZeroState.tsx"],"sourcesContent":["// import SearchIcon from '@bik-icons/search.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner';\nimport {\n\tBodyCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertIcon from '../../assets/icons/alert.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n\tgap: 6px;\n`;\n\nconst IconHolder = styled.div`\n\tbackground: ${COLORS.background.base};\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n`;\n\nexport const ZeroState: React.FC<{\n\tisLoading?: boolean;\n\ttitle: string;\n\tsubTitle?: string;\n\tIconHolderStyle?: React.CSSProperties;\n\tstyle?: React.CSSProperties /** now this component is extendable through styled-component */;\n\tactionButton?: ButtonProps;\n\tbuttonWidth?: number;\n\tIcon?: React.ReactNode;\n\tcontainerWidth?: string;\n\t/** Caps the subtitle width (px). Defaults to 184; widen for longer copy. */\n\tsubTitleMaxWidth?: number;\n}> = ({\n\tsubTitle,\n\ttitle,\n\tIconHolderStyle,\n\tstyle,\n\tisLoading,\n\tcontainerWidth,\n\tsubTitleMaxWidth = 184,\n\t...otherProps\n}) => {\n\tlet TitleTypography = TitleRegular;\n\tconst numericWidth = containerWidth ? parseFloat(containerWidth) : 0;\n\n\tif (numericWidth && !isNaN(numericWidth) && numericWidth <= 150) {\n\t\tTitleTypography = TitleSmall;\n\t}\n\treturn (\n\t\t<Container style={style ?? {}}>\n\t\t\t{isLoading ? (\n\t\t\t\t<Spinner size={'large'} color={COLORS.stroke.brand} />\n\t\t\t) : (\n\t\t\t\t<IconHolder\n\t\t\t\t\tdata-test=\"zero-state-icon-holder\"\n\t\t\t\t\tstyle={IconHolderStyle ?? {}}\n\t\t\t\t>\n\t\t\t\t\t{otherProps?.Icon || (\n\t\t\t\t\t\t<AlertIcon\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</IconHolder>\n\t\t\t)}\n\n\t\t\t<TitleTypography\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isLoading ? 'Loading...' : title || 'No results found'}\n\t\t\t</TitleTypography>\n\t\t\t{!!subTitle && !isLoading && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\tmaxWidth: subTitleMaxWidth,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{subTitle}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t\t{!!otherProps?.actionButton && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={\n\t\t\t\t\t\totherProps?.buttonWidth\n\t\t\t\t\t\t\t? { width: otherProps?.buttonWidth, display: 'flex' }\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<Button {...otherProps?.actionButton} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","COLORS","IconHolder","ZeroState","subTitle","title","IconHolderStyle","style","isLoading","containerWidth","subTitleMaxWidth","otherProps","TitleTypography","TitleRegular","numericWidth","TitleSmall","jsxs","jsx","Spinner","AlertIcon","BodyCaption","Button"],"mappings":"6YAcMA,EAAYC,EAAAA,QAAO;AAAA,eACVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShCC,EAAaF,EAAAA,QAAO;AAAA,eACXC,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUxBE,EAYR,CAAC,CACL,SAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,UAAAC,EACA,eAAAC,EACA,iBAAAC,EAAmB,IACnB,GAAGC,CACJ,IAAM,CACL,IAAIC,EAAkBC,EAAAA,aACtB,MAAMC,EAAeL,EAAiB,WAAWA,CAAc,EAAI,EAEnE,OAAIK,GAAgB,CAAC,MAAMA,CAAY,GAAKA,GAAgB,MAC3DF,EAAkBG,EAAAA,YAGlBC,EAAAA,KAACjB,EAAA,CAAU,MAAOQ,GAAS,CAAA,EACzB,SAAA,CAAAC,EACAS,EAAAA,IAACC,WAAQ,KAAM,QAAS,MAAOjB,SAAO,OAAO,MAAO,EAEpDgB,EAAAA,IAACf,EAAA,CACA,YAAU,yBACV,MAAOI,GAAmB,CAAA,EAEzB,YAAY,MACZW,EAAAA,IAACE,EAAAA,QAAA,CACA,MAAOlB,EAAAA,OAAO,QAAQ,YACtB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,EAKHgB,EAAAA,IAACL,EAAA,CACA,MAAO,CACN,MAAOX,EAAAA,OAAO,QAAQ,OAAA,EAGtB,SAAAO,EAAY,aAAeH,GAAS,kBAAA,CAAA,EAErC,CAAC,CAACD,GAAY,CAACI,GACfS,EAAAA,IAACG,EAAAA,YAAA,CACA,MAAO,CACN,MAAOnB,EAAAA,OAAO,QAAQ,UACtB,UAAW,SACX,SAAUS,CAAA,EAGV,SAAAN,CAAA,CAAA,EAGF,CAAC,CAACO,GAAY,cACdM,EAAAA,IAAC,MAAA,CACA,MACCN,GAAY,YACT,CAAE,MAAOA,GAAY,YAAa,QAAS,MAAA,EAC3C,CAAA,EAGJ,SAAAM,EAAAA,IAACI,EAAAA,OAAA,CAAQ,GAAGV,GAAY,YAAA,CAAc,CAAA,CAAA,CACvC,EAEF,CAEF"}

package/dist/cjs/editor/BikEditor.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),he=require("../node_modules/@tiptap/core/dist/index.js"),T=require("@tiptap/react"),a=require("react"),Q=require("../components/TypographyStyle.js"),k=require("./BikEditor.styles.js"),Z=require("./BikEditor.types.js"),s=require("./BikEditor.utils.js"),pe=require("./extensions/buildExtensions.js"),Ce=require("./floating/LinkBubbleMenu.js"),ke=require("../icons/BIK AI specific/WandSparkles.js"),Se=require("../icons/Actions/Formatting/Copy.js"),xe=require("../icons/Actions/Common actions/Code.js"),ye=require("../icons/Informational/General/Info.js");function Be(p){return Object.entries(p).map(([x,g])=>`${x.replace(/([A-Z])/g,C=>`-${C.toLowerCase()}`)}:${g}`).join(";")}const Te=(p,x)=>{const{initialContent:g,sections:C,features:S,disabled:K,maxCharacters:b,characterLimit:X,characterLimitHard:Y,shortcuts:ee,sendShortcut:te,mentions:d,slashCommands:h,link:ne,onPaste:oe,onReady:E,onChange:R,onSend:y,onFocus:j,onBlur:v,onSelectionChange:z,minHeight:se,maxHeight:re,style:ie,className:ce,editorClassName:A,editorStyle:H,renderJsonError:J}=p,u=!!S?.jsonMode,[m,I]=a.useState(null),[ae,M]=a.useState(!1),[le,L]=a.useState(u&&!(g??"").trim()),de=u?s.buildJsonCodeBlockHtml(g??""):C?.length?s.buildSectionedContent(s.normalizeHtml(g??""),C.map(e=>({...e,content:s.normalizeHtml(e.content)}))):s.normalizeHtml(g??""),B=a.useRef([]),O=a.useRef(!1),q=a.useRef(E);q.current=E;const F=a.useRef(R);F.current=R;const N=a.useRef(z);N.current=z;const w=a.useRef(Z.DEFAULT_FORMAT_STATE),P=a.useRef(j);P.current=j;const D=a.useRef(v);D.current=v;const U=a.useRef(y);U.current=y;const _=a.useRef(d?.agents??[]);_.current=d?.agents??[];const $=a.useRef(d?.teams??[]);$.current=d?.teams??[];const W=a.useRef(h?.items??[]);W.current=h?.items??[];const n=T.useEditor({extensions:pe.buildExtensions({features:S,placeholder:p.placeholder,maxCharacters:b,characterLimit:X,characterLimitHard:Y,hasSections:(C?.length??0)>0,mentions:{agents:d?_:void 0,teams:d?$:void 0},slashCommands:h?W:void 0,onPaste:oe,onSend:y?e=>U.current?.(e):void 0,sendShortcut:te,shortcuts:ee,onMentionSelected:d?.onSelect,onSlashCommandSelected:h?.onSelect,renderMentionItem:d?.renderItem,renderMentionDropdown:d?.renderDropdown,removeMentionTriggerOnDismiss:d?.removeTriggerOnDismiss,renderMentionChipIcon:d?.renderChipIcon,renderSlashCommandItem:h?.renderItem,renderSlashCommandDropdown:h?.renderDropdown}),content:de,editable:!K,immediatelyRender:!1,editorProps:{attributes:{...A?{class:A}:{},...H?{style:Be(H)}:{}}},onUpdate:({editor:e})=>{if(F.current?.(s.extractContent(e)),u){const t=s.getCodeBlockText(e),o=s.parseJson(t);I(o.valid?null:o),L(!t.trim())}},onTransaction:({editor:e})=>{const t=s.extractActiveFormats(e),o=w.current;(o.bold!==t.bold||o.italic!==t.italic||o.underline!==t.underline||o.strike!==t.strike||o.bulletList!==t.bulletList||o.orderedList!==t.orderedList||o.blockquote!==t.blockquote||o.codeBlock!==t.codeBlock||o.superscript!==t.superscript||o.subscript!==t.subscript||o.textAlign!==t.textAlign||o.fontFamily!==t.fontFamily||o.fontSize!==t.fontSize||o.color!==t.color||o.highlight!==t.highlight||o.link?.href!==t.link?.href)&&(w.current=t,N.current?.(t))},onFocus:()=>P.current?.(),onBlur:()=>D.current?.()});function i(e){n?e(n):B.current.push(e)}a.useEffect(()=>{if(n&&(B.current.length>0&&B.current.splice(0).forEach(t=>t(n)),O.current||(O.current=!0,q.current?.()),u)){const e=s.getCodeBlockText(n),t=s.parseJson(e);I(t.valid?null:t),L(!e.trim())}},[n,u]),a.useImperativeHandle(x,()=>({focus:e=>i(t=>t.commands.focus(e)),blur:()=>i(e=>e.commands.blur()),clearContent:()=>i(e=>e.commands.clearContent(!0)),setContent:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.setContent(t,{emitUpdate:!0}))},insertContent:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContent(t))},insertInlineContent:e=>{i(t=>s.insertInlineHtml(t,e))},insertAtStart:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(1,t))},insertBlock:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size,t))},appendInline:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size-1,t))},insertAtEnd(e){this.insertBlock(e)},appendContent(e){this.appendInline(e)},getContent:()=>n?s.extractContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},getJSON:()=>n?.getJSON()??null,getMentions:()=>{const e=new Set,t=new Set;return n?(n.state.doc.descendants(o=>{o.type.name==="mentionAgent"&&o.attrs.id!=null?e.add(String(o.attrs.id)):o.type.name==="mentionTeam"&&o.attrs.id!=null&&t.add(String(o.attrs.id))}),{agentIds:Array.from(e),teamIds:Array.from(t)}):{agentIds:[],teamIds:[]}},getCursorPosition:()=>{if(!n)return{from:0,to:0};const{from:e,to:t}=n.state.selection;return{from:e,to:t}},insertAtPosition:(e,t)=>{const o=s.normalizeHtml(t);i(r=>r.commands.insertContentAt(e,o))},getSelectedText:()=>{if(!n)return"";const{state:e}=n,{from:t,to:o,empty:r}=e.selection;if(!r)return e.doc.textBetween(t,o," ");const l=e.schema.marks.link;if(l){const f=he.getMarkRange(e.doc.resolve(t),l);if(f)return e.doc.textBetween(f.from,f.to," ")}return""},getCharacterCount:()=>({count:n?.storage.characterCount?.characters?.()??n?.getText().length??0,limit:b??null}),getSectionContent:e=>n?s.extractSectionContent(n,e):{html:"",text:"",isEmpty:!0,characterCount:0},setSectionContent:(e,t)=>{const o=s.normalizeHtml(t);i(r=>s.setSectionContentInEditor(r,e,o))},focusSection:e=>{i(t=>{if(e==="body"){let r=t.state.doc.content.size-1;t.state.doc.descendants((l,f)=>(l.type.name==="sectionDivider"&&r===t.state.doc.content.size-1&&(r=f-1),r===t.state.doc.content.size-1)),r<1&&(r=1),t.chain().focus().setTextSelection(r).run();return}let o=-1;t.state.doc.descendants((r,l)=>{if(o!==-1)return!1;r.type.name==="sectionDivider"&&r.attrs.sectionId===e&&(o=l+r.nodeSize+1)}),o!==-1&&t.chain().focus().setTextSelection(o).run()})},clearSection:e=>{i(t=>s.setSectionContentInEditor(t,e,"<p></p>"))},getBodyContent:()=>n?s.extractBodyContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},setBodyContent:e=>{const t=s.normalizeHtml(e);i(o=>s.setSectionContentInEditor(o,"body",t))},setBodyAndSections:(e,t)=>{const o=s.buildSectionedContent(s.normalizeHtml(e),t.map(r=>({id:r.id,content:s.normalizeHtml(r.content)})));i(r=>r.commands.setContent(o,{emitUpdate:!0}))},appendBodyContent:e=>{const t=s.normalizeHtml(e);i(o=>{const r=s.findSectionEndPos(o,"body");o.commands.insertContentAt(r-1,t,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionStart:(e,t)=>{const o=s.normalizeHtml(t);i(r=>{const l=s.findSectionStartPos(r,e);l!==-1&&r.commands.insertContentAt(l,o,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionEnd:(e,t)=>{const o=s.normalizeHtml(t);i(r=>{const l=s.findSectionEndPos(r,e);r.commands.insertContentAt(l,o,{parseOptions:{preserveWhitespace:!0}})})},getActiveFormats:()=>n?s.extractActiveFormats(n):Z.DEFAULT_FORMAT_STATE,actions:{toggleBold:()=>n?.chain().focus().toggleBold().run(),toggleItalic:()=>n?.chain().focus().toggleItalic().run(),toggleUnderline:()=>n?.chain().focus().toggleUnderline().run(),toggleStrike:()=>n?.chain().focus().toggleStrike().run(),toggleBulletList:()=>n?.chain().focus().toggleBulletList().run(),toggleOrderedList:()=>n?.chain().focus().toggleOrderedList().run(),toggleBlockquote:()=>n?.chain().focus().toggleBlockquote().run(),toggleCodeBlock:()=>n?.chain().focus().toggleCodeBlock().run(),setTextAlign:e=>n?.chain().focus().setTextAlign(e).run(),setFontFamily:e=>n?.chain().focus().setFontFamily(e).run(),setFontSize:e=>n?.chain().focus().setFontSize(e).run(),setColor:e=>n?.chain().focus().setColor(e).run(),setHighlight:e=>n?.chain().focus().toggleHighlight({color:e}).run(),unsetColor:()=>n?.chain().focus().unsetColor().run(),unsetHighlight:()=>n?.chain().focus().unsetHighlight().run(),setLink:(e,t)=>{n&&(t!==void 0?n.chain().focus().extendMarkRange("link").command(({tr:o,state:r})=>{const{from:l,to:f}=o.selection,V=r.schema.marks.link;if(!V)return!1;const fe=r.schema.text(t,[V.create({href:e})]),ge=r.schema.text(" ");return o.replaceWith(l,f,[fe,ge]),!0}).run():n.chain().focus().extendMarkRange("link").setLink({href:e}).insertContent(" ").run())},updateLink:e=>n?.chain().focus().extendMarkRange("link").setLink({href:e}).run(),removeLink:()=>n?.chain().focus().extendMarkRange("link").unsetLink().run(),insertEmoji:e=>n?.chain().focus().insertContent(e).run(),insertVariable:e=>n?.chain().focus().insertContent(`{{${e}}}`).run(),insertHtml:e=>n?.commands.insertContent(s.normalizeHtml(e)),openMentionMenu:(e="@")=>{if(!n)return;const{to:t}=n.state.selection,o=t>1?n.state.doc.textBetween(t-1,t):"",r=o!==""&&!/\s/.test(o);n.chain().focus().setTextSelection(t).insertContent(r?` ${e}`:e).run()},undo:()=>n?.chain().focus().undo().run(),redo:()=>n?.chain().focus().redo().run(),canUndo:()=>n?.can().undo()??!1,canRedo:()=>n?.can().redo()??!1,toggleSuperscript:()=>n?.chain().focus().toggleSuperscript().run(),toggleSubscript:()=>n?.chain().focus().toggleSubscript().run(),insertImage:e=>n?.chain().focus().setImage({src:e}).run()},json:S?.jsonMode?{getText:()=>n?s.getCodeBlockText(n):"",setText:e=>i(t=>s.setCodeBlockText(t,e)),parse:()=>s.parseJson(n?s.getCodeBlockText(n):""),isValid:()=>s.parseJson(n?s.getCodeBlockText(n):"").valid,format:(e=2)=>i(t=>{const{valid:o,value:r}=s.parseJson(s.getCodeBlockText(t));!o||r===null||s.setCodeBlockText(t,JSON.stringify(r,null,e))}),minify:()=>i(e=>{const{valid:t,value:o}=s.parseJson(s.getCodeBlockText(e));!t||o===null||s.setCodeBlockText(e,JSON.stringify(o))})}:void 0}),[n]);const ue=()=>{if(!n)return;const{valid:e,value:t}=s.parseJson(s.getCodeBlockText(n));!e||t===null||s.setCodeBlockText(n,JSON.stringify(t,null,2))},me=()=>{n&&(navigator.clipboard?.writeText(s.getCodeBlockText(n)),M(!0),setTimeout(()=>M(!1),1500))};return n?c.jsxs(k.BikEditorShell,{minHeight:se,maxHeight:re,tightParagraphs:!S?.richPaste,jsonMode:u,style:ie,className:ce,children:[u&&c.jsxs(k.BikJsonHeader,{children:[c.jsx("span",{className:"bik-json-header-label",children:"JSON"}),c.jsxs("div",{className:"bik-json-header-actions",children:[c.jsxs("button",{type:"button",onClick:ue,disabled:!!m,title:"Format JSON",children:[c.jsx(ke.default,{size:16}),c.jsx(Q.BodyCaption,{children:"Beautify"})]}),c.jsxs("button",{type:"button",onClick:me,title:"Copy JSON",children:[c.jsx(Se.default,{size:16}),ae&&c.jsx(Q.BodyCaption,{children:"Copied"})]})]})]}),u?c.jsxs(k.BikJsonBody,{$error:!!m,children:[c.jsx(T.EditorContent,{editor:n}),le&&c.jsxs(k.BikJsonEmptyState,{"aria-hidden":!0,children:[c.jsx(xe.default,{size:20}),c.jsx("span",{children:p.placeholder??"Type or paste JSON here"})]})]}):c.jsx(T.EditorContent,{editor:n}),c.jsx(Ce.LinkBubbleMenu,{editor:n,renderLinkTooltip:ne?.renderTooltip}),u&&m?J?J(m):c.jsxs(k.BikJsonError,{children:[c.jsx(ye.default,{size:16}),c.jsxs("span",{children:[m.line!=null&&c.jsxs("strong",{children:["Line ",m.line,m.column!=null?`, column ${m.column}`:"",":"," "]}),m.error]})]}):null]}):null},G=a.forwardRef(Te);G.displayName="BikEditor";exports.BikEditor=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Ce=require("../node_modules/@tiptap/core/dist/index.js"),b=require("@tiptap/react"),a=require("react"),G=require("../components/TypographyStyle.js"),k=require("./BikEditor.styles.js"),K=require("./BikEditor.types.js"),s=require("./BikEditor.utils.js"),ke=require("./extensions/buildExtensions.js"),Se=require("./floating/LinkBubbleMenu.js"),xe=require("../icons/BIK AI specific/WandSparkles.js"),ye=require("../icons/Actions/Formatting/Copy.js"),Be=require("../icons/Actions/Common actions/Code.js"),Te=require("../icons/Informational/General/Info.js");function be(p){return Object.entries(p).map(([x,g])=>`${x.replace(/([A-Z])/g,C=>`-${C.toLowerCase()}`)}:${g}`).join(";")}const Ee=(p,x)=>{const{initialContent:g,sections:C,features:S,disabled:Y,maxCharacters:E,characterLimit:ee,characterLimitHard:te,shortcuts:ne,sendShortcut:oe,mentions:d,slashCommands:h,link:se,onPaste:re,onReady:R,onChange:j,onSend:y,onFocus:v,onBlur:z,onSelectionChange:A,minHeight:ie,maxHeight:ce,style:ae,className:le,editorClassName:H,editorStyle:J,renderJsonError:I}=p,u=!!S?.jsonMode,[m,M]=a.useState(null),[de,L]=a.useState(!1),[B,F]=a.useState(u&&!(g??"").trim()),[ue,O]=a.useState(!1),me=u?s.buildJsonCodeBlockHtml(g??""):C?.length?s.buildSectionedContent(s.normalizeHtml(g??""),C.map(e=>({...e,content:s.normalizeHtml(e.content)}))):s.normalizeHtml(g??""),T=a.useRef([]),q=a.useRef(!1),N=a.useRef(R);N.current=R;const P=a.useRef(j);P.current=j;const w=a.useRef(A);w.current=A;const D=a.useRef(K.DEFAULT_FORMAT_STATE),U=a.useRef(v);U.current=v;const _=a.useRef(z);_.current=z;const $=a.useRef(y);$.current=y;const W=a.useRef(d?.agents??[]);W.current=d?.agents??[];const V=a.useRef(d?.teams??[]);V.current=d?.teams??[];const Q=a.useRef(h?.items??[]);Q.current=h?.items??[];const n=b.useEditor({extensions:ke.buildExtensions({features:S,placeholder:p.placeholder,maxCharacters:E,characterLimit:ee,characterLimitHard:te,hasSections:(C?.length??0)>0,mentions:{agents:d?W:void 0,teams:d?V:void 0},slashCommands:h?Q:void 0,onPaste:re,onSend:y?e=>$.current?.(e):void 0,sendShortcut:oe,shortcuts:ne,onMentionSelected:d?.onSelect,onSlashCommandSelected:h?.onSelect,renderMentionItem:d?.renderItem,renderMentionDropdown:d?.renderDropdown,removeMentionTriggerOnDismiss:d?.removeTriggerOnDismiss,renderMentionChipIcon:d?.renderChipIcon,renderSlashCommandItem:h?.renderItem,renderSlashCommandDropdown:h?.renderDropdown}),content:me,editable:!Y,immediatelyRender:!1,editorProps:{attributes:{...H?{class:H}:{},...J?{style:be(J)}:{}}},onUpdate:({editor:e})=>{if(P.current?.(s.extractContent(e)),u){const t=s.getCodeBlockText(e),o=s.parseJson(t);M(o.valid?null:o),F(!t.trim())}},onTransaction:({editor:e})=>{const t=s.extractActiveFormats(e),o=D.current;(o.bold!==t.bold||o.italic!==t.italic||o.underline!==t.underline||o.strike!==t.strike||o.bulletList!==t.bulletList||o.orderedList!==t.orderedList||o.blockquote!==t.blockquote||o.codeBlock!==t.codeBlock||o.superscript!==t.superscript||o.subscript!==t.subscript||o.textAlign!==t.textAlign||o.fontFamily!==t.fontFamily||o.fontSize!==t.fontSize||o.color!==t.color||o.highlight!==t.highlight||o.link?.href!==t.link?.href)&&(D.current=t,w.current?.(t))},onFocus:()=>{O(!0),U.current?.()},onBlur:()=>{O(!1),_.current?.()}});function i(e){n?e(n):T.current.push(e)}a.useEffect(()=>{if(n&&(T.current.length>0&&T.current.splice(0).forEach(t=>t(n)),q.current||(q.current=!0,N.current?.()),u)){const e=s.getCodeBlockText(n),t=s.parseJson(e);M(t.valid?null:t),F(!e.trim())}},[n,u]),a.useImperativeHandle(x,()=>({focus:e=>i(t=>t.commands.focus(e)),blur:()=>i(e=>e.commands.blur()),clearContent:()=>i(e=>e.commands.clearContent(!0)),setContent:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.setContent(t,{emitUpdate:!0}))},insertContent:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContent(t))},insertInlineContent:e=>{i(t=>s.insertInlineHtml(t,e))},insertAtStart:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(1,t))},insertBlock:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size,t))},appendInline:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size-1,t))},insertAtEnd(e){this.insertBlock(e)},appendContent(e){this.appendInline(e)},getContent:()=>n?s.extractContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},getJSON:()=>n?.getJSON()??null,getMentions:()=>{const e=new Set,t=new Set;return n?(n.state.doc.descendants(o=>{o.type.name==="mentionAgent"&&o.attrs.id!=null?e.add(String(o.attrs.id)):o.type.name==="mentionTeam"&&o.attrs.id!=null&&t.add(String(o.attrs.id))}),{agentIds:Array.from(e),teamIds:Array.from(t)}):{agentIds:[],teamIds:[]}},getCursorPosition:()=>{if(!n)return{from:0,to:0};const{from:e,to:t}=n.state.selection;return{from:e,to:t}},insertAtPosition:(e,t)=>{const o=s.normalizeHtml(t);i(r=>r.commands.insertContentAt(e,o))},getSelectedText:()=>{if(!n)return"";const{state:e}=n,{from:t,to:o,empty:r}=e.selection;if(!r)return e.doc.textBetween(t,o," ");const l=e.schema.marks.link;if(l){const f=Ce.getMarkRange(e.doc.resolve(t),l);if(f)return e.doc.textBetween(f.from,f.to," ")}return""},getCharacterCount:()=>({count:n?.storage.characterCount?.characters?.()??n?.getText().length??0,limit:E??null}),getSectionContent:e=>n?s.extractSectionContent(n,e):{html:"",text:"",isEmpty:!0,characterCount:0},setSectionContent:(e,t)=>{const o=s.normalizeHtml(t);i(r=>s.setSectionContentInEditor(r,e,o))},focusSection:e=>{i(t=>{if(e==="body"){let r=t.state.doc.content.size-1;t.state.doc.descendants((l,f)=>(l.type.name==="sectionDivider"&&r===t.state.doc.content.size-1&&(r=f-1),r===t.state.doc.content.size-1)),r<1&&(r=1),t.chain().focus().setTextSelection(r).run();return}let o=-1;t.state.doc.descendants((r,l)=>{if(o!==-1)return!1;r.type.name==="sectionDivider"&&r.attrs.sectionId===e&&(o=l+r.nodeSize+1)}),o!==-1&&t.chain().focus().setTextSelection(o).run()})},clearSection:e=>{i(t=>s.setSectionContentInEditor(t,e,"<p></p>"))},getBodyContent:()=>n?s.extractBodyContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},setBodyContent:e=>{const t=s.normalizeHtml(e);i(o=>s.setSectionContentInEditor(o,"body",t))},setBodyAndSections:(e,t)=>{const o=s.buildSectionedContent(s.normalizeHtml(e),t.map(r=>({id:r.id,content:s.normalizeHtml(r.content)})));i(r=>r.commands.setContent(o,{emitUpdate:!0}))},appendBodyContent:e=>{const t=s.normalizeHtml(e);i(o=>{const r=s.findSectionEndPos(o,"body");o.commands.insertContentAt(r-1,t,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionStart:(e,t)=>{const o=s.normalizeHtml(t);i(r=>{const l=s.findSectionStartPos(r,e);l!==-1&&r.commands.insertContentAt(l,o,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionEnd:(e,t)=>{const o=s.normalizeHtml(t);i(r=>{const l=s.findSectionEndPos(r,e);r.commands.insertContentAt(l,o,{parseOptions:{preserveWhitespace:!0}})})},getActiveFormats:()=>n?s.extractActiveFormats(n):K.DEFAULT_FORMAT_STATE,actions:{toggleBold:()=>n?.chain().focus().toggleBold().run(),toggleItalic:()=>n?.chain().focus().toggleItalic().run(),toggleUnderline:()=>n?.chain().focus().toggleUnderline().run(),toggleStrike:()=>n?.chain().focus().toggleStrike().run(),toggleBulletList:()=>n?.chain().focus().toggleBulletList().run(),toggleOrderedList:()=>n?.chain().focus().toggleOrderedList().run(),toggleBlockquote:()=>n?.chain().focus().toggleBlockquote().run(),toggleCodeBlock:()=>n?.chain().focus().toggleCodeBlock().run(),setTextAlign:e=>n?.chain().focus().setTextAlign(e).run(),setFontFamily:e=>n?.chain().focus().setFontFamily(e).run(),setFontSize:e=>n?.chain().focus().setFontSize(e).run(),setColor:e=>n?.chain().focus().setColor(e).run(),setHighlight:e=>n?.chain().focus().toggleHighlight({color:e}).run(),unsetColor:()=>n?.chain().focus().unsetColor().run(),unsetHighlight:()=>n?.chain().focus().unsetHighlight().run(),setLink:(e,t)=>{n&&(t!==void 0?n.chain().focus().extendMarkRange("link").command(({tr:o,state:r})=>{const{from:l,to:f}=o.selection,Z=r.schema.marks.link;if(!Z)return!1;const he=r.schema.text(t,[Z.create({href:e})]),pe=r.schema.text(" ");return o.replaceWith(l,f,[he,pe]),!0}).run():n.chain().focus().extendMarkRange("link").setLink({href:e}).insertContent(" ").run())},updateLink:e=>n?.chain().focus().extendMarkRange("link").setLink({href:e}).run(),removeLink:()=>n?.chain().focus().extendMarkRange("link").unsetLink().run(),insertEmoji:e=>n?.chain().focus().insertContent(e).run(),insertVariable:e=>n?.chain().focus().insertContent(`{{${e}}}`).run(),insertHtml:e=>n?.commands.insertContent(s.normalizeHtml(e)),undo:()=>n?.chain().focus().undo().run(),redo:()=>n?.chain().focus().redo().run(),canUndo:()=>n?.can().undo()??!1,canRedo:()=>n?.can().redo()??!1,toggleSuperscript:()=>n?.chain().focus().toggleSuperscript().run(),toggleSubscript:()=>n?.chain().focus().toggleSubscript().run(),insertImage:e=>n?.chain().focus().setImage({src:e}).run()},json:S?.jsonMode?{getText:()=>n?s.getCodeBlockText(n):"",setText:e=>i(t=>s.setCodeBlockText(t,e)),parse:()=>s.parseJson(n?s.getCodeBlockText(n):""),isValid:()=>s.parseJson(n?s.getCodeBlockText(n):"").valid,format:(e=2)=>i(t=>{const{valid:o,value:r}=s.parseJson(s.getCodeBlockText(t));!o||r===null||s.setCodeBlockText(t,JSON.stringify(r,null,e))}),minify:()=>i(e=>{const{valid:t,value:o}=s.parseJson(s.getCodeBlockText(e));!t||o===null||s.setCodeBlockText(e,JSON.stringify(o))})}:void 0}),[n]);const fe=()=>{if(!n)return;const{valid:e,value:t}=s.parseJson(s.getCodeBlockText(n));!e||t===null||s.setCodeBlockText(n,JSON.stringify(t,null,2))},ge=()=>{n&&(navigator.clipboard?.writeText(s.getCodeBlockText(n)),L(!0),setTimeout(()=>L(!1),1500))};return n?c.jsxs(k.BikEditorShell,{minHeight:ie,maxHeight:ce,tightParagraphs:!S?.richPaste,jsonMode:u,style:ae,className:le,children:[u&&c.jsxs(k.BikJsonHeader,{children:[c.jsx("span",{className:"bik-json-header-label",children:"JSON"}),c.jsxs("div",{className:"bik-json-header-actions",children:[c.jsxs("button",{type:"button",onClick:fe,disabled:!!m||B,title:"Format JSON",children:[c.jsx(xe.default,{size:16}),c.jsx(G.BodyCaption,{children:"Beautify"})]}),c.jsxs("button",{type:"button",onClick:ge,disabled:B,title:"Copy JSON",children:[c.jsx(ye.default,{size:16}),de&&c.jsx(G.BodyCaption,{children:"Copied"})]})]})]}),u?c.jsxs(k.BikJsonBody,{$error:!!m,children:[c.jsx(b.EditorContent,{editor:n}),B&&!ue&&c.jsxs(k.BikJsonEmptyState,{"aria-hidden":!0,children:[c.jsx(Be.default,{size:20}),c.jsx("span",{children:p.placeholder??"Type or paste JSON here"})]})]}):c.jsx(b.EditorContent,{editor:n}),c.jsx(Se.LinkBubbleMenu,{editor:n,renderLinkTooltip:se?.renderTooltip}),u&&m?I?I(m):c.jsxs(k.BikJsonError,{children:[c.jsx(Te.default,{size:16}),c.jsxs("span",{children:[m.line!=null&&c.jsxs("strong",{children:["Line ",m.line,m.column!=null?`, column ${m.column}`:"",":"," "]}),m.error]})]}):null]}):null},X=a.forwardRef(Ee);X.displayName="BikEditor";exports.BikEditor=X;
 //# sourceMappingURL=BikEditor.js.map