{"version":3,"file":"static/chunks/5907.8526f7b50ddb202f.js","mappings":"ujGAYO,IAAMA,EAAQC,EAAAA,QAAAA,IAAAA,WAAU,C,6BAAVA,C,KAKRC,EAAgBD,EAAAA,QAAAA,IAAAA,WAAU,C,6BAAVA,C,IAILE,EAAAA,EAAAA,YACHC,EAAAA,EAAAA,iBAKIC,EAAAA,GAAAA,SAIAA,EAAAA,GAAAA,OAIAA,EAAAA,GAAAA,QAOZC,EAAWL,EAAAA,QAAAA,IAAAA,WAAU,C,6BAAVA,C,IAICI,EAAAA,GAAAA,QAKZE,EAAWN,EAAAA,QAAAA,OAAAA,WAAa,C,6BAAbA,C,KAClBO,SAAAA,G,OAASA,EAAMC,SAAWC,EAAAA,EAAAA,GAAWA,EAAAA,EAAAA,IAC9BP,EAAAA,EAAAA,MAOWK,SAAAA,G,OAASA,EAAMC,SAAY,OAAS,UACtDD,SAAAA,G,OAASA,EAAMC,UAAY,0BAAsC,OAAZN,EAAAA,EAAAA,QAElCE,EAAAA,GAAAA,QACfG,SAAAA,G,OAASA,EAAMC,SAAWC,EAAAA,EAAAA,GAAWA,EAAAA,EAAAA,IAEtBL,EAAAA,GAAAA,QAEIG,SAAAA,G,OAASA,EAAMC,SAAY,OAAS,UAKpDE,EAAQV,EAAAA,QAAAA,IAAAA,WAAU,C,6BAAVA,C,KACGO,SAAAA,G,OAASA,EAAMC,SAAW,QAAwC,QAAhCG,EAAAA,EAAAA,GAAQT,EAAAA,EAAAA,iBAAwB,SAAS,gBAC9EC,EAAAA,EAAAA,kBACNI,SAAAA,G,OAASA,EAAMC,SAAW,mBAAqB,iBASrCJ,EAAAA,GAAAA,QAKZQ,GAAYZ,EAAAA,EAAAA,SAAOa,EAAAA,IAAG,Y,6BAAVb,C,IACZE,EAAAA,EAAAA,aAMAY,EAAMd,EAAAA,QAAAA,IAAAA,WAAU,C,6BAAVA,C,IAEKE,EAAAA,EAAAA,QAKXa,GAAef,EAAAA,EAAAA,SAAOgB,EAAAA,GAAO,Y,6BAAdhB,C,IAMHI,EAAAA,GAAAA,QAKZa,EAAYjB,EAAAA,QAAAA,IAAAA,WAAU,C,6BAAVA,C,IACAI,EAAAA,GAAAA,QAMZc,GAAalB,EAAAA,EAAAA,SAAOgB,EAAAA,GAAO,Y,6BAAdhB,C,KAKbmB,GAAUnB,EAAAA,EAAAA,SAAOoB,EAAAA,GAAc,Y,8BAArBpB,C,KAEC,Y,OAAS,EAANqB,OAAsB,IAAM,YC1G1CC,ID8GYtB,EAAAA,EAAAA,SAAOuB,EAAAA,GAAgB,Y,8BAAvBvB,C,KC9GG,Y,IAAGwB,EAAkB,EAAlBA,mBACrBC,GAAWC,EAAAA,EAAAA,MACXC,GAASC,EAAAA,EAAAA,aAEqCC,GAAAA,EAAAA,EAAAA,WAAS,GAAtDC,EAA6CD,EAAe,GAAxCE,EAAyBF,EAAe,GAC7DG,GAAWC,EAAAA,EAAAA,GAAc,eAAsC,OAAvB7B,EAAAA,GAAAA,OAAuB,MAE/D8B,GAAeC,EAAAA,EAAAA,cAAY,SAACC,GAC1BZ,GACAA,EAAmBY,GAEvBL,EAAsBK,KACvB,CAACZ,IAOAa,GAAAA,EAAAA,EAAAA,KAAY,SAACC,G,MAAmB,CAChCC,WAAYD,EAAME,eAAeD,WACjCE,YAAaH,EAAME,eAAeC,YAClCC,iBAAkBJ,EAAME,eAAeE,iBACvCC,cAAeL,EAAME,eAAeG,kBARpCJ,EAIAF,EAJAE,WACAE,EAGAJ,EAHAI,YACAC,EAEAL,EAFAK,iBACAC,EACAN,EADAM,cAQoCd,GAAAA,EAAAA,EAAAA,WAAS,GAA1Ce,EAAiCf,EAAc,GAAjCgB,EAAmBhB,EAAc,GAEtD,OAAKU,GAIE,UAACO,EAAY,C,WAChB,SAACA,EAAe,CACZC,MAAO,UACPC,QAAS,W,OAAMd,GAAcJ,IAC7BmB,KAAMnB,GAAqB,SAACV,EAAAA,EAAa,CAAC8B,KAAM,WAAa,SAAC3B,EAAAA,EAAe,CAAC2B,KAAM,U,SACvF,+CAGAlB,GAAYF,IAAuBE,GAC9B,SAACc,EAAgB,C,SACdL,EAAYU,KAAI,SAACC,GACd,IAAkCb,EAAAA,EAAWa,GAAvC,EAA4Bb,EAA1Bc,SAAaC,GAAQ,OAAKf,EAAsB,CAAhDc,aACFE,EAAmBb,IAAqBY,EAASE,IACjDC,EAA4BF,GAAoBX,EAEtD,OAAO,sB,WACH,SAACE,EAAQ,C,UACL,SAACY,EAAAA,EAAI,CAACC,KAAMJ,EAAmB5B,EAAOiC,OAAS,QAAuB,OAAfN,EAASO,O,UAC5D,UAACf,EAAQ,CACLtC,SAAU+C,EACVP,QAAS,WACDO,EACAV,GAAgBiB,SAAAA,G,OAAeA,MAE/BrC,GAASsC,EAAAA,EAAAA,IAAqBT,EAASE,MACvC/B,GAASuC,EAAAA,EAAAA,KAAsB,IAC/BnB,GAAgB,K,WAIxB,SAACC,EAAM,CAACmB,IAAK,GAAmBX,OAAhBA,EAASY,MAAqB,OAAdZ,EAASa,SACzC,SAACrB,EAAY,CAACsB,aAAa,E,SAAQd,EAASe,gBAC5C,SAACvB,EAAU,CAACzB,OAAQoC,YAIhC,SAACa,EAAAA,EAAgB,CAAoBjD,OAAQoC,E,UAC7C,SAACX,EAAW,C,SACPO,EAASF,KAAI,SAACoB,G,OACX,SAACb,EAAAA,EAAI,CAACC,KAAM,QAA0BY,OAAlBjB,EAASO,MAAM,KAAiB,OAAdU,EAAQV,O,UAC1C,SAACf,EAAW,CAERtC,SAAUmC,IAAkB4B,EAAQV,MACpCb,QAAS,WACLvB,GAAS+C,EAAAA,EAAAA,IAAoBD,EAAQV,QACrCpC,GAASuC,EAAAA,EAAAA,KAAsB,K,SAGlCO,EAAQE,cAPJF,EAAQV,QAFuCU,EAAQf,WAHrDF,EAASE,cAqB1C,SAACV,EAAa,CACZ4B,WAAW,EACX3B,MAAO,QACPE,MAAM,SAAC0B,EAAAA,EAAS,IAChB3B,QAAS,WACLvB,GAASuC,EAAAA,EAAAA,KAAsB,IAC/BrC,EAAOiD,KAAK,S,SAEnB,sCApEE,Q,gIC1CFC,GAA+BC,EAAAA,EAAAA,KAFR,SAACxC,G,OAAwCA,EAAME,iBAI/EuC,EAAAA,GACA,WAAmCC,G,IAAhCzC,EAAU,EAAVA,WAAYG,EAAgB,EAAhBA,iBACX,OAAIA,GAAoBH,GAAcyC,EAC3BzC,EAAWG,GAAkBW,SAE7B,MAKN4B,EAA4B,SAAC3C,GACtC,IAAyCA,EAAAA,EAAME,eAAvCD,EAAiCD,EAAjCC,WAAYG,EAAqBJ,EAArBI,iBACpB,OAAO,GAAqBH,EAAcA,EAAWG,GAAkBmB,MAAQ,IAGtEqB,EAAmC,SAAC5C,G,OAA2BA,EAAME,eAAe2C,oB,8ECb3FC,EAAY,SAACC,G,IACXA,EAAJ,OAAmB,QAAfA,EAAAA,EAAQC,eAAO,IAAfD,OAAAA,EAAAA,EAAiBE,cACV,GAAgC,OAA7BF,EAAQC,QAAQC,aAAa,MAEpC,O,sIChBJ,IAAMC,E,QAAkBxF,QAAAA,IAAAA,WAAU,C,4BAAVA,C,KACR,Y,OAAW,EAARyF,YCWbnB,EAAmB,Y,IAC5BjD,EAAM,EAANA,OACAqE,EAAsB,EAAtBA,uBACAC,EAAS,EAATA,UACAC,EAAQ,EAARA,SAAQ,IACRH,SAAAA,OAAQ,IAAG,SAAM,EAEXJ,GAAUQ,EAAAA,EAAAA,QAAuB,MACoBC,EFDpC,Y,IAAGzE,EAAM,EAANA,OAAQgE,EAAO,EAAPA,QACNxD,GAAAA,EAAAA,EAAAA,UAAS,KAA9BkE,EAAqBlE,EAAa,GAA1BmE,EAAanE,EAAa,GACTA,GAAAA,EAAAA,EAAAA,UAAS,UAAlCoE,EAAyBpE,EAAkB,GAAjCqE,EAAerE,EAAkB,GACdA,GAAAA,EAAAA,EAAAA,UAA8B,UAA3DsE,EAA6BtE,EAAuC,GAAxDuE,EAAiBvE,EAAuC,GACjCA,GAAAA,EAAAA,EAAAA,WAAS,GAA5CwE,EAAmCxE,EAAc,GAAlCyE,EAAoBzE,EAAc,GAuCxD,OA3BA0E,EAAAA,EAAAA,YAAU,WACFlF,GACA+E,EAAc,WACVC,GACAL,EAAU,QACVE,EAAY,YAEZF,EAAUZ,EAAUC,KAEhBgB,IACRL,EAAUZ,EAAUC,IAEpBmB,uBAAsB,WAElBC,YAAW,WAEPT,EAAU,KACVE,EAAY,mBAIzB,CAAC7E,KAEJkF,EAAAA,EAAAA,YAAU,WACND,GAAiB,KAClB,IAEI,CACHI,mBAtCuB,WACvBV,EAAU,QACVE,EAAY,WACZE,EAAc,YAoCdO,oBAjCwB,WACxBP,EAAc,WAiCdQ,MAAO,CACHX,SAAAA,EACAE,WAAAA,EACAJ,OAAAA,IEhDmDD,CAAY,CACnEzE,OAAAA,EACAgE,QAAAA,IAFIqB,EAAmDZ,EAAnDY,mBAAoBC,EAA+Bb,EAA/Ba,oBAAqBC,EAAUd,EAAVc,MAejD,OACI,SAAC9D,EAAkB,CACf+D,IAAKxB,EACLuB,MAAOA,EACPnB,SAAUA,EACVE,UAAWA,EACXmB,gBAhBgB,SAACC,GACjBA,EAAEC,SAAW3B,EAAQC,SAA8B,WAAnByB,EAAEE,eAClC5F,EAASqF,IAAuBC,IAE5BjB,GACAA,EAAuBqB,KAY3BG,YAAW,gB,SAEVtB,M,gDC1Bb,KAAeuB,EAAAA,EAAAA,IAlBO,Y,QAEdC,YAAAA,OAAW,IAAG,MAAG,EAGrB,OACI,SAACC,IAAC,CAACC,GAAI,O,UACH,SAACC,OAAI,CACDC,EAAE,mFACFJ,YAAaA,EACbK,iBAAiB,KACjBC,cAAc,QACdC,eAAe,cAQ3B","sources":["webpack://_N_E/./src/features/faq/components/FAQTopicsList/styled.tsx","webpack://_N_E/./src/features/faq/components/FAQTopicsList/index.tsx","webpack://_N_E/./src/features/faq/store/selectors.ts","webpack://_N_E/../../packages/ui-react/src/components/CollapsibleBlock/useCollapsed.tsx","webpack://_N_E/../../packages/ui-react/src/components/CollapsibleBlock/styled.ts","webpack://_N_E/../../packages/ui-react/src/components/CollapsibleBlock/index.tsx","webpack://_N_E/../../packages/ui-react/src/components/svg/arrows/SingleArrowUp.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Button from '@r1-frontend/ui-react/components/buttons/button';\nimport { wideBreakpoints } from '@r1-frontend/ui-react/components/layouts/wideContainer';\nimport SingleArrowDown from '@r1-frontend/ui-react/components/svg/arrows/SingleArrowDown';\nimport SingleArrowUp from '@r1-frontend/ui-react/components/svg/arrows/SingleArrowUp';\nimport { H4 } from '@r1-frontend/ui-react/components/typography/heading';\nimport { BorderRadius } from '@r1-frontend/ui-react/tokens/borderRadius';\nimport { COLORS } from '@r1-frontend/ui-react/tokens/colors';\nimport { FONTS } from '@r1-frontend/ui-react/tokens/fonts';\nimport { hex2rgb } from '@r1-frontend/shared/helpers/hex2rgb';\n\nexport const Topic = styled.div`\n    padding-bottom: 16px;\n    width: 100%;\n`;\n\nexport const TopicListWrap = styled.div`\n    height: max-content;\n    width: 480px;\n    min-width: 480px;\n    background-color: ${COLORS.BgSubstrate};\n    border-radius: ${BorderRadius.OuterBlockRadius};\n    display: flex;\n    flex-direction: column;\n    padding: 24px 0 68px 0;\n    \n    @media (max-width: ${wideBreakpoints.sDesktop}) {\n        width: 488px;        \n        min-width: 488px;        \n    }\n    @media (max-width: ${wideBreakpoints.laptop}) {\n        width: 376px;\n        min-width: 376px;\n    }\n    @media (max-width: ${wideBreakpoints.mobile}) {\n        width: 100%;\n        min-width: 343px;\n        padding: 16px 0 24px 0;\n    }\n`;\n\nexport const Articles = styled.div`\n    padding-bottom: 24px;\n    gap: 12px;\n    \n    @media (max-width: ${wideBreakpoints.tablet}) {\n        padding-bottom: 16px;\n    }\n`;\n\nexport const SubTitle = styled.button<{ isActive?: boolean }>`  \n    ${props => props.isActive ? FONTS.H4 : FONTS.L}; \n    color: ${COLORS.Link};\n    width: 100%;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    text-align: start;\n    word-break: break-word;\n    padding: 0 24px 0 ${props => props.isActive ?  '73px' : '75px'};\n    ${props => props.isActive && `border-left: 2px solid ${COLORS.Link}`};\n    \n    @media (max-width: ${wideBreakpoints.tablet}) {\n        ${props => props.isActive ? FONTS.H5 : FONTS.S}; \n    }\n    @media (max-width: ${wideBreakpoints.mobile}) {\n         width: 100%;\n         padding: 0 24px 0 ${props => props.isActive ?  '35px' : '38px'};\n    }\n;\n`;\n\nexport const Title = styled.div<{ isActive?: boolean }>`\n    background-color: ${props => props.isActive ? `rgba(${hex2rgb(COLORS.ButtonSecondary)}, .5)` : 'transparent'};\n    border-radius: ${BorderRadius.OuterBlockRadius};\n    padding: ${props => props.isActive ? '8px 22px 8px 8px' : '0 22px 0 8px'};\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    margin: 0 24px 0 24px ;\n    cursor: pointer;\n    word-break: break-word;\n    flex-wrap: nowrap;\n    \n    @media (max-width: ${wideBreakpoints.mobile}) {\n        margin: 0 16px 0 16px ;\n    }\n`;\n\nexport const TitleText = styled(H4)`\n    color: ${COLORS.TextPrimary};\n    margin-right: auto;\n    padding: 0 16px;\n    width: auto;\n`;\n\nexport const Img = styled.img`\n    border-radius: 50%;\n    background-color: ${COLORS.Locked};\n    height: 45px;\n    width: 45px;\n`;\n\nexport const MobileButton = styled(Button)`\n    margin-bottom: 24px;\n    width: 100%;\n    justify-content: center;\n    display: none;\n    \n    @media (max-width: ${wideBreakpoints.mobile}) {\n        display: flex;\n    }\n`;\n\nexport const Container = styled.div`\n    @media (max-width: ${wideBreakpoints.mobile}) {\n        display: block;\n        width: 100%;\n    }\n`;\n\nexport const ButtonBack = styled(Button)`\n    margin-bottom: 32px;\n    padding-left: 0;\n`;\n\nexport const ArrowUp = styled(SingleArrowUp)<{isOpen : boolean}>`\n    min-width: 24px;\n    transform: rotate(${({ isOpen }) => isOpen ? '0' : '180deg'});\n    transition: transform 150ms ease;\n`;\n\nexport const ArrowDown = styled(SingleArrowDown)`\n    min-width: 24px;\n`;\n","import React, { useCallback, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport Link from 'next/link';\nimport { useRouter } from 'next/router';\n\nimport { IArticle } from '@r1-frontend/api-domru/content-static/v1/faq/categories/dto/ResponseDto';\n\nimport { CollapsibleBlock } from '@r1-frontend/ui-react/components/CollapsibleBlock';\nimport { wideBreakpoints } from '@r1-frontend/ui-react/components/layouts/wideContainer';\nimport ArrowLeft from '@r1-frontend/ui-react/components/svg/arrows/ArrowLeft';\nimport SingleArrowDown from '@r1-frontend/ui-react/components/svg/arrows/SingleArrowDown';\nimport SingleArrowUp from '@r1-frontend/ui-react/components/svg/arrows/SingleArrowUp';\nimport { useMatchMedia } from '@r1-frontend/shared/hooks/useMatchMedia';\n\nimport { setFAQActiveArticle, setFAQActiveCategory, setFAQRedirectLoading } from '~/src/features/faq/store/actionCreators';\nimport { TState } from '~/src/store';\n\nimport * as ST from './styled';\n\ninterface IProps {\n    onChangeMobileView?: (isVisibleCategories: boolean) => void,\n}\n\nexport const FAQTopicList = ({ onChangeMobileView }: IProps) => {\n    const dispatch = useDispatch();\n    const router = useRouter();\n\n    const [isMobileViewOpened, setIsMobileViewOpened] = useState(false);\n    const isMobile = useMatchMedia(`(max-width: ${wideBreakpoints.mobile})`);\n\n    const onChangeView = useCallback((isOpened: boolean) => {\n        if (onChangeMobileView) {\n            onChangeMobileView(isOpened);\n        }\n        setIsMobileViewOpened(isOpened);\n    }, [onChangeMobileView]);\n\n    const {\n        categories,\n        categoryIds,\n        activeCategoryId,\n        activeArticle,\n    } = useSelector((state: TState) => ({\n        categories: state.serviceHelpFAQ.categories,\n        categoryIds: state.serviceHelpFAQ.categoryIds,\n        activeCategoryId: state.serviceHelpFAQ.activeCategoryId,\n        activeArticle: state.serviceHelpFAQ.activeArticle,\n    }));\n\n    const [isActiveOpen, setIsActiveOpen] = useState(true);\n\n    if (!categories) {\n        return null;\n    }\n\n    return <ST.Container>\n        <ST.MobileButton\n            bType={'primary'}\n            onClick={() => onChangeView(!isMobileViewOpened)}\n            Icon={isMobileViewOpened ? <SingleArrowUp type={'white'}/> : <SingleArrowDown type={'white'}/>}\n        >\n            Разделы\n        </ST.MobileButton>\n        {isMobile && isMobileViewOpened || !isMobile\n            ? <ST.TopicListWrap>\n                {categoryIds.map((categoryId: string) => {\n                    const { articles, ...category } = categories[categoryId];\n                    const isActiveCategory = activeCategoryId === category._id;\n                    const isActiveCategoryAndOpened = isActiveCategory && isActiveOpen;\n\n                    return <>\n                        <ST.Topic>\n                            <Link href={isActiveCategory ? router.asPath : `/faq/${category.alias}`}>\n                                <ST.Title\n                                    isActive={isActiveCategory}\n                                    onClick={() => {\n                                        if (isActiveCategory) {\n                                            setIsActiveOpen(prevIsOpen => !prevIsOpen);\n                                        } else {\n                                            dispatch(setFAQActiveCategory(category._id));\n                                            dispatch(setFAQRedirectLoading(true));\n                                            setIsActiveOpen(true);\n                                        }\n                                    }}\n                                >\n                                    <ST.Img src={`${category.host}${category.icon}`}/>\n                                    <ST.TitleText $withIndent={false}>{category.categoryName}</ST.TitleText>\n                                    <ST.ArrowUp isOpen={isActiveCategoryAndOpened}/>\n                                </ST.Title>\n                            </Link>\n                        </ST.Topic>\n                        <CollapsibleBlock key={category._id} isOpen={isActiveCategoryAndOpened}>\n                        <ST.Articles>\n                            {articles.map((article: IArticle) =>\n                                <Link href={`/faq/${category.alias}/${article.alias}`} key={article._id}>\n                                    <ST.SubTitle\n                                        key={article.alias}\n                                        isActive={activeArticle === article.alias}\n                                        onClick={() => {\n                                            dispatch(setFAQActiveArticle(article.alias));\n                                            dispatch(setFAQRedirectLoading(true));\n                                        }}\n                                    >\n                                        {article.articleTitle}\n                                    </ST.SubTitle>\n                                </Link>)\n                            }\n                        </ST.Articles>\n                    </CollapsibleBlock>\n                    </>;\n                })}\n            </ ST.TopicListWrap>\n            : <ST.ButtonBack\n                animation={false}\n                bType={'ghost'}\n                Icon={<ArrowLeft/>}\n                onClick={() => {\n                    dispatch(setFAQRedirectLoading(true));\n                    router.push('/faq');\n                }}\n            >\n                Назад\n            </ST.ButtonBack>}\n    </ST.Container>;\n};\n","import { createSelector } from 'reselect';\n\nimport { IArticle } from '@r1-frontend/api-domru/content-static/v1/faq/categories/dto/ResponseDto';\n\nimport { IServiceHelpFAQStore } from '~/src/features/faq/store/reducer';\nimport { TState } from '~/src/store';\nimport selectProviderId from '~/src/store/selectors/selectProviderId';\n\nexport const selectServiceHelpFAQ = (state: TState): IServiceHelpFAQStore => state.serviceHelpFAQ;\n\nexport const selectActiveCategoryArticles = createSelector(\n    selectServiceHelpFAQ,\n    selectProviderId,\n    ({ categories, activeCategoryId }, providerId): IArticle[] => {\n        if (activeCategoryId && categories && providerId) {\n            return categories[activeCategoryId].articles;\n        } else {\n            return [];\n        }\n    },\n);\n\nexport const selectActiveCategoryAlias = (state: TState): string => {\n    const { categories, activeCategoryId } = state.serviceHelpFAQ;\n    return (activeCategoryId && categories) ? categories[activeCategoryId].alias : '';\n};\n\nexport const selectServiceHelpFAQIsRedirected = (state: TState): boolean => state.serviceHelpFAQ.isRedirectLoading;\n","import { CSSProperties, RefObject, useEffect, useState } from 'react';\nimport { Property } from 'csstype';\n\ninterface IProps {\n    isOpen?: boolean,\n    content: RefObject<HTMLDivElement>,\n}\n\ninterface IResult {\n    setIsCollapsedStyle: () => void,\n    style: CSSProperties,\n    setIsExpandedStyle: () => void,\n}\n\nconst getHeight = (content: RefObject<HTMLDivElement>) => {\n    if (content.current?.scrollHeight) {\n        return `${content.current.scrollHeight}px`;\n    }\n    return '0px';\n};\n\nexport const useCollapse = ({ isOpen, content }: IProps): IResult => {\n    const [height, setHeight] = useState('0');\n    const [overflow, setOverflow] = useState('hidden');\n    const [visibility, setVisibility] = useState<Property.Visibility>('hidden');\n    const [isFirstRender, setIsFirstRender] = useState(true);\n\n    const setIsExpandedStyle = () => {\n        setHeight('auto');\n        setOverflow('visible');\n        setVisibility('visible');\n    };\n\n    const setIsCollapsedStyle = () => {\n        setVisibility('hidden');\n    };\n\n    useEffect(() => {\n        if (isOpen) {\n            setVisibility('visible');\n            if (isFirstRender) {\n                setHeight('auto');\n                setOverflow('visible');\n            } else {\n                setHeight(getHeight(content));\n            }\n        } else if (!isFirstRender) {\n            setHeight(getHeight(content));\n            // The magic: Set collapsed style after setting height to enable smooth transition based on height\n            requestAnimationFrame(() => {\n                // Setting these properties will start transition from measured height to 0\n                setTimeout(() => {\n                    // Setting these properties will start transition from measured height to 0\n                    setHeight('0');\n                    setOverflow('hidden');\n                });\n            });\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        setIsFirstRender(false);\n    }, []);\n\n    return {\n        setIsExpandedStyle,\n        setIsCollapsedStyle,\n        style: {\n            overflow,\n            visibility,\n            height,\n        },\n    };\n};\n","import styled from 'styled-components';\n\nexport const CollapseWrapper = styled.div<{ duration: string }>`\n  transition: height ${({ duration }) => duration} cubic-bezier(0.4, 0, 0.2, 1);\n`;\n","import React, { TransitionEvent, useRef } from 'react';\n\nimport { useCollapse } from '@r1-frontend/ui-react/components/CollapsibleBlock/useCollapsed';\n\nimport * as ST from './styled';\n\ninterface IProps {\n    children: React.ReactNode,\n    isOpen?: boolean,\n    onTransitionEndHandler?: (e: TransitionEvent) => void,\n    className?: string,\n    duration?: string,\n}\n\nexport const CollapsibleBlock = ({\n    isOpen,\n    onTransitionEndHandler,\n    className,\n    children,\n    duration = '0.3s',\n}: IProps) => {\n    const content = useRef<HTMLDivElement>(null);\n    const { setIsExpandedStyle, setIsCollapsedStyle, style } = useCollapse({\n        isOpen,\n        content,\n    });\n\n    const onTransitionEnd = (e: TransitionEvent) => {\n        if (e.target === content.current && e.propertyName === 'height') {\n            isOpen ? setIsExpandedStyle() : setIsCollapsedStyle();\n\n            if (onTransitionEndHandler) {\n                onTransitionEndHandler(e);\n            }\n        }\n    };\n\n    return (\n        <ST.CollapseWrapper\n            ref={content}\n            style={style}\n            duration={duration}\n            className={className}\n            onTransitionEnd={onTransitionEnd}\n            data-test={'AccordionBody'}\n        >\n            {children}\n        </ST.CollapseWrapper>\n    );\n};\n","import { createSvg } from '@r1-frontend/ui-react/components/svg/createSvg';\n\nconst SingleArrowUp = (\n    {\n        strokeWidth = 1.5,\n    },\n): JSX.Element => {\n    return (\n        <g id={'guts'}>\n            <path\n                d='M19.9201 15.05L13.4001 8.53C12.6301 7.76 11.3701 7.76 10.6001 8.53L4.08008 15.05'\n                strokeWidth={strokeWidth}\n                strokeMiterlimit='10'\n                strokeLinecap='round'\n                strokeLinejoin='round'\n            />\n        </g>\n    );\n};\n\nexport default createSvg(\n    SingleArrowUp,\n    'single-arrow-up',\n);\n"],"names":["Topic","styled","TopicListWrap","COLORS","BorderRadius","wideBreakpoints","Articles","SubTitle","props","isActive","FONTS","Title","hex2rgb","TitleText","H4","Img","MobileButton","Button","Container","ButtonBack","ArrowUp","SingleArrowUp","isOpen","FAQTopicList","SingleArrowDown","onChangeMobileView","dispatch","useDispatch","router","useRouter","useState","isMobileViewOpened","setIsMobileViewOpened","isMobile","useMatchMedia","onChangeView","useCallback","isOpened","useSelector","state","categories","serviceHelpFAQ","categoryIds","activeCategoryId","activeArticle","isActiveOpen","setIsActiveOpen","ST","bType","onClick","Icon","type","map","categoryId","articles","category","isActiveCategory","_id","isActiveCategoryAndOpened","Link","href","asPath","alias","prevIsOpen","setFAQActiveCategory","setFAQRedirectLoading","src","host","icon","$withIndent","categoryName","CollapsibleBlock","article","setFAQActiveArticle","articleTitle","animation","ArrowLeft","push","selectActiveCategoryArticles","createSelector","selectProviderId","providerId","selectActiveCategoryAlias","selectServiceHelpFAQIsRedirected","isRedirectLoading","getHeight","content","current","scrollHeight","CollapseWrapper","duration","onTransitionEndHandler","className","children","useRef","useCollapse","height","setHeight","overflow","setOverflow","visibility","setVisibility","isFirstRender","setIsFirstRender","useEffect","requestAnimationFrame","setTimeout","setIsExpandedStyle","setIsCollapsedStyle","style","ref","onTransitionEnd","e","target","propertyName","data-test","createSvg","strokeWidth","g","id","path","d","strokeMiterlimit","strokeLinecap","strokeLinejoin"],"sourceRoot":""}