\n Encourage users to elaborate on their answers when collecting surveys or feedback — for example, if a user states that they were dissatisfied with something on an event satisfaction survey, you can show a text box to allow them to explain further.\n
\n\n
\n \n
\n \n );\n};\n\nexport default PdfTemplate;\n\nPdfTemplate.propTypes = {\n id: string.isRequired,\n theme: string.isRequired,\n screenshot: string.isRequired\n};\n","/* eslint-disable max-len */\n/* eslint-disable @jotforminc/no-native-button */\nimport React, { useState } from 'react';\nimport { string } from 'prop-types';\nimport styled from 'styled-components';\nimport { pxToRem } from '../../../utils/style-utils';\n\nconst ScTemplate = styled.div`\n position: relative;\n transition: all 0.1s linear;\n overflow: hidden;\n border-radius: 11% 11% 0 0;\n background-color: #fff;\n .jflb--template-image {\n position: relative;\n margin: 0;\n box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n border-color: transparent;\n transition: all 0.1s linear;\n padding-top: 100%;\n max-height: 630px;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n img {\n width: 100%;\n height: auto;\n display: block;\n position: absolute;\n top: 30px;\n transition: all 1.2s cubic-bezier(0.68, -0.15, 0.265, 1.2);\n }\n }\n .jflb--phone-wrapper {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n svg {\n width: 100%;\n height: auto;\n }\n }\n .jflb--phone-notch {\n display: flex;\n left: 6px;\n width: calc(100% - 12px);\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n height: 28px;\n background-color: #000;\n position: absolute;\n top: 2.8%;\n z-index: 1;\n padding: 0 16px;\n font-size: ${pxToRem(12)};\n font-weight: 700;\n color: #FFF;\n justify-content: space-between;\n align-items: center;\n .l {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 0 0 20%;\n }\n .r {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 0 0 20%;\n .icons {\n background-image: url(\"data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 8'%3E%3Cpath d='M12 0h2v8h-2V0ZM10 2H8v6h2V2ZM6 4H4v4h2V4ZM0 6h2v2H0V6ZM20 2h12v4H20V2Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 0a2 2 0 0 0-2 2v4c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H20Zm12 1H20a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Z' fill='%23fff'/%3E%3Cpath d='M35 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Z' fill='%23fff'/%3E%3C/svg%3E\");\n width: 38px;\n height: 8px;\n background-size: 100%;\n }\n }\n @media screen and (max-width: 480px) {\n & {\n padding: 0 14px;\n }\n }\n }\n`;\n\nconst getScrollableHeightOfElement = element => {\n const maxScrollableDistance = 1000;\n const { parentElement } = element;\n let distance = element.clientHeight - parentElement.clientHeight;\n distance = distance >= maxScrollableDistance ? maxScrollableDistance : distance;\n return -distance;\n};\n\nconst AppTemplate = ({\n screenshot,\n theme,\n id,\n backgroundColor\n}) => {\n const [hovered, setHovered] = useState(false);\n const [translateY, setTranslateY] = useState(0);\n\n const date = new Date();\n const currentTime = `${date.getHours()}:${date.getMinutes()}`;\n\n const handleMouseEnter = e => {\n const imgElement = e.currentTarget.querySelector('img');\n const topValue = getScrollableHeightOfElement(imgElement);\n setTranslateY(topValue);\n setHovered(true);\n };\n\n const handleMouseLeave = () => {\n setHovered(false);\n setTimeout(() => setTranslateY(0), 2000);\n };\n\n return (\n \n
\n {currentTime}
\n \n \n
\n \n \n
\n \n );\n};\n\nexport default AppTemplate;\n\nAppTemplate.propTypes = {\n id: string.isRequired,\n theme: string.isRequired,\n screenshot: string.isRequired,\n backgroundColor: string.isRequired\n};\n","/* eslint-disable @jotforminc/no-native-button */\nimport React from 'react';\nimport { string } from 'prop-types';\nimport styled from 'styled-components';\n// import { pxToRem } from '../../utils/style-utils';\nimport BrowserBar from './BrowserBar';\n\nconst ScTemplate = styled.div`\n transition: all 0.1s linear;\n box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow: hidden;\n .jflb--template-image-container {\n cursor: pointer;\n position: relative;\n display: block;\n overflow: hidden;\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n padding-top: 10px;\n padding-inline-start: 10px;\n }\n svg {\n position: relative;\n display: block; \n width: 100%; \n height: auto;\n }\n }\n &:hover {\n transform: scale(1.05);\n box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);\n }\n`;\n\nconst TableTemplate = ({\n screenshot,\n theme,\n id,\n backgroundColor\n}) => {\n return (\n \n
\n \n
\n \n
\n \n {\n answer.map((answerItem, index) => {\n if (answerItem.includes('\n { [...tempDiv.querySelectorAll('li')].map(li => {t(clearSpecialChars(li.innerText).trim())} ) }\n \n );\n }\n return (\n $1')\n : t(clearSpecialChars(answerItem).trim())\n }}\n />\n );\n })\n }\n
\n )\n }\n \n \n );\n};\n\nFaqAnswer.defaultProps = {\n answer: [],\n question: '',\n isActive: false,\n searchValue: '',\n activeQuestions: [],\n setActiveQuestions: f => f\n};\n\nFaqAnswer.propTypes = {\n isActive: bool,\n question: string,\n searchValue: string,\n answer: arrayOf(string),\n setActiveQuestions: func,\n activeQuestions: arrayOf(string)\n};\n\nexport default FaqAnswer;\n","import React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { IconAngleDown } from '@jotforminc/svg-icons';\nimport { pxToRem } from '../../utils/style-utils';\n\nconst jfHeroScrollDown = keyframes`\n 0% {\n transform: scale(0.8) translateY(-8px);\n }\n\n 50% {\n transform: scale(0.8) translateY(8px);\n }\n\n 100% {\n transform: scale(0.8) translateY(-8px);\n }\n`;\n\nconst ScScrollDown = styled.div`\n margin: 0 auto;\n position: relative;\n z-index: 2;\n opacity: .7;\n cursor: pointer;\n transition: all .3s linear;\n color: var(--jfv-navy-600);\n border-radius: 50%;\n animation: ${jfHeroScrollDown} 2s infinite ease;\n ${props => (props.environment === 'builder') && `\n width: ${pxToRem(22)};\n height: ${pxToRem(22)};\n bottom: 0;\n border: 1px solid var(--jfv-navy-600);\n `}\n ${props => (props.environment !== 'builder') && `\n width: ${pxToRem(38)};\n height: ${pxToRem(38)};\n bottom: -${pxToRem(20)};\n border: 2px solid var(--jfv-navy-600);\n `}\n`;\nconst handleClickScrollDown = () => {\n const wrapper = document.querySelector('#pageBuilderWrapper');\n const [, secondSection] = Array.from(wrapper.children);\n if (secondSection) secondSection.scrollIntoView({ behavior: 'smooth' });\n};\n\nconst ScrollDown = props => \n
\n \n
\n \n { linkElements.map((element, index) =>
\n )\n }\n \n \n \n
\n );\n};\n","// Radio & Checkbox & ChoiceLabel\nexport const CHOICE_TRUNCATE_VALUES = ['both', 'description', 'label'] as const;\n\nexport const THEME_VALUES = ['dark', 'light'] as const;\nexport const SIZE_VALUES = ['small', 'medium', 'large'] as const;\nexport const BREAKPOINT_VALUES = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;\nexport const PRODUCT_NAME_VALUES = ['teams', 'pdf', 'apps', 'reports', 'forms', 'sign', 'tables', 'inbox', 'approvals', 'analytics', 'pages'] as const;\nexport const RESPONSIVE_BREAKPOINT_VALUES = ['base', ...BREAKPOINT_VALUES] as const;\nexport const COLOR_STYLE_VALUES = ['primary', 'success', 'error'] as const;\n\n// Form Controls\nexport const FORM_CONTROL_COLOR_STYLE_VALUES = ['default', 'primary', 'success', 'warning', 'error'] as const;\nexport const BASE_INPUT_ADDON_DIRECTION_VALUES = ['start', 'end'] as const;\nexport const BASE_INPUT_ADDON_VARIANT_VALUES = ['filled', 'ghost'] as const;\n\n// Flex & Grid\nexport const JUSTIFY_CONTENT_VALUES = ['start', 'end', 'center', 'between', 'around', 'evenly'] as const;\nexport const ALIGN_ITEMS_VALUES = ['start', 'end', 'center', 'stretch', 'baseline'] as const;\nexport const FLEX_DIRECTION_VALUES = ['row', 'column', 'row-reverse', 'column-reverse'] as const;\nexport const FLEX_WRAP_VALUES = ['wrap', 'nowrap'] as const;\nexport const FLEX_GROW_VALUES = ['0', '1'] as const;\nexport const FLEX_SHRINK_VALUES = ['0', '1'] as const;\nexport const ORDER_VALUES = ['none', 'first', 'last'] as const;\nexport const ALIGN_SELF_VALUES = ['auto', 'center', 'start', 'end', 'stretch', 'baseline'] as const;\nexport const JUSTIFY_SELF_VALUES = ['auto', 'center', 'start', 'end', 'stretch'] as const;\n\nexport const GRID_TRACK_VALUES = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;\nexport const GRID_TEMPLATE_COLUMNS_VALUES = ['none', ...GRID_TRACK_VALUES] as const;\nexport const GRID_ITEM_START_END_VALUES = ['auto', ...GRID_TRACK_VALUES] as const;\n","import React, { ComponentPropsWithRef, ElementType, forwardRef } from 'react';\nimport { cx } from 'class-variance-authority';\n\nimport '@jotforminc/jotform.css';\nimport { buttonCVA } from './button.cva';\nimport {\n ButtonComponentType, ButtonProps, buttonDefaultProps\n} from './button.types';\n\nimport { ButtonIcon, ButtonIndicator, ButtonText } from './ButtonContent';\nimport { Loader } from '../Loader/Loader';\n\nimport { PolymorphicProps } from '../../types/system.types';\nimport { PRODUCT_NAME_VALUES } from '../../constants/common.values';\n\nexport const Button:ButtonComponentType = forwardRef(\n // eslint-disable-next-line complexity\n \n \n \n \n \n \n \n \n \n
\n \n {t('OR')}\n
\n \n { linkElements.map((element, index) =>
\n )\n }\n \n {\n (hasMediaGroup || (poster && source)) && (\n hasMediaGroup ? (\n \n
\n \n {linkElements.map((link, index) =>
\n )}\n \n f}\n width=\"701\"\n height=\"394\"\n alt={title}\n />\n
\n {actionsGroupElements.map(element => \n \"{searchValue}\" did not match any results.')\n .replace('{searchValue}', searchValue)\n }}\n />\n
\n )\n }\n \n { linkElements.map(link =>
\n )}\n \n {name}\n {name && ', '}\n {t(job.trim())}\n {(name || job) && ', '}\n {company}\n
\n \n );\n};\n\nTestimonialElement.defaultProps = {\n job: '',\n name: '',\n content: '',\n company: ''\n};\n\nTestimonialElement.propTypes = {\n name: PropTypes.string,\n job: PropTypes.string,\n company: PropTypes.string,\n content: PropTypes.string\n};\n\nexport default TestimonialElement;\n","/* eslint-disable max-len */\nimport styled from 'styled-components';\nimport { pxToRem } from '../../utils/style-utils';\n\nconst ScTestimonial = styled.section`\n background-color: var(--jfv-navy-700);\n position: relative;\n overflow: hidden;\n .jflb--container {\n align-items: center;\n justify-content: center;\n }\n .jflb--testimonial-container {\n position: relative;\n width: 100%;\n overflow: hidden;\n padding: 0 calc(var(--pad) * 2);\n margin-top: var(--pad);\n &:before,\n &:after {\n content: \"\";\n position: absolute;\n width: ${pxToRem(44)};\n height: ${pxToRem(44)};\n background-size: 100% auto;\n background-repeat: no-repeat;\n background-position: center;\n background-image: url(\"data:image/svg+xml,%3Csvg width='73' height='57' viewBox='0 0 73 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.205 41.8585C33.205 33.4063 27.9727 27.9727 18.9168 27.9727C17.1056 27.9727 15.6969 28.3752 14.6907 28.9789C15.0932 19.7218 23.5454 13.4832 31.1926 12.2758V0C18.5143 1.20745 0 10.2634 0 37.2299C0 47.8957 6.84225 56.5492 17.5081 56.5492C26.9665 56.5492 33.205 49.7069 33.205 41.8585ZM72.8498 41.8585C72.8498 33.4063 67.6175 27.9727 58.5616 27.9727C56.7504 27.9727 55.3417 28.3752 54.3355 28.9789C54.738 19.7218 63.1902 13.4832 70.8374 12.2758V0C58.1591 1.20745 39.6448 10.2634 39.6448 37.2299C39.6448 47.8957 46.487 56.5492 57.1529 56.5492C66.6113 56.5492 72.8498 49.7069 72.8498 41.8585Z' fill='%23e8ecff'/%3E%3C/svg%3E%0A\");\n html[dir=\"rtl\"] & {\n transform: rotate(-180deg) scaleX(-1);\n }\n @media screen and (max-width: 980px) {\n width: ${pxToRem(32)};\n height: ${pxToRem(32)};\n }\n @media screen and (max-width: 768px) {\n display: none;\n }\n }\n &:before {\n top: 0;\n inset-inline-start: 0;\n }\n &:after {\n bottom: 0;\n inset-inline-end: 0;\n transform: rotate(-180deg);\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n }\n .splide__list {\n flex-direction: column;\n }\n //dummy code\n .splide__pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: var(--pad) 0;\n .splide__pagination__page {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: var(--jfv-navy-100);\n &.is-active {\n background-color: #fff;\n }\n }\n }\n //\n \n {\n elements.map((testimonialElement, index) => (\n \n \n ))\n }\n \n
\n \n
\n \n
\n \n \n \n \n \n \n \n {contentElements.map((element, index) => \n \n
\n );\n};\n\nMultipleContent.defaultProps = {\n data: {}\n};\n\nMultipleContent.propTypes = {\n data: PropTypes.object\n};\n","/* eslint-disable max-len */\n/* eslint-disable import/no-cycle */\n/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { t } from '@jotforminc/translation';\nimport styled from 'styled-components';\nimport { pxToRem } from '../utils/style-utils';\nimport ScContainer from './Styles/ScContainer';\n\nconst ScBreadcrumb = styled.section`\n padding: ${pxToRem(20)} !important;\n margin: 0;\n border-top: 1px solid var(--jfv-navy-50);\n border-bottom: 1px solid var(--jfv-navy-50);\n ul {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n margin: 0;\n list-style: none;\n li {\n list-style: none;\n &:after {\n content: \"\";\n display: inline-flex;\n padding: 0 5px;\n margin: 0;\n width: 7px;\n height: 12px;\n background-image: url(\"data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.944 0.656006L1.456 12H0L5.488 0.656006H6.944Z' fill='%237A939F'/%3E%3C/svg%3E%0A\");\n background-repeat: no-repeat;\n background-position: center;\n }\n a {\n color: var(--jfv-navy-400);\n font-size: ${pxToRem(16)};\n text-decoration: none;\n }\n &:last-child {\n &:after {\n display: none;\n }\n a {\n color: var(--jfv-inbox-default);\n }\n }\n @media screen and (max-width: 768px) {\n margin: 5px 0;\n }\n }\n }\n`;\n\nexport const Breadcrumb = data => {\n const { directory, category, landing } = data;\n return (\n - \n
- \n {t(directory.title)}\n \n
- \n \n \n {t(category.title)}\n \n \n {' '}\n {t('Category')}\n \n \n \n
- \n {t(landing.title)}\n \n
- \n {elements.map(element => {\n const { logoSrc, ratingScore = 0, title: elTitle } = element;\n return (\n
- \n
\n {showRating && (\n
\n {ratingScore}\n\n )}\n\n \n );\n })}\n