(null);\n * useOnFocusLeave(ref, ()=> onLeaveQuestion());\n * \n */\n\n\nfunction useOnFocusLeave(ref, focusCallback) {\n useEffect(() => {\n const ele = ref === null || ref === void 0 ? void 0 : ref.current;\n\n function handleFocus(e) {\n if (!(ele === null || ele === void 0 ? void 0 : ele.contains(e.relatedTarget))) {\n focusCallback(ref);\n }\n }\n\n ele === null || ele === void 0 ? void 0 : ele.addEventListener('focusout', handleFocus);\n return () => {\n ele === null || ele === void 0 ? void 0 : ele.removeEventListener('focusout', handleFocus);\n };\n }, [ref, focusCallback]);\n}\n\nconst useStyles$I = createUseStyles({\n footerRow: ({\n hasFooterPadding\n }) => ({\n paddingTop: hasFooterPadding ? 20 : 0\n }),\n containerStyles: {\n position: 'relative',\n transition: 'opacity 500ms ease-out'\n },\n errorRow: {\n overflow: 'hidden'\n },\n formReset: {\n border: 0,\n minWidth: 0\n },\n headerRow: {\n marginBottom: 24,\n width: '100%'\n }\n});\nconst COPY$a = defineMessages({\n QUESTION_TITLE: {\n id: 'QuestionFieldLayoutTemplate.QUESTION_TITLE',\n defaultMessage: 'Question Title',\n description: '[Type: Label][Vis: low] - question landmark for screen readers only'\n }\n});\n\nfunction QuestionFieldLayoutTemplate({\n footer,\n hasFooterPadding,\n children,\n clickShield,\n error,\n id,\n padding,\n width = {\n width: 100,\n format: 'PERCENT'\n },\n title,\n onSubmit,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onLeave = () => {},\n ...props\n}) {\n const {\n footerRow,\n containerStyles,\n formReset,\n errorRow,\n headerRow\n } = useStyles$I({\n hasFooterPadding,\n clickShield\n });\n const containerRef = useRef(null);\n const errorRef = useRef(null);\n /** Keep track of last error to enable error-hiding animation */\n\n const [lastShownError, setLastShownError] = useState(error);\n const handleKeydown = useCallback(event => {\n if (event.key === 'Enter') {\n onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();\n }\n }, [onSubmit]);\n /**\n * resolves double height animate issue with RAWR-1240\n */\n\n const isAnimating = useRef(false);\n useLayoutEffect(() => {\n const el = errorRef.current;\n\n if (!el || isAnimating.current) {\n return;\n }\n\n const hasError = !!error;\n const initialHeight = el.offsetHeight;\n el.style.height = 'auto'; // remove height to measure full size\n\n const {\n offsetHeight\n } = el;\n const fromValue = hasError ? 0 : offsetHeight;\n const toValue = hasError ? offsetHeight : 0; // don't animate if value is already correct (e.g. at initial load)\n\n if (initialHeight === toValue) {\n el.style.height = `${initialHeight}px`;\n return;\n }\n\n el.style.height = `${initialHeight}px`;\n animate({\n fromValue,\n toValue,\n duration: 300,\n delay: 200,\n onUpdate: (height, next) => {\n el.style.height = `${height}px`;\n next();\n },\n onStart: () => {\n isAnimating.current = true;\n },\n onComplete: () => {\n setLastShownError(error);\n isAnimating.current = false;\n }\n });\n }, [error]);\n const fieldsetRef = useRef(null);\n useOnFocusLeave(fieldsetRef, onLeave);\n useEffect(() => {\n const {\n current: container\n } = containerRef;\n container === null || container === void 0 ? void 0 : container.addEventListener('keydown', handleKeydown);\n return () => {\n return container === null || container === void 0 ? void 0 : container.removeEventListener('keydown', handleKeydown);\n };\n }, [containerRef, handleKeydown]);\n /**\n * This id is queried in RespWeb to calculate the offset for scroll-to-error animations in classic mode\n * ref: https://code.corp.surveymonkey.com/webplatform/smweb/pull/10725\n */\n\n let errorRowId;\n /** used in RespWeb for OQAATView */\n\n let fieldId;\n /** used in RespWeb for OQAATView */\n\n let questionTitleId;\n\n if (id) {\n errorRowId = createErrorRowId(id);\n fieldId = createFieldId(id);\n questionTitleId = createLegendId(id);\n }\n\n return React__default.createElement(\"div\", {\n ref: containerRef,\n id: fieldId,\n ...props,\n className: containerStyles\n }, React__default.createElement(VisuallyHidden$1, {\n element: \"div\"\n }, React__default.createElement(T, {\n desc: COPY$a.QUESTION_TITLE\n })), React__default.createElement(QuestionSpacing, {\n padding: padding,\n width: width\n }, React__default.createElement(\"div\", {\n ref: errorRef,\n id: errorRowId,\n className: errorRow\n }, error || lastShownError), React__default.createElement(\"fieldset\", {\n ref: fieldsetRef,\n className: formReset\n }, React__default.createElement(\"legend\", {\n id: questionTitleId,\n className: headerRow,\n tabIndex: -1\n }, title), children), footer && React__default.createElement(\"div\", {\n className: footerRow\n }, footer)));\n}\n/**\n * Calculate the max number of children each column can be filled in the layout\n * @param columns number of columns\n * @param total total child count\n * @description Based on the current implementation in production (as of Jan 20, 2021),\n * - if columns = 1, the max number of children per column = total (render all children vertically)\n * - if columns > 1, the max number of children per column = (total / columns) + 1\n */\n\n\nconst calculateMaxNumOfChildrenPerColumn = (columns, total) => {\n if (columns === 1) {\n return total;\n }\n\n const childrenPerColumn = total / columns;\n\n if (childrenPerColumn % 1 === 0) {\n return childrenPerColumn;\n }\n\n return Math.floor(childrenPerColumn) + 1;\n};\n/**\n * Divide the children array into slices for rendering\n * @param childrenArr - children array\n * @param maxCellsPerCol - maximum number of children per slice\n * @param totalColumns - number of columns\n * @example\n * childrenArr = [option1, option2, option3, option4, option5, option6, option7]\n * childrenPerSlice = 2\n * totalColumns = 3\n * output: [[option1, option2, option3], [option4, option5], [option6, option7]]\n */\n\n\nconst sliceChildren = (childrenArr, maxCellsPerCol, totalColumns) => {\n let index = 0;\n const result = [];\n const partialColumnsCount = totalColumns * maxCellsPerCol - childrenArr.length; // Calculate the number of fullColumns, to conditionally push slice with the correct # of cells\n\n let fullColumnsCount = totalColumns - partialColumnsCount;\n\n while (index < childrenArr.length) {\n if (fullColumnsCount > 0) {\n result.push(childrenArr.slice(index, index + maxCellsPerCol));\n index += maxCellsPerCol;\n } else {\n result.push(childrenArr.slice(index, index + maxCellsPerCol - 1));\n index += maxCellsPerCol - 1;\n }\n\n fullColumnsCount -= 1;\n }\n\n return result;\n};\n\nconst useStyles$H = createUseStyles(theme => ({\n containerVertical: {\n display: 'initial'\n },\n containerHorizontal: {\n display: 'block'\n },\n\n /** shared between horizontal and vertical columns */\n column: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-start'\n },\n columnHorizontal: {},\n\n /** Horizontal Column that adjust width to content width */\n columnHorizontalAutoAdjust: {\n width: 'auto'\n },\n [`@media (min-width: ${theme.breakpoints.xs.min})`]: {\n containerVertical: {\n display: 'flex'\n },\n containerHorizontal: {\n display: 'flex',\n flexWrap: 'wrap'\n }\n },\n [`@media only screen and (min-width: ${theme.breakpoints.lg.min})`]: {\n columnHorizontal: {\n width: '19%'\n }\n },\n [`@media (min-width: ${theme.breakpoints.sm.min}) and (max-width: ${theme.breakpoints.md.max})`]: {\n columnHorizontal: {\n width: '24%'\n }\n },\n [`@media only screen and (max-width: ${theme.breakpoints.xxs.max})`]: {\n columnHorizontal: {\n width: '100%',\n display: 'block'\n },\n columnHorizontalAutoAdjust: {\n width: '100%',\n display: 'block'\n }\n },\n answerLayoutCell: ({\n gridCellMargin = '0'\n }) => ({\n margin: gridCellMargin,\n flex: [0, 0, 'auto'],\n wordBreak: 'normal',\n overflowWrap: 'anywhere'\n }),\n otherLayoutCell: ({\n otherCellMargin = '0'\n }) => ({\n margin: otherCellMargin\n })\n}));\n\nfunction QuestionAnswerLayoutTemplate({\n children,\n columns = 1,\n other,\n noneOfTheAbove,\n adjustToContent = false,\n gridCellMargin,\n otherCellMargin\n}) {\n const {\n containerVertical,\n containerHorizontal,\n column,\n columnHorizontal,\n columnHorizontalAutoAdjust,\n answerLayoutCell,\n otherLayoutCell\n } = useStyles$H({\n columns,\n adjustToContent,\n gridCellMargin,\n otherCellMargin\n });\n const isHorizontal = columns === 'horizontal';\n /* Based on the columns config, divide the question answers\n (children of this component) into column groups for rendering.\n The reason we need to do this is when there are multiple columns,\n the answers are listed vertically instead of horizontally.\n For example:\n If there are 3 answers and 2 columns,\n Then the ordering will be:\n Answer 1 Answer 3\n Answer 2\n NOT:\n Answer 1 Answer 2\n Answer 3\n * though `horizontal` uses this\n \n */\n\n const columnGroups = useMemo(() => {\n const totalChildren = React__default.Children.count(children);\n const totalColumns = columns === 'horizontal' ? totalChildren : columns;\n const childrenArray = React__default.Children.toArray(children);\n\n if (!other && !!noneOfTheAbove && columns !== 'horizontal') {\n childrenArray.push(noneOfTheAbove);\n }\n\n const answersPerColumn = columns === 'horizontal' ? 1 : calculateMaxNumOfChildrenPerColumn(totalColumns, totalChildren + (!other && !!noneOfTheAbove ? 1 : 0));\n return sliceChildren(childrenArray, answersPerColumn, totalColumns);\n }, [children, columns, noneOfTheAbove, other]);\n const columnClassNames = isHorizontal ? [column, adjustToContent ? columnHorizontalAutoAdjust : columnHorizontal] : column;\n return React__default.createElement(React__default.Fragment, null, React__default.createElement(\"div\", {\n className: isHorizontal ? containerHorizontal : containerVertical\n }, columnGroups.map((col, columnIndex) => React__default.createElement(\"div\", {\n key: `col-${columnIndex + 1}`,\n className: classNames(columnClassNames),\n \"data-testid\": \"answer-layout-column\"\n }, col.map((cell, cellIndex) => React__default.createElement(\"div\", {\n key: `cell-${cellIndex + 1}`,\n \"data-testid\": \"answer-layout-cell\",\n className: answerLayoutCell\n }, cell))))), other && React__default.createElement(\"div\", {\n className: otherLayoutCell\n }, other), (other && noneOfTheAbove || columns === 'horizontal') && React__default.createElement(\"div\", {\n className: otherLayoutCell,\n \"data-testid\": \"Other-NOTA\"\n }, noneOfTheAbove));\n}\n\nfunction WarningIcon() {\n return React__default.createElement(\"g\", {\n className: \"warning-icon\"\n }, React__default.createElement(\"path\", {\n className: \"background\",\n transform: \"translate(0 .49999)\",\n d: \"M8.49642,0.635797c.1494.086885.27371.210979.36079.360173L15.8621,12.9978c.2782.4766.1169,1.0883-.3602,1.3662-.1529.0891-.3267.136-.5037.136L1,14.5c-.552285,0-1-.4473-1-.999c0-.1766.046846-.35.135766-.5026L7.1291,0.996589c.27785-.476838.89002-.63837,1.36732-.360792Z\",\n clipRule: \"evenodd\",\n fill: \"currentColor\",\n fillRule: \"evenodd\",\n stroke: \"none\"\n }), React__default.createElement(\"path\", {\n className: \"foreground\",\n transform: \"translate(.000815 .49999)\",\n d: \"M8,11.2546c-.3797,0-.69349.2794-.74315.6419L7.25,11.9973v.26l.00685.1008C7.30651,12.7206,7.6203,13,8,13s.69349-.2794.74315-.6419L8.75,12.2573v-.26l-.00685-.1008C8.69349,11.534,8.3797,11.2546,8,11.2546ZM8,4c-.3797,0-.69349.2794-.74315.6419L7.25,4.74268v4.54393l.00685.10078c.04966.3625.36345.64191.74315.64191s.69349-.27941.74315-.64191L8.75,9.28661v-4.54393L8.74315,4.6419C8.69349,4.2794,8.3797,4,8,4Z\",\n clipRule: \"evenodd\",\n fill: \"#fff\",\n fillRule: \"evenodd\",\n stroke: \"none\"\n }));\n}\n\nvar WarningIcon$1 = withSvgIcon(WarningIcon, 'WarningIcon');\nconst useStyles$G = createUseStyles(theme => {\n var _a;\n\n return {\n icon: {\n color: '#F05B24',\n fontSize: theme.fontSize.body,\n alignSelf: 'flex-start',\n marginTop: 2,\n flexShrink: 0\n },\n validationMessage: {\n fontFamily: theme.fontFamily,\n lineHeight: 1.5,\n color: '#333e48',\n fontWeight: 400,\n fontSize: 16,\n padding: theme.isDark ? 8 : [4, 0],\n backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.9)' : '',\n borderRadius: 2,\n display: 'inline-flex',\n gap: 5,\n alignItems: 'center',\n marginBottom: 8,\n [`@media only screen and (max-width: ${(_a = theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs.max})`]: {\n width: '100%',\n padding: theme.isDark ? 4 : [4, 0]\n }\n }\n };\n});\n\nfunction ValidationMessage({\n children,\n id,\n tag: Wrapper = 'span',\n ...props\n}) {\n const {\n icon,\n validationMessage\n } = useStyles$G();\n return React__default.createElement(Wrapper, {\n className: validationMessage,\n \"aria-live\": \"polite\",\n id: id,\n ...props\n }, React__default.createElement(WarningIcon$1, {\n className: icon\n }), React__default.createElement(\"span\", {\n translate: \"no\"\n }, children));\n}\n\nconst useStyles$F = createUseStyles(theme => {\n var _a;\n\n const breakpointMedium = `@media only screen and (max-width: ${theme.breakpoints.md.max})`;\n const breakpointXsMin = `@media only screen and (min-width: ${theme.breakpoints.xs.min})`;\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n inputArea: {\n fontFamily: (_a = theme.questionBody.fontFamily) !== null && _a !== void 0 ? _a : {},\n fontWeight: fontWeightOptions.medium,\n fontSize: '18px',\n [breakpointMedium]: {\n fontSize: '16px'\n },\n lineHeight: '1.15em',\n padding: '6px 60px 6px 6px',\n maxWidth: '100%',\n [breakpointXsMin]: {\n // extra 66px to account for the padding\n width: ({\n cols\n }) => `calc(${cols}ch + 66px)`\n },\n width: '100%',\n border: `1px solid ${theme.answerColor}`,\n borderRadius: '0px',\n backgroundColor: '#fff',\n color: '#000',\n transition: 'all 0.1s linear',\n verticalAlign: 'top',\n textSizeAdjust: 'auto',\n '&:focus, &:hover': {\n outline: `2px solid ${theme.primaryAccentColor}`\n },\n '&:read-only:not(:disabled)': {\n borderColor: 'transparent',\n backgroundColor: theme.input.bgColor,\n color: theme.isDark ? '#fff' : '#000',\n opacity: 0.5\n },\n '&:disabled': {\n opacity: 0.4\n }\n }\n };\n});\n\nfunction TextArea({\n className,\n disabled = false,\n required = false,\n readOnly = false,\n cols = 50,\n ...props\n}, forwardedRef) {\n const {\n inputArea\n } = useStyles$F({\n cols\n });\n return React__default.createElement(\"textarea\", {\n className: classNames(inputArea, className),\n disabled: disabled,\n \"aria-disabled\": disabled,\n required: required,\n \"aria-required\": required,\n readOnly: readOnly,\n \"aria-readonly\": readOnly,\n spellCheck: true,\n ref: forwardedRef,\n ...props\n });\n}\n\nvar TextArea$1 = forwardRef(TextArea);\nconst useStyles$E = createUseStyles(theme => {\n var _a;\n\n const breakpointMedium = `@media only screen and (max-width: ${theme.breakpoints.md.max})`;\n const breakpointXsMin = `@media only screen and (min-width: ${theme.breakpoints.xs.min})`;\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n inputField: {\n fontFamily: (_a = theme.questionBody.fontFamily) !== null && _a !== void 0 ? _a : {},\n fontSize: '18px',\n [breakpointMedium]: {\n fontSize: '16px'\n },\n fontWeight: fontWeightOptions.medium,\n lineHeight: '1.5em',\n height: ({\n autoHeight\n }) => autoHeight ? {} : '50px',\n maxWidth: '100%',\n width: '100%',\n [breakpointXsMin]: {\n // extra 12px to account for the padding\n width: ({\n size\n }) => `calc(${size}ch + 12px)`\n },\n padding: '6px',\n border: `1px solid ${theme.answerColor}`,\n borderRadius: '0px',\n backgroundColor: '#fff',\n color: '#000',\n transition: 'all 0.1s linear',\n '&:focus, &:hover': {\n outline: `2px solid ${theme.primaryAccentColor}`\n },\n '&:read-only:not(:disabled)': {\n borderColor: 'transparent',\n backgroundColor: theme.input.bgColor,\n color: theme.isDark ? '#fff' : '#000',\n opacity: 0.5\n },\n '&:disabled': {\n opacity: 0.4\n }\n }\n };\n});\n\nfunction TextInput({\n className,\n autoHeight = false,\n size = 50,\n required = false,\n disabled = false,\n readOnly = false,\n onChange: handleChange,\n ...props\n}, forwardedRef) {\n const {\n inputField\n } = useStyles$E({\n autoHeight,\n size\n });\n return React__default.createElement(\"input\", {\n type: \"text\",\n className: classNames(inputField, className),\n disabled: disabled,\n \"aria-disabled\": disabled,\n required: required,\n \"aria-required\": required,\n readOnly: readOnly,\n \"aria-readonly\": readOnly,\n spellCheck: true,\n onChange: handleChange,\n ...props,\n ref: forwardedRef\n });\n}\n\nvar TextInput$1 = forwardRef(TextInput);\nconst useStyles$D = createUseStyles(theme => {\n return {\n commentLabelText: { ...theme.questionBody,\n marginBottom: 5,\n lineHeight: 1.25\n },\n commentLabel: {\n display: 'block'\n }\n };\n});\n\nfunction CommentChoice({\n label,\n lineCount = 3,\n charCount = 50,\n onChange,\n className,\n ...props\n}) {\n const handleChange = e => {\n onChange === null || onChange === void 0 ? void 0 : onChange(e);\n };\n\n const {\n commentLabel,\n commentLabelText\n } = useStyles$D();\n const multipleTextLines = lineCount > 1;\n return React__default.createElement(\"div\", {\n className: className\n }, React__default.createElement(\"label\", {\n htmlFor: props.id,\n className: commentLabel,\n tabIndex: -1\n }, React__default.createElement(\"div\", {\n className: commentLabelText\n }, label), multipleTextLines ? React__default.createElement(TextArea$1, {\n onChange: handleChange,\n rows: lineCount,\n cols: charCount,\n ...props\n }) : React__default.createElement(TextInput$1, {\n autoHeight: true,\n onChange: handleChange,\n size: charCount,\n ...props\n })));\n}\n\nconst textReset = {\n margin: 0\n};\nconst useStyles$C = createUseStyles(theme => {\n const {\n fontSize,\n ...questionTitleFormatting\n } = theme.questionTitle;\n const questionTitleFontSize = fontSize !== null && fontSize !== void 0 ? fontSize : {};\n return {\n addonContainer: {\n display: 'inline-block',\n margin: [0, 5],\n verticalAlign: 'text-bottom'\n },\n container: {\n position: 'relative'\n },\n questionNumber: ({\n isRTL\n }) => ({\n margin: isRTL ? '0 0 0 0.25em' : '0 0.25em 0 0'\n }),\n questionTitle: ({\n useDefaultFrontSize\n }) => {\n var _a;\n\n return { ...textReset,\n ...questionTitleFormatting,\n color: ((_a = theme.questionTitle) === null || _a === void 0 ? void 0 : _a.color) || theme.questionColor,\n fontSize: useDefaultFrontSize && !theme.isAccessible ? theme.fontSize.body : questionTitleFontSize,\n lineHeight: 1.25,\n whiteSpace: 'normal',\n wordWrap: 'break-word'\n };\n },\n requiredAsterisk: ({\n isRTL\n }) => ({\n display: 'inline-block',\n margin: isRTL ? '0 0 0 0.25em' : '0 0.25em 0 0'\n })\n };\n});\n\nfunction RespondentQuestionTitle({\n element: Element = 'div',\n addon,\n heading,\n id,\n number,\n numbered,\n required,\n useDefaultFrontSize = false,\n ...props\n}) {\n const {\n isRTL\n } = useContext(L10NContext);\n const {\n addonContainer,\n container,\n questionNumber,\n questionTitle,\n requiredAsterisk\n } = useStyles$C({\n useDefaultFrontSize,\n isRTL\n });\n return React__default.createElement(Element, {\n id: id,\n className: classNames(container, questionTitle),\n translate: \"no\",\n ...props\n }, required && React__default.createElement(\"span\", {\n \"aria-hidden\": true,\n className: requiredAsterisk\n }, \"*\"), numbered && React__default.createElement(\"span\", {\n className: questionNumber\n }, number, \".\"), React__default.createElement(RichText, {\n element: \"span\",\n text: heading\n }), addon && React__default.createElement(\"span\", {\n className: addonContainer\n }, addon));\n} // default text to be added as a translation to a specific version of Button directly.\n\n\nconst defaultOKConfig = {\n text: 'OK',\n visible: false\n};\n\nfunction QuestionField({\n id,\n title: titleProps,\n okButton: {\n visible: showButton,\n ...okButtonProps\n } = defaultOKConfig,\n error,\n errorId: errorIdProp,\n onLeave,\n padding = {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n },\n width,\n children,\n ...props\n}) {\n const errorId = errorIdProp !== null && errorIdProp !== void 0 ? errorIdProp : createErrorId(id);\n return React__default.createElement(QuestionFieldLayoutTemplate, {\n footer: showButton && React__default.createElement(Button, {\n type: \"button\",\n ...okButtonProps\n }),\n hasFooterPadding: true,\n clickShield: false,\n error: error && React__default.createElement(ValidationMessage, {\n id: errorId\n }, error),\n onLeave: onLeave,\n id: id,\n padding: padding,\n width: width,\n title: React__default.createElement(RespondentQuestionTitle, { ...titleProps\n }),\n ...props\n }, children);\n}\n\nfunction useInputStyles({\n onChange,\n ...props\n}) {\n var _a;\n /** extract props without affecting passthrough */\n\n\n const {\n checked: isChecked,\n defaultChecked: isDefaultChecked,\n disabled: isDisabled,\n 'aria-disabled': isAriaDisabled,\n readOnly: isReadOnly,\n 'aria-readonly': isAriaReadOnly\n } = props;\n /** configure style-props */\n\n const disabled = isDisabled || isAriaDisabled === 'true';\n const readOnly = isReadOnly || isAriaReadOnly === 'true';\n const [checked, setIsChecked] = useState((_a = isDefaultChecked !== null && isDefaultChecked !== void 0 ? isDefaultChecked : isChecked) !== null && _a !== void 0 ? _a : false);\n React__default.useEffect(() => {\n setIsChecked(isChecked !== null && isChecked !== void 0 ? isChecked : false);\n }, [isChecked]);\n /** handle change for checked style (controlled/uncontrolled) */\n\n const handleChange = e => {\n setIsChecked(e.target.checked);\n onChange === null || onChange === void 0 ? void 0 : onChange(e);\n };\n\n const styleProps = {\n checked,\n disabled,\n readOnly\n };\n const inputProps = { ...props,\n onChange: handleChange\n };\n return {\n styleProps,\n inputProps\n };\n}\n\nconst radioGroupContext = createContext(undefined);\n\nfunction useRadioGroup() {\n return useContext(radioGroupContext);\n}\n/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, no-console */\n\n\nfunction throwControlChangeError(isControlled, controlled, name, state) {\n const conState = ['controlled', 'uncontrolled'];\n const stateStr = isControlled ? conState : [...conState].reverse();\n\n if (isControlled !== (controlled !== undefined)) {\n console.error([`@sm/question-ui: A component is changing the ${stateStr[0]} ${state} state of ${name} to be ${stateStr[1]}.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`, \"The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.\", 'More info: https://fb.me/react-controlled-components'].join('\\n'));\n }\n}\n\nfunction throwDefaultStateError(isControlled, defaultValue, defaultProp, name, state) {\n if (!isControlled && defaultValue !== defaultProp) {\n console.error([`@sm/question-ui: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. `, `To suppress this warning opt to use a controlled ${name}.`].join('\\n'));\n }\n}\n\nfunction useControlledState({\n controlled,\n default: defaultProp,\n name,\n state = 'value'\n}) {\n // isControlled is ignored in the hook dependency lists as it should never change.\n const {\n current: isControlled\n } = React__default.useRef(controlled !== undefined);\n const [valueState, setValue] = React__default.useState(defaultProp);\n const value = isControlled ? controlled : valueState;\n\n if (process.env.NODE_ENV !== 'production') {\n const {\n current: defaultValue\n } = React__default.useRef(defaultProp);\n React__default.useEffect(() => {\n throwControlChangeError(isControlled, controlled, name, state);\n throwDefaultStateError(isControlled, defaultValue, defaultProp, name, state);\n }, [state, name, controlled, defaultProp]);\n }\n\n const setValueIfUncontrolled = React__default.useCallback(newValue => {\n if (!isControlled) {\n setValue(newValue);\n }\n }, [setValue]);\n return [value, setValueIfUncontrolled];\n}\n\nfunction setRef(ref, value) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref) {\n // eslint-disable-next-line no-param-reassign\n ref.current = value;\n }\n}\n/**\n * useForkRef\n * Joins refs together and returns a combination of the two as a new ref\n *\n * @param refA\n * @param refB\n */\n\n\nfunction useForkRef(refA, refB) {\n /**\n * This will create a new function if the ref props change and are defined.\n * This means react will call the old forkRef with `null` and the new forkRef\n * with the ref. Cleanup naturally emerges from this behavior\n */\n return useMemo(() => {\n if (refA == null && refB == null) {\n return null;\n }\n\n return refValue => {\n setRef(refA, refValue);\n setRef(refB, refValue);\n };\n }, [refA, refB]);\n}\n/**\n * SMQ Tier 3\n */\n\n\nfunction RadioGroup({\n children,\n name: nameProp,\n value: valueProp,\n defaultValue,\n onChange,\n disabled = false,\n readOnly = false,\n ...divProps\n}) {\n const [value, setValueState] = useControlledState({\n controlled: valueProp,\n default: defaultValue,\n name: 'RadioGroup'\n });\n\n const handleChange = e => {\n setValueState(e.value);\n onChange === null || onChange === void 0 ? void 0 : onChange(e);\n };\n\n const name = nameProp;\n return React__default.createElement(radioGroupContext.Provider // eslint-disable-next-line react/jsx-no-constructed-context-values\n , {\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value: {\n name,\n onChange: handleChange,\n value,\n disabled,\n readOnly\n }\n }, React__default.createElement(\"div\", {\n role: \"radiogroup\",\n ...divProps\n }, children));\n}\n\nconst useStyles$B = createUseStyles({\n inputContainer: {\n display: 'inline-flex',\n position: 'relative',\n justifyContent: 'center',\n alignItems: 'center',\n width: '1em',\n minWidth: '1em',\n cursor: 'pointer'\n },\n input: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n opacity: 0.00001,\n zIndex: 1,\n margin: 0,\n cursor: ({\n disabled,\n readOnly\n }) => disabled || readOnly ? 'default' : 'pointer',\n pointerEvents: ({\n disabled,\n readOnly\n }) => disabled || readOnly ? 'none' : undefined\n },\n controlIcon: {\n width: '100%',\n height: '100%',\n opacity: ({\n checked\n }) => checked ? 1 : 0,\n transition: 'opacity .2s linear'\n }\n});\n\nfunction BaseInput({\n element: Element = 'span',\n className,\n icon,\n checked: checkedProp,\n defaultChecked,\n onClick,\n onChange,\n ...inputProps\n}, forwardedRef) {\n /** extract props without affecting passthrough */\n const {\n disabled: disabledProp,\n 'aria-disabled': ariaDisabledProp,\n readOnly: readOnlyProp,\n 'aria-readonly': ariaReadOnlyProp\n } = inputProps;\n const disabled = disabledProp || ariaDisabledProp === 'true';\n const readOnly = readOnlyProp || ariaReadOnlyProp === 'true';\n const [checked, setChecked] = useControlledState({\n controlled: checkedProp,\n default: defaultChecked,\n state: 'checked',\n name: 'BaseInput'\n });\n\n const handleChange = e => {\n if (e.nativeEvent.defaultPrevented) {\n return;\n }\n\n if (disabled || readOnly) {\n e.preventDefault();\n return;\n }\n\n const newChecked = e.target.checked;\n setChecked(newChecked);\n onChange === null || onChange === void 0 ? void 0 : onChange(e);\n };\n\n const handleClick = e => {\n if (disabled || readOnly) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n onClick === null || onClick === void 0 ? void 0 : onClick(e);\n };\n\n const {\n inputContainer,\n input,\n controlIcon\n } = useStyles$B({\n disabled,\n readOnly,\n checked\n });\n return React__default.createElement(Element, {\n className: classNames(inputContainer, className)\n }, React__default.createElement(\"input\", {\n className: input,\n checked: checkedProp,\n defaultChecked: defaultChecked,\n onChange: handleChange,\n onClick: handleClick,\n ...inputProps,\n ref: forwardedRef\n }), React__default.cloneElement(icon, {\n className: controlIcon\n }));\n}\n\nvar BaseInput$1 = forwardRef(BaseInput);\n\nfunction RadioIcon() {\n return React__default.createElement(\"g\", {\n className: \"radio-icon\"\n }, React__default.createElement(\"ellipse\", {\n fill: \"currentColor\",\n className: \"background\",\n transform: \"translate(8 8)\",\n rx: \"8\",\n ry: \"8\"\n }), React__default.createElement(\"path\", {\n fill: \"#fff\",\n className: \"checkmark\",\n transform: \"matrix(.91924 .91924 -.91924 .91924 -.72152 -9.5796)\",\n d: \"m14.521 0h1.4788v8h-5.0216l-0.002914-1.4404h3.5456l-1e-6 -6.5596z\"\n }));\n}\n\nvar RadioIcon$1 = withSvgIcon(RadioIcon, 'RadioIcon');\nconst useStyles$A = createUseStyles(theme => ({\n radioInput: {\n color: theme.isDark ? '#fff' : '#000',\n backgroundColor: ({\n checked\n }) => {\n if (checked) {\n return theme.isDark ? '#fff' : '#000';\n }\n\n return '#fff';\n },\n border: `1px solid ${theme.answerColor}`,\n borderRadius: '100%',\n '& .checkmark': {\n fill: theme.isDark ? '#000' : '#fff'\n },\n '&:focus-within': {\n boxShadow: `0 0 0 1px ${theme.primaryAccentColor}`,\n borderColor: '#fff'\n },\n '& input': {\n cursor: 'pointer'\n }\n }\n}));\n\nfunction RadioInput({\n className,\n ...props\n}, forwardedRef) {\n const {\n inputProps,\n styleProps\n } = useInputStyles(props);\n const styles = useStyles$A(styleProps);\n return React__default.createElement(BaseInput$1, {\n type: \"radio\",\n className: classNames(styles.radioInput, className),\n icon: React__default.createElement(RadioIcon$1, null),\n ref: forwardedRef,\n ...inputProps\n });\n}\n\nvar RadioInput$1 = forwardRef(RadioInput); // get the margin top by taking the font size and the line height and divide by 2 to get the margin top\n\nconst marginTopHelper$1 = (height = 0, lineHeight = 1) => {\n return Math.max(0, (height * lineHeight - height) / 2); // no negative margins\n};\n\nconst useStyles$z = createUseStyles(theme => {\n var _a;\n\n return {\n controlLabel: ({\n checked,\n disabled\n }) => {\n var _a;\n\n const borderStyle = checked ? 'solid' : 'dashed';\n const borderColor = disabled && !checked ? 'transparent' : theme.questionColor;\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n display: 'flex',\n alignItems: 'start',\n cursor: 'pointer',\n padding: [5, 8, 7, 8],\n gap: 8,\n borderRadius: 4,\n border: [1, 'solid', checked ? theme.questionColor : 'transparent'],\n backgroundColor: checked ? theme.input.bgColor : 'transparent',\n ...theme.questionBody,\n lineHeight: 1.5,\n fontWeight: checked ? fontWeightOptions.medium : (_a = theme.questionBody.fontWeight) !== null && _a !== void 0 ? _a : fontWeightOptions.light,\n '&:hover': {\n border: [1, borderStyle, borderColor]\n },\n '&:focus-within': {\n background: theme.input.bgColor\n }\n };\n },\n icon: {\n flexShrink: 0,\n fontSize: ({\n inputSize\n }) => inputSize !== null && inputSize !== void 0 ? inputSize : '1em',\n marginTop: marginTopHelper$1((_a = theme.questionBody) === null || _a === void 0 ? void 0 : _a.fontSize, 1.5),\n // The following selector singles out Safari and Chrome on iOS14 to\n // implement a workaround for the lack of flex gap.\n '@supports (-webkit-touch-callout: none) and (not (translate: none))': {\n marginRight: 8\n }\n }\n };\n});\n\nfunction Radio({\n children: label = '',\n className,\n onChange,\n checked: checkedProp,\n name: nameProp,\n disabled: disabledProp,\n readOnly: readOnlyProp,\n inputSize,\n ...props\n}, forwardedRef) {\n var _a, _b;\n\n const radioGroup = useRadioGroup();\n let checked = checkedProp;\n let name = nameProp;\n\n if (radioGroup) {\n if (typeof checked === 'undefined') {\n checked = radioGroup.value === props.value;\n }\n\n if (typeof name === 'undefined') {\n name = radioGroup.name;\n }\n }\n\n const disabled = (_a = radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.disabled) !== null && _a !== void 0 ? _a : disabledProp;\n const readOnly = (_b = radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.readOnly) !== null && _b !== void 0 ? _b : readOnlyProp;\n\n const handleChange = e => {\n const {\n id,\n checked: isChecked,\n value\n } = e.target;\n radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.onChange({\n id,\n checked: isChecked,\n value\n });\n onChange === null || onChange === void 0 ? void 0 : onChange({\n id,\n checked: isChecked,\n value\n });\n };\n\n const {\n inputProps,\n styleProps\n } = useInputStyles({ ...props,\n name,\n checked,\n disabled,\n readOnly,\n onChange: handleChange\n });\n const {\n controlLabel,\n icon\n } = useStyles$z({ ...styleProps,\n inputSize\n });\n return React__default.createElement(\"label\", {\n tabIndex: -1,\n htmlFor: props.id,\n className: classNames(controlLabel, className)\n }, React__default.createElement(RadioInput$1, { ...inputProps,\n ref: forwardedRef,\n className: icon\n }), React__default.createElement(RichText, {\n element: \"span\",\n text: label\n }));\n}\n\nvar Radio$1 = forwardRef(Radio);\nconst useStyles$y = createUseStyles(theme => {\n const breakpointSmMax = `@media screen and (max-width: ${theme.breakpoints.sm.max})`;\n return {\n rowStyles: {\n borderRadius: '3px',\n textAlign: 'center',\n cursor: 'pointer',\n alignItems: 'center',\n padding: '3px',\n ...theme.questionBody,\n fontSize: '20px'\n },\n rowLabel: {\n margin: [0, 2, 0, 2],\n fontSize: '18px',\n padding: '3px',\n width: ({\n width = 60\n }) => `${width}%`,\n\n /**\n * There is a known jss issue that results in media query\n * checks not occurring for all mapped elements, hence the use of !important\n * https://github.com/cssinjs/jss/issues/1320\n * https://github.com/cssinjs/jss/issues/1327#issuecomment-707967909\n * Because function rules/values have higher source order specificity (rendered after static rules),\n * we're using !important to override that.\n * */\n [breakpointSmMax]: {\n width: ['50%', '!important']\n }\n },\n rowRadio: {\n justifyContent: 'center',\n gap: 0,\n padding: '3px',\n fontSize: 'inherit',\n width: ({\n radioWidth = 20\n }) => `${radioWidth}%`,\n [breakpointSmMax]: {\n width: ['25%', '!important']\n }\n }\n };\n});\n\nfunction BestWorstRow({\n id: rowId,\n label,\n value = null,\n columnIds = [],\n className,\n onChange,\n onClick,\n onKeyDown,\n width,\n ...props\n}) {\n const DEFAULT_RADIO_WIDTH = 20;\n const [bestColId, worstColId] = columnIds;\n const bestRadioId = `${rowId}_${bestColId}`;\n const worstRadioId = `${rowId}_${worstColId}`;\n const labelId = `${rowId}_label`;\n const radioEvents = {\n onClick,\n onKeyDown\n };\n const radioWidth = width !== undefined ? (100 - width) / 2 : DEFAULT_RADIO_WIDTH;\n\n const handleChange = e => {\n onChange === null || onChange === void 0 ? void 0 : onChange({\n id: rowId,\n value: e.value,\n checked: e.checked\n });\n };\n\n const {\n rowStyles,\n rowLabel,\n rowRadio\n } = useStyles$y({\n width,\n radioWidth\n });\n return React__default.createElement(Row, {\n className: classNames(rowStyles, className),\n ...props\n }, React__default.createElement(Radio$1, {\n id: bestRadioId,\n className: rowRadio,\n value: bestColId,\n name: rowId,\n checked: value === bestColId,\n \"aria-labelledby\": `${bestColId} ${labelId}`,\n onChange: handleChange,\n ...radioEvents\n }), React__default.createElement(\"span\", {\n className: rowLabel\n }, React__default.createElement(RichText, {\n id: labelId,\n element: \"span\",\n text: label\n })), React__default.createElement(Radio$1, {\n id: worstRadioId,\n className: rowRadio,\n value: worstColId,\n name: rowId,\n checked: value === worstColId,\n \"aria-labelledby\": `${worstColId} ${labelId}`,\n onChange: handleChange,\n ...radioEvents\n }));\n}\n\nconst useStyles$x = createUseStyles(theme => {\n const breakpointSmMax = `@media screen and (max-width: ${theme.breakpoints.sm.max})`;\n return {\n rowList: {\n '& > :nth-child(even)': {\n backgroundColor: theme.input.bgColor\n }\n },\n headerColumn: ({\n radioWidth = 20\n }) => ({\n display: 'table',\n width: `${radioWidth}%`,\n padding: '5px 8px',\n alignItems: 'center',\n textAlign: 'center',\n ...theme.questionBody,\n fontSize: '14px',\n [breakpointSmMax]: {\n width: '25%'\n }\n }),\n labelColumn: ({\n labelWidth = 60\n }) => ({\n display: 'table',\n width: `${labelWidth}%`,\n margin: [0, 2, 0, 2],\n padding: '3px',\n [breakpointSmMax]: {\n width: '50%'\n }\n })\n };\n});\n\nfunction BestWorst({\n id: questionId,\n disabled: _dis,\n readOnly: _ro,\n choices: fields = [],\n responses = [],\n columnChoices = [],\n onChange,\n labelWidth,\n ...questionFieldProps\n}) {\n const DEFAULT_RADIO_WIDTH = 20;\n const [selectedChoices, setSelectedChoices] = useState(responses);\n const [bestAnswerColumn, worstAnswerColumn] = columnChoices;\n const columnIds = columnChoices === null || columnChoices === void 0 ? void 0 : columnChoices.map(c => c.id);\n const errorId = createErrorId(questionId);\n const radioWidth = labelWidth !== undefined ? (100 - labelWidth) / 2 : DEFAULT_RADIO_WIDTH;\n /** Filter choices that exist and are visible */\n\n const {\n options: rowFields\n } = useQuestionChoices(fields);\n /** determines whether a radio should be rendered as checked or unchecked */\n\n const getRadioSelection = id => {\n var _a, _b;\n\n return (_b = (_a = selectedChoices.find(c => c.id === id)) === null || _a === void 0 ? void 0 : _a.value[0].id) !== null && _b !== void 0 ? _b : '';\n };\n /** unChecks selected choice */\n\n\n const unCheckOption = radioId => {\n const newChoices = selectedChoices.filter(c => !radioId.match(c.id));\n setSelectedChoices(newChoices);\n onChange === null || onChange === void 0 ? void 0 : onChange(newChoices);\n };\n /** handles adding new checked selection to responses */\n\n\n const handleChange = e => {\n let newChoices = [];\n const rowId = e.id;\n const rowValue = e.value;\n /** remove any other checked radio in the same row or column */\n\n newChoices = selectedChoices.filter(row => !(row.id === rowId || row.value.find(col => col.value === rowValue)));\n newChoices.push({\n id: rowId,\n value: [{\n id: rowValue,\n value: rowValue\n }]\n });\n setSelectedChoices(newChoices);\n onChange === null || onChange === void 0 ? void 0 : onChange(newChoices);\n };\n\n const handleClick = e => {\n const input = e.target;\n const isSelected = selectedChoices.find(c => input.id.match(c.id));\n\n if (isSelected && input.checked) {\n unCheckOption(input.id);\n }\n };\n\n const handleKeyboard = e => {\n const input = e.target;\n const isSelected = selectedChoices.find(c => input.id.match(c.id));\n\n if (e.code === 'Space' && isSelected) {\n e.preventDefault();\n unCheckOption(input.id);\n }\n };\n\n const {\n headerColumn,\n rowList,\n labelColumn\n } = useStyles$x({\n labelWidth,\n radioWidth\n });\n return React__default.createElement(QuestionField, {\n id: `bw-${questionId}`,\n \"data-testid\": \"BestWorstQuestionType\",\n ...questionFieldProps\n }, React__default.createElement(\"div\", {\n className: rowList\n }, React__default.createElement(Row, null, React__default.createElement(RichText, {\n id: bestAnswerColumn === null || bestAnswerColumn === void 0 ? void 0 : bestAnswerColumn.id,\n element: \"span\",\n text: bestAnswerColumn === null || bestAnswerColumn === void 0 ? void 0 : bestAnswerColumn.label,\n className: classNames(headerColumn)\n }), React__default.createElement(\"span\", {\n className: classNames(headerColumn, labelColumn)\n }), React__default.createElement(RichText, {\n id: worstAnswerColumn === null || worstAnswerColumn === void 0 ? void 0 : worstAnswerColumn.id,\n element: \"span\",\n text: worstAnswerColumn === null || worstAnswerColumn === void 0 ? void 0 : worstAnswerColumn.label,\n className: classNames(headerColumn)\n })), rowFields === null || rowFields === void 0 ? void 0 : rowFields.map(field => {\n const rowId = `${questionId}_${field.id}`;\n return React__default.createElement(BestWorstRow, {\n key: rowId,\n id: rowId,\n label: field.label,\n width: labelWidth,\n value: getRadioSelection(rowId),\n columnIds: columnIds,\n onChange: handleChange,\n onClick: handleClick,\n onKeyDown: handleKeyboard,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined\n });\n })));\n}\n\nvar BestWorst$1 = withErrorBoundary(BestWorst);\n\nfunction CheckboxIcon() {\n return React__default.createElement(\"g\", {\n className: \"checkbox-icon\"\n }, React__default.createElement(\"rect\", {\n fill: \"currentColor\",\n className: \"background\",\n width: \"16\",\n height: \"16\",\n rx: \"2\",\n ry: \"2\"\n }), React__default.createElement(\"path\", {\n fill: \"#fff\",\n className: \"checkmark\",\n transform: \"matrix(.91924 .91924 -.91924 .91924 -.72152 -9.5796)\",\n d: \"m14.521 0h1.4788v8h-5.0216l-0.002914-1.4404h3.5456l-1e-6 -6.5596z\"\n }));\n}\n\nvar CheckboxIcon$1 = withSvgIcon(CheckboxIcon, 'CheckboxIcon');\n\nfunction SelectIcon() {\n return React__default.createElement(\"g\", {\n className: \"select-icon\"\n }, React__default.createElement(\"polygon\", {\n className: \"select-arrow select-arrow-top\",\n transform: \"matrix(1.4619 0 0 1.4619 5.8783 5.4791)\",\n points: \"1.4514 -3.0633 5.5556 1.0409 -2.6529 1.0409\",\n fill: \"currentColor\",\n stroke: \"transparent\",\n strokeLinejoin: \"round\",\n strokeWidth: \".5\"\n }), React__default.createElement(\"polygon\", {\n className: \"select-arrow select-arrow-bottom\",\n transform: \"matrix(-1.4619 0 0 -1.4619 10.122 10.522)\",\n points: \"1.4514 -3.0633 5.5556 1.0409 -2.6529 1.0409\",\n fill: \"currentColor\",\n stroke: \"transparent\",\n strokeLinejoin: \"round\",\n strokeWidth: \".5\"\n }));\n}\n\nvar SelectIcon$1 = withSvgIcon(SelectIcon, 'SelectIcon');\n\nfunction CaretDown() {\n return React__default.createElement(\"g\", {\n className: \"caret-down-icon\"\n }, React__default.createElement(\"path\", {\n d: \"M13.254 4c.19.001.38.088.526.26.267.316.29.81.073 1.158l-.073.1L8.53 11.74l-.084.086a.66.66 0 0 1-.901-.007l-.076-.08L2.22 5.523l-.073-.1a1.024 1.024 0 0 1 0-1.058l.073-.1.084-.085a.674.674 0 0 1 .446-.175V4h10.504z\",\n fill: \"currentColor\"\n }));\n}\n\nvar CaretDownIcon = withSvgIcon(CaretDown, 'CaretDownIcon');\n\nfunction CaretDownOutline() {\n return React__default.createElement(\"g\", {\n className: \"caret-down-icon\"\n }, React__default.createElement(\"path\", {\n d: \"m922.74 642.16l-415.95-416.06c-18.533-18.538-48.507-18.538-67.04 0l-415.85 416.06c-18.533 18.538-18.533 48.519 0 67.057l33.473 33.481c18.533 18.538 48.507 18.538 67.04 0l348.91-349 348.91 349c18.533 18.538 48.507 18.538 67.04 0l33.473-33.481c18.533-18.538 18.533-48.519 0-67.057z\",\n transform: \"matrix(-.016568 0 0 -.016568 15.842 16.026)\",\n fill: \"currentcolor\"\n }));\n}\n\nvar CaretDownOutlineIcon = withSvgIcon(CaretDownOutline, 'CaretDownOutlineIcon');\n\nfunction CaretUpOutline() {\n return React__default.createElement(\"g\", {\n className: \"caret-up-icon\"\n }, React__default.createElement(\"path\", {\n d: \"m922.74 642.16-415.95-416.06c-18.533-18.538-48.507-18.538-67.04 0l-415.85 416.06c-18.533 18.538-18.533 48.519 0 67.057l33.473 33.481c18.533 18.538 48.507 18.538 67.04 0l348.91-349 348.91 349c18.533 18.538 48.507 18.538 67.04 0l33.473-33.481c18.533-18.538 18.533-48.519 0-67.057z\",\n transform: \"matrix(.016568 0 0 .016568 .15803 -.025552)\",\n fill: \"currentcolor\"\n }));\n}\n\nvar CaretUpOutlineIcon = withSvgIcon(CaretUpOutline, 'CaretUpOutlineIcon');\n\nfunction CaretLeftOutline() {\n return React__default.createElement(\"g\", {\n className: \"caret-left-icon\"\n }, React__default.createElement(\"path\", {\n transform: \"matrix(0 -.016568 .016568 0 -.025552 15.842)\",\n d: \"m922.74 642.16-415.95-416.06c-18.533-18.538-48.507-18.538-67.04 0l-415.85 416.06c-18.533 18.538-18.533 48.519 0 67.057l33.473 33.481c18.533 18.538 48.507 18.538 67.04 0l348.91-349 348.91 349c18.533 18.538 48.507 18.538 67.04 0l33.473-33.481c18.533-18.538 18.533-48.519 0-67.057z\",\n fill: \"currentcolor\"\n }));\n}\n\nvar CaretLeftOutlineIcon = withSvgIcon(CaretLeftOutline, 'CaretLeftOutlineIcon');\n\nfunction CaretRightOutline() {\n return React__default.createElement(\"g\", {\n className: \"caret-right-icon\"\n }, React__default.createElement(\"path\", {\n transform: \"matrix(0 .016568 -.016568 0 16.026 .15803)\",\n d: \"m922.74 642.16-415.95-416.06c-18.533-18.538-48.507-18.538-67.04 0l-415.85 416.06c-18.533 18.538-18.533 48.519 0 67.057l33.473 33.481c18.533 18.538 48.507 18.538 67.04 0l348.91-349 348.91 349c18.533 18.538 48.507 18.538 67.04 0l33.473-33.481c18.533-18.538 18.533-48.519 0-67.057z\",\n fill: \"currentcolor\"\n }));\n}\n\nvar CaretRightOutlineIcon = withSvgIcon(CaretRightOutline, 'CaretRightOutlineIcon');\n\nfunction DragHandleIcon() {\n return React__default.createElement(\"g\", {\n className: \"drag-handle-icon\"\n }, React__default.createElement(\"rect\", {\n transform: \"matrix(1 0 0 1.4 1 2)\",\n width: \"14\",\n height: \"1.4286\",\n rx: \".71\",\n ry: \".71\",\n strokeWidth: \"0\",\n fill: \"currentColor\"\n }), React__default.createElement(\"rect\", {\n transform: \"matrix(1 0 0 1.4 1 5.3333)\",\n width: \"14\",\n height: \"1.4286\",\n rx: \".71\",\n ry: \".71\",\n strokeWidth: \"0\",\n fill: \"currentColor\"\n }), React__default.createElement(\"rect\", {\n transform: \"matrix(1 0 0 1.4 1 8.6667)\",\n width: \"14\",\n height: \"1.4286\",\n rx: \".71\",\n ry: \".71\",\n strokeWidth: \"0\",\n fill: \"currentColor\"\n }), React__default.createElement(\"rect\", {\n transform: \"matrix(1 0 0 1.4 1 12)\",\n width: \"14\",\n height: \"1.4286\",\n rx: \".71\",\n ry: \".71\",\n strokeWidth: \"0\",\n fill: \"currentColor\"\n }));\n}\n\nvar DragHandleIcon$1 = withSvgIcon(DragHandleIcon, 'DragHandleIcon');\n\nfunction Calendar() {\n return React__default.createElement(\"g\", {\n fill: \"currentcolor\",\n transform: \"matrix(.031614 0 0 .031614 .33438 .33438)\"\n }, React__default.createElement(\"path\", {\n d: \"m405.17 363.15h-55.727c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4h55.727c2.209 0 4-1.791 4-4v-48.256c0-2.209-1.791-4-4-4z\"\n }), React__default.createElement(\"path\", {\n d: \"m314.23 363.15h-55.727c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4h55.727c2.209 0 4-1.791 4-4v-48.256c0-2.209-1.791-4-4-4z\"\n }), React__default.createElement(\"path\", {\n d: \"m223.28 363.15h-55.726c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4h55.726c2.209 0 4-1.791 4-4v-48.256c0-2.209-1.791-4-4-4z\"\n }), React__default.createElement(\"path\", {\n d: \"m132.34 363.15h-55.725c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4h55.726c2.209 0 4-1.791 4-4v-48.256c-1e-3 -2.209-1.792-4-4.001-4z\"\n }), React__default.createElement(\"path\", {\n d: \"m349.44 340.41h55.727c2.209 0 4-1.791 4-4v-48.256c0-2.209-1.791-4-4-4h-55.727c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4z\"\n }), React__default.createElement(\"path\", {\n d: \"m258.5 340.41h55.726c2.209 0 4-1.791 4-4v-48.256c0-2.209-1.791-4-4-4h-55.726c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4z\"\n }), React__default.createElement(\"path\", {\n d: \"m167.56 340.41h55.726c2.209 0 4-1.791 4-4v-48.256c0-2.209-1.791-4-4-4h-55.726c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4z\"\n }), React__default.createElement(\"path\", {\n d: \"m76.611 340.41h55.726c2.209 0 4-1.791 4-4v-48.256c0-2.209-1.791-4-4-4h-55.726c-2.209 0-4 1.791-4 4v48.256c0 2.209 1.791 4 4 4z\"\n }), React__default.createElement(\"path\", {\n d: \"m349.44 261.41h55.727c2.209 0 4-1.791 4-4v-48.255c0-2.209-1.791-4-4-4h-55.727c-2.209 0-4 1.791-4 4v48.255c0 2.209 1.791 4 4 4z\"\n }), React__default.createElement(\"path\", {\n d: \"m258.5 261.41h55.727c2.209 0 4-1.791 4-4v-48.255c0-2.209-1.791-4-4-4h-55.727c-2.209 0-4 1.791-4 4v48.255c0 2.209 1.791 4 4 4z\"\n }), React__default.createElement(\"path\", {\n d: \"m363.37 114.86h6.938c10.543 0 19.09-8.549 19.09-19.091v-72.39c0-10.54-8.547-19.089-19.09-19.089h-6.938c-10.545 0-19.092 8.549-19.092 19.089v72.389c2e-3 10.543 8.549 19.092 19.092 19.092z\"\n }), React__default.createElement(\"path\", {\n d: \"m118.5 115.33h6.938c10.544 0 19.091-8.55 19.091-19.091v-72.389c0-10.541-8.547-19.09-19.091-19.09h-6.938c-10.543 0-19.09 8.549-19.09 19.09v72.389c0 10.541 8.547 19.091 19.09 19.091z\"\n }), React__default.createElement(\"path\", {\n d: \"M453.916,43.558h-48.996v57.209c0,19.084-15.525,29.61-34.607,29.61h-6.938c-19.084,0-34.609-15.526-34.609-34.61v-52.209h-168.713v52.682c0,19.084-15.525,34.61-34.609,34.61h-6.938c-19.083,0-34.608-15.526-34.608-34.61v-52.682h-52.862C13.923,43.558,0,57.481,0,74.595v375.03c0,17.114,13.923,31.037,31.036,31.037h422.88c17.113,0,31.035-13.923,31.035-31.037v-375.03c.002-17.113-13.922-31.037-31.035-31.037Zm0,406.067h-422.879l-.001-283.213h422.886l.016,283.212c-.002,0-.008.001-.022.001Z\"\n }));\n}\n\nvar CalendarIcon = withSvgIcon(Calendar, 'CalendarIcon');\nconst useStyles$w = createUseStyles(theme => ({\n checkboxInput: ({\n checked,\n disabled,\n readOnly\n }) => {\n const checkBgColor = checked ? theme.questionColor : '#fff';\n const backgroundColor = disabled || readOnly ? '#aaa' : checkBgColor;\n return {\n color: disabled || readOnly ? '#aaa' : theme.questionColor,\n borderRadius: 2,\n backgroundColor,\n border: `1px solid ${disabled || readOnly ? '#aaa' : theme.questionColor}`,\n '& .checkmark': {\n fill: theme.isDark ? '#000' : '#fff'\n },\n '&:focus-within': {\n boxShadow: `0 0 0 1px ${theme.primaryAccentColor}`,\n borderColor: '#fff'\n },\n '& input': {\n cursor: 'pointer'\n }\n };\n }\n}));\n\nfunction CheckboxInput({\n className,\n ...props\n}, ref) {\n const {\n inputProps,\n styleProps\n } = useInputStyles(props);\n const {\n checkboxInput\n } = useStyles$w(styleProps);\n return React__default.createElement(BaseInput$1, {\n ref: ref,\n type: \"checkbox\",\n className: classNames(checkboxInput, className),\n icon: React__default.createElement(CheckboxIcon$1, null),\n ...inputProps\n });\n}\n\nvar CheckboxInput$1 = React__default.forwardRef(CheckboxInput); // get the margin top by taking the font size and the line height and divide by 2 to get the margin top\n\nconst marginTopHelper = (height = 0, lineHeight = 1) => {\n return Math.max(0, (height * lineHeight - height) / 2); // no negative margins\n};\n\nconst useStyles$v = createUseStyles(theme => {\n var _a;\n\n return {\n checkboxContainer: ({\n checked,\n disabled\n }) => {\n var _a;\n\n const borderStyle = checked ? 'solid' : 'dashed';\n const borderColor = disabled && !checked ? 'transparent' : theme.questionColor;\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n display: 'flex',\n alignItems: 'start',\n cursor: 'pointer',\n padding: [5, 8, 7, 8],\n gap: 8,\n borderRadius: 4,\n border: [1, 'solid', checked ? theme.questionColor : 'transparent'],\n backgroundColor: checked ? theme.input.bgColor : 'inherit',\n ...theme.questionBody,\n lineHeight: 1.5,\n fontWeight: checked ? fontWeightOptions.medium : (_a = theme.questionBody.fontWeight) !== null && _a !== void 0 ? _a : fontWeightOptions.light,\n '&:hover': {\n border: [1, borderStyle, borderColor]\n },\n '&:focus-within': {\n background: theme.input.bgColor\n }\n };\n },\n icon: {\n flexShrink: 0,\n fontSize: ({\n inputSize\n }) => inputSize !== null && inputSize !== void 0 ? inputSize : '1em',\n marginTop: marginTopHelper((_a = theme.questionBody) === null || _a === void 0 ? void 0 : _a.fontSize, 1.5),\n // The following selector singles out Safari and Chrome on iOS14 to\n // implement a workaround for the lack of flex gap.\n '@supports (-webkit-touch-callout: none) and (not (translate: none))': {\n marginRight: 8\n }\n }\n };\n});\n\nfunction Checkbox$2({\n children: label = '',\n inputSize,\n onChange,\n ...props\n}, ref) {\n const handleChange = e => {\n onChange === null || onChange === void 0 ? void 0 : onChange({\n id: e.target.id,\n checked: e.target.checked,\n value: e.target.value\n });\n };\n\n const {\n inputProps,\n styleProps\n } = useInputStyles({ ...props,\n onChange: handleChange\n });\n const {\n checkboxContainer,\n icon\n } = useStyles$v({ ...styleProps,\n inputSize\n });\n return React__default.createElement(\"label\", {\n htmlFor: inputProps.id,\n className: checkboxContainer,\n tabIndex: -1\n }, React__default.createElement(CheckboxInput$1, {\n ref: ref,\n ...inputProps,\n className: icon\n }), React__default.createElement(RichText, {\n element: \"span\",\n text: label\n }));\n}\n\nvar Checkbox$3 = forwardRef(Checkbox$2);\nconst useStyles$u = createUseStyles(theme => ({\n checkbox: {\n '& label': {\n alignItems: 'baseline'\n }\n },\n labelContainer: {\n display: 'flex',\n flexDirection: 'column'\n },\n textInput: {\n opacity: ({\n isChecked\n }) => isChecked ? 1 : 0.5,\n marginTop: 5,\n marginLeft: 32,\n maxWidth: 'calc(100% - 32px)',\n [`@media (max-width: ${theme.breakpoints.xxs.max})`]: {\n marginLeft: 0,\n maxWidth: '100%'\n },\n // overwrite TextInput styles\n fontSize: theme.questionBody.fontSize,\n lineHeight: 'normal'\n },\n checkHover: {\n '&:hover': {\n outline: 'none',\n cursor: 'pointer'\n }\n }\n}));\n\nfunction CheckboxTextfield(props) {\n const {\n id,\n children: label,\n value: inputValue = '',\n defaultValue,\n maxLength,\n onClick,\n onKeyDown,\n onChange,\n checked: checkedProp = false,\n ...checkboxProps\n } = props;\n const [isChecked, setIsChecked] = useState(checkedProp);\n const [value, setValue] = React__default.useState(defaultValue || inputValue);\n const {\n checkbox,\n textInput,\n checkHover\n } = useStyles$u({\n isChecked\n });\n\n const handleValueChange = e => {\n setValue(e.value);\n onChange === null || onChange === void 0 ? void 0 : onChange({\n id,\n value: e.value,\n checked: e.checked\n });\n };\n\n const handleInputChange = e => {\n if (!isChecked) {\n setIsChecked(true);\n }\n\n handleValueChange({\n id,\n value: e.target.value,\n checked: true\n });\n };\n\n const inputRef = React__default.useRef(null);\n\n const handleCheckboxClick = e => {\n var _a;\n\n if (!isChecked && e.clientX !== 0 && e.clientY !== 0) {\n (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n\n setIsChecked(!isChecked);\n onClick === null || onClick === void 0 ? void 0 : onClick(e);\n };\n\n const handleTextboxClick = () => {\n if (!isChecked) {\n setIsChecked(true);\n }\n\n handleValueChange({\n id,\n value,\n checked: true\n });\n };\n\n const handleKeyDown = e => {\n if (e.code === 'Space') {\n e.preventDefault();\n setIsChecked(!isChecked);\n handleValueChange({\n id,\n value,\n checked: !isChecked\n });\n return;\n }\n\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);\n };\n\n React__default.useEffect(() => {\n setIsChecked(checkedProp);\n }, [checkedProp]);\n return React__default.createElement(React__default.Fragment, null, React__default.createElement(Checkbox$3, {\n id: `checkbox-input-${id}`,\n checked: isChecked,\n onKeyDown: handleKeyDown,\n onClick: handleCheckboxClick,\n onChange: handleValueChange,\n className: checkbox,\n value: value,\n maxLength: maxLength,\n ...checkboxProps\n }, label), React__default.createElement(TextInput$1, {\n id: `checkbox-field-${id}`,\n onChange: handleInputChange,\n onClick: handleTextboxClick,\n className: classNames(textInput, {\n [checkHover]: !isChecked\n }),\n defaultValue: defaultValue,\n autoHeight: true,\n maxLength: maxLength,\n tabIndex: isChecked ? 0 : -1,\n ref: inputRef\n }));\n}\n/**\n * Maximum input characters is 20,000\n * Resolves: RAWR-1186\n */\n\n\nconst TEXT_INPUT_MAX_CHARS = 20000;\nconst useStyles$t = createUseStyles({\n commentChoiceContainer: {\n marginTop: '10px'\n }\n});\nconst INPUT_SIZE$2 = 20;\n\nfunction Checkbox({\n id: questionId,\n required: _req,\n readOnly: _ro,\n disabled,\n columnLayout,\n choices = [],\n responses = [],\n choiceNoneOfTheAbove,\n choiceOther,\n choiceComment,\n onChange,\n ...questionFieldProps\n}) {\n const [selectedChoices, setSelectedChoices] = useState(responses);\n const errorId = createErrorId(questionId);\n /**\n * Default value by id\n * used for text-input based choices\n */\n\n const getDefaultValueById = id => {\n var _a;\n\n return (_a = responses.find(c => c.id === id)) === null || _a === void 0 ? void 0 : _a.value;\n };\n\n const handleDefault = id => {\n var _a;\n\n return (_a = responses.find(c => c.id === id)) === null || _a === void 0 ? void 0 : _a.value;\n };\n\n const isChecked = id => !!selectedChoices.find(item => item.id === id);\n\n const handleChange = e => {\n // 1. remove NOTA from array\n const newState = selectedChoices.filter(c => c.id !== e.id && c.type !== 'NOTA'); // 2. if e.target.checked remove item from array\n\n if (e.checked) {\n newState.push({\n id: e.id,\n value: e.value\n });\n }\n\n setSelectedChoices(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const handleNAChange = e => {\n const newState = selectedChoices.filter(c => c.type === 'COMMENT'); // 2. if e.target.checked remove item from array\n\n if (e.checked) {\n newState.push({\n id: e.id,\n value: e.value,\n type: 'NOTA'\n });\n }\n\n setSelectedChoices(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const handleOtherChange = e => {\n const newState = selectedChoices.filter(c => c.id !== e.id && c.type !== 'NOTA'); // 2. if e.target.checked remove item from array\n\n if (e.checked) {\n newState.push({\n id: e.id,\n value: e.value,\n type: 'ANSWER'\n });\n }\n\n setSelectedChoices(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const handleCommentChange = e => {\n const newState = selectedChoices.filter(c => c.type !== 'COMMENT');\n\n if (newState && !!e.target.value) {\n newState.push({\n id: e.target.id,\n value: e.target.value,\n type: 'COMMENT'\n });\n }\n\n setSelectedChoices(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const {\n commentChoiceContainer\n } = useStyles$t();\n return React__default.createElement(QuestionField, {\n id: questionId,\n \"data-testid\": \"CheckboxQuestionType\",\n ...questionFieldProps\n }, React__default.createElement(QuestionAnswerLayoutTemplate, {\n gridCellMargin: [0, 2, 5, 2],\n otherCellMargin: [0, 2, 5, 2],\n noneOfTheAbove: choiceNoneOfTheAbove && (choiceNoneOfTheAbove === null || choiceNoneOfTheAbove === void 0 ? void 0 : choiceNoneOfTheAbove.visible) && React__default.createElement(Checkbox$3, {\n id: choiceNoneOfTheAbove.id,\n value: choiceNoneOfTheAbove.id,\n onChange: handleNAChange,\n checked: isChecked(choiceNoneOfTheAbove.id),\n disabled: disabled,\n readOnly: _ro,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined,\n inputSize: INPUT_SIZE$2\n }, choiceNoneOfTheAbove.label),\n other: (choiceOther === null || choiceOther === void 0 ? void 0 : choiceOther.type) === 'ANSWER' && (choiceOther === null || choiceOther === void 0 ? void 0 : choiceOther.visible) && React__default.createElement(CheckboxTextfield, {\n id: choiceOther.id,\n defaultValue: handleDefault(choiceOther.id),\n onChange: handleOtherChange,\n checked: isChecked(choiceOther.id),\n maxLength: TEXT_INPUT_MAX_CHARS,\n disabled: disabled,\n readOnly: _ro,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined,\n inputSize: INPUT_SIZE$2\n }, choiceOther.label),\n columns: columnLayout\n }, choices === null || choices === void 0 ? void 0 : choices.map(choice => {\n return React__default.createElement(Checkbox$3, {\n key: choice.id,\n id: choice.id,\n onChange: handleChange,\n checked: isChecked(choice.id),\n value: choice.id,\n disabled: disabled,\n readOnly: _ro,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined,\n inputSize: INPUT_SIZE$2\n }, choice.label);\n })), choiceComment && React__default.createElement(CommentChoice, {\n id: choiceComment.id,\n label: choiceComment.label,\n onChange: handleCommentChange,\n defaultValue: getDefaultValueById(choiceComment.id),\n lineCount: choiceComment.linesCount,\n charCount: choiceComment.charsCount,\n maxLength: TEXT_INPUT_MAX_CHARS,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined,\n className: commentChoiceContainer\n }));\n}\n\nvar Checkbox$1 = withErrorBoundary(Checkbox);\n\nfunction CommentBox({\n id: questionId,\n required,\n disabled,\n readOnly,\n responses: defaultResponses = [],\n onChange,\n cols = 50,\n rows = 3,\n ...fieldProps\n}) {\n const {\n error,\n errorId = createErrorId(questionId),\n title: {\n id: titleId\n }\n } = fieldProps;\n const defaultValue = useMemo(() => {\n var _a, _b;\n\n return (_b = (_a = defaultResponses.find(r => !!r.value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n []);\n\n const handleChange = e => {\n const responses = e.target.value ? [{\n id: questionId,\n value: e.target.value\n }] : [];\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n\n return React__default.createElement(QuestionField, {\n id: questionId,\n errorId: errorId,\n \"data-testid\": \"CommentBoxQuestionType\",\n ...fieldProps\n }, React__default.createElement(TextArea$1, {\n name: questionId,\n defaultValue: defaultValue,\n disabled: disabled,\n readOnly: readOnly,\n required: required,\n cols: cols,\n rows: rows,\n onChange: handleChange,\n \"aria-invalid\": !!error,\n \"aria-describedby\": error && errorId,\n \"aria-labelledby\": titleId,\n maxLength: TEXT_INPUT_MAX_CHARS\n }));\n}\n\nvar CommentBox$1 = withErrorBoundary(CommentBox);\n\nvar _a;\n/**\n * SSR Safe version of useLayoutEffect\n * @see https://code.corp.surveymonkey.com/webplatform/smweb/blob/master/apps/contentweb/src/app/pages/MRX/helpers/useIsomorphicLayoutEffect.js\n *\n * Note: `NOSONAR` is used to bypass a `minor:code-smell` error that states `createElement` is deprecated.\n * The eslint rule above disables the spaced comments to use NOSONAR as stated in the docs.\n */\n\n\nconst useSSRSafeLayoutEffect = typeof window !== 'undefined' && typeof ((_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.createElement) !== 'undefined' //NOSONAR\n? useLayoutEffect : useEffect;\nconst useStyles$s = createUseStyles(theme => {\n const {\n color,\n fontSize,\n fontFamily,\n fontWeight\n } = theme.questionBody;\n return {\n selectContainerStyles: {\n maxWidth: '100%',\n position: 'relative',\n display: 'inline-flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n overflow: 'hidden',\n transition: 'all 0.1s linear',\n borderRadius: `4px`,\n border: `2px solid transparent`,\n outline: `1px solid transparent`,\n '&:focus-within, &:hover': {\n border: `2px solid ${theme.primaryAccentColor}`,\n outline: `1px solid #fff`\n },\n color: '#000'\n },\n selectStyles: {\n position: 'relative',\n display: 'inline-flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n overflow: 'hidden',\n fontSize,\n fontFamily,\n fontWeight,\n lineHeight: 'normal',\n outline: 'none',\n backgroundColor: '#fff',\n color: 'inherit',\n maxWidth: '100%',\n padding: '6px 1.75em 6px 6px',\n verticalAlign: 'bottom',\n textSizeAdjust: 'auto',\n // Prevent de fault chevron from showing\n mozAppearance: 'none',\n webkitAppearance: 'none',\n appearance: 'none',\n transition: 'border 0.1s linear',\n border: `1px solid ${color}`,\n '&:focus-within, &:hover': {\n border: `1px solid transparent`\n }\n },\n selectIconStyles: {\n position: 'absolute',\n width: '1em',\n height: '1em',\n display: 'block',\n margin: '0 .5em',\n right: 0,\n zIndex: 2,\n pointerEvents: 'none'\n },\n disabledStyles: {\n opacity: 0.4\n }\n };\n});\n\nfunction NativeSelect({\n required,\n children,\n disabled,\n className,\n icon = React__default.createElement(SelectIcon$1, null),\n ...props\n}) {\n const {\n selectStyles,\n selectContainerStyles,\n selectIconStyles,\n disabledStyles\n } = useStyles$s();\n const {\n className: iconClasses,\n ...iconProps\n } = icon.props;\n return React__default.createElement(\"div\", {\n className: classNames(selectContainerStyles, disabled ? disabledStyles : {}, className)\n }, React__default.cloneElement(icon, {\n // this will apply our placement styles, along with any other supplied classes\n className: classNames(selectIconStyles, iconClasses),\n // apply all other props.\n ...iconProps\n }), React__default.createElement(\"select\", {\n className: selectStyles,\n required: required,\n \"aria-required\": required,\n \"data-testid\": \"select\",\n disabled: disabled,\n ...props\n }, children));\n}\n\nconst useStyles$r = createUseStyles(({\n questionBody: {\n fontFamily,\n fontSize,\n fontWeight\n }\n}) => ({\n selectOption: {\n fontFamily,\n fontSize,\n fontWeight\n }\n}));\n\nfunction SelectAnswerOption({\n id,\n label,\n ...props\n}) {\n const {\n selectOption\n } = useStyles$r();\n return React__default.createElement(\"option\", {\n id: id,\n \"data-testid\": \"select-answer-option\",\n className: selectOption,\n ...props\n }, label);\n}\n\nconst useStyles$q = createUseStyles(theme => {\n const {\n color,\n fontSize,\n fontFamily,\n fontWeight\n } = theme.questionBody;\n return {\n inputGroup: {\n display: 'flex',\n alignItems: 'center',\n flexDirection: ({\n rtl\n }) => rtl ? 'row-reverse' : 'row',\n transition: 'all 0.1s linear',\n border: `1px solid ${color}`,\n '&:focus-within, &:hover': {\n border: `1px solid transparent`\n }\n },\n input: {\n border: 'none',\n textAlign: ({\n rtl\n }) => rtl ? 'right' : 'left',\n height: ({\n height\n }) => height || 'auto',\n width: 'calc(100% - 30px)',\n outline: 'currentColor none medium',\n backgroundColor: '#FFF',\n padding: '6px 0 6px 10px',\n fontSize,\n fontFamily,\n fontWeight\n },\n button: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer',\n height: ({\n height\n }) => height || 'auto',\n width: 30,\n backgroundColor: '#FFF',\n border: 'none'\n },\n buttonIcon: {\n transform: ({\n isOpen\n }) => isOpen ? 'rotate(180deg)' : 'rotate(0)'\n }\n };\n});\nconst ComboBoxInputGroup = React__default.forwardRef(({\n isOpen,\n value,\n height,\n rtl = false,\n onChange,\n open,\n close,\n onKeyDown,\n 'aria-activedescendant': ariaActiveDescendant,\n 'aria-autocomplete': ariaAutocomplete,\n 'aria-controls': ariaControls,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n className,\n ...rest\n}, ref) => {\n const inputRef = useRef(null);\n useImperativeHandle(ref, () => inputRef.current);\n const {\n inputGroup,\n input,\n button,\n buttonIcon\n } = useStyles$q({\n isOpen,\n height,\n rtl\n });\n return React__default.createElement(\"div\", {\n className: classNames(inputGroup, className),\n ...rest\n }, React__default.createElement(\"input\", {\n className: input,\n type: \"text\",\n role: \"combobox\",\n \"aria-autocomplete\": ariaAutocomplete,\n \"aria-expanded\": isOpen,\n \"aria-controls\": ariaControls,\n \"aria-activedescendant\": ariaActiveDescendant,\n value: value,\n onChange: onChange,\n onClick: open,\n onKeyDown: onKeyDown,\n ref: inputRef\n }), React__default.createElement(\"button\", {\n className: button,\n type: \"button\",\n tabIndex: -1,\n \"aria-expanded\": isOpen,\n \"aria-controls\": ariaControls,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n onClick: () => {\n var _a;\n\n if (isOpen) {\n close();\n } else {\n open();\n }\n\n (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n }, React__default.createElement(CaretDownIcon, {\n className: buttonIcon\n })));\n});\nconst useStyles$p = createUseStyles({\n listBox: {\n listStyle: 'none',\n width: 'fit-content',\n overflowY: 'auto',\n overflowX: 'hidden',\n '&:focus-visible': {\n outline: '#005fcc auto 1px',\n outlineOffset: 1\n }\n }\n});\n/**\n * Scroll to the item at the specified index if it is fully or partially obscured\n * */\n\nconst scrollToItem = (itemRect, containerRef) => {\n var _a;\n\n const ulRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n\n if (!ulRect || !containerRef.current) {\n return;\n }\n\n if (itemRect.top < ulRect.top) {\n // eslint-disable-next-line no-param-reassign\n containerRef.current.scrollTop -= ulRect.top - itemRect.top;\n } else if (itemRect.bottom > ulRect.bottom) {\n // eslint-disable-next-line no-param-reassign\n containerRef.current.scrollTop += itemRect.bottom - ulRect.bottom;\n }\n};\n/**\n * Returns the number of items visible inside the listbox given its current dimensions\n * note: if height is 0, it will return 10 as a default to satisfy tests\n * */\n\n\nconst numItemsVisible = (containerHeight, itemHeight = 48) => {\n return !containerHeight ? 10 : Math.round(containerHeight / itemHeight);\n};\n/**\n * Focus another item in the listBox depending on which key is pressed\n * @param key The key that was pressed\n * @param focusedIndex The index of the currently focused item\n * @param itemCount The number of items in the listBox\n * @param visibleItemCount The number of items visible in the listBox\n * @param focusItem Function which updates the the currently focused item\n */\n\n\nconst focusNext = (key, focusedIndex, itemCount, visibleItemCount, focusItem) => {\n const lastIndex = itemCount - 1;\n\n if (key === 'End') {\n focusItem(lastIndex);\n return;\n }\n\n if (focusedIndex === null) {\n focusItem(0);\n return;\n }\n\n switch (key) {\n case 'Down':\n case 'ArrowDown':\n if (focusedIndex < lastIndex) {\n focusItem(focusedIndex + 1);\n } else {\n focusItem(0);\n }\n\n break;\n\n case 'Up':\n case 'ArrowUp':\n if (focusedIndex > 0) {\n focusItem(focusedIndex - 1);\n } else {\n focusItem(lastIndex);\n }\n\n break;\n\n case 'PageDown':\n if (focusedIndex < lastIndex - visibleItemCount) {\n focusItem(focusedIndex + visibleItemCount);\n } else {\n focusItem(lastIndex);\n }\n\n break;\n\n case 'PageUp':\n if (focusedIndex > visibleItemCount) {\n focusItem(focusedIndex - visibleItemCount);\n } else {\n focusItem(0);\n }\n\n break;\n\n case 'Home':\n focusItem(0);\n break;\n }\n};\n\nReact__default.forwardRef(({\n children,\n focusedIndex: externalFocusedIndex,\n tabIndex,\n onKeyDown,\n onClick,\n onChange,\n className,\n ...rest\n}, ref) => {\n const {\n listBox\n } = useStyles$p();\n const [focusedIndex, setFocusedIndex] = useState(null); // override internal focusedIndex with external state if provided\n\n useEffect(() => {\n if (externalFocusedIndex !== undefined) {\n setFocusedIndex(externalFocusedIndex);\n }\n }, [externalFocusedIndex]);\n const itemsRef = useRef([]);\n const ulRef = useRef(null);\n\n const focusItem = index => {\n setFocusedIndex(index);\n };\n\n useImperativeHandle(ref, () => ulRef.current);\n useEffect(() => {\n var _a, _b;\n\n if (focusedIndex === null) {\n return;\n } // Scroll to the currently focused item anytime the focused index changes\n\n\n scrollToItem((_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[focusedIndex].getBoundingClientRect(), ulRef); // call the onChange callback if the focused index changes\n\n onChange === null || onChange === void 0 ? void 0 : onChange({\n target: itemsRef.current[focusedIndex],\n value: (_b = itemsRef.current[focusedIndex].dataset.value) !== null && _b !== void 0 ? _b : ''\n });\n }, [focusedIndex]);\n\n const handleKeyDown = e => {\n var _a;\n\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);\n\n if (!(e.target instanceof HTMLUListElement)) {\n return;\n }\n\n if (['Down', 'Up', 'ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'End', 'Home'].includes(e.key)) {\n e.preventDefault(); // Focus another item in the listBox depending on which key is pressed\n\n focusNext(e.key, focusedIndex, itemsRef.current.length, numItemsVisible((_a = ulRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height), focusItem);\n }\n };\n\n const handleClick = e => {\n onClick === null || onClick === void 0 ? void 0 : onClick(e);\n\n if (e.target instanceof HTMLLIElement) {\n setFocusedIndex(itemsRef.current.indexOf(e.target));\n }\n };\n\n const interactiveProps = {\n tabIndex,\n 'aria-activedescendant': tabIndex !== undefined && focusedIndex !== null ? `ListBoxItem-${focusedIndex}` : undefined\n };\n return React__default.createElement(\"ul\", {\n ref: ulRef,\n className: classNames(listBox, className),\n role: \"listbox\",\n onKeyDown: handleKeyDown,\n onClick: handleClick,\n ...interactiveProps,\n ...rest\n }, React__default.Children.map(children, (child, index) => {\n var _a;\n\n return React__default.isValidElement(child) && React__default.cloneElement(child, {\n key: child.props.value,\n id: (_a = child.props.id) !== null && _a !== void 0 ? _a : `ListBoxItem-${index}`,\n selected: index === focusedIndex,\n ref: el => {\n itemsRef.current[index] = el;\n }\n });\n }));\n});\nconst useStyles$o = createUseStyles({\n listBoxItem: ({\n selected,\n disabled\n }) => ({\n display: 'flex',\n alignItems: 'center',\n maxWidth: '100%',\n backgroundColor: '#FFF',\n cursor: 'pointer',\n ...(selected && {\n backgroundColor: 'rgb(237, 238, 238)'\n }),\n '&:hover, &:focus': {\n backgroundColor: 'rgb(237, 238, 238)'\n },\n '&:active': {\n backgroundColor: 'rgb(224, 226, 226)'\n },\n ...(disabled && {\n opacity: 0.5,\n pointerEvents: 'none'\n })\n })\n});\nconst ListBoxItem = React__default.forwardRef(({\n children,\n disabled,\n selected,\n value,\n className,\n ...rest\n}, ref) => {\n const {\n listBoxItem\n } = useStyles$o({\n disabled,\n selected\n });\n return React__default.createElement(\"li\", {\n ref: ref,\n \"data-value\": value,\n className: classNames(listBoxItem, className),\n role: \"option\",\n \"aria-selected\": selected ? true : undefined,\n ...rest\n }, children);\n});\nconst useStyles$n = createUseStyles({\n listBoxContainer: {\n // TODO: Possible to utilize focus-visible to show only on keyboard interaction? (with child)\n '&:focus-within': {\n outline: '#005fcc auto 1px',\n outlineOffset: 1\n }\n },\n listBox: {\n listStyle: 'none',\n width: 'fit-content',\n overflowY: 'auto',\n overflowX: 'hidden',\n padding: 0\n }\n});\nconst ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';\n/**\n * A virtualized version of the List component, using `react-window` to render large datasets. This component should only be used when the number of items would cause performance issues with the standard List component (most likely >500 items).\n */\n\nconst VirtualizedListBox = React__default.forwardRef(({\n height = 325,\n width = 175,\n itemSize,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n [ARIA_ACTIVEDESCENDANT]: ariaActiveDescendant,\n tabIndex,\n itemCount,\n focusedIndex: externalFocusedIndex,\n onChange,\n onKeyDown,\n onClick,\n className,\n children,\n ...rest\n}, ref) => {\n const [focusedIndex, setFocusedIndex] = useState(null);\n const listRef = useRef(null);\n const innerRef = useRef(null);\n const outerRef = useRef(null);\n const itemsRef = useRef([]); // override internal focusedIndex with external state if provided\n\n useEffect(() => {\n var _a;\n\n if (externalFocusedIndex !== undefined) {\n if (externalFocusedIndex !== null) {\n (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(externalFocusedIndex);\n }\n\n setFocusedIndex(externalFocusedIndex);\n }\n }, [externalFocusedIndex]);\n const {\n listBoxContainer,\n listBox\n } = useStyles$n();\n\n const handleChange = item => {\n var _a;\n\n onChange === null || onChange === void 0 ? void 0 : onChange({\n target: item,\n value: (_a = item.dataset.value) !== null && _a !== void 0 ? _a : ''\n });\n };\n /**\n * Scroll to and focus the item at the specified index\n */\n\n\n const focusItem = index => {\n var _a;\n\n (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index);\n setFocusedIndex(index);\n handleChange(itemsRef.current[index]);\n };\n\n useImperativeHandle(ref, () => ({\n listRef,\n innerRef,\n outerRef,\n itemsRef\n }));\n const handleKeyDown = useCallback(e => {\n var _a;\n\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);\n\n if (!(e.target instanceof HTMLUListElement)) {\n return;\n }\n\n if (['Down', 'Up', 'ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'End', 'Home'].includes(e.key)) {\n e.preventDefault(); // Focus another item in the listBox depending on which key is pressed\n\n focusNext(e.key, focusedIndex, itemCount, numItemsVisible((_a = outerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height), focusItem);\n }\n }, [focusedIndex, itemCount, onKeyDown]);\n const handleClick = useCallback(e => {\n onClick === null || onClick === void 0 ? void 0 : onClick(e);\n\n if (e.target instanceof HTMLLIElement) {\n setFocusedIndex(itemsRef.current.indexOf(e.target));\n handleChange(e.target);\n }\n }, [onClick]);\n useLayoutEffect(() => {\n var _a;\n\n const listElement = innerRef.current;\n (_a = outerRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');\n\n if (listElement) {\n listElement.className = listBox;\n listElement.setAttribute('role', 'listbox');\n listElement.addEventListener('keydown', handleKeyDown);\n listElement.addEventListener('click', handleClick);\n\n if (tabIndex === undefined) {\n listElement.removeAttribute('tabindex');\n } else {\n listElement.setAttribute('tabindex', tabIndex === null || tabIndex === void 0 ? void 0 : tabIndex.toString());\n }\n\n if (ariaLabel) {\n listElement.setAttribute('aria-label', ariaLabel);\n }\n\n if (ariaLabelledBy) {\n listElement.setAttribute('aria-labelledby', ariaLabelledBy);\n }\n }\n\n return () => {\n if (listElement) {\n listElement.removeEventListener('keydown', handleKeyDown);\n listElement.removeEventListener('click', handleClick);\n }\n };\n }, [ariaLabel, ariaLabelledBy, handleClick, handleKeyDown, listBox, tabIndex]);\n useLayoutEffect(() => {\n const listElement = innerRef.current;\n\n if (ariaActiveDescendant || tabIndex !== undefined && focusedIndex !== null) {\n listElement === null || listElement === void 0 ? void 0 : listElement.setAttribute(ARIA_ACTIVEDESCENDANT, ariaActiveDescendant !== null && ariaActiveDescendant !== void 0 ? ariaActiveDescendant : `ListBoxItem-${focusedIndex}`);\n } else {\n listElement === null || listElement === void 0 ? void 0 : listElement.removeAttribute(ARIA_ACTIVEDESCENDANT);\n }\n }, [ariaActiveDescendant, focusedIndex, tabIndex]);\n return React__default.createElement(FixedSizeList, {\n className: classNames(listBoxContainer, className),\n itemSize: itemSize,\n height: Math.min(height, itemCount * itemSize),\n width: width,\n innerElementType: \"ul\",\n innerRef: innerRef,\n outerRef: outerRef,\n overscanCount: 10,\n itemCount: itemCount,\n ref: listRef,\n ...rest\n }, props => {\n var _a;\n\n return React__default.cloneElement(children(props), {\n id: (_a = children(props).props.id) !== null && _a !== void 0 ? _a : `ListBoxItem-${props.index}`,\n selected: props.index === focusedIndex,\n ref: el => {\n itemsRef.current[props.index] = el;\n }\n });\n });\n});\nconst useStyles$m = createUseStyles(theme => {\n return {\n comboBox: {\n display: 'inline-block',\n width: ({\n width\n }) => width,\n borderRadius: `4px`,\n border: `2px solid transparent`,\n outline: `1px solid transparent`,\n '&:focus-within, &:hover': {\n border: `2px solid ${theme.primaryAccentColor}`,\n outline: `1px solid #fff`\n }\n },\n listBox: {\n display: ({\n isOpen\n }) => isOpen ? 'block' : 'none',\n '&:focus-within': {\n outline: 'none'\n },\n border: '1px solid rgb(204, 204, 204)'\n },\n listBoxItem: {\n direction: ({\n rtl\n }) => rtl ? 'rtl' : 'ltr',\n paddingLeft: '10px'\n }\n };\n});\n\nfunction ComboBox({\n id,\n options,\n height,\n width = '100%',\n itemSize = 48,\n className,\n classes,\n filterOnChange = false,\n value: outsideValue = '',\n optionAlign = 'center',\n filter,\n onChange,\n rtl = false,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...rest\n}) {\n var _a;\n\n const comboBoxRef = useRef(null);\n const inputRef = useRef(null);\n const listBoxRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [value, setValue] = useState(outsideValue);\n const [currentOptions, setCurrentOptions] = useState(options);\n const [focusedIndex, setFocusedIndex] = useState(null);\n const [filterActive, setFilterActive] = useState(!filterOnChange); // the initial value of the input field when the listbox is opened (used to control whether the filter is active or not)\n\n const [valueOnOpen, setValueOnOpen] = useState(outsideValue);\n /** For preventing onChange being called on first render */\n\n const firstRender = useRef(true);\n const {\n comboBox,\n listBox,\n listBoxItem\n } = useStyles$m({\n isOpen,\n width,\n rtl\n });\n\n const closeListBox = () => {\n if (isOpen) {\n setIsOpen(false);\n }\n };\n\n const openListBox = () => {\n if (!isOpen) {\n setValueOnOpen(value);\n setIsOpen(true);\n }\n }; // close the listbox when the user clicks outside of it\n\n\n useOnFocusLeave(comboBoxRef, () => {\n closeListBox();\n setFocusedIndex(null);\n });\n\n const focusItem = index => {\n setFocusedIndex(index);\n }; // call onChange when value changes\n\n\n useEffect(() => {\n if (firstRender.current) {\n firstRender.current = false;\n } else {\n onChange === null || onChange === void 0 ? void 0 : onChange({\n value,\n target: inputRef.current\n });\n }\n }, [value]); // filter the current options if a filter is provided and filtering is active. If filtering is inactive, reset the current options to the original options\n\n useEffect(() => {\n if (filter && filterActive) {\n setCurrentOptions(options.filter(option => filter(option, value)));\n } else if (!filterActive) {\n setCurrentOptions(options);\n }\n }, [options, value, filter, filterActive]); // if filterOnChange is true, activate filtering if the value has changed since the listbox was opened, otherwise deactivate filtering\n\n useEffect(() => {\n if (filterOnChange) {\n setFilterActive(value !== valueOnOpen);\n }\n }, [filterOnChange, value, valueOnOpen]); // if the current value matches an option when the list opens, focus it and center it in the list\n\n useEffect(() => {\n var _a, _b;\n\n if (isOpen) {\n const matchingOption = currentOptions.find(option => option.label === value);\n\n if (matchingOption) {\n (_b = (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.listRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(currentOptions.indexOf(matchingOption), optionAlign // position the option in the list according to the alignment (default is `center`)\n );\n setFocusedIndex(currentOptions.indexOf(matchingOption));\n }\n }\n }, [isOpen, currentOptions, value, optionAlign]);\n useEffect(() => {\n setValue(outsideValue);\n }, [outsideValue]);\n\n const handleKeyDown = e => {\n var _a, _b, _c, _d, _e;\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Down':\n case 'ArrowUp':\n case 'Up':\n case 'PageDown':\n case 'PageUp':\n e.preventDefault();\n openListBox();\n\n if (!e.altKey) {\n focusNext(e.key, focusedIndex, currentOptions.length, numItemsVisible((_b = (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.outerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height, itemSize), focusItem);\n }\n\n break;\n\n case 'Escape':\n if (isOpen) {\n closeListBox();\n setFocusedIndex(null);\n } else {\n setValue('');\n }\n\n break;\n\n case 'Enter':\n e.preventDefault();\n\n if (isOpen) {\n if (focusedIndex !== null) {\n setValue((_e = (_d = (_c = listBoxRef.current) === null || _c === void 0 ? void 0 : _c.itemsRef.current) === null || _d === void 0 ? void 0 : _d[focusedIndex].textContent) !== null && _e !== void 0 ? _e : '');\n }\n\n closeListBox();\n setFocusedIndex(null);\n }\n\n break;\n }\n };\n\n const handleListBoxClick = () => {\n var _a;\n\n (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n closeListBox();\n };\n\n const activeDescendant = focusedIndex !== null && currentOptions[focusedIndex] ? `${id}-${currentOptions[focusedIndex].value}` : undefined;\n return React__default.createElement(\"div\", {\n className: classNames(comboBox, classes === null || classes === void 0 ? void 0 : classes.comboBox, className),\n ref: comboBoxRef,\n ...rest\n }, React__default.createElement(ComboBoxInputGroup, {\n ref: inputRef,\n className: classes === null || classes === void 0 ? void 0 : classes.inputGroup,\n height: height,\n rtl: rtl,\n value: value,\n isOpen: isOpen,\n \"aria-controls\": `${id}-listbox`,\n \"aria-autocomplete\": filter ? 'list' : 'none',\n \"aria-activedescendant\": activeDescendant,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n open: openListBox,\n close: closeListBox,\n onChange: e => setValue(e.target.value),\n onKeyDown: handleKeyDown\n }), React__default.createElement(VirtualizedListBox, {\n ref: listBoxRef,\n itemSize: itemSize,\n itemCount: currentOptions.length,\n className: classNames(listBox, classes === null || classes === void 0 ? void 0 : classes.listBox),\n focusedIndex: focusedIndex,\n width: (_a = comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,\n onChange: e => {\n var _a, _b;\n\n return setValue((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '');\n },\n onClick: handleListBoxClick,\n tabIndex: -1,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-activedescendant\": activeDescendant,\n\n /**\n * adding inline style to overwrite react-window inline styles as per their docs\n * https://github.com/bvaughn/react-window\n */\n style: {\n position: 'absolute'\n }\n }, ({\n index,\n style\n }) => React__default.createElement(ListBoxItem, {\n className: classNames(listBoxItem, classes === null || classes === void 0 ? void 0 : classes.listBoxItem),\n style: style,\n value: currentOptions[index].value,\n id: `${id}-${currentOptions[index].value}`,\n key: `${id}-${currentOptions[index].value}`\n }, currentOptions[index].label)));\n}\n/**\n * Visually Hidden CSS properties\n * @description common css-properties to visually hide text and available for screen-readers.\n * There may be times where the css-specificity may not be high enough for the class to be invoked,\n * Ergo, the use of `!important` which will help ensure the properties are applied at any specificity.\n * @example\n * // usage with `react-jss`\n * import visuallyHiddenProperties from './utils/visuallyHidden';\n *\n * const useStyles = createUseStyles({\n * srOnly: {...visuallyHiddenProperties}\n * })\n */\n\n\nvar visuallyHidden = {\n border: [[0], '!important'],\n\n /**\n * @desc for backwards compatibility\n * @deprecated\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip\n * @see https://caniuse.com/mdn-css_properties_clip\n */\n clip: ['rect(1px, 1px, 1px, 1px)', '!important'],\n\n /**\n * @desc future-proof version\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path\n * @see https://caniuse.com/css-clip-path\n */\n clipPath: ['inset(50%)', '!important'],\n height: ['1px', '!important'],\n margin: ['-1px', '!important'],\n overflow: ['hidden', '!important'],\n padding: [[0], '!important'],\n position: ['absolute', '!important'],\n width: ['1px', '!important'],\n\n /**\n * @desc preventing text to be condensed\n * @see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n */\n whiteSpace: ['nowrap', '!important']\n};\nconst useStyles$l = createUseStyles({\n srOnly: visuallyHidden\n});\n/** default element for the visually hidden component */\n\nconst DEFAULT_ELEMENT = 'span';\n/**\n * A component to have visually hidden text still available to Assistive\n * Technologies, such as screen-readers.\n * All HTML properties are available on the selected `element` tag used.\n */\n\nfunction VisuallyHidden({\n element: Tag = DEFAULT_ELEMENT,\n className,\n ...props\n}) {\n const {\n srOnly\n } = useStyles$l();\n return React__default.createElement(Tag, {\n className: classNames(srOnly, className),\n ...props\n });\n}\n\nconst useCalendarStyles = createUseStyles({\n calendarPickerWrapper: {\n width: ({\n width\n }) => width,\n height: ({\n height\n }) => height,\n border: '1px solid #CCCCCC',\n padding: '10px',\n background: '#FFFFFF',\n color: '#333333'\n },\n calendarControls: {\n display: 'flex',\n justifyContent: 'space-between',\n gap: '20px'\n },\n button: {\n border: 'none',\n borderRadius: 0,\n background: 'transparent',\n width: '60px',\n backgroundColor: '#FFFFFF',\n '&:hover': {\n backgroundColor: '#05467E',\n color: '#FFFFFF'\n }\n },\n comboboxWrapper: {\n display: 'flex',\n flexGrow: 1,\n '& > div': {\n width: '50%'\n }\n },\n monthWrapper: {\n display: 'grid',\n margin: '32px 0 0',\n gridTemplateColumns: `repeat(1, 100%)`,\n gridGap: '0 64px'\n }\n});\nconst useMonthStyles = createUseStyles({\n weekdayLabel: {\n textAlign: 'center',\n marginBottom: '10px',\n fontSize: '10px'\n },\n weekGrid: {\n display: 'grid',\n gridTemplateColumns: 'repeat(7, 1fr)',\n justifyContent: 'center'\n }\n});\nconst useDayStyles = createUseStyles({\n dayDefault: {\n padding: '8px',\n border: '1px solid #CCCCCC',\n borderRadius: '0',\n color: '#001217',\n backgroundColor: '#FFFFFF',\n '&:hover': {\n color: '#FFFFFF',\n backgroundColor: '#05467E',\n borderColor: '#05467E'\n }\n },\n daySelected: {\n color: '#FFFFFF',\n backgroundColor: '#71c9ed'\n },\n daySelectedFirstOrLast: {\n color: '#FFFFFF',\n backgroundColor: '#000000',\n borderColor: '#000000'\n },\n dayDisabled: {\n color: '#808285',\n backgroundColor: '#FFFFFF'\n }\n});\nconst COPY$9 = defineMessages({\n DAY_OF_MONTH: {\n id: 'Day.dayOfMonth',\n defaultMessage: '{dayInCalendar, date, full}',\n description: '[Type: label][Vis: high] - label for the full date'\n }\n});\n\nfunction Day({\n dayLabel,\n date,\n focusedDate,\n isDateSelected,\n isDateFocused,\n isDateHovered,\n onDateHover,\n onDateSelect,\n onDateFocus,\n isFirstOrLastSelectedDate\n}) {\n const dayRef = useRef(null);\n\n const fn = () => false;\n\n const {\n isSelected,\n isSelectedStartOrEnd,\n isWithinHoverRange,\n disabledDate,\n onClick,\n onKeyDown,\n onMouseEnter,\n tabIndex\n } = Ne({\n date,\n focusedDate,\n isDateFocused,\n isDateSelected,\n isDateHovered,\n isDateBlocked: fn,\n isFirstOrLastSelectedDate,\n onDateFocus,\n onDateSelect,\n onDateHover,\n dayRef\n });\n useEffect(() => {\n if (dayRef && dayRef.current && isDateFocused(date)) {\n dayRef.current.focus();\n }\n }, [dayRef, date, isDateFocused]);\n const {\n dayDefault,\n daySelected,\n daySelectedFirstOrLast,\n dayDisabled\n } = useDayStyles();\n\n if (!dayLabel) {\n return React__default.createElement(\"div\", null);\n }\n\n return React__default.createElement(\"button\", {\n onClick: onClick,\n onKeyDown: onKeyDown,\n onMouseEnter: onMouseEnter,\n tabIndex: tabIndex,\n type: \"button\",\n ref: dayRef,\n \"aria-label\": t(COPY$9.DAY_OF_MONTH, {\n dayInCalendar: date\n }),\n className: classNames(dayDefault, {\n [daySelected]: isSelected || isWithinHoverRange,\n [daySelectedFirstOrLast]: isSelectedStartOrEnd,\n [dayDisabled]: disabledDate\n })\n }, dayLabel);\n}\n\nconst COPY$8 = defineMessages({\n DAY_OF_WEEK_LEGEND_SHORT: {\n id: 'Month.dayOfWeekLegendShort',\n defaultMessage: '{dayOfTheWeek, select, Mo {Mo} Tu {Tu} We {We} Th {Th} Fr {Fr} Sa {Sa} Su {Su}}',\n description: '[Type: label][Vis: high] - label for the day of the week in shorthand'\n },\n DAY_OF_WEEK_LEGEND_FULL: {\n id: 'Month.dayOfWeekLegendLong',\n defaultMessage: '{dayOfTheWeek, select, Mo {Monday} Tu {Tuesday} We {Wednesday} Th {Thursday} Fr {Friday} Sa {Saturday} Su {Sunday}}',\n description: '[Type: label][Vis: high] - label for the day of the week'\n }\n});\n\nfunction Month({\n year,\n month,\n firstDayOfWeek,\n ...dayProps\n}) {\n const {\n days,\n weekdayLabels\n } = de({\n year,\n month,\n firstDayOfWeek\n });\n const {\n weekdayLabel,\n weekGrid\n } = useMonthStyles();\n return React__default.createElement(\"div\", null, React__default.createElement(\"div\", {\n className: weekGrid,\n id: \"dayGrid\",\n role: \"grid\"\n }, weekdayLabels.map(dayLabel => React__default.createElement(\"div\", {\n className: weekdayLabel,\n key: dayLabel,\n role: \"columnheader\"\n }, React__default.createElement(\"span\", {\n role: \"presentation\"\n }, React__default.createElement(T, {\n desc: COPY$8.DAY_OF_WEEK_LEGEND_SHORT,\n values: {\n dayOfTheWeek: dayLabel\n }\n })), React__default.createElement(VisuallyHidden, null, React__default.createElement(T, {\n desc: COPY$8.DAY_OF_WEEK_LEGEND_FULL,\n values: {\n dayOfTheWeek: dayLabel\n }\n })))), days.map((day, index) => {\n if (typeof day === 'object') {\n return React__default.createElement(Day, {\n date: day.date,\n key: day.dayLabel,\n dayLabel: day.dayLabel,\n ...dayProps\n });\n }\n\n const emptyDayKey = `empty-day-${index}`;\n return React__default.createElement(\"div\", {\n key: emptyDayKey\n });\n })));\n}\n\nconst COPY$7 = defineMessages({\n PREVIOUS_MONTH: {\n id: 'CalendarPicker.previousMonth',\n defaultMessage: 'Previous Month',\n description: '[Type: button][Vis: high] - button label to go to previous month'\n },\n NEXT_MONTH: {\n id: 'CalendarPicker.nextMonth',\n defaultMessage: 'Next Month',\n description: '[Type: button][Vis: high] - button label to go to next month'\n },\n MONTH_SELECT: {\n id: 'CalendarPicker.month',\n defaultMessage: 'Select a month',\n description: '[Type: label][Vis: high] - label for month selection combo box'\n },\n YEAR_SELECT: {\n id: 'CalendarPicker.year',\n defaultMessage: 'Select a year',\n description: '[Type: label][Vis: high] - label for year selection combo box'\n },\n MONTHS: {\n id: 'CalendarPicker.months',\n defaultMessage: '{months, select, January {January} February {February} March {March} April {April} May {May} June {June} July {July} August {August} September {September} October {October} November {November} December {December}}',\n description: '[Type: label][Vis: high] - label for the months'\n }\n});\nconst startingYear = new Date().getFullYear() - 200;\nconst yearOptions = [...Array(251)].map((_, year) => ({\n label: `${startingYear + year}`,\n value: `${startingYear + year}`\n}));\n\nfunction getPreviousMonth(currentMonth) {\n let newDate;\n\n if (currentMonth.getMonth() - 1 < 0) {\n newDate = new Date(currentMonth.getFullYear() - 1, 11, currentMonth.getDate());\n } else {\n const prevMonthLastDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 0).getDate();\n\n if (currentMonth.getDate() > prevMonthLastDay) {\n newDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, prevMonthLastDay);\n } else {\n newDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, currentMonth.getDate());\n }\n }\n\n return newDate;\n}\n\nfunction getNextMonth(currentMonth) {\n let newDate;\n\n if (currentMonth.getMonth() + 1 > 11) {\n newDate = new Date(currentMonth.getFullYear() + 1, 0, currentMonth.getDate());\n } else {\n const nextMonthLastDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 2, 0).getDate();\n\n if (currentMonth.getDate() > nextMonthLastDay) {\n newDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, nextMonthLastDay);\n } else {\n newDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, currentMonth.getDate());\n }\n }\n\n return newDate;\n}\n\nconst comboBoxSeedId = 'calendar-picker-combobox';\n\nfunction CalendarPicker({\n onDaySelect,\n onDateChange,\n initialSelectedDate = new Date(),\n width = '300px',\n height = 'auto',\n startingDayOfWeek = 0\n}) {\n const focusTrapRef = useFocusTrap({\n selectors: ['button:not([tabindex=\"-1\"])', 'input']\n });\n const comboboxId = useMemo(() => uniqueId(comboBoxSeedId), []);\n const selectId = useMemo(() => uniqueId('calendar-picker-select'), []);\n const [state, setState] = useState(initialSelectedDate);\n\n const handleDateChange = ({\n startDate\n }) => {\n const d = startDate !== null && startDate !== void 0 ? startDate : new Date();\n setState(d);\n onDaySelect === null || onDaySelect === void 0 ? void 0 : onDaySelect(d);\n };\n\n const {\n firstDayOfWeek,\n activeMonths,\n isDateSelected,\n isDateHovered,\n isFirstOrLastSelectedDate,\n isDateFocused,\n focusedDate,\n onDateHover,\n onDateSelect,\n onDateFocus,\n goToDate\n } = Ye({\n startDate: state,\n endDate: null,\n focusedInput: Pe,\n onDatesChange: handleDateChange,\n numberOfMonths: 1,\n\n /*\n * minBookingDays and exactBookingDays are used to remove the date range feature\n * see: https://github.com/tomgreenwood1/react-datepicker/tree/f2b1969cb4808c68d578428c4c5e6ed98c96461e/packages/hooks#exactminbookingdays-boolean--undefined-default-false\n */\n minBookingDays: 1,\n exactMinBookingDays: true,\n\n /*\n * firstDayofWeek is used to set the first day of the week. 0 = Sunday, 1 = Monday, etc.\n */\n firstDayOfWeek: startingDayOfWeek\n });\n const currentMonth = activeMonths[0];\n const {\n comboboxWrapper,\n calendarControls,\n calendarPickerWrapper,\n button,\n monthWrapper\n } = useCalendarStyles({\n height,\n width\n }); // populate monthOptions array\n\n const monthNames = [t(COPY$7.MONTHS, {\n months: 'January'\n }), t(COPY$7.MONTHS, {\n months: 'February'\n }), t(COPY$7.MONTHS, {\n months: 'March'\n }), t(COPY$7.MONTHS, {\n months: 'April'\n }), t(COPY$7.MONTHS, {\n months: 'May'\n }), t(COPY$7.MONTHS, {\n months: 'June'\n }), t(COPY$7.MONTHS, {\n months: 'July'\n }), t(COPY$7.MONTHS, {\n months: 'August'\n }), t(COPY$7.MONTHS, {\n months: 'September'\n }), t(COPY$7.MONTHS, {\n months: 'October'\n }), t(COPY$7.MONTHS, {\n months: 'November'\n }), t(COPY$7.MONTHS, {\n months: 'December'\n })];\n const monthOptions = monthNames.map(name => ({\n label: name,\n value: name\n }));\n\n const getMonthLabel = monthNamesIndex => {\n return monthNames[monthNamesIndex];\n };\n\n const handleMonthChange = e => {\n const monthIndex = monthOptions.findIndex(i => i.value === e.target.value);\n const newDate = new Date(currentMonth.year, monthIndex, state.getDate());\n\n if (monthIndex !== -1) {\n goToDate(newDate);\n setState(newDate);\n onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newDate);\n }\n };\n\n const handleYearChange = e => {\n if (e.value.length >= 4) {\n const newDate = new Date(parseInt(e.value, 10), currentMonth.month, state.getDate());\n goToDate(newDate);\n setState(newDate);\n onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newDate);\n }\n };\n\n const handleGoToPreviousMonths = () => {\n const newDate = getPreviousMonth(state);\n setState(newDate);\n goToDate(newDate);\n onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newDate);\n };\n\n const handleGoToNextMonths = () => {\n const newDate = getNextMonth(state);\n setState(newDate);\n goToDate(newDate);\n onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newDate);\n };\n\n return React__default.createElement(\"div\", {\n className: calendarPickerWrapper,\n \"data-testid\": \"CalendarPicker\",\n ref: focusTrapRef\n }, React__default.createElement(\"div\", {\n className: calendarControls\n }, React__default.createElement(\"button\", {\n type: \"button\",\n onClick: handleGoToPreviousMonths,\n className: button,\n \"aria-label\": t(COPY$7.PREVIOUS_MONTH),\n \"data-testid\": \"previous-month-button\"\n }, React__default.createElement(CaretLeftOutlineIcon, null)), React__default.createElement(\"div\", {\n className: comboboxWrapper\n }, React__default.createElement(\"div\", null, React__default.createElement(NativeSelect, {\n id: selectId,\n value: getMonthLabel(currentMonth.month),\n onChange: handleMonthChange\n }, monthOptions.map(option => React__default.createElement(SelectAnswerOption, {\n value: option.value,\n label: option.value,\n key: option.value\n })))), React__default.createElement(\"div\", null, React__default.createElement(ComboBox, {\n id: comboboxId,\n \"aria-label\": t(COPY$7.YEAR_SELECT),\n options: yearOptions,\n value: currentMonth.year.toString(),\n onChange: handleYearChange\n }))), React__default.createElement(\"button\", {\n type: \"button\",\n onClick: handleGoToNextMonths,\n className: button,\n \"aria-label\": t(COPY$7.NEXT_MONTH),\n \"data-testid\": \"next-month-button\"\n }, React__default.createElement(CaretRightOutlineIcon, null))), React__default.createElement(\"div\", {\n className: monthWrapper\n }, React__default.createElement(Month, {\n year: currentMonth.year,\n month: currentMonth.month,\n firstDayOfWeek: firstDayOfWeek,\n onChange: goToDate,\n focusedDate: focusedDate,\n isDateSelected: isDateSelected,\n isDateFocused: isDateFocused,\n isDateHovered: isDateHovered,\n onDateHover: onDateHover,\n onDateSelect: onDateSelect,\n onDateFocus: onDateFocus,\n isFirstOrLastSelectedDate: isFirstOrLastSelectedDate\n })));\n}\n\nconst useStyles$k = createUseStyles({\n container: {\n visibility: ({\n calendarVisibility\n }) => {\n return calendarVisibility ? 'visible' : 'hidden';\n }\n }\n});\nconst DisclosureContainer = forwardRef(function DisclosureContainer({\n onClose,\n visible = false,\n className,\n ...props\n}, ref) {\n const focusTrapRef = useFocusTrap({\n selectors: ['button:not([tabindex=\"-1\"])', 'input']\n });\n const disclosureRef = useForkRef(focusTrapRef, ref);\n useEffect(() => {\n const handleKeyDown = e => {\n if (e.key === 'Escape') {\n onClose === null || onClose === void 0 ? void 0 : onClose();\n }\n };\n\n const handleClick = e => {\n var _a;\n\n const target = e.target;\n const clickedOutside = !((_a = focusTrapRef.current) === null || _a === void 0 ? void 0 : _a.contains(target));\n const comboBoxOptionClicked = !target.id.startsWith(comboBoxSeedId);\n\n if (visible && clickedOutside && comboBoxOptionClicked) {\n onClose === null || onClose === void 0 ? void 0 : onClose();\n }\n };\n\n if (visible) {\n /*\n * RAWR-1437\n * Delay setting up the EventListener to after the current render, otherwise the handleClick triggers\n * when the calendar first opens and closes the calendar right away.\n */\n setTimeout(() => {\n document.addEventListener('keydown', handleKeyDown);\n document.addEventListener('click', handleClick);\n }, 0);\n } else {\n document.removeEventListener('keydown', handleKeyDown);\n document.removeEventListener('click', handleClick);\n }\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n document.removeEventListener('click', handleClick);\n }; // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [visible]);\n const {\n container\n } = useStyles$k({\n calendarVisibility: visible\n });\n return React__default.createElement(\"div\", {\n ref: disclosureRef,\n className: classNames(container, className),\n ...props\n });\n}); // constants.ts\n\nconst US_DATE_FORMAT = 'MM/DD/YYYY';\nconst EURO_DATE_FORMAT = 'DD/MM/YYYY';\n\nconst validDateStringCheck = dateString => {\n const badValues = ['0', ' '];\n const isValid = dateString.every(value => {\n // eslint-disable-next-line no-restricted-globals\n return badValues.indexOf(value) === -1 && !isNaN(parseInt(value, 10));\n });\n return dateString.length === 3 && isValid;\n};\n\nconst toDateString = (date, format = US_DATE_FORMAT) => {\n if (!date) {\n return '';\n }\n\n const segments = date.toISOString().split('T')[0].split('-');\n const [y, m, d] = segments.map(s => s);\n\n if (format === US_DATE_FORMAT) {\n return `${m}/${d}/${y}`;\n }\n\n return `${d}/${m}/${y}`;\n};\n\nconst stringToDate = (dateString, format = US_DATE_FORMAT) => {\n if (!dateString) {\n return new Date();\n }\n\n if (!validDateStringCheck(dateString.split('/'))) {\n return new Date();\n }\n\n if (format === EURO_DATE_FORMAT) {\n const [d, m, y] = dateString.split('/');\n return new Date(`${y.padStart(4, '0')}-${m.padStart(2, '0')}-${d.padStart(2, '0')}T00:00:00`);\n }\n\n const [m, d, y] = dateString.split('/');\n return new Date(`${y.padStart(4, '0')}-${m.padStart(2, '0')}-${d.padStart(2, '0')}T00:00:00`);\n};\n\nconst useStyles$j = createUseStyles(theme => {\n return {\n container: {\n position: 'relative'\n },\n dateInputWrapper: {\n display: 'flex',\n alignItems: 'center'\n },\n dateInput: {\n maxWidth: '175px',\n maxHeight: '36px',\n padding: '6px 36px 6px 6px'\n },\n calendarButton: {\n borderRadius: 'none',\n border: 'none',\n marginLeft: '-37px',\n height: '34px',\n width: '36px',\n fontSize: '15px',\n color: '#404040',\n backgroundColor: '#EFEFEF',\n '&:focus, &:hover': {\n cursor: 'pointer',\n outline: `2px solid ${theme.primaryAccentColor}`,\n background: 'linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 30%, #EFEFEF 100%)'\n },\n '&:focus': {\n borderRadius: '3px'\n },\n '&:active': {\n background: 'linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 30%, #EFEFEF 100%)'\n },\n '&:disabled': {\n opacity: '.5'\n }\n },\n calendarWrapper: {\n position: 'absolute',\n bottom: ({\n calendarPosition\n }) => calendarPosition,\n zIndex: 100\n },\n commentLabel: {\n fontWeight: theme.questionBody.fontWeight,\n fontFamily: theme.questionBody.fontFamily,\n marginBottom: 5,\n display: 'block',\n fontSize: '14px'\n }\n };\n});\nconst COPY$6 = defineMessages({\n DATE_LABEL: {\n id: 'DateInput.dateLabel',\n defaultMessage: 'Date',\n description: '[Type: label][Vis: high] - label for date input'\n },\n DATE_BUTTON_LABEL: {\n id: 'DateInput.dateButton',\n defaultMessage: 'Open calendar',\n description: '[Type: button][Vis: high] - aria text for opening the calendar picker'\n }\n});\n\nfunction DateInput({\n onChange,\n dateFormat = US_DATE_FORMAT,\n value,\n defaultValue,\n id,\n className,\n required,\n 'aria-describedby': ariaDescribedBy\n}) {\n const [calendarVisibility, setCalendarVisibility] = useState(false);\n const dateInputID = useMemo(() => uniqueId('date-input-'), []);\n const inputRef = useRef(null);\n const calendarButtonRef = useRef(null);\n const disclosureRef = useRef(null);\n const calendarPosition = useRef('100%');\n useSSRSafeLayoutEffect(() => {\n if (inputRef.current && disclosureRef.current) {\n const inputBound = inputRef.current.getBoundingClientRect();\n const disclosureBound = disclosureRef.current.getBoundingClientRect();\n\n if (inputBound.top < disclosureBound.height) {\n // not enough space\n calendarPosition.current = 'auto';\n } else {\n calendarPosition.current = '100%';\n }\n }\n }, [calendarVisibility]);\n const lastFocus = useRef(null);\n\n const handleCalendarVisibility = () => {\n lastFocus.current = document.activeElement;\n setCalendarVisibility(s => {\n return !s;\n });\n };\n\n const handleDisclosureClose = () => {\n var _a;\n\n (_a = lastFocus.current) === null || _a === void 0 ? void 0 : _a.focus();\n setCalendarVisibility(false);\n };\n\n const handleDaySelect = date => {\n const dateString = toDateString(date, dateFormat);\n onChange === null || onChange === void 0 ? void 0 : onChange(dateString);\n handleDisclosureClose();\n };\n\n const handleInputChange = e => {\n onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);\n };\n\n const {\n dateInput,\n calendarButton,\n calendarWrapper,\n commentLabel,\n dateInputWrapper,\n container\n } = useStyles$j({\n calendarPosition: calendarPosition.current\n });\n return React__default.createElement(\"div\", {\n className: classNames(container, className),\n id: id\n }, React__default.createElement(\"label\", {\n htmlFor: dateInputID,\n className: commentLabel\n }, React__default.createElement(T, {\n desc: COPY$6.DATE_LABEL\n })), React__default.createElement(\"div\", {\n className: dateInputWrapper\n }, React__default.createElement(TextInput$1, {\n \"data-testid\": \"DateInput\",\n className: dateInput,\n maxLength: 10,\n onChange: handleInputChange,\n defaultValue: defaultValue,\n value: value,\n ref: inputRef,\n placeholder: dateFormat,\n id: dateInputID,\n \"aria-describedby\": ariaDescribedBy,\n required: required\n }), React__default.createElement(\"button\", {\n type: \"button\",\n ref: calendarButtonRef,\n className: calendarButton,\n onClick: handleCalendarVisibility,\n \"aria-expanded\": calendarVisibility,\n \"aria-label\": t(COPY$6.DATE_BUTTON_LABEL)\n }, React__default.createElement(CalendarIcon, null))), React__default.createElement(DisclosureContainer, {\n className: calendarWrapper,\n onClose: handleDisclosureClose,\n ref: disclosureRef,\n visible: calendarVisibility,\n \"data-testid\": \"DisclosureContainer\"\n }, React__default.createElement(CalendarPicker, {\n onDaySelect: handleDaySelect,\n initialSelectedDate: stringToDate(value, dateFormat)\n })));\n}\n\nconst useStyles$i = createUseStyles(theme => ({\n container: {\n display: 'flex'\n },\n inputContainer: {\n display: 'flex',\n flexWrap: 'wrap'\n },\n label: {\n fontSize: '14px',\n fontWeight: theme.questionBody.fontWeight,\n fontFamily: theme.questionBody.fontFamily,\n width: '100%',\n display: 'block',\n marginBottom: '5px'\n },\n input: {\n /**\n * including specific height and width values to match production\n */\n maxWidth: '50px',\n maxHeight: '36px',\n textAlign: 'center'\n },\n separator: {\n width: '20px',\n height: '36px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n srOnly: { ...visuallyHidden\n }\n}));\nconst COPY$5 = defineMessages({\n TIME_LABEL: {\n id: 'TimeInput.timeLabel',\n defaultMessage: 'Time',\n description: '[Type: label][Vis: high] - label for time input'\n },\n HOUR_LABEL: {\n id: 'TimeInput.hour',\n defaultMessage: 'Hour',\n description: '[Type: label][Vis: high] - label for hour input'\n },\n MINUTES_LABEL: {\n id: 'TimeInput.minutes',\n defaultMessage: 'Minutes',\n description: '[Type: label][Vis: high] - label for minutes input'\n },\n DAYTIME_LABEL: {\n id: 'TimeInput.daytimeLabel',\n defaultMessage: 'AM/PM',\n description: '[Type: label][Vis: high] - label for daytime AM/PM select'\n },\n AM: {\n id: 'TimeInput.am',\n defaultMessage: 'AM',\n description: '[Type: label][Vis: high] - label for ante meridiem'\n },\n PM: {\n id: 'TimeInput.pm',\n defaultMessage: 'PM',\n description: '[Type: label][Vis: high] - label for post meridiem'\n }\n});\n\nfunction TimeInput({\n onChange,\n defaultValue = {\n hour: '',\n minute: '',\n period: 'AM'\n },\n id = uniqueId('TimeInput-'),\n className,\n required,\n 'aria-describedby': ariaDescribedBy\n}) {\n const [state, setState] = useState(defaultValue);\n const timeLabelID = `${id}-time-label`;\n const hourLabelID = `${id}-hour-label`;\n const hourInputID = `${id}-hour-input`;\n const minuteLabelID = `${id}-minute-label`;\n const minuteInputID = `${id}-minute-input`;\n const periodLabelID = `${id}-period-label`;\n const periodSelectID = `${id}-period-input`;\n\n const handleHourChange = e => {\n const newState = { ...state,\n hour: e.target.value\n }; // if hour is > 12, set daytime period to PM\n\n if (!Number.isNaN(parseInt(newState.hour, 10)) && parseInt(newState.hour, 10) > 12) {\n newState.period = 'PM';\n }\n\n if (!newState.period) {\n newState.period = 'AM';\n }\n\n setState(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const handleHourOnBlur = e => {\n const newState = { ...state\n }; // if hour is > 12, subtract 12 from the hour value to maintain 12 hour time\n\n if (!Number.isNaN(parseInt(e.target.value, 10)) && parseInt(e.target.value, 10) > 12) {\n newState.hour = String(parseInt(e.target.value, 10) - 12);\n setState(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n }\n };\n\n const handleMinuteChange = e => {\n const newState = { ...state,\n minute: e.target.value\n };\n setState(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const handleSelectChange = e => {\n const newState = { ...state,\n period: e.target.value\n };\n setState(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const {\n container,\n inputContainer,\n input,\n label,\n separator,\n srOnly\n } = useStyles$i();\n return React__default.createElement(\"div\", {\n className: classNames(container, className),\n id: id,\n \"data-testid\": \"TimeInput\"\n }, React__default.createElement(\"div\", {\n className: inputContainer\n }, React__default.createElement(\"div\", {\n className: label,\n id: timeLabelID\n }, React__default.createElement(T, {\n desc: COPY$5.TIME_LABEL\n })), React__default.createElement(\"label\", {\n htmlFor: hourInputID,\n id: hourLabelID,\n \"aria-labelledby\": `${timeLabelID} ${hourLabelID}`,\n className: srOnly\n }, React__default.createElement(T, {\n desc: COPY$5.HOUR_LABEL\n })), React__default.createElement(TextInput$1, {\n className: input,\n maxLength: 2,\n onChange: handleHourChange,\n onBlur: handleHourOnBlur,\n value: state.hour,\n placeholder: \"hh\",\n id: hourInputID,\n required: required,\n \"aria-describedby\": ariaDescribedBy\n }), React__default.createElement(\"span\", {\n className: separator\n }, \":\"), React__default.createElement(\"label\", {\n htmlFor: minuteInputID,\n id: minuteLabelID,\n \"aria-labelledby\": `${timeLabelID} ${minuteLabelID}`,\n className: srOnly\n }, React__default.createElement(T, {\n desc: COPY$5.MINUTES_LABEL\n })), React__default.createElement(TextInput$1, {\n className: input,\n maxLength: 2,\n onChange: handleMinuteChange,\n value: state.minute,\n placeholder: \"mm\",\n id: minuteInputID,\n \"aria-labelledby\": `${timeLabelID} ${minuteLabelID}`,\n required: required,\n \"aria-describedby\": ariaDescribedBy\n })), React__default.createElement(\"div\", null, React__default.createElement(\"label\", {\n id: periodLabelID,\n htmlFor: periodSelectID,\n className: label\n }, React__default.createElement(T, {\n desc: COPY$5.DAYTIME_LABEL\n })), React__default.createElement(NativeSelect, {\n id: periodSelectID,\n value: state.period,\n onChange: handleSelectChange,\n required: required\n }, React__default.createElement(SelectAnswerOption, {\n value: \"AM\",\n label: t(COPY$5.AM)\n }), React__default.createElement(SelectAnswerOption, {\n value: \"PM\",\n label: t(COPY$5.PM)\n }))));\n}\n\nconst useStyles$h = createUseStyles(theme => {\n const {\n fontSize,\n fontFamily,\n fontWeight\n } = theme.questionBody;\n return {\n container: {\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '7px',\n color: theme.answerColor\n },\n label: {\n fontSize,\n fontFamily,\n fontWeight,\n color: theme.questionColor,\n marginBottom: '14px'\n },\n inputContainer: {\n display: 'flex',\n gap: '35px',\n [`@media (max-width: ${theme.breakpoints.sm.min})`]: {\n flexDirection: 'column',\n gap: '5px'\n }\n },\n inlineErrorContainer: {\n padding: '10px 0',\n fontSize: '16px',\n fontWeight: theme.questionBody.fontWeight,\n fontFamily: theme.questionBody.fontFamily,\n '& ul': {\n padding: 0,\n margin: 0\n },\n '& ul li': {\n paddingBottom: '0.2rem',\n listStyle: 'none',\n '&:before': {\n content: '\"*\"',\n marginRight: '5px'\n }\n }\n }\n };\n});\nconst COPY$4 = defineMessages({\n ERROR_PROVIDE_DATE_INTL_FORMAT: {\n id: 'DateTime.errorProvideDateIntlFormat',\n defaultMessage: 'Please provide date in dd/mm/yyyy format.',\n description: '[Type: label][Vis: high] - label for incorrect or missing date error'\n },\n ERROR_PROVIDE_DATE_US_FORMAT: {\n id: 'DateTime.errorProvideDateUsFormat',\n defaultMessage: 'Please provide date in mm/dd/yyyy format.',\n description: '[Type: label][Vis: high] - label for incorrect or missing date error'\n },\n ERROR_ENTER_HOURS: {\n id: 'DateTime.errorEnterHours',\n defaultMessage: 'Please enter hours from 0 to 12.',\n description: '[Type: label][Vis: high] - label for incorrect or missing hour input'\n },\n ERROR_ENTER_MINUTES: {\n id: 'DateTime.errorEnterMinutes',\n defaultMessage: 'Please enter minutes from 0 to 59.',\n description: '[Type: label][Vis: high] - label for incorrect or missing minute input'\n },\n ERROR_SELECT_PERIOD: {\n id: 'DateTime.errorSelectPeriod',\n defaultMessage: 'Please select AM/PM.',\n description: '[Type: label][Vis: high] - label for incorrect or missing period selection'\n }\n});\n\nfunction DateTime({\n id: questionId,\n required,\n choices = [],\n responses = [],\n showDate = true,\n showTime = true,\n onChange,\n inlineErrors = [],\n ...questionFieldProps\n}) {\n const [responseValues, setResponseValues] = useState(responses);\n const errorId = createErrorId(questionId);\n /** Translation keys may change so this separates the key from the message */\n\n const errorMessage = useMemo(() => {\n return {\n ERROR_PROVIDE_DATE_INTL_FORMAT: t(COPY$4.ERROR_PROVIDE_DATE_INTL_FORMAT),\n ERROR_PROVIDE_DATE_US_FORMAT: t(COPY$4.ERROR_PROVIDE_DATE_US_FORMAT),\n ERROR_ENTER_HOURS: t(COPY$4.ERROR_ENTER_HOURS),\n ERROR_ENTER_MINUTES: t(COPY$4.ERROR_ENTER_MINUTES),\n ERROR_SELECT_PERIOD: t(COPY$4.ERROR_SELECT_PERIOD)\n };\n }, []);\n\n const getDateValueById = id => {\n const choice = responseValues.find(item => item.id === id);\n return choice === null || choice === void 0 ? void 0 : choice.value.date;\n };\n\n const getTimeValueById = id => {\n const choice = responseValues.find(item => item.id === id);\n return {\n hour: choice === null || choice === void 0 ? void 0 : choice.value.hour,\n minute: choice === null || choice === void 0 ? void 0 : choice.value.minute,\n period: choice === null || choice === void 0 ? void 0 : choice.value.period\n };\n };\n\n const handleDateChange = (id, date) => {\n var _a;\n\n const newState = responseValues.filter(r => r.id !== id);\n const prevState = (_a = responseValues.find(r => r.id === id)) !== null && _a !== void 0 ? _a : {\n id,\n value: {\n date: '',\n hour: '',\n minute: '',\n period: 'AM'\n }\n };\n\n if (date) {\n const newResponse = {\n id,\n value: { ...prevState.value,\n date\n }\n };\n newState.push(newResponse);\n }\n\n setResponseValues(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const handleTimeChange = (id, time) => {\n var _a;\n\n const newState = responseValues.filter(r => r.id !== id);\n const prevState = (_a = responseValues.find(r => r.id === id)) !== null && _a !== void 0 ? _a : {\n id,\n value: {\n date: '',\n hour: '',\n minute: '',\n period: 'AM'\n }\n };\n\n if (time) {\n const newResponse = {\n id,\n value: { ...prevState.value,\n ...time\n }\n };\n newState.push(newResponse);\n }\n\n setResponseValues(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const {\n container,\n label,\n inputContainer,\n inlineErrorContainer\n } = useStyles$h();\n return React__default.createElement(QuestionField, {\n id: questionId,\n \"data-testid\": \"DateTimeQuestionType\",\n ...questionFieldProps\n }, choices === null || choices === void 0 ? void 0 : choices.map(choice => {\n return React__default.createElement(\"div\", {\n className: container,\n key: choice.id,\n id: choice.id\n }, React__default.createElement(\"div\", {\n className: label\n }, choice.label), React__default.createElement(\"div\", {\n className: inputContainer\n }, showDate && React__default.createElement(DateInput, {\n onChange: date => handleDateChange(choice.id, date),\n value: getDateValueById(choice.id),\n required: required,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined\n }), showTime && React__default.createElement(TimeInput, {\n onChange: time => handleTimeChange(choice.id, time),\n defaultValue: getTimeValueById(choice.id),\n required: required\n })), inlineErrors.length > 0 && React__default.createElement(\"div\", {\n className: inlineErrorContainer\n }, React__default.createElement(\"ul\", null, inlineErrors.filter(e => e.fieldId === choice.id).map(error => React__default.createElement(\"li\", {\n key: `${error.fieldId}-${error.detail}`\n }, errorMessage[error.detail])))));\n }));\n}\n\nvar DateTime$1 = withErrorBoundary(DateTime);\nconst useStyles$g = createUseStyles(theme => {\n var _a;\n\n const defaultFontSize = theme.fontSize.body;\n const {\n fontFamily = 'inherit',\n fontWeight = 'inherit',\n fontStyle = 'inherit',\n textDecoration = 'inherit',\n highlightColor = 'inherit',\n color = 'inherit'\n } = (_a = theme.questionBody) !== null && _a !== void 0 ? _a : {};\n return {\n otherStyles: {\n marginTop: '5px',\n display: 'block'\n },\n hiddenInput: {\n display: 'none'\n },\n commentChoice: {\n marginTop: 10\n },\n label: {\n display: 'block',\n marginTop: '10px',\n position: 'relative',\n fontFamily,\n fontWeight,\n fontStyle,\n textDecoration,\n highlightColor,\n color,\n fontSize: defaultFontSize\n }\n };\n});\n/**\n * MultipleChoice Question Type (Tier 2)\n */\n\nfunction Dropdown({\n id: questionId,\n disabled,\n required: _required,\n readOnly: _readOnly,\n choices = [],\n choiceOther,\n choiceComment,\n responses: defaultResponses = [],\n onChange,\n ...fieldProps\n}) {\n const errorId = createErrorId(questionId);\n /** Filter choices that exist and are visible */\n\n const {\n options,\n sortableOptions,\n otherOption,\n commentOption\n } = useQuestionChoices([...choices, choiceOther, choiceComment]);\n const [responseValue, setResponseValue] = useState(defaultResponses);\n const {\n otherStyles,\n hiddenInput,\n commentChoice\n } = useStyles$g();\n /**\n * Default value by id\n * used for text-input based choices\n */\n\n const getDefaultValueById = id => {\n const defaultChoice = defaultResponses.find(c => c.id === id);\n return defaultChoice === null || defaultChoice === void 0 ? void 0 : defaultChoice.value;\n };\n /**\n * Default value for the choices\n */\n\n\n const defaultValue = useMemo(() => {\n var _a;\n\n return (_a = defaultResponses.find(c => c.type !== 'COMMENT')) === null || _a === void 0 ? void 0 : _a.id; // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n /**\n * Other Answer Textfield state\n */\n\n const [otherText, setOtherText] = useState(otherOption && getDefaultValueById(otherOption.id) || '');\n\n const handleSelectChange = e => {\n const choiceData = options.find(c => c.id === e.target.value);\n const responses = responseValue.filter(c => c.type === 'COMMENT');\n\n if (choiceData) {\n const {\n id,\n type\n } = choiceData;\n\n if (type === 'ANSWER') {\n /** Want to update the value with the value of the TextField texts, when otherAnswer is selected */\n responses.push({\n id,\n type,\n value: otherText\n });\n } else {\n responses.push({\n id,\n type,\n value: e.target.value\n });\n }\n }\n\n setResponseValue(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n /**\n * Other Answer Textfield Change\n */\n\n\n const handleTextChange = e => {\n const choiceData = options.find(c => c.type === 'ANSWER');\n const responses = responseValue.filter(c => c.type === 'COMMENT');\n\n if (choiceData) {\n const {\n id,\n type\n } = choiceData;\n responses.push({\n id,\n type,\n value: e.target.value\n });\n setOtherText(e.target.value);\n }\n\n setResponseValue(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n\n const handleCommentChange = e => {\n const choiceData = options.find(c => c.id === e.target.id);\n const responses = responseValue.filter(c => c.type !== 'COMMENT');\n\n if (choiceData && !!e.target.value) {\n const {\n id,\n type\n } = choiceData;\n responses.push({\n id,\n type,\n value: e.target.value\n });\n }\n\n setResponseValue(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n\n const isOtherAnswerSelected = !!responseValue.find(c => c.type === 'ANSWER');\n const multipleTextLines = otherOption && (otherOption === null || otherOption === void 0 ? void 0 : otherOption.linesCount) > 1;\n return React__default.createElement(QuestionField, {\n id: questionId,\n errorId: errorId,\n \"data-testid\": \"DropdownQuestionType\",\n ...fieldProps\n }, React__default.createElement(NativeSelect, {\n defaultValue: defaultValue,\n disabled: disabled,\n onChange: handleSelectChange\n }, React__default.createElement(SelectAnswerOption, {\n value: undefined\n }), \" \", sortableOptions === null || sortableOptions === void 0 ? void 0 : sortableOptions.map(choice => {\n return React__default.createElement(SelectAnswerOption, {\n key: choice.id,\n id: choice.id,\n label: choice.label,\n value: choice.id\n });\n }), otherOption && React__default.createElement(SelectAnswerOption, {\n key: otherOption.id,\n id: otherOption.id,\n label: otherOption.label,\n value: otherOption.id\n })), otherOption && (multipleTextLines ? React__default.createElement(TextArea$1, {\n defaultValue: getDefaultValueById(otherOption.id),\n autoFocus: false,\n rows: otherOption.linesCount,\n cols: otherOption.charsCount,\n maxLength: TEXT_INPUT_MAX_CHARS,\n onChange: handleTextChange,\n className: classNames(otherStyles, {\n [hiddenInput]: !isOtherAnswerSelected\n }),\n tabIndex: isOtherAnswerSelected ? 0 : -1\n }) : React__default.createElement(TextInput$1, {\n defaultValue: getDefaultValueById(otherOption.id),\n autoFocus: false,\n autoHeight: true,\n size: otherOption.charsCount,\n maxLength: TEXT_INPUT_MAX_CHARS,\n onChange: handleTextChange,\n className: classNames(otherStyles, {\n [hiddenInput]: !isOtherAnswerSelected\n }),\n tabIndex: isOtherAnswerSelected ? 0 : -1\n })), commentOption && React__default.createElement(CommentChoice, {\n id: commentOption.id,\n label: commentOption.label,\n onChange: handleCommentChange,\n defaultValue: getDefaultValueById(commentOption.id),\n lineCount: commentOption.linesCount,\n charCount: commentOption.charsCount,\n maxLength: TEXT_INPUT_MAX_CHARS,\n \"aria-describedby\": fieldProps.error && errorId,\n className: commentChoice\n }));\n}\n\nvar Dropdown$1 = withErrorBoundary(Dropdown);\nconst useStyles$f = createUseStyles(theme => ({\n imageChoice: {\n display: 'flex',\n position: 'relative'\n },\n labelContainer: ({\n checked,\n disabled\n }) => {\n var _a;\n\n const borderColor = disabled && !checked ? 'transparent' : theme.primaryAccentColor;\n return {\n display: 'flex',\n position: 'relative',\n flexDirection: 'column',\n cursor: 'pointer',\n width: '100%',\n border: [1, 'solid', checked ? theme.questionColor : (_a = theme.questionBody.highlightColor) !== null && _a !== void 0 ? _a : 'rgb(208, 210, 211)'],\n borderRadius: 2,\n backgroundColor: checked ? theme.input.bgColor : 'inherit',\n ...theme.questionBody,\n '&:hover': {\n border: [1, 'solid', borderColor]\n },\n '&:focus-within': {\n border: [1, 'solid', borderColor]\n }\n };\n },\n controlImage: {\n position: 'absolute',\n right: '-1',\n top: '-1',\n width: '26px',\n height: '26px',\n transitionDuration: '0.3s',\n border: 'none',\n borderRadius: 2,\n zIndex: 10,\n transform: ({\n checked\n }) => checked ? 'scale(1)' : 'scale(0)'\n },\n optionLabel: ({\n checked\n }) => {\n var _a;\n\n return {\n padding: '9px 7px',\n width: '100%',\n wordWrap: 'break-word',\n fontWeight: checked ? 'bold' : 'normal',\n '&:focus-within': {\n background: (_a = theme.questionBody.highlightColor) !== null && _a !== void 0 ? _a : 'rgb(208, 210, 211)'\n }\n };\n },\n imageContainer: {\n paddingTop: '75%',\n width: '100%',\n position: 'relative',\n '& > img': {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n objectFit: 'contain'\n }\n },\n inputContainer: {\n width: '100%',\n display: 'flex',\n justifyContent: 'flex-end',\n backgroundColor: '#EFEFEF'\n }\n}));\nconst useStyles$e = createUseStyles(theme => ({\n imageInput: ({\n checked,\n disabled,\n readOnly\n }) => {\n const checkBgColor = checked ? theme.questionColor : 'transparent';\n const backgroundColor = disabled || readOnly ? '#aaa' : checkBgColor;\n return {\n color: disabled || readOnly ? '#aaa' : theme.input.activeColor,\n border: 'none',\n borderRadius: 4,\n backgroundColor,\n '& .checkmark': {\n fill: contrastColor(theme.input.activeColor)\n },\n '& input': {\n cursor: 'pointer'\n }\n };\n }\n}));\n\nfunction ImageInput({\n className,\n type,\n ...props\n}, ref) {\n const {\n inputProps,\n styleProps\n } = useInputStyles(props);\n const {\n imageInput\n } = useStyles$e(styleProps);\n return React__default.createElement(BaseInput$1, {\n ref: ref,\n type: type,\n className: classNames(imageInput, className),\n icon: React__default.createElement(CheckboxIcon$1, null),\n ...inputProps\n });\n}\n\nvar ImageInput$1 = React__default.forwardRef(ImageInput);\n\nfunction ImageChoice$2({\n id,\n type,\n alt = '',\n label,\n src: imageSrc,\n className,\n checked,\n name,\n onChange,\n onKeyDown,\n onClick,\n disabled: disabledProp,\n 'aria-disabled': ariaDisabledProp,\n readOnly: readOnlyProp,\n 'aria-readonly': ariaReadOnlyProp,\n ...inputProps\n}, ref) {\n const handleChange = e => {\n onChange === null || onChange === void 0 ? void 0 : onChange({\n id: e.target.id,\n checked: e.target.checked,\n value: e.target.value\n });\n };\n\n const handleClick = e => {\n onClick === null || onClick === void 0 ? void 0 : onClick(e);\n\n if (e.isDefaultPrevented()) {\n return;\n }\n\n const target = e.target;\n let checkVal = true;\n\n if (!inputProps.required && checked) {\n checkVal = false;\n }\n\n onChange === null || onChange === void 0 ? void 0 : onChange({\n id: target.id,\n checked: checkVal,\n value: target.value\n });\n };\n\n const handleKeyboard = e => {\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);\n\n if (e.isDefaultPrevented()) {\n return;\n }\n\n const target = e.target;\n\n if (!inputProps.required && checked && e.code === 'Space') {\n e.preventDefault();\n onChange === null || onChange === void 0 ? void 0 : onChange({\n id: target.id,\n checked: false,\n value: target.value\n });\n }\n };\n\n const disabled = disabledProp || ariaDisabledProp === 'true';\n const readOnly = readOnlyProp || ariaReadOnlyProp === 'true';\n const {\n imageChoice,\n controlImage,\n inputContainer,\n labelContainer,\n optionLabel,\n imageContainer\n } = useStyles$f({\n disabled,\n readOnly,\n checked\n });\n const imageId = `${id}-image`;\n const labelId = `${id}-label`;\n const ariaDescribeId = alt ? imageId : undefined;\n const imageInputEvents = type === 'radio' ? {\n onClick: handleClick,\n onKeyDown: handleKeyboard,\n onChange: handleChange\n } : {\n onChange: handleChange\n };\n return React__default.createElement(\"div\", {\n className: imageChoice\n }, React__default.createElement(\"label\", {\n htmlFor: id,\n className: classNames(labelContainer, className),\n tabIndex: -1\n }, React__default.createElement(\"div\", {\n className: inputContainer\n }, React__default.createElement(ImageInput$1, {\n \"aria-labelledby\": labelId,\n \"aria-describedby\": ariaDescribeId,\n ref: ref,\n checked: checked,\n className: controlImage,\n id: id,\n type: type,\n value: id,\n name: name,\n ...inputProps,\n ...imageInputEvents\n }), React__default.createElement(\"div\", {\n className: imageContainer\n }, React__default.createElement(\"img\", {\n id: imageId,\n src: imageSrc,\n alt: alt\n }))), label && React__default.createElement(\"span\", {\n id: labelId,\n className: optionLabel\n }, label)));\n}\n\nvar ImageChoiceOption = forwardRef(ImageChoice$2);\nconst useStyles$d = createUseStyles(theme => {\n var _a, _b, _c;\n\n const isFull = theme.layout.includes('CENTER') || theme.layout.includes('BANNER');\n const isThird = theme.layout.includes('THIRD');\n const isHalf = theme.layout.includes('HALF') || theme.layout.includes('FULL') && !theme.layout.includes('CENTER');\n const cols3 = 'repeat(3, minmax(0, 1fr))';\n const cols2 = 'repeat(2, minmax(0, 1fr))';\n const cols1 = 'minmax(0, 1fr)';\n return {\n imageChoiceContainer: {\n display: 'grid',\n flexWrap: 'wrap',\n gap: '25px',\n width: '100%',\n gridTemplateColumns: 'minmax(0, 1fr)',\n [`@media (min-width: ${(_a = theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md.min})`]: {\n gridTemplateColumns: isFull || isThird ? cols2 : cols1\n },\n [`@media (min-width: ${(_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.lg.min})`]: {\n gridTemplateColumns: () => {\n if (isFull || isThird) {\n return cols3;\n }\n\n if (isHalf) {\n return cols2;\n }\n\n return cols1;\n }\n },\n [`@media (min-width: ${(_c = theme.breakpoints) === null || _c === void 0 ? void 0 : _c.xl.min})`]: {\n gridTemplateColumns: isHalf ? cols2 : cols3\n }\n },\n imageChoice: {\n width: '100%'\n },\n noneOfTheAboveContainer: {\n marginTop: '15px'\n }\n };\n});\nconst INPUT_SIZE$1 = 20;\n\nfunction ImageChoice({\n id: questionId,\n readOnly,\n required,\n disabled,\n multiple = false,\n choices = [],\n choiceNoneOfTheAbove,\n onChange,\n responses = [],\n ...questionFieldProps\n}) {\n const imageChoiceType = multiple ? 'checkbox' : 'radio';\n const groupName = !multiple ? `${questionId}-imageChoice` : undefined;\n const errorId = createErrorId(questionId);\n const [selectedChoices, setSelectedChoices] = useState(responses);\n\n const handleChange = e => {\n const newState = !multiple ? [] : selectedChoices.filter(c => c.id !== e.id && c.type !== 'NOTA');\n\n if (e.checked) {\n newState.push({\n id: e.id,\n value: e.value\n });\n }\n\n setSelectedChoices(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const handleNAChange = e => {\n const newState = [];\n\n if (e.checked) {\n newState.push({\n id: e.id,\n value: e.value,\n type: 'NOTA'\n });\n }\n\n setSelectedChoices(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const isChecked = id => !!selectedChoices.find(item => item.id === id);\n\n const {\n imageChoiceContainer,\n imageChoice,\n noneOfTheAboveContainer\n } = useStyles$d();\n return React__default.createElement(QuestionField, {\n id: questionId,\n \"data-testid\": \"ImageChoiceQuestionType\",\n errorId: errorId,\n ...questionFieldProps\n }, React__default.createElement(\"div\", {\n className: imageChoiceContainer\n }, choices === null || choices === void 0 ? void 0 : choices.map(choice => {\n return React__default.createElement(ImageChoiceOption, {\n key: choice.id,\n id: choice.id,\n required: required,\n disabled: disabled,\n readOnly: readOnly,\n label: choice.label,\n onChange: handleChange,\n className: imageChoice,\n value: choice.id,\n src: choice.image.url,\n alt: choice.image.altText || '',\n name: groupName,\n type: imageChoiceType,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined,\n checked: isChecked(choice.id)\n });\n })), choiceNoneOfTheAbove && (choiceNoneOfTheAbove === null || choiceNoneOfTheAbove === void 0 ? void 0 : choiceNoneOfTheAbove.visible) && React__default.createElement(\"div\", {\n className: noneOfTheAboveContainer\n }, React__default.createElement(Checkbox$3, {\n id: choiceNoneOfTheAbove.id,\n value: choiceNoneOfTheAbove.id,\n onChange: handleNAChange,\n checked: isChecked(choiceNoneOfTheAbove.id),\n disabled: disabled,\n readOnly: readOnly,\n \"aria-describedby\": questionFieldProps.error && errorId || undefined,\n inputSize: INPUT_SIZE$1\n }, choiceNoneOfTheAbove.label)));\n}\n\nvar ImageChoice$1 = withErrorBoundary(ImageChoice);\nconst useStyles$c = createUseStyles({\n imageStyles: {\n maxWidth: '100%',\n display: 'block'\n }\n});\n\nfunction Image({\n alt = '',\n className,\n ...props\n}) {\n const {\n imageStyles\n } = useStyles$c();\n return React__default.createElement(\"img\", {\n className: classNames(imageStyles, className),\n \"data-testid\": \"image\",\n alt: alt,\n ...props\n });\n}\n\nconst useStyles$b = createUseStyles(theme => {\n var _a, _b, _c, _d;\n\n return {\n presentationalTitleStyles: {\n fontFamily: (_a = theme.questionTitle.fontFamily) !== null && _a !== void 0 ? _a : 'inherit',\n fontSize: (_b = theme.questionTitle.fontSize) !== null && _b !== void 0 ? _b : '16px',\n fontWeight: (_c = theme.questionTitle.fontWeight) !== null && _c !== void 0 ? _c : theme.isAccessible ? 500 : 300,\n marginBottom: '24px',\n textDecoration: (_d = theme.questionTitle.textDecoration) !== null && _d !== void 0 ? _d : 'inherit'\n },\n buttonStyles: {\n marginTop: '20px'\n }\n };\n});\n\nfunction ImagePresentational({\n text,\n image,\n padding = {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n },\n id,\n okButton = {\n visible: false\n }\n}) {\n const richTextId = `text-presentational-header-${id}`;\n const {\n presentationalTitleStyles,\n buttonStyles\n } = useStyles$b();\n const {\n visible: showButton,\n ...buttonProps\n } = okButton;\n return React__default.createElement(QuestionSpacing, {\n padding: padding,\n \"data-testid\": \"ImagePresentational\"\n }, text && React__default.createElement(RichText, {\n id: richTextId,\n element: \"div\",\n text: text,\n className: presentationalTitleStyles\n }), React__default.createElement(Image, { ...image\n }), showButton && React__default.createElement(Button, { ...buttonProps,\n className: buttonStyles\n }));\n}\n\nvar ImagePresentational$1 = withErrorBoundary(ImagePresentational);\nconst useStyles$a = createUseStyles(theme => ({\n radioInput: {\n '& label': {\n alignItems: 'baseline'\n }\n },\n labelContainer: {\n display: 'flex',\n flexDirection: 'column'\n },\n textInput: {\n opacity: ({\n checked\n }) => checked ? 1 : 0.5,\n cursor: ({\n checked\n }) => checked ? 'inherit' : 'pointer',\n marginTop: 5,\n marginLeft: 32,\n maxWidth: 'calc(100% - 32px)',\n [`@media (max-width: ${theme.breakpoints.xxs.max})`]: {\n marginLeft: 0,\n maxWidth: '100%'\n },\n // overwrite TextInput styles\n fontSize: theme.questionBody.fontSize,\n lineHeight: 'normal'\n },\n checkHover: {\n '&:hover': {\n outline: 'none'\n }\n }\n}));\n\nfunction RadioTextfield({\n refs,\n ...props\n}) {\n const {\n id,\n children: label,\n checked: checkedProp = false,\n value: valueProp,\n defaultValue,\n lineCount = 1,\n charCount = 50,\n maxLength,\n onClick,\n onChange,\n ...radioProps\n } = props;\n const radioGroup = useRadioGroup();\n const [checked, setChecked] = useState(checkedProp);\n const [value, setValue] = useState(defaultValue || valueProp);\n const radioInputRef = useRef(null);\n const radioRef = useForkRef(radioInputRef, refs === null || refs === void 0 ? void 0 : refs.radio);\n const textInputRef = useRef(null);\n const inputRef = useForkRef(textInputRef, refs === null || refs === void 0 ? void 0 : refs.text);\n const multipleTextLines = lineCount > 1;\n\n const handleValueChange = e => {\n radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.onChange(e);\n setValue(e.value);\n onChange === null || onChange === void 0 ? void 0 : onChange(e);\n };\n\n const handleInputChange = e => {\n handleValueChange({\n id,\n value: e.target.value,\n checked\n });\n };\n\n const handleFocusChange = e => {\n handleValueChange({\n id,\n value: e.target.value,\n checked\n });\n };\n\n const handleClick = e => {\n var _a;\n /**\n * Selection via keyboard calls onClick event - check for\n * mouse-position to ensure we were called by a pointing device.\n */\n\n\n if (!checked && e.clientX !== 0 && e.clientY !== 0) {\n (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n\n setChecked(true);\n onClick === null || onClick === void 0 ? void 0 : onClick(e);\n };\n\n useEffect(() => {\n setChecked(checkedProp);\n }, [checkedProp]);\n useEffect(() => {\n if ((radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.value) !== value) {\n setChecked(false);\n }\n }, [radioGroup, value]);\n const {\n radioInput,\n textInput,\n checkHover\n } = useStyles$a({\n checked\n });\n return React__default.createElement(React__default.Fragment, null, React__default.createElement(Radio$1, {\n id: `radio-input-${id}`,\n checked: checked,\n value: value,\n onClick: handleClick,\n onChange: handleValueChange,\n className: radioInput,\n ref: radioRef,\n ...radioProps\n }, label), multipleTextLines ? React__default.createElement(TextArea$1, {\n id: `radio-field-${id}`,\n defaultValue: defaultValue,\n autoFocus: false,\n rows: lineCount,\n cols: charCount,\n maxLength: maxLength,\n onClick: handleClick,\n onChange: handleInputChange,\n onBlur: handleFocusChange,\n onFocus: handleFocusChange,\n className: classNames(textInput, {\n [checkHover]: !checked\n }),\n ref: inputRef,\n tabIndex: checked ? 0 : -1\n }) : React__default.createElement(TextInput$1, {\n id: `radio-field-${id}`,\n defaultValue: defaultValue,\n autoFocus: false,\n autoHeight: true,\n size: charCount,\n maxLength: maxLength,\n onClick: handleClick,\n onChange: handleInputChange,\n onBlur: handleFocusChange,\n onFocus: handleFocusChange,\n className: classNames(textInput, {\n [checkHover]: !checked\n }),\n ref: inputRef,\n tabIndex: checked ? 0 : -1\n }));\n}\n\nconst useStyles$9 = createUseStyles({\n commentChoiceContainer: {\n marginTop: '10px'\n }\n});\nconst INPUT_SIZE = 20;\n/**\n * MultipleChoice Question Type (Tier 2)\n */\n\nfunction MultipleChoice({\n id: questionId,\n required,\n disabled,\n readOnly,\n columnLayout = 1,\n choices = [],\n choiceNoneOfTheAbove,\n choiceOther,\n choiceComment,\n responses: defaultResponses = [],\n onChange,\n ...fieldProps\n}) {\n const groupId = createFieldId(questionId);\n const errorId = createErrorId(questionId);\n /** Filter choices that exist and are visible */\n\n const {\n options,\n sortableOptions,\n notaOption,\n otherOption,\n commentOption\n } = useQuestionChoices([...choices, choiceNoneOfTheAbove, choiceOther, choiceComment]);\n const [responseValue, setResponseValue] = useState(defaultResponses);\n /**\n * Default value by id\n * used for text-input based choices\n */\n\n const getDefaultValueById = id => {\n const defaultChoice = defaultResponses.find(c => c.id === id);\n return defaultChoice === null || defaultChoice === void 0 ? void 0 : defaultChoice.value;\n };\n /**\n * Default value for the group\n */\n\n\n const defaultValue = useMemo(() => {\n var _a;\n\n return (_a = defaultResponses.find(c => c.type !== 'COMMENT')) === null || _a === void 0 ? void 0 : _a.value;\n }, // defaultValues should not be changed post render (breaks rules of controlled components)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []);\n /**\n * Determine if choice is selected\n * @return TRUE if the choice.id exists in responses\n */\n\n const isChecked = id => {\n return !!responseValue.find(c => c.id === id);\n };\n\n const handleRadioChange = e => {\n const choiceData = options.find(c => e.id.match(c.id));\n const responses = responseValue.filter(c => c.type === 'COMMENT');\n\n if (choiceData) {\n const {\n id,\n type\n } = choiceData;\n responses.push({\n id,\n type,\n value: e.value\n });\n }\n\n setResponseValue(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n\n const handleCommentChange = e => {\n const choiceData = options.find(c => c.id === e.target.id);\n const responses = responseValue.filter(c => c.type !== 'COMMENT');\n\n if (choiceData && !!e.target.value) {\n const {\n id,\n type\n } = choiceData;\n responses.push({\n id,\n type,\n value: e.target.value\n });\n }\n\n setResponseValue(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n /**\n * deselect choice if the question is not required\n */\n\n\n const unCheckOption = () => {\n if (required) {\n return;\n }\n\n const responses = responseValue.filter(c => c.type === 'COMMENT');\n setResponseValue(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n\n const handleClick = e => {\n // match is used since RadioTextfield applies a prefix\n // to maintain unique ID's'\n const input = e.target;\n const isSelected = responseValue.find(c => input.id.match(c.id));\n\n if (isSelected && input.checked) {\n e.preventDefault();\n unCheckOption();\n }\n };\n\n const handleKeyboard = e => {\n const isSelected = responseValue.find(c => e.target.id.match(c.id));\n\n if (isSelected && e.code === 'Space') {\n e.preventDefault();\n unCheckOption();\n }\n };\n\n const radioEvents = {\n onClick: handleClick,\n onKeyDown: handleKeyboard\n };\n const radioGroupProps = {\n disabled,\n readOnly,\n name: groupId,\n defaultValue,\n onChange: handleRadioChange\n };\n const {\n commentChoiceContainer\n } = useStyles$9();\n return React__default.createElement(QuestionField, {\n id: questionId,\n errorId: errorId,\n \"data-testid\": \"MultipleChoiceQuestionType\",\n ...fieldProps\n }, React__default.createElement(RadioGroup, { ...radioGroupProps\n }, React__default.createElement(QuestionAnswerLayoutTemplate, {\n gridCellMargin: [0, 2, 5, 2],\n otherCellMargin: [0, 2, 5, 2],\n columns: columnLayout,\n other: otherOption && React__default.createElement(RadioTextfield, {\n id: otherOption.id,\n checked: isChecked(otherOption.id),\n defaultValue: getDefaultValueById(otherOption.id),\n lineCount: otherOption.linesCount,\n charCount: otherOption.charsCount,\n maxLength: TEXT_INPUT_MAX_CHARS,\n \"aria-describedby\": fieldProps.error && errorId,\n inputSize: INPUT_SIZE,\n ...radioEvents\n }, otherOption.label),\n noneOfTheAbove: notaOption && React__default.createElement(Radio$1, {\n id: notaOption.id,\n value: notaOption.id,\n checked: isChecked(notaOption.id),\n \"aria-describedby\": fieldProps.error && errorId,\n inputSize: INPUT_SIZE,\n ...radioEvents\n }, notaOption.label)\n }, sortableOptions.map(choice => React__default.createElement(Radio$1, {\n id: choice.id,\n key: choice.id,\n value: choice.id,\n checked: isChecked(choice.id),\n \"aria-describedby\": fieldProps.error && errorId,\n inputSize: INPUT_SIZE,\n ...radioEvents\n }, choice.label))), commentOption && React__default.createElement(CommentChoice, {\n id: commentOption.id,\n label: commentOption.label,\n onChange: handleCommentChange,\n defaultValue: getDefaultValueById(commentOption.id),\n lineCount: commentOption.linesCount,\n charCount: commentOption.charsCount,\n maxLength: TEXT_INPUT_MAX_CHARS,\n \"aria-describedby\": fieldProps.error && errorId,\n className: commentChoiceContainer\n })));\n}\n\nconst useStyles$8 = createUseStyles(theme => {\n const {\n fontSize,\n fontFamily,\n fontWeight\n } = theme.questionBody;\n return {\n container: {\n display: 'flex',\n flexDirection: 'row',\n wordBreak: 'break-word',\n marginBottom: '7px',\n [`@media (max-width: ${theme.breakpoints.sm.min})`]: {\n flexWrap: 'wrap'\n }\n },\n label: {\n fontSize,\n fontFamily,\n fontWeight,\n color: theme.questionColor,\n flex: '0 0 20%',\n marginRight: '7px',\n [`@media (max-width: ${theme.breakpoints.sm.min})`]: {\n flex: '0 0 100%',\n margin: '0 2px 2px 0'\n }\n },\n input: {\n marginTop: 'auto',\n flex: 'auto'\n }\n };\n});\n\nfunction MultipleTextbox({\n id: questionId,\n required,\n disabled,\n readOnly,\n choices = [],\n responses = [],\n onChange,\n size,\n ...fieldProps\n}) {\n const [responseValues, setResponseValues] = useState(responses);\n const {\n error,\n errorId = createErrorId(questionId)\n } = fieldProps;\n\n const getDefaultValueById = id => {\n const defaultChoice = responseValues.find(item => item.id === id);\n return defaultChoice === null || defaultChoice === void 0 ? void 0 : defaultChoice.value;\n };\n\n const handleChange = e => {\n const newState = responseValues.filter(response => response.id !== e.target.id);\n\n if (e.target.value) {\n const newResponse = {\n id: e.target.id,\n value: e.target.value\n };\n newState.push(newResponse);\n }\n\n setResponseValues(newState);\n onChange === null || onChange === void 0 ? void 0 : onChange(newState);\n };\n\n const {\n container,\n label,\n input\n } = useStyles$8();\n return React__default.createElement(QuestionField, {\n id: questionId,\n errorId: errorId,\n \"data-testid\": \"MultipleTextbox\",\n ...fieldProps\n }, choices === null || choices === void 0 ? void 0 : choices.map(choice => {\n const labelId = `${choice.id}-label`;\n return React__default.createElement(\"div\", {\n className: container,\n key: choice.id\n }, React__default.createElement(\"label\", {\n className: label,\n id: labelId,\n htmlFor: choice.id\n }, React__default.createElement(RichText, {\n element: \"span\",\n text: choice.label\n })), React__default.createElement(TextInput$1, {\n id: choice.id,\n defaultValue: getDefaultValueById(choice.id),\n required: required,\n disabled: disabled,\n readOnly: readOnly,\n size: size,\n onChange: handleChange,\n \"aria-invalid\": !!error,\n \"aria-describedby\": error && errorId,\n maxLength: TEXT_INPUT_MAX_CHARS,\n className: input\n }));\n }));\n}\n\nconst useStyles$7 = createUseStyles(theme => {\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n npsContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n minWidth: 230\n },\n npsLabel: {\n color: theme.questionColor,\n fontFamily: theme.questionBody.fontFamily,\n fontSize: 14,\n fontWeight: fontWeightOptions.light,\n lineHeight: 1.25\n },\n npsRatingButtonList: {\n margin: 0,\n padding: 0,\n display: 'inline-flex',\n listStyleType: 'none',\n border: [1, 'solid', theme.primaryAccentColor],\n borderRadius: 4,\n overflow: 'hidden',\n outline: [2, 'solid', 'transparent'],\n outlineOffset: 2,\n width: '100%'\n },\n npsRatingButton: ({\n isRTL\n }) => ({\n padding: 0,\n minWidth: 20,\n flex: '1 1 9.09%',\n '& + $npsRatingButton': {\n borderLeft: isRTL ? 0 : [2, 'solid', theme.primaryAccentColor],\n borderRight: isRTL ? [2, 'solid', theme.primaryAccentColor] : 0\n }\n }),\n minLabel: ({\n isRTL\n }) => ({\n margin: isRTL ? [0, 4, 2, 0] : [0, 0, 2, 4]\n }),\n maxLabel: ({\n isRTL\n }) => ({\n margin: isRTL ? [0, 0, 2, 4] : [0, 4, 2, 0]\n }),\n srOnly: visuallyHidden$1\n };\n});\nconst useStyles$6 = createUseStyles(theme => {\n // theme.correctAnswerHighlightColor is the correct color, but not an accurate token.\n const focusBackgroundColor = theme.correctAnswerHighlightColor;\n return {\n container: {\n position: 'relative',\n display: 'flex',\n cursor: 'pointer'\n },\n radio: {\n appearance: 'none',\n outline: 'none',\n position: 'absolute',\n width: '1px',\n height: '1px',\n '&:focus + $label:before, &:hover + $label:before': {\n border: [2, 'solid', theme.primaryAccentColor],\n backgroundColor: focusBackgroundColor\n },\n '&:checked + $label': {\n backgroundColor: theme.questionColor,\n color: theme.primaryBackgroundColor,\n fontWeight: 'bold',\n transition: 'background 200ms ease'\n }\n },\n label: {\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n backgroundColor: theme.primaryBackgroundColor,\n color: theme.questionColor,\n fontFamily: theme.fontFamily,\n fontSize: 15,\n fontWeight: 700,\n padding: [10, 0],\n width: '100%',\n '&:before': {\n content: \"''\",\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1\n }\n }\n };\n});\n\nfunction NpsRatingButton({\n id,\n className,\n children: label,\n component: Tag = 'div',\n ...props\n}) {\n const styles = useStyles$6();\n return React__default.createElement(Tag, {\n className: classNames(styles.container, className)\n }, React__default.createElement(\"input\", {\n id: id,\n type: \"radio\",\n className: styles.radio,\n ...props\n }), React__default.createElement(\"label\", {\n className: classNames(styles.label),\n htmlFor: id\n }, label));\n}\n\nconst COPY$3 = defineMessages({\n NPS_QUESTION_TITLE: {\n id: 'Nps.QUESTION_TITLE',\n defaultMessage: 'On a scale of {minValue} to {maxValue},
{heading} {minValue} for {minLabelText}, {maxValue} for {maxLabelText}
',\n description: '[Type: header][Vis: high] - question title'\n }\n});\n\nfunction Nps({\n id: questionId,\n choices = [],\n className,\n title,\n rowId,\n responses: defaultResponses = [],\n onChange,\n ...fieldProps\n}) {\n var _a, _b, _c, _d;\n\n const defaultValue = useMemo(() => {\n var _a, _b;\n\n return (_b = (_a = defaultResponses.find(r => !!r.value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n []);\n const [responseValue, setResponseValue] = useState(defaultValue);\n\n const ratingChanged = ({\n target: {\n value: clickedAnswerValue\n }\n }) => {\n if (clickedAnswerValue) {\n setResponseValue(clickedAnswerValue);\n const response = [{\n id: rowId,\n value: clickedAnswerValue\n }];\n onChange === null || onChange === void 0 ? void 0 : onChange(response);\n }\n };\n\n const {\n isRTL\n } = useContext(L10NContext);\n const scaleId = createFieldId(questionId);\n const errorId = createErrorId(questionId);\n const {\n npsContainer,\n npsLabel,\n minLabel,\n maxLabel,\n srOnly,\n npsRatingButtonList,\n npsRatingButton\n } = useStyles$7({\n isRTL\n });\n const {\n heading\n } = title;\n const minFullLabel = (_b = (_a = choices[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '';\n const maxFullLabel = (_d = (_c = choices.slice(-1)[0]) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : '';\n const [minLabelText, minValue] = minFullLabel.split(' - ');\n const [maxLabelText, maxValue] = maxFullLabel.split(' - ');\n const instructionsId = `${questionId}-instructions`;\n const accessibleHeading = t(COPY$3.NPS_QUESTION_TITLE, {\n minValue,\n maxValue,\n minLabelText,\n maxLabelText,\n heading,\n instructionsId,\n srOnlyClass: classNames(srOnly)\n });\n const accessibleTitle = { ...title,\n heading: accessibleHeading\n };\n return React__default.createElement(QuestionField, {\n id: questionId,\n errorId: errorId,\n \"data-testid\": \"NpsQuestionType\",\n title: accessibleTitle,\n ...fieldProps\n }, React__default.createElement(\"div\", {\n id: scaleId,\n className: classNames(npsContainer, className)\n }, React__default.createElement(\"span\", {\n className: classNames(npsLabel, minLabel)\n }, minLabelText), React__default.createElement(\"span\", {\n className: classNames(npsLabel, maxLabel)\n }, maxLabelText), React__default.createElement(\"ol\", {\n className: classNames(npsRatingButtonList)\n }, choices.map(c => React__default.createElement(NpsRatingButton, {\n id: `${questionId}-${c.id}`,\n key: `${questionId}-${c.id}`,\n name: `${questionId}-rating`,\n value: c.id,\n component: \"li\",\n className: classNames(npsRatingButton),\n onChange: ratingChanged,\n defaultChecked: responseValue === c.id,\n \"aria-describedby\": instructionsId\n }, c.label.includes('-') ? c.label.split(' - ')[1] : c.label)))));\n}\n\nconst useStyles$5 = createUseStyles(theme => {\n const {\n bgColor: listItemBackground,\n activeColor: listItemBorderActive\n } = theme.input;\n const flexStart = 'flex-start';\n const lineHeight = 1.25;\n const controlsPadding = 6;\n const controlsFontSize = 'inherit'; // helps align label-first-line to controls center\n\n const labelOffset = Math.floor(controlsPadding / lineHeight);\n return {\n rankItem: {\n position: 'relative',\n userSelect: 'none',\n display: 'flex',\n outline: 'none',\n fontSize: theme.questionBody.fontSize,\n lineHeight,\n color: theme.questionBody.color,\n zIndex: ({\n ghost\n }) => ghost ? 5 : 'auto',\n '&:active, &:focus, &:focus-within': {\n zIndex: 5\n },\n '&:active $content, &:focus-within $content': {\n outlineWidth: 1,\n outlineStyle: ({\n ghost\n }) => ghost ? 'dashed' : 'solid',\n outlineColor: listItemBorderActive,\n borderColor: listItemBorderActive\n },\n '&:active $content, &:focus $content': {\n outlineWidth: 3,\n outlineStyle: ({\n ghost\n }) => ghost ? 'dashed' : 'solid',\n outlineColor: listItemBorderActive,\n borderColor: listItemBorderActive\n }\n },\n orderIndex: {\n padding: '10px 10px 10px 5px',\n visibility: ({\n ranksVisible\n }) => ranksVisible ? 'visible' : 'hidden',\n minWidth: '45px',\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center'\n },\n content: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: flexStart,\n alignItems: flexStart,\n gap: 10,\n flex: '1 auto',\n borderWidth: 1,\n borderRadius: 4,\n borderStyle: 'solid',\n borderColor: 'transparent',\n background: listItemBackground,\n padding: 10\n },\n dragHandle: {\n outline: 'none',\n visibility: ({\n ghost\n }) => ghost ? 'hidden' : 'visible',\n fontSize: controlsFontSize,\n lineHeight: 0,\n padding: controlsPadding,\n touchAction: 'none',\n '&::after': {\n content: \"''\",\n position: 'absolute',\n display: 'block',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n cursor: 'pointer'\n }\n },\n label: {\n visibility: ({\n ghost\n }) => ghost ? 'hidden' : 'visible',\n display: 'flex',\n justifyContent: flexStart,\n alignItems: flexStart,\n flex: '1 auto',\n paddingTop: labelOffset\n },\n controls: {\n visibility: ({\n ghost\n }) => ghost ? 'hidden' : 'visible',\n position: 'relative',\n display: 'flex',\n justifyContent: 'space-around',\n gap: 10,\n fontSize: controlsFontSize\n }\n };\n});\n\nfunction RankingRow({\n className,\n dragListeners,\n dragRef,\n ghost,\n id,\n position,\n label,\n controls,\n onFocus,\n ranksVisible = true,\n ...props\n}, ref) {\n const {\n rankItem,\n orderIndex,\n content: contentContainer,\n dragHandle: dragHandleContainer,\n label: labelContainer,\n controls: controlsContainer\n } = useStyles$5({\n ghost,\n ranksVisible\n });\n const labelId = `${id}-label`;\n const index = position !== null && position !== void 0 ? position : -1;\n const indexLabel = index >= 0 ? index + 1 : '';\n return React__default.createElement(\"li\", {\n id: id,\n className: classNames('rankItem', rankItem, className),\n \"aria-labelledby\": labelId,\n ref: ref,\n ...props\n }, React__default.createElement(\"span\", {\n className: classNames('OrderIndex', orderIndex),\n \"data-testid\": \"RankingRow__OrderIndex\",\n \"aria-hidden\": !ranksVisible\n }, indexLabel), React__default.createElement(\"div\", {\n className: classNames('rankItem__content', contentContainer)\n }, React__default.createElement(\"div\", {\n \"data-testid\": \"RankingRow__DragHandle\",\n className: classNames('rankItem__dragHandle', dragHandleContainer),\n onFocus: onFocus,\n \"data-pos\": index,\n ref: dragRef,\n ...dragListeners\n }, React__default.createElement(DragHandleIcon$1, {\n className: \"rankItem__dragHandleIcon\"\n })), React__default.createElement(\"div\", {\n \"data-testid\": \"RankingRow__Label\",\n className: classNames('rankItem__label', labelContainer)\n }, React__default.createElement(RichText, {\n id: labelId,\n element: \"div\",\n className: \"rankItem__richText\",\n translate: \"no\",\n text: label\n })), React__default.createElement(\"div\", {\n \"data-no-dnd\": \"true\",\n \"data-testid\": \"RankingRow__Controls\",\n className: classNames('rankItem__controls', controlsContainer)\n }, controls)));\n}\n\nvar RankingRow$1 = forwardRef(RankingRow);\n/**\n * OrderButton\n *\n * @todo: replace instances with reusable `Button` component that satisfies\n * all scenarios, variants and themes.\n */\n\nconst useStyles$4 = createUseStyles(theme => ({\n orderButton: {\n color: '#000',\n backgroundColor: '#fff',\n fontSize: 'inherit',\n border: [1, 'solid', '#000'],\n borderRadius: 4,\n padding: [6, 6],\n maxWidth: '100%',\n cursor: 'pointer',\n lineHeight: 0,\n '&:disabled > svg': {\n opacity: 0.5,\n cursor: 'default'\n },\n '&:focus:not(:disabled), &:focus-visible:not(:disabled), &:hover:not(:disabled)': {\n borderColor: theme.primaryAccentColor,\n outline: `2px solid ${theme.primaryAccentColor}`\n },\n outlineColor: theme.primaryAccentColor\n },\n srOnly: visuallyHidden\n}));\n\nfunction OrderButton({\n icon,\n children: label,\n className,\n ...props\n}) {\n const {\n orderButton,\n srOnly\n } = useStyles$4();\n return React__default.createElement(\"button\", {\n type: \"button\",\n className: classNames('order-button', orderButton, className),\n ...props\n }, icon, React__default.createElement(\"span\", {\n className: srOnly\n }, label));\n}\n\nconst useStyles$3 = createUseStyles({\n controlsContainer: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'space-around',\n gap: 10\n },\n applicableControl: {\n display: 'flex',\n alignItems: 'center',\n gap: 6\n }\n});\nconst COPY$2 = defineMessages({\n RANK_NA: {\n id: 'OrderControl.NA',\n defaultMessage: 'N/A',\n description: '[Type: label][Vis: high] - not applicable label'\n },\n ARIA_RANK_NA: {\n id: 'OrderControl.AriaNA',\n defaultMessage: 'Not Applicable',\n description: '[Type: label][Vis: high] - accessible not applicable label'\n }\n});\nconst RANK_DIRECTION_BACKWARD = -1;\nconst RANK_DIRECTION_FORWARD = 1;\n\nfunction OrderControl({\n id,\n labels,\n position,\n showApplicability = true,\n applicable: defaultApplicable = true,\n className,\n onApplicableChange,\n onOrderUp,\n onOrderDown,\n disableOrderUp = false,\n disableOrderDown = false,\n ...props\n}) {\n const [applicable, setApplicable] = useState(defaultApplicable);\n const currentIndex = position !== null && position !== void 0 ? position : -1;\n\n const handleOrderUp = _e => {\n onOrderUp === null || onOrderUp === void 0 ? void 0 : onOrderUp({\n id,\n value: currentIndex,\n direction: RANK_DIRECTION_BACKWARD\n });\n };\n\n const handleOrderDown = _e => {\n onOrderDown === null || onOrderDown === void 0 ? void 0 : onOrderDown({\n id,\n value: currentIndex,\n direction: RANK_DIRECTION_FORWARD\n });\n };\n\n const handleApplicableChange = e => {\n const isApplicable = !e.target.checked;\n onApplicableChange === null || onApplicableChange === void 0 ? void 0 : onApplicableChange({\n id,\n applicable: isApplicable\n });\n setApplicable(isApplicable);\n };\n\n const applicableId = `${id}-applicable`;\n const {\n controlsContainer,\n applicableControl\n } = useStyles$3();\n return React__default.createElement(\"div\", {\n id: id,\n className: classNames(controlsContainer, className),\n ...props\n }, React__default.createElement(OrderButton, {\n disabled: disableOrderUp || !applicable,\n onClick: handleOrderUp,\n icon: React__default.createElement(CaretUpOutlineIcon, null)\n }, labels.orderUpLabel), React__default.createElement(OrderButton, {\n disabled: disableOrderDown || !applicable,\n onClick: handleOrderDown,\n icon: React__default.createElement(CaretDownOutlineIcon, null)\n }, labels.orderDownLabel), showApplicability && React__default.createElement(\"label\", {\n className: classNames('order-na', applicableControl),\n htmlFor: applicableId,\n \"aria-label\": t(COPY$2.ARIA_RANK_NA)\n }, React__default.createElement(CheckboxInput$1, {\n id: applicableId,\n checked: !applicable,\n onChange: handleApplicableChange\n }), React__default.createElement(T, {\n desc: COPY$2.RANK_NA\n })));\n}\n\nconst useStyles$2 = createUseStyles({\n item: {},\n itemDisabled: {\n '& .rankItem__dragHandle::after': {\n cursor: 'default'\n },\n '& .rankItem__dragHandle, & .rankItem__label': {\n opacity: 0.5\n }\n }\n});\nconst COPY$1 = defineMessages({\n ARIA_RANK_MOVE_UP: {\n id: 'RankingItem.AriaRankMoveUp',\n defaultMessage: 'Move up {label}',\n description: '[Type: button][Vis: high] - accessible rank move up label'\n },\n ARIA_RANK_MOVE_DOWN: {\n id: 'RankingItem.AriaRankMoveDown',\n defaultMessage: 'Move down {label}',\n description: '[Type: button][Vis: high] - accessible rank move down label'\n }\n});\n\nfunction RankingItem({\n id,\n className,\n label,\n position: index,\n listLength,\n applicable,\n showApplicability,\n onApplicableChange,\n onOrderUp,\n onOrderDown,\n ranksVisible,\n ...props\n}) {\n const controlLabels = {\n orderUpLabel: t(COPY$1.ARIA_RANK_MOVE_UP, {\n label\n }),\n orderDownLabel: t(COPY$1.ARIA_RANK_MOVE_DOWN, {\n label\n })\n };\n const {\n attributes,\n listeners,\n setNodeRef,\n transform,\n transition,\n isDragging,\n setActivatorNodeRef\n } = useSortable({\n id,\n attributes: {\n role: 'listitem',\n tabIndex: -1\n },\n disabled: !applicable,\n data: {\n id,\n position: index,\n label,\n applicable,\n showApplicability\n }\n });\n const style = {\n transform: CSS.Transform.toString(transform),\n transition\n };\n\n const handleOrderUp = e => {\n onOrderUp === null || onOrderUp === void 0 ? void 0 : onOrderUp({ ...e,\n id\n });\n };\n\n const handleOrderDown = e => {\n onOrderDown === null || onOrderDown === void 0 ? void 0 : onOrderDown({ ...e,\n id\n });\n };\n\n const handleApplicableChange = e => {\n onApplicableChange === null || onApplicableChange === void 0 ? void 0 : onApplicableChange({ ...e,\n id\n });\n };\n\n const {\n item,\n itemDisabled\n } = useStyles$2({\n applicable\n });\n return React__default.createElement(RankingRow$1, {\n id: id,\n label: label,\n position: index,\n className: classNames(item, {\n [itemDisabled]: !applicable\n }, className),\n ref: setNodeRef,\n style: style,\n ghost: isDragging,\n ...attributes,\n dragListeners: listeners,\n dragRef: setActivatorNodeRef,\n ranksVisible: ranksVisible,\n controls: React__default.createElement(OrderControl, {\n id: `${id}-control`,\n position: index,\n applicable: applicable,\n showApplicability: !!showApplicability,\n onApplicableChange: handleApplicableChange,\n onOrderUp: handleOrderUp,\n onOrderDown: handleOrderDown,\n labels: controlLabels,\n disableOrderUp: index === 0,\n disableOrderDown: index === listLength - 1\n }),\n ...props\n });\n}\n\nconst useRankingIds = ({\n rankings,\n choiceNotApplicable\n}) => {\n return useMemo(() => {\n const order = rankings.filter(r => !!r && r.visible).sort((a, b) => Number(a.label) - Number(b.label)).map(r => r.id);\n\n if (choiceNotApplicable) {\n order.push(choiceNotApplicable.id);\n }\n\n return order;\n }, [rankings, choiceNotApplicable]);\n};\n\nconst useRankingState = ({\n choices,\n rankingIds,\n defaultResponses = [],\n choiceNotApplicable\n}) => {\n const findResponseByChoiceId = id => defaultResponses.find(r => r.id === id);\n\n const findPositionByRankId = id => rankingIds.findIndex(rid => rid === id);\n\n return useState(() => {\n // Filter choices that exist and are visible, add rankable meta data\n return choices.filter(c => !!c && c.visible).map(({\n id,\n label\n }, defaultIndex) => {\n const {\n value: rankId = rankingIds[defaultIndex],\n type\n } = findResponseByChoiceId(id) || {};\n const item = {\n id,\n label,\n type,\n value: rankId,\n applicable: rankId !== (choiceNotApplicable === null || choiceNotApplicable === void 0 ? void 0 : choiceNotApplicable.id),\n index: findPositionByRankId(rankId)\n };\n return item;\n }).sort((a, b) => a.index - b.index);\n });\n};\n/* istanbul ignore file */\n\n\nfunction shouldHandleEvent(element) {\n let cur = element;\n\n while (cur) {\n if (cur.dataset && cur.dataset.noDnd) {\n return false;\n }\n\n cur = cur.parentElement;\n }\n\n return true;\n}\n\nconst defaultKeyboardCodes = {\n start: [KeyboardCode.Space, KeyboardCode.Enter],\n cancel: [KeyboardCode.Esc],\n end: [KeyboardCode.Space, KeyboardCode.Enter]\n};\n\nclass PointerSensor extends PointerSensor$1 {}\n\nPointerSensor.activators = [{\n eventName: 'onPointerDown',\n handler: ({\n nativeEvent: event\n }, {\n onActivation\n }) => {\n if (!shouldHandleEvent(event.target)) {\n return false;\n }\n\n onActivation === null || onActivation === void 0 ? void 0 : onActivation({\n event\n });\n return true;\n }\n}];\n\nclass KeyboardSensor extends KeyboardSensor$1 {}\n\nKeyboardSensor.activators = [{\n eventName: 'onKeyDown',\n handler: ({\n nativeEvent: event\n }, {\n keyboardCodes = defaultKeyboardCodes,\n onActivation\n }, {\n active\n }) => {\n const {\n code\n } = event;\n\n if (keyboardCodes.start.includes(code)) {\n const activator = active.activatorNode.current;\n\n if (activator && event.target !== activator || !shouldHandleEvent(event.target)) {\n return false;\n }\n\n event.preventDefault();\n onActivation === null || onActivation === void 0 ? void 0 : onActivation({\n event\n });\n return true;\n }\n\n return false;\n }\n}];\n/**\n * Allows list-items that remove the bullet-marker to be acessible (Screen Reader)\n * @see https://www.tempertemper.net/blog/accessibility-issues-when-removing-list-markers\n */\n\nvar accessibleListItem = {\n listStyleType: 'none',\n '&::before': {\n content: \"'\\\\200B'\"\n }\n};\nconst useStyles$1 = createUseStyles({\n list: {\n display: 'flex',\n flexDirection: 'column',\n gap: 2\n },\n listItem: { ...accessibleListItem\n },\n dragOverlay: {\n opacity: 0.5,\n '& .rankItem__orderIndex, & .rankItem__controls': {\n opacity: 0\n }\n },\n srOnly: { ...visuallyHidden\n }\n});\nconst COPY = defineMessages({\n ARIA_RANK_MOVED_UP: {\n id: 'Ranking.AriaRankMovedUp',\n defaultMessage: '{label} moved up to number {position}',\n description: '[Type: button][Vis: high] - accessible ranking moved up label'\n },\n ARIA_RANK_MOVED_DOWN: {\n id: 'Ranking.AriaRankMovedDown',\n defaultMessage: '{label} moved down to number {position}',\n description: '[Type: button][Vis: high] - accessible ranking moved down label'\n },\n ARIA_RANK_AT_TOP: {\n id: 'Ranking.AriaRankAtTop',\n defaultMessage: '{label} is number {position} and cannot move up',\n description: '[Type: button][Vis: high] - accessible ranking at top of list'\n },\n ARIA_RANK_AT_BOTTOM: {\n id: 'Ranking.AriaRankAtBottom',\n defaultMessage: '{label} is number {position} and cannot move down',\n description: '[Type: button][Vis: high] - accessible ranking at bottom of list'\n }\n});\n\nfunction Ranking({\n id: questionId,\n disabled: _dis,\n readOnly: _ro,\n choices =\n /* istanbul ignore next: cannot reach default branch */\n [],\n rankings =\n /* istanbul ignore next: cannot reach default branch */\n [],\n choiceNotApplicable,\n responses: defaultResponses = [],\n onChange,\n ...fieldProps\n}) {\n var _a, _b;\n\n const errorId = createErrorId(questionId);\n const sensors = useSensors(useSensor(PointerSensor)); // toggles display of N/A choice\n\n const showApplicability = choiceNotApplicable !== undefined; // create ranking order (N/A choice is last)\n\n const rankingIds = useRankingIds({\n rankings,\n choiceNotApplicable\n });\n const [, setActiveId] = useState(null);\n const [activeItem, setActiveItem] = useState(null); // for Aria-Live\n\n const [statusMessage, announceStatus] = useState('');\n const [ranksVisible, setRanksVisible] = useState(false);\n const [listItems, setListItems] = useRankingState({\n choices,\n defaultResponses,\n choiceNotApplicable,\n rankingIds\n });\n /* istanbul ignore next */\n\n const getItemIndices = (items, fromId, toId) => {\n const fromIndex = items.findIndex(item => item.id === fromId);\n const toIndex = items.findIndex(item => item.id === toId);\n return {\n fromIndex,\n toIndex\n };\n };\n /* istanbul ignore next */\n\n\n const moveById = (items, fromId, toId) => {\n const {\n fromIndex,\n toIndex\n } = getItemIndices(items, fromId, toId);\n return arrayMove(items, fromIndex, toIndex);\n };\n /* istanbul ignore next: cannot test drag-and-drop logic */\n\n\n const moveItem = (fromId, toId) => {\n setListItems(items => moveById(items, fromId, toId));\n };\n\n const {\n list,\n listItem,\n dragOverlay,\n srOnly\n } = useStyles$1();\n\n const updateRankingOrder = (current, next) => {\n const nextValue = Math.max(0, Math.min(next, listItems.length - 1));\n const responses = arrayMove(listItems, current, nextValue).map((response, index) => ({ ...response,\n index,\n value: rankingIds[index]\n }));\n setRanksVisible(true);\n setListItems(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n\n const handleOrderUp = e => {\n const {\n id: rowId,\n value: currentPosition,\n direction =\n /* istanbul ignore next: cannot reach default branch */\n 0\n } = e;\n const item = listItems.find(li => li.id === rowId);\n const nextPosition = currentPosition + direction;\n\n if (nextPosition < 0) {\n announceStatus(t(COPY.ARIA_RANK_AT_TOP, {\n label: item.label,\n position: currentPosition + 1\n }));\n } else {\n updateRankingOrder(currentPosition, nextPosition);\n announceStatus(t(COPY.ARIA_RANK_MOVED_UP, {\n label: item.label,\n position: nextPosition + 1\n }));\n }\n };\n\n const handleOrderDown = e => {\n const {\n id: rowId,\n value: currentPosition,\n direction =\n /* istanbul ignore next: cannot reach default branch */\n 0\n } = e;\n const item = listItems.find(li => li.id === rowId);\n const nextPosition = currentPosition + direction;\n\n if (nextPosition > listItems.length - 1) {\n announceStatus(t(COPY.ARIA_RANK_AT_BOTTOM, {\n label: item.label,\n position: currentPosition + 1\n }));\n } else {\n updateRankingOrder(currentPosition, nextPosition);\n announceStatus(t(COPY.ARIA_RANK_MOVED_DOWN, {\n label: item.label,\n position: nextPosition + 1\n }));\n }\n };\n\n const handleApplicableChange = e => {\n /* istanbul ignore else: should never branch */\n if (showApplicability) {\n const {\n id,\n applicable\n } = e;\n const responses = listItems.map(item => ({ ...item,\n ...(item.id === id ? {\n applicable\n } : {}),\n ...(item.id === id && !applicable ? {\n value: choiceNotApplicable.id\n } : {})\n }));\n setListItems(responses);\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n }\n };\n /* istanbul ignore next: cannot test drag-and-drop logic */\n\n\n const handleDragStart = ({\n active\n }) => {\n setActiveId(active.id);\n setActiveItem(active);\n };\n /* istanbul ignore next: cannot test drag-and-drop logic */\n\n\n const handleDragEnd = ({\n active,\n over\n }) => {\n if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {\n moveItem(active.id, over === null || over === void 0 ? void 0 : over.id);\n }\n\n setRanksVisible(true);\n setActiveId(null);\n setActiveItem(null);\n };\n\n return React__default.createElement(QuestionField, {\n id: questionId,\n errorId: errorId,\n \"data-testid\": \"RankingQuestionType\",\n ...fieldProps\n }, React__default.createElement(\"div\", {\n role: \"status\",\n \"aria-live\": \"polite\",\n \"aria-atomic\": \"true\",\n className: srOnly\n }, statusMessage), React__default.createElement(DndContext, {\n sensors: sensors,\n collisionDetection: closestCenter,\n onDragStart: handleDragStart,\n onDragEnd: handleDragEnd\n }, React__default.createElement(SortableContext, {\n items: listItems,\n strategy: verticalListSortingStrategy\n }, React__default.createElement(\"ol\", {\n className: list\n }, listItems.map(({\n id: itemId,\n label,\n applicable\n }, index) => {\n return React__default.createElement(RankingItem, {\n id: itemId,\n key: itemId,\n label: label,\n position: index,\n listLength: listItems.length,\n applicable: applicable,\n showApplicability: !!showApplicability,\n onApplicableChange: handleApplicableChange,\n onOrderUp: handleOrderUp,\n onOrderDown: handleOrderDown,\n className: listItem,\n ranksVisible: ranksVisible\n });\n })), React__default.createElement(DragOverlay, null,\n /* istanbul ignore next: cannot test drag-and-drop logic */\n activeItem ? React__default.createElement(RankingRow$1, {\n id: activeItem.id,\n className: dragOverlay,\n label: (_a = activeItem.data.current) === null || _a === void 0 ? void 0 : _a.label,\n position: (_b = activeItem.data.current) === null || _b === void 0 ? void 0 : _b.index,\n ranksVisible: ranksVisible\n }) : null))));\n}\n\nfunction SingleTextbox({\n id: questionId,\n required,\n disabled,\n readOnly,\n responses: defaultResponses = [],\n onChange,\n size,\n ...fieldProps\n}) {\n const {\n error,\n errorId = createErrorId(questionId),\n title: {\n id: titleId\n }\n } = fieldProps;\n const defaultValue = useMemo(() => {\n var _a, _b;\n\n return (_b = (_a = defaultResponses.find(r => !!r.value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n []);\n\n const handleChange = e => {\n const responses = e.target.value ? [{\n id: questionId,\n value: e.target.value\n }] : [];\n onChange === null || onChange === void 0 ? void 0 : onChange(responses);\n };\n\n return React__default.createElement(\"div\", null, React__default.createElement(QuestionField, {\n id: questionId,\n errorId: errorId,\n \"data-testid\": \"SingleTextboxQuestionType\",\n ...fieldProps\n }, React__default.createElement(TextInput$1, {\n name: questionId,\n defaultValue: defaultValue,\n required: required,\n disabled: disabled,\n readOnly: readOnly,\n size: size,\n onChange: handleChange,\n \"aria-invalid\": !!error,\n \"aria-describedby\": error && errorId,\n \"aria-labelledby\": titleId,\n maxLength: TEXT_INPUT_MAX_CHARS\n })));\n}\n\nvar SingleTextbox$1 = withErrorBoundary(SingleTextbox);\nconst useStyles = createUseStyles(theme => {\n var _a, _b, _c, _d, _e, _f;\n\n return {\n textPresentationalStyles: {\n fontFamily: (_a = theme.questionTitle.fontFamily) !== null && _a !== void 0 ? _a : 'inherit',\n fontSize: (_b = theme.questionTitle.fontSize) !== null && _b !== void 0 ? _b : '16px',\n fontWeight: (_c = theme.questionTitle.fontWeight) !== null && _c !== void 0 ? _c : theme.isAccessible ? 500 : 300,\n textDecoration: (_d = theme.questionTitle.textDecoration) !== null && _d !== void 0 ? _d : 'inherit',\n fontStyle: (_e = theme.questionTitle.fontStyle) !== null && _e !== void 0 ? _e : 'inherit',\n color: (_f = theme.questionTitle.color) !== null && _f !== void 0 ? _f : 'inherit'\n },\n buttonStyles: {\n marginTop: '20px'\n }\n };\n});\n\nfunction TextPresentational({\n text,\n padding = {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n },\n id,\n okButton = {\n visible: false\n }\n}) {\n const richTextId = `text-presentational-${id}`;\n const {\n textPresentationalStyles,\n buttonStyles\n } = useStyles();\n const {\n visible: showButton,\n ...buttonProps\n } = okButton;\n return React__default.createElement(QuestionSpacing, {\n padding: padding,\n \"data-testid\": \"TextPresentational\"\n }, React__default.createElement(RichText, {\n id: richTextId,\n element: \"div\",\n text: text,\n className: textPresentationalStyles\n }), showButton && React__default.createElement(Button, { ...buttonProps,\n className: buttonStyles\n }));\n}\n\nvar TextPresentational$1 = withErrorBoundary(TextPresentational);\nexport { BestWorst$1 as BestWorst, CaretDownIcon, CaretDownOutlineIcon, Checkbox$1 as Checkbox, CommentBox$1 as CommentBox, DateTime$1 as DateTime, Dropdown$1 as Dropdown, ImageChoice$1 as ImageChoice, ImagePresentational$1 as ImagePresentational, MultipleChoice, MultipleTextbox, NativeSelect, SelectAnswerOption as NativeSelectOption, Nps, Ranking, SingleTextbox$1 as SingleTextbox, TextPresentational$1 as TextPresentational };","import React from 'react';\nimport { createUseStyles, useTheme, createGenerateId, JssProvider, ThemeProvider } from 'react-jss';\nimport { useSurveyTheme } from '@sm/webassets';\nconst smFont = \"'National 2', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'MS ゴシック', 'MS Gothic', sans-serif\";\nconst grey = 'rgba(0,0,0,0.05)';\n/** SmQuestion specific augmentation to the SurveyTheme */\n\nconst themeAugmentation = {\n // Tokens - shared across all surveys\n fontFamily: smFont,\n fontSize: {\n body: 16\n },\n fontWeight: {\n ultralight: 200,\n light: 300,\n regular: 400,\n medium: 500,\n bold: 700\n },\n nextButton: {\n backgroundColor: '#00BF6F',\n color: '#FFFFFF'\n },\n input: {\n activeColor: '#00BF6F',\n // Light | Dark BG are shared across all surveys\n bgColor: grey\n },\n border: {\n defaultColor: '#999',\n correctColor: '#00BF6F',\n wrongColor: '#F05B24'\n },\n correctAnswerHighlightColor: grey\n};\n/**\n * Calculates highlight/selected color based on theme-properties\n * @see https://code.corp.surveymonkey.com/devmonkeys/smlib.surveytemplates/blob/6a4520867c756527c4ae4c0861b64e41ae3dd196/smlib/surveytemplates/themes_v3/base_css.jinja2#L249-L274\n * @param {SurveyThemeType} theme survey-theme object\n * @param {boolean} [isNps=true] use `nps` value (default true).\n * In the original, the current CSS always uses the nps value\n * @returns {string} the RGBA color value\n *\n * @todo move logic to @sm/webassets:SurveyTheme or direct theme-values\n */\n\nconst getQuestionHighlightColor = (theme, isNps = true) => {\n var _a;\n\n const titleColor = (_a = theme.titleColor) === null || _a === void 0 ? void 0 : _a.replace(/\\s/g, ''); // theme with dark background\n\n if (theme.isDark) {\n return isNps ? 'rgba(0,0,0,0.40)' : 'rgba(0,0,0,0.15)';\n }\n /**\n * Iceberg and Arctic Specs\n * @see https://momentiveai.atlassian.net/browse/ENT-3452\n *\n * @todo change to use `theme.name` when added to @sm/webassets\n */\n\n\n if (titleColor === 'rgba(5,70,126,1)') {\n // Arctic theme rgba of #c9f2f4\n return 'rgba(201,242,244,1)';\n }\n\n if (titleColor === 'rgba(0,0,96,1)') {\n // Iceberg theme rgba of #1fd8ea\n return 'rgba(31,216,234,1)';\n }\n\n return 'rgba(0,0,0,0.05)'; // Pastel theme\n};\n/** Augments `theme` with SmQuestion specific theme attributes */\n\n\nconst applySurveyThemeAugmentation = theme => {\n var _a, _b, _c;\n\n const questionHighlightColor = getQuestionHighlightColor(theme);\n return { ...themeAugmentation,\n nextButton: {\n backgroundColor: theme.primaryAccentColor || themeAugmentation.nextButton.backgroundColor,\n color: theme.secondaryAccentColor || themeAugmentation.nextButton.color\n },\n input: {\n activeColor: theme.primaryAccentColor || themeAugmentation.input.activeColor,\n bgColor: questionHighlightColor\n },\n border: {\n defaultColor: theme.isAccessible ? (_a = theme.answerColor) !== null && _a !== void 0 ? _a : '#999' : '#999',\n correctColor: theme.isAccessible ? (_b = theme.answerColor) !== null && _b !== void 0 ? _b : '#999' : '#00BF6F',\n wrongColor: theme.isAccessible ? (_c = theme.answerColor) !== null && _c !== void 0 ? _c : '#999' : '#F05B24'\n },\n correctAnswerHighlightColor: questionHighlightColor,\n ...theme // keep theme last to allow user to overwrite augmentation\n\n };\n};\n/**\n * Dummy SurveyTheme\n *\n * _Not a real theme - only use for testing_\n */\n\n\nconst DUMMY_SURVEY_THEME = {\n name: 'Dummy Survey Theme',\n // Survey-specific styles\n layout: 'BACKGROUND_FULL_TEXT_CENTER',\n titleColor: 'rgba(255,51,0,1)',\n questionColor: 'rgba(79,122,39,1)',\n answerColor: 'rgba(56,136,254,1)',\n primaryAccentColor: '#00BF6F',\n secondaryAccentColor: '#FFFFFF',\n primaryBackgroundColor: '#F7F8FA',\n secondaryBackgroundColor: '#ccf2e2',\n isAccessible: false,\n isDark: false,\n isCustomTheme: false,\n fontFamily: smFont,\n fontSize: {\n body: 16\n },\n fontWeight: {\n ultralight: 200,\n light: 300,\n regular: 400,\n medium: 500,\n bold: 700\n },\n // Survey-specific component Styles\n surveyPage: {\n overlayColor: 'rgba(217,238,236,0.68)',\n backgroundImage: 'url(https://images.pexels.com/photos/2760856/pexels-photo-2760856.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)'\n },\n surveyTitle: {\n fontSize: 25,\n fontFamily: 'Montserrat,Arial,Helvetica',\n fontWeight: 700,\n fontStyle: 'normal',\n textDecoration: 'none'\n },\n pageTitle: {\n fontSize: 25,\n fontFamily: 'Montserrat,Arial,Helvetica',\n fontWeight: 700,\n fontStyle: 'normal',\n textDecoration: 'none'\n },\n button: {\n fontSize: 15,\n fontFamily: 'National2',\n fontWeight: 400\n },\n error: {\n fontSize: 16,\n fontFamily: 'arial,sans-serif',\n fontWeight: 500,\n fontStyle: 'normal',\n textDecoration: 'none'\n },\n exitLink: {\n fontSize: 12,\n fontWeight: 300,\n backgroundColor: 'rgba(0,0,0,0)'\n },\n logo: {\n enabled: true,\n image: {\n url: 'https://sm-assets-mt1.s3.amazonaws.com/survey/518810755/6816175a-dfd7-4cc3-8b5c-64fd07d6f491.jpeg'\n }\n },\n progressBar: {\n enabled: true,\n position: 'DISABLED',\n showPercent: true,\n showPageNumber: true\n },\n questionBody: {\n color: '#333e48',\n highlightColor: 'rgba(208,210,211,1)',\n fontSize: 18,\n fontFamily: smFont,\n fontWeight: 300,\n fontStyle: 'normal',\n textDecoration: 'none'\n },\n questionTitle: {\n fontSize: 20,\n fontFamily: smFont,\n fontWeight: 300,\n fontStyle: 'normal',\n textDecoration: 'none',\n color: '#333e48'\n },\n breakpoints: {\n xxs: {\n max: '480px'\n },\n xs: {\n min: '481px',\n max: '640px'\n },\n sm: {\n min: '641px',\n max: '768px'\n },\n md: {\n min: '769px',\n max: '1024px'\n },\n lg: {\n min: '1025px',\n max: '1200px'\n },\n xl: {\n min: '1201px'\n }\n }\n};\n/**\n * Dummy AugmentedSurveyTheme (pre-augmented SurveyTheme)\n *\n * _Not a real theme - only use for testing_\n */\n\nconst DUMMY_AUGMENTED_SURVEY_THEME = { ...DUMMY_SURVEY_THEME,\n ...themeAugmentation\n};\nconst prefix = 'smqr-';\nconst selectors = [`[class*='${prefix}']`, `[class*='${prefix}']::before`, `[class*='${prefix}']::after`];\nconst resetStyles = {\n '-webkit-font-smoothing': 'antialiased',\n boxSizing: 'border-box',\n listStyle: 'none',\n margin: 0,\n padding: 0\n};\nconst useStyles = createUseStyles({\n '@global': {\n [selectors.join(',')]: resetStyles\n }\n}, {\n // Ensure this gets added to as the first stylesheet\n // ref: https://github.com/cssinjs/jss/blob/master/packages/react-jss/src/utils/getSheetIndex.js#L3-L16\n index: (Number.MIN_SAFE_INTEGER || -1e9) - 1,\n name: 'smquestions-respondent-global-styles'\n});\n/* Must by rendered inside a ThemeProvider with the RespondentTheme */\n\nfunction SurveyGlobalStyles() {\n const theme = useTheme();\n useStyles({\n theme\n });\n return null;\n}\n/* Wraps all components and ThemeProvider of the Respondent experience */\n\n\nfunction SurveyStylesProvider({\n children,\n ...props\n}) {\n // https://cssinjs.org/jss-api?v=v10.4.0#generate-your-class-names\n const generateJssId = React.useMemo(() => createGenerateId(), []);\n\n const generateId = (rule, srcSheet) => {\n var _a;\n\n const sheet = srcSheet;\n\n if (sheet) {\n sheet.options.classNamePrefix = prefix;\n sheet.options.index = (_a = sheet.options.index) !== null && _a !== void 0 ? _a : 10;\n }\n\n return generateJssId(rule, sheet);\n };\n\n return React.createElement(JssProvider, { ...props,\n generateId: generateId\n }, children);\n}\n\nfunction SurveyThemeWrapper({\n children\n}) {\n const theme = useSurveyTheme();\n return React.createElement(SurveyStylesProvider, null, React.createElement(ThemeProvider, {\n theme: applySurveyThemeAugmentation(theme)\n }, React.createElement(SurveyGlobalStyles, null), children));\n}\n\nexport { DUMMY_AUGMENTED_SURVEY_THEME, DUMMY_SURVEY_THEME, SurveyGlobalStyles, SurveyStylesProvider, SurveyThemeWrapper, applySurveyThemeAugmentation };","import React__default, { createContext, useContext, useMemo } from 'react';\nimport { E as ErrorBoundary } from './vendor-8000eab9.js';\nimport { FallbackComponent } from '@sm/question-ui/helpers';\nimport { getTypeId } from '@sm/question-definitions';\n\nconst filterVisualizationByQuestionType = typeId => qd => {\n const [qts] = qd;\n return qts.includes(typeId);\n};\n\nconst declareVisualization = (questionTypes, capabilities, component) => {\n return [questionTypes, capabilities, component];\n};\n\nconst providerAccessContext = createContext(null);\n\nconst useProviderAccessContext = () => {\n const access = useContext(providerAccessContext);\n\n if (!access) {\n throw new Error('Must call useProviderAccessContext inside a properly setup Capability Provider');\n }\n\n const {\n useUpstreamConfig,\n useVisualizationList\n } = access;\n return {\n useVisualizationList,\n useUpstreamConfig\n };\n};\n/** providerFactory\n * Creates a helper component that enables a CapabilityProvider to store the appropriate configurations,\n * making them available to the visualizations through the generic controllers. It makes sure that all\n * Visualizations have the proper types passed onto them.\n * @param visualizationList list of visualization definitions for all the visualizations that will be\n * supported by this Capability Provider.\n * @returns React Context Provider accepting the appropriate configuration for the CapabilityProvider\n */\n\n\nconst providerFactory = visualizationList => {\n const ctx = React__default.createContext(null); // TODO: further filter types to match the ones in the right indexes based on capability\n\n const useVisualizationList = capability => visualizationList.filter(([, fs]) => fs.indexOf(capability) >= 0);\n\n const useUpstreamConfig = () => {\n const config = useContext(ctx);\n\n if (!config) {\n throw new Error('Must call useUpstreamConfig inside a properly set up Capability Provider');\n }\n\n return config;\n };\n\n const providerValue = {\n useVisualizationList: useVisualizationList,\n useUpstreamConfig: useUpstreamConfig\n };\n return function ProvidersWrapper({\n children,\n value\n }) {\n return React__default.createElement(ErrorBoundary, {\n FallbackComponent: FallbackComponent\n }, React__default.createElement(providerAccessContext.Provider, {\n value: providerValue\n }, React__default.createElement(ctx.Provider, {\n value: value\n }, children)));\n };\n};\n\nfunction UnsupportedVisualization({\n question: {\n typeId\n }\n}) {\n return React__default.createElement(\"div\", null, \"Unsupported Visualization for \", typeId);\n}\n\nconst createVisualization = (capability, questionTypeId, visualizationOptions, upstreamActions, settings, renderProps) => {\n const [,, VisualizationComponent] = visualizationOptions.find(filterVisualizationByQuestionType(questionTypeId)) || [];\n\n if (!VisualizationComponent) {\n return function UnsupportedVisualizationWrapper({\n question\n }) {\n return React__default.createElement(UnsupportedVisualization, {\n question: question\n });\n };\n }\n\n return function VisualizationComponentWrapper({\n question,\n displayOptions,\n namedSlots,\n toExternalQuestion\n }) {\n return React__default.createElement(VisualizationComponent, {\n capability: capability,\n question: question,\n upstreamActions: upstreamActions,\n settings: settings,\n displayOptions: displayOptions,\n renderProps: renderProps,\n toExternalQuestion: toExternalQuestion,\n namedSlots: namedSlots\n });\n };\n};\n/** Finds and attaches a typeId to an `ExternalQuestion` */\n\n\nconst useExternalQuestionAugmentation = (externalQuestion, responseSet) => {\n return useMemo(() => {\n const typeId = getTypeId(externalQuestion);\n\n if (!typeId) {\n throw new Error(`Unsupported Question Type of family ${externalQuestion.family}, variant ${externalQuestion.variant}.`);\n }\n\n if (responseSet !== undefined) {\n return { ...externalQuestion,\n typeId,\n ...responseSet\n };\n }\n\n return { ...externalQuestion,\n typeId\n };\n }, [externalQuestion, responseSet]);\n};\n\nexport { useExternalQuestionAugmentation as a, createVisualization as c, declareVisualization as d, providerFactory as p, useProviderAccessContext as u };","import * as React from 'react';\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n\n _setPrototypeOf(subClass, superClass);\n}\n\nvar changedArray = function changedArray(a, b) {\n if (a === void 0) {\n a = [];\n }\n\n if (b === void 0) {\n b = [];\n }\n\n return a.length !== b.length || a.some(function (item, index) {\n return !Object.is(item, b[index]);\n });\n};\n\nvar initialState = {\n error: null\n};\n\nvar ErrorBoundary = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(ErrorBoundary, _React$Component);\n\n function ErrorBoundary() {\n var _this;\n\n for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {\n _args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;\n _this.state = initialState;\n _this.updatedWithError = false;\n\n _this.resetErrorBoundary = function () {\n var _this$props;\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n _this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);\n\n _this.reset();\n };\n\n return _this;\n }\n\n ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {\n return {\n error: error\n };\n };\n\n var _proto = ErrorBoundary.prototype;\n\n _proto.reset = function reset() {\n this.updatedWithError = false;\n this.setState(initialState);\n };\n\n _proto.componentDidCatch = function componentDidCatch(error, info) {\n var _this$props$onError, _this$props2;\n\n (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);\n };\n\n _proto.componentDidMount = function componentDidMount() {\n var error = this.state.error;\n\n if (error !== null) {\n this.updatedWithError = true;\n }\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var error = this.state.error;\n var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error\n // happens to *also* be in the resetKeys array, we'd end up resetting\n // the error boundary immediately. This would likely trigger a second\n // error to be thrown.\n // So we make sure that we don't check the resetKeys on the first call\n // of cDU after the error is set\n\n if (error !== null && !this.updatedWithError) {\n this.updatedWithError = true;\n return;\n }\n\n if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {\n var _this$props$onResetKe, _this$props3;\n\n (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);\n this.reset();\n }\n };\n\n _proto.render = function render() {\n var error = this.state.error;\n var _this$props4 = this.props,\n fallbackRender = _this$props4.fallbackRender,\n FallbackComponent = _this$props4.FallbackComponent,\n fallback = _this$props4.fallback;\n\n if (error !== null) {\n var _props = {\n error: error,\n resetErrorBoundary: this.resetErrorBoundary\n };\n\n if ( /*#__PURE__*/React.isValidElement(fallback)) {\n return fallback;\n } else if (typeof fallbackRender === 'function') {\n return fallbackRender(_props);\n } else if (FallbackComponent) {\n return /*#__PURE__*/React.createElement(FallbackComponent, _props);\n } else {\n throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');\n }\n }\n\n return this.props.children;\n };\n\n return ErrorBoundary;\n}(React.Component);\n\nvar classnamesExports = {};\nvar classnames = {\n get exports() {\n return classnamesExports;\n },\n\n set exports(v) {\n classnamesExports = v;\n }\n\n};\n/*!\n Copyright (c) 2018 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n\n(function (module) {\n /* global define */\n (function () {\n var hasOwn = {}.hasOwnProperty;\n\n function classNames() {\n var classes = [];\n\n for (var i = 0; i < arguments.length; i++) {\n var arg = arguments[i];\n if (!arg) continue;\n var argType = typeof arg;\n\n if (argType === 'string' || argType === 'number') {\n classes.push(arg);\n } else if (Array.isArray(arg)) {\n if (arg.length) {\n var inner = classNames.apply(null, arg);\n\n if (inner) {\n classes.push(inner);\n }\n }\n } else if (argType === 'object') {\n if (arg.toString === Object.prototype.toString) {\n for (var key in arg) {\n if (hasOwn.call(arg, key) && arg[key]) {\n classes.push(key);\n }\n }\n } else {\n classes.push(arg.toString());\n }\n }\n }\n\n return classes.join(' ');\n }\n\n if (module.exports) {\n classNames.default = classNames;\n module.exports = classNames;\n } else {\n window.classNames = classNames;\n }\n })();\n})(classnames);\n\nvar classNames = classnamesExports;\nexport { ErrorBoundary as E, classNames as c };","import React__default, { useContext, useEffect, useRef, useState, useCallback, useLayoutEffect, useMemo, forwardRef } from 'react';\nimport { E as ErrorBoundary, c as classNames } from './vendor-44a39198.js';\nimport { createUseStyles, useTheme } from 'react-jss';\nimport { defineMessages, t, L10NContext, T } from '@sm/intl';\nimport { sanitizeString } from '@sm/utils';\nimport { uniqueId, visuallyHidden } from '@wds/utils';\nimport ReactDOM from 'react-dom';\nimport getFontWeights from '@sm/webassets/dist/components/SurveyTheme/getFontWeights';\nimport unescaper from 'lodash.unescape';\nconst useStyles$h = createUseStyles(theme => ({\n wdsIcons: ({\n color,\n size\n }) => {\n var _a, _b, _c;\n\n const fontSize = size ? {\n fontSize: theme.iconSize[size]\n } : {\n fontSize: 'inherit'\n };\n const chosenColor = // @ts-expect-error Fallback styles are acceptable\n ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a.text[color]) || ((_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b[color]) === null || _c === void 0 ? void 0 : _c.main) || 'currentColor';\n return { ...fontSize,\n width: '1em',\n height: '1em',\n display: 'inline-block',\n verticalAlign: 'middle',\n textAlign: 'center',\n fill: chosenColor\n };\n }\n})); // https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging\n\nconst getDisplayName = Component => Component.displayName || Component.name || 'Component';\n\nfunction withIcon(Component) {\n function WithIcon({\n color,\n title,\n size,\n ...rest\n }) {\n const classes = useStyles$h({\n color,\n size\n });\n return React__default.createElement(\"svg\", {\n className: classes.wdsIcons,\n viewBox: \"0 0 16 16\",\n preserveAspectRatio: \"xMidYMid\",\n \"aria-label\": title,\n role: title ? 'img' : 'presentation',\n ...rest\n }, React__default.createElement(Component, null));\n }\n\n WithIcon.displayName = `WithIcon(${getDisplayName(Component)})`;\n\n WithIcon.getOriginalComponent = () => Component;\n\n return WithIcon;\n}\n\ncreateUseStyles({\n svgContainer: {\n display: 'inline-block',\n width: '1em',\n height: '1em'\n }\n});\n\nfunction DocumentXIconPath() {\n return React__default.createElement(\"path\", {\n d: \"m5.94.005 8.012.012C14.53.018 15 .487 15 1.067V14.95c0 .58-.47 1.05-1.05 1.05H2.05C1.47 16 1 15.53 1 14.95V4.94L5.94.004zM7 1.505V4.95c0 .541-.41.987-.936 1.044L5.95 6H2.5v8.5h11V1.514L7 1.505zM6.557 7.53 8 8.973 9.443 7.53a.765.765 0 0 1 1.083 1.082l-1.444 1.443 1.444 1.444a.765.765 0 0 1-1.083 1.082L8 11.138 6.557 12.58A.765.765 0 1 1 5.474 11.5l1.444-1.444-1.444-1.443A.765.765 0 1 1 6.557 7.53zM5.5 2.563 3.561 4.5H5.5V2.562z\"\n });\n}\n\nvar IconDocumentX = withIcon(DocumentXIconPath);\nconst useStyles$g = createUseStyles(theme => {\n var _a, _b;\n\n return {\n fallbackComponent: {\n fontFamily: (_b = (_a = theme.questionBody) === null || _a === void 0 ? void 0 : _a.fontFamily) !== null && _b !== void 0 ? _b : {},\n color: theme.questionColor,\n border: `1px solid ${theme.questionColor}`,\n borderRadius: '5px',\n width: '100%',\n height: '100%',\n minHeight: '220px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n '& svg': {\n fill: theme.questionColor\n }\n },\n errorMessage: {\n marginLeft: `8px` // equivalent to wrench theme.spacing[2]\n\n }\n };\n});\nconst COPY$4 = defineMessages({\n ERROR: {\n id: 'FallbackComponent.ERROR',\n defaultMessage: 'Error loading question',\n description: '[Type: label][Vis: high] - error message indicating a question could not be loaded'\n }\n});\n\nfunction FallbackComponent() {\n const {\n fallbackComponent,\n errorMessage\n } = useStyles$g();\n return React__default.createElement(\"div\", {\n className: fallbackComponent\n }, React__default.createElement(IconDocumentX, null), React__default.createElement(\"p\", {\n className: errorMessage\n }, t(COPY$4.ERROR)));\n}\n\nconst withErrorBoundary = Component => {\n const displayName = Component.displayName || Component.name || 'Component';\n\n function ComponentWithErrorBoundary(props) {\n return React__default.createElement(ErrorBoundary, {\n FallbackComponent: FallbackComponent\n }, React__default.createElement(Component, { ...props\n }));\n }\n\n ComponentWithErrorBoundary.displayName = `withErrorBoundary(${displayName})`;\n return ComponentWithErrorBoundary;\n};\n\nconst useStyles$f = createUseStyles(theme => {\n var _a, _b;\n\n return {\n tooltip: {\n 'span[data-tooltip] &': {\n display: 'none'\n },\n [`@media (min-width: ${(_b = (_a = theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md.min) !== null && _b !== void 0 ? _b : '769px'})`]: {\n 'span[data-tooltip]:hover &, span[data-tooltip]:focus &': {\n display: 'inline-block'\n }\n },\n position: 'absolute',\n left: ({\n center\n }) => center,\n bottom: 20,\n width: 275,\n transform: 'translate(-50%, -5px)',\n textAlign: 'center',\n zIndex: 12,\n fontSize: 13,\n '&:after': {\n position: 'absolute',\n bottom: -4,\n left: '50%',\n width: 10,\n height: 10,\n backgroundColor: 'white',\n content: '\"\"',\n marginLeft: -5,\n transform: 'rotate(45deg)',\n boxShadow: [[3, 5, 5, 'rgb(0 0 0 / 0.07)']],\n zIndex: 13\n }\n },\n tooltipBody: {\n display: 'inline-block',\n maxWidth: 275,\n color: 'black',\n fontWeight: 300,\n fontFamily: theme.fontFamily,\n fontStyle: 'normal',\n boxShadow: [[0, 2, 10, 0, 'rgb(0 0 0 / 0.14)']],\n background: 'white',\n padding: [[12, 16]],\n lineHeight: 1.4,\n borderRadius: 2,\n textAlign: 'left'\n }\n };\n});\nconst defaultSelectors = ['a[href]', 'button', 'textarea', 'input:not([type=\"hidden\"])', 'select', 'details', '[tabindex]:not([tabindex=\"-1\"])'];\n\nconst useFocusTrap = ({\n selectors = defaultSelectors\n} = {}) => {\n const focusRef = React__default.useRef(null);\n const [focusableEls, setEls] = React__default.useState([]);\n React__default.useEffect(() => {\n if (focusRef.current) {\n const els = Array.from(focusRef.current.querySelectorAll(selectors.join(',')));\n setEls(els);\n } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n }, [focusRef]);\n\n function handleFocus(e) {\n if (focusRef.current) {\n const focusableElements = focusableEls;\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstElement) {\n lastElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastElement) {\n firstElement.focus();\n e.preventDefault();\n }\n }\n }\n\n React__default.useEffect(() => {\n const handleKeyDown = e => {\n if (e.key === 'Tab') {\n handleFocus(e);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n });\n return focusRef;\n};\n\nconst useStyles$e = createUseStyles(theme => {\n var _a;\n\n return {\n modalOverlay: {\n zIndex: 999,\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n background: 'rgba(0,0,0,0.6)',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end'\n },\n modal: {\n position: 'relative',\n width: '85vw',\n minHeight: '20vw',\n marginBottom: 20,\n background: 'white',\n borderRadius: 2\n },\n closeBtn: {\n position: 'absolute',\n cursor: 'pointer',\n background: 'transparent',\n right: 0,\n border: 0,\n padding: 8,\n marginTop: 0,\n color: 'black',\n zIndex: 105\n },\n tooltipText: {\n color: ((_a = theme.questionBody) === null || _a === void 0 ? void 0 : _a.color) || '#333E48',\n fontFamily: theme.fontFamily,\n fontSize: 13,\n fontWeight: 400,\n lineHeight: '1.4',\n padding: [28, 12, 16]\n }\n };\n});\nconst COPY$3 = defineMessages({\n CLOSE_MODAL: {\n id: 'Modal.CloseModal',\n defaultMessage: 'Close tooltip',\n description: '[Type: label][Vis: Med] - close button text'\n }\n});\n\nfunction Modal({\n tooltip,\n closeModal\n}) {\n const {\n modalOverlay,\n closeBtn,\n modal,\n tooltipText\n } = useStyles$e();\n const closeRef = React__default.useRef(null);\n const tooltipId = uniqueId('tooltip-modal');\n const focusRef = useFocusTrap();\n\n const handleClick = e => {\n // click on button or overlay should close modal\n e.stopPropagation();\n\n if (e.currentTarget === e.target) {\n closeModal();\n }\n };\n\n React__default.useEffect(() => {\n // listen for ESC to close modal\n const handleKeydown = e => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n closeModal();\n }\n };\n\n document.addEventListener('keydown', handleKeydown);\n return () => {\n document.removeEventListener('keydown', handleKeydown);\n };\n }, [closeModal]);\n React__default.useEffect(() => {\n var _a;\n\n (_a = closeRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n }, []);\n return React__default.createElement(\"div\", {\n className: modalOverlay,\n onClick: handleClick,\n \"aria-hidden\": \"true\"\n }, React__default.createElement(\"div\", {\n ref: focusRef,\n className: modal,\n role: \"dialog\",\n \"aria-modal\": \"true\",\n \"aria-describedby\": tooltipId\n }, React__default.createElement(\"button\", {\n type: \"button\",\n className: closeBtn,\n ref: closeRef,\n onClick: handleClick,\n \"aria-label\": t(COPY$3.CLOSE_MODAL)\n }, \"\\u00D7\"), React__default.createElement(\"p\", {\n id: tooltipId,\n className: tooltipText\n }, tooltip)));\n}\n/** Displays a tooltip on hover for large screens and a modal on click for small screens */\n\n\nconst Tooltip = ({\n container,\n className,\n id = ''\n}) => {\n var _a;\n /** container center position to display tooltip */\n\n\n const center = container.offsetWidth / 2;\n const text = (_a = container.getAttribute('data-tooltip')) !== null && _a !== void 0 ? _a : '';\n const theme = useTheme();\n const {\n tooltip,\n tooltipBody\n } = useStyles$f({\n center\n });\n const [showModal, setShowModal] = React__default.useState(false);\n const [mode, setMode] = React__default.useState('TOOLTIP');\n\n const closeModal = () => {\n setShowModal(false);\n container.focus();\n };\n\n React__default.useEffect(() => {\n container.setAttribute('role', 'tooltip'); // make tooltip anchor focusable\n\n if (!container.hasAttribute('tabIndex')) {\n container.setAttribute('tabIndex', '0');\n } // opens modal if matches small screen breakpoint\n\n\n const openModal = () => {\n var _a, _b;\n\n const mql = window.matchMedia(`(max-width: ${(_b = (_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md.min) !== null && _b !== void 0 ? _b : '769px'})`);\n\n if (mql.matches) {\n setMode('MODAL');\n setShowModal(true);\n } else {\n setMode('TOOLTIP');\n }\n };\n\n const handleClick = () => {\n openModal();\n };\n\n const handleKeydown = e => {\n if (e.code === 'Enter' || e.code === 'Space') {\n e.preventDefault();\n e.stopPropagation();\n openModal();\n }\n }; // listen for click, ENTER or SPACE to open modal\n\n\n container.addEventListener('click', handleClick);\n container.addEventListener('keydown', handleKeydown);\n return () => {\n container.removeEventListener('click', handleClick);\n container.removeEventListener('keydown', handleKeydown);\n };\n }, [container, theme]);\n const modalEl = showModal ? React__default.createElement(Modal, {\n tooltip: text,\n closeModal: closeModal\n }) : null;\n const tooltipEl = React__default.createElement(\"div\", {\n className: classNames(tooltip, className)\n }, React__default.createElement(\"span\", {\n id: id,\n className: tooltipBody,\n \"aria-hidden\": \"true\"\n }, text));\n const child = mode === 'MODAL' ? modalEl : tooltipEl;\n const containerEl = mode === 'MODAL' ? document.body : container;\n return ReactDOM.createPortal(child, containerEl);\n};\n\nconst listSpacing = {\n margin: [16, 0],\n padding: [0, 0, 0, 40]\n};\nconst mediaReset = {\n border: 0,\n maxWidth: '100%'\n};\nconst useStyles$d = createUseStyles({\n richTextContent: {\n // Typography\n '& a': {\n // Links are not themed by default. Users must select a link color in the editor\n color: 'blue',\n textDecoration: 'underline',\n '&:hover': {\n cursor: 'pointer'\n },\n '&:focus': {\n outline: 'currentColor auto 1px'\n }\n },\n '& ol': { ...listSpacing,\n listStyleType: 'decimal'\n },\n '& ul': { ...listSpacing,\n listStyle: 'disc outside none',\n '& ul li': {\n listStyle: 'circle'\n }\n },\n '& p': {\n margin: [13, 0]\n },\n '& b': {\n fontWeight: 'bold'\n },\n '& strong': {\n fontWeight: 'bold'\n },\n '& em': {\n fontStyle: 'italic'\n },\n '& i': {\n fontStyle: 'italic'\n },\n '& big': {\n fontSize: 'larger'\n },\n '& small': {\n fontSize: 'smaller'\n },\n '& sup': {\n fontSize: '75%',\n lineHeight: 0,\n position: 'relative',\n top: '-0.5em',\n verticalAlign: 'baseline'\n },\n // Media embeds\n '& iframe': mediaReset,\n '& img': { ...mediaReset,\n height: 'auto',\n '-ms-interpolation-mode': 'bicubic'\n },\n '& span[data-tooltip]': {\n position: 'relative',\n display: 'inline',\n borderBottom: [[1, 'dashed']],\n textDecoration: 'inherit',\n cursor: 'pointer'\n }\n }\n}); // Support iframe video embeds and their matching attributes\n\nconst sanitizeOptions = {\n ADD_TAGS: ['iframe'],\n ADD_ATTR: ['target', 'allow', 'allowfullscreen', 'frameborder', 'sandbox', 'scrolling']\n};\n\nfunction RichText({\n id: elementId,\n element: Element = 'div',\n text,\n className,\n ...containerProps\n}) {\n const {\n richTextContent\n } = useStyles$d();\n const [tooltipNodes, setTooltipNodes] = React__default.useState([]);\n const tooltipRef = React__default.useRef(null);\n React__default.useEffect(() => {\n if (tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current) {\n const el = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current;\n setTooltipNodes(Array.from(el.querySelectorAll('[data-tooltip]')));\n }\n }, []);\n return React__default.createElement(React__default.Fragment, null, React__default.createElement(Element, {\n id: elementId,\n className: classNames(richTextContent, className),\n dangerouslySetInnerHTML: {\n __html: sanitizeString(text, sanitizeOptions)\n },\n ref: tooltipRef,\n translate: \"no\",\n ...containerProps\n }), tooltipNodes.map(container => {\n const id = uniqueId('rich-text-tooltip');\n container.setAttribute('aria-describedby', id);\n return React__default.createElement(Tooltip, {\n key: id,\n container: container,\n id: id\n });\n }));\n}\n\nconst textReset = {\n margin: 0\n};\nconst useStyles$c = createUseStyles(theme => {\n const {\n fontSize,\n ...questionTitleFormatting\n } = theme.questionTitle;\n const questionTitleFontSize = fontSize !== null && fontSize !== void 0 ? fontSize : {};\n return {\n addonContainer: {\n display: 'inline-block',\n margin: [0, 5],\n verticalAlign: 'text-bottom'\n },\n container: {\n position: 'relative'\n },\n questionNumber: ({\n isRTL\n }) => ({\n margin: isRTL ? '0 0 0 0.25em' : '0 0.25em 0 0'\n }),\n questionTitle: ({\n useDefaultFrontSize\n }) => {\n var _a;\n\n return { ...textReset,\n ...questionTitleFormatting,\n color: ((_a = theme.questionTitle) === null || _a === void 0 ? void 0 : _a.color) || theme.questionColor,\n fontSize: useDefaultFrontSize && !theme.isAccessible ? theme.fontSize.body : questionTitleFontSize,\n lineHeight: 1.25,\n whiteSpace: 'normal',\n wordWrap: 'break-word'\n };\n },\n requiredAsterisk: ({\n isRTL\n }) => ({\n display: 'inline-block',\n margin: isRTL ? '0 0 0 0.25em' : '0 0.25em 0 0'\n })\n };\n});\n\nfunction RespondentQuestionTitle({\n element: Element = 'div',\n addon,\n heading,\n id,\n number,\n numbered,\n required,\n useDefaultFrontSize = false,\n ...props\n}) {\n const {\n isRTL\n } = useContext(L10NContext);\n const {\n addonContainer,\n container,\n questionNumber,\n questionTitle,\n requiredAsterisk\n } = useStyles$c({\n useDefaultFrontSize,\n isRTL\n });\n return React__default.createElement(Element, {\n id: id,\n className: classNames(container, questionTitle),\n translate: \"no\",\n ...props\n }, required && React__default.createElement(\"span\", {\n \"aria-hidden\": true,\n className: requiredAsterisk\n }, \"*\"), numbered && React__default.createElement(\"span\", {\n className: questionNumber\n }, number, \".\"), React__default.createElement(RichText, {\n element: \"span\",\n text: heading\n }), addon && React__default.createElement(\"span\", {\n className: addonContainer\n }, addon));\n}\n\ncreateUseStyles(theme => {\n var _a;\n\n return {\n button: {\n color: theme.nextButton.color,\n backgroundColor: theme.nextButton.backgroundColor,\n fontFamily: (_a = theme.questionBody.fontFamily) !== null && _a !== void 0 ? _a : {},\n fontSize: 15,\n border: [1, 'solid', 'transparent'],\n borderRadius: 2,\n padding: [1, 6],\n maxWidth: '100%',\n minWidth: 60,\n minHeight: 40,\n cursor: 'pointer',\n overflowWrap: 'break-word',\n transition: `all .2s linear`,\n '&:focus, &:hover': {\n outlineOffset: 5,\n outline: `1px solid ${theme.answerColor}`,\n // Safari seems to have an outline bug, may not render without boxshadow\n boxShadow: '0 0 4px transparent'\n }\n }\n };\n});\ndefineMessages({\n OK_LABEL: {\n id: 'Button.OK_LABEL',\n defaultMessage: 'OK',\n description: '[Type: button][Vis: high] - question ok label'\n }\n});\n/** Referentially stable empty function\n *\n * e.g. as default or placeholder */\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\nconst EmptyFn = () => {};\n/* eslint-disable no-param-reassign, no-plusplus */\n\n/**\n * @name EasingFunctions- Useful easing equations\n * @comment only considering the t value for the range [0, 1] => [0, 1]\n */\n\n\nconst easingFunctions = {\n /** @comment linear - no easing, no acceleration */\n linear: t => t,\n\n /** @comment easeInQuad - accelerating from zero velocity */\n easeInQuad: t => t * t,\n\n /** @comment easeOutQuad - decelerating to zero velocity */\n easeOutQuad: t => t * (2 - t),\n\n /** @comment easeInOutQuad - acceleration until halfway, then deceleration */\n easeInOutQuad: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,\n\n /** @comment easeInCubic - accelerating from zero velocity */\n easeInCubic: t => t * t * t,\n\n /** @comment easeOutCubic - decelerating to zero velocity */\n easeOutCubic: t => --t * t * t + 1,\n\n /** @comment easeInOutCubic - acceleration until halfway, then deceleration */\n easeInOutCubic: t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,\n\n /** @comment easeInQuart - accelerating from zero velocity */\n easeInQuart: t => t * t * t * t,\n\n /** @comment easeOutQuart - decelerating to zero velocity */\n easeOutQuart: t => 1 - --t * t * t * t,\n\n /** @comment easeInOutQuart - acceleration until halfway, then deceleration */\n easeInOutQuart: t => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,\n\n /** @comment easeInQuint - accelerating from zero velocity */\n easeInQuint: t => t * t * t * t * t,\n\n /** @comment easeOutQuint - decelerating to zero velocity */\n easeOutQuint: t => 1 + --t * t * t * t * t,\n\n /** @comment easeInOutQuint - acceleration until halfway, then deceleration */\n easeInOutQuint: t => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t\n};\n/**\n * Given a start/end point of a scroll and time elapsed, calculate the scroll position we should be at\n */\n\nfunction getValue(start, end, elapsed, duration, easingType = 'linear') {\n if (elapsed > duration) {\n return end;\n }\n\n const easing = typeof easingType === 'string' ? easingFunctions[easingType] : easingType;\n return start + (end - start) * easing(elapsed / duration);\n}\n/**\n * Smoothly animate between two values\n */\n\n\nfunction animate({\n fromValue,\n toValue,\n onStart,\n onUpdate,\n onComplete,\n duration = 600,\n delay = 0,\n easingType = 'easeOutQuart'\n}) {\n const startTime = performance.now() + delay;\n\n const tick = () => {\n const elapsed = performance.now() - startTime;\n const time = getValue(fromValue, toValue, elapsed, duration, easingType);\n const callback = elapsed <= duration ? tick : onComplete !== null && onComplete !== void 0 ? onComplete : EmptyFn;\n\n const updateAnimation = () => {\n onUpdate(time, callback);\n };\n\n window.requestAnimationFrame(updateAnimation);\n };\n\n onStart === null || onStart === void 0 ? void 0 : onStart();\n\n if (delay > 0) {\n setTimeout(() => {\n tick();\n }, delay);\n } else {\n tick();\n }\n}\n\nconst useStyles$b = createUseStyles({\n visuallyHidden: visuallyHidden\n});\n\nfunction VisuallyHidden({\n children,\n element: Element\n}) {\n const {\n visuallyHidden\n } = useStyles$b();\n return React__default.createElement(Element, {\n className: visuallyHidden\n }, children);\n}\n\nconst useStyles$a = createUseStyles({\n paddingBox: ({\n padding,\n width\n }) => {\n return {\n paddingTop: (padding === null || padding === void 0 ? void 0 : padding.top) || 0,\n paddingBottom: (padding === null || padding === void 0 ? void 0 : padding.bottom) || 0,\n paddingLeft: (padding === null || padding === void 0 ? void 0 : padding.left) || 0,\n paddingRight: (padding === null || padding === void 0 ? void 0 : padding.right) || 0,\n width: width ? `${width.width}${width.format === 'PERCENT' ? '%' : 'px'}` : '100%',\n maxWidth: '100%'\n };\n }\n});\n\nfunction QuestionSpacing({\n padding,\n width,\n children,\n ...props\n}) {\n const {\n paddingBox\n } = useStyles$a({\n padding,\n width\n });\n return React__default.createElement(\"div\", {\n className: paddingBox,\n \"data-testid\": \"QuestionSpacing__paddingBox\",\n ...props\n }, children);\n}\n/**\n * Hook that calls the provided callback function when the ref element is blurred,\n * only if the next focus is outside the ref element\n *\n * @example\n * const ref = useRef(null);\n * useOnFocusLeave(ref, ()=> onLeaveQuestion());\n * \n */\n\n\nfunction useOnFocusLeave(ref, focusCallback) {\n useEffect(() => {\n const ele = ref === null || ref === void 0 ? void 0 : ref.current;\n\n function handleFocus(e) {\n if (!(ele === null || ele === void 0 ? void 0 : ele.contains(e.relatedTarget))) {\n focusCallback(ref);\n }\n }\n\n ele === null || ele === void 0 ? void 0 : ele.addEventListener('focusout', handleFocus);\n return () => {\n ele === null || ele === void 0 ? void 0 : ele.removeEventListener('focusout', handleFocus);\n };\n }, [ref, focusCallback]);\n}\n\nconst createFieldId = questionId => `question-field-${questionId}`;\n\nconst createLegendId = questionId => `question-title-legend-${questionId}`;\n\nconst createErrorRowId = questionId => `error-row-${questionId}`;\n\nconst useStyles$9 = createUseStyles({\n footerRow: ({\n hasFooterPadding\n }) => ({\n paddingTop: hasFooterPadding ? 20 : 0\n }),\n containerStyles: {\n position: 'relative',\n transition: 'opacity 500ms ease-out'\n },\n errorRow: {\n overflow: 'hidden'\n },\n formReset: {\n border: 0,\n minWidth: 0\n },\n headerRow: {\n marginBottom: 24,\n width: '100%'\n }\n});\nconst COPY$2 = defineMessages({\n QUESTION_TITLE: {\n id: 'QuestionFieldLayoutTemplate.QUESTION_TITLE',\n defaultMessage: 'Question Title',\n description: '[Type: Label][Vis: low] - question landmark for screen readers only'\n }\n});\n\nfunction QuestionFieldLayoutTemplate({\n footer,\n hasFooterPadding,\n children,\n clickShield,\n error,\n id,\n padding,\n width = {\n width: 100,\n format: 'PERCENT'\n },\n title,\n onSubmit,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onLeave = () => {},\n ...props\n}) {\n const {\n footerRow,\n containerStyles,\n formReset,\n errorRow,\n headerRow\n } = useStyles$9({\n hasFooterPadding,\n clickShield\n });\n const containerRef = useRef(null);\n const errorRef = useRef(null);\n /** Keep track of last error to enable error-hiding animation */\n\n const [lastShownError, setLastShownError] = useState(error);\n const handleKeydown = useCallback(event => {\n if (event.key === 'Enter') {\n onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();\n }\n }, [onSubmit]);\n /**\n * resolves double height animate issue with RAWR-1240\n */\n\n const isAnimating = useRef(false);\n useLayoutEffect(() => {\n const el = errorRef.current;\n\n if (!el || isAnimating.current) {\n return;\n }\n\n const hasError = !!error;\n const initialHeight = el.offsetHeight;\n el.style.height = 'auto'; // remove height to measure full size\n\n const {\n offsetHeight\n } = el;\n const fromValue = hasError ? 0 : offsetHeight;\n const toValue = hasError ? offsetHeight : 0; // don't animate if value is already correct (e.g. at initial load)\n\n if (initialHeight === toValue) {\n el.style.height = `${initialHeight}px`;\n return;\n }\n\n el.style.height = `${initialHeight}px`;\n animate({\n fromValue,\n toValue,\n duration: 300,\n delay: 200,\n onUpdate: (height, next) => {\n el.style.height = `${height}px`;\n next();\n },\n onStart: () => {\n isAnimating.current = true;\n },\n onComplete: () => {\n setLastShownError(error);\n isAnimating.current = false;\n }\n });\n }, [error]);\n const fieldsetRef = useRef(null);\n useOnFocusLeave(fieldsetRef, onLeave);\n useEffect(() => {\n const {\n current: container\n } = containerRef;\n container === null || container === void 0 ? void 0 : container.addEventListener('keydown', handleKeydown);\n return () => {\n return container === null || container === void 0 ? void 0 : container.removeEventListener('keydown', handleKeydown);\n };\n }, [containerRef, handleKeydown]);\n /**\n * This id is queried in RespWeb to calculate the offset for scroll-to-error animations in classic mode\n * ref: https://code.corp.surveymonkey.com/webplatform/smweb/pull/10725\n */\n\n let errorRowId;\n /** used in RespWeb for OQAATView */\n\n let fieldId;\n /** used in RespWeb for OQAATView */\n\n let questionTitleId;\n\n if (id) {\n errorRowId = createErrorRowId(id);\n fieldId = createFieldId(id);\n questionTitleId = createLegendId(id);\n }\n\n return React__default.createElement(\"div\", {\n ref: containerRef,\n id: fieldId,\n ...props,\n className: containerStyles\n }, React__default.createElement(VisuallyHidden, {\n element: \"div\"\n }, React__default.createElement(T, {\n desc: COPY$2.QUESTION_TITLE\n })), React__default.createElement(QuestionSpacing, {\n padding: padding,\n width: width\n }, React__default.createElement(\"div\", {\n ref: errorRef,\n id: errorRowId,\n className: errorRow\n }, error || lastShownError), React__default.createElement(\"fieldset\", {\n ref: fieldsetRef,\n className: formReset\n }, React__default.createElement(\"legend\", {\n id: questionTitleId,\n className: headerRow,\n tabIndex: -1\n }, title), children), footer && React__default.createElement(\"div\", {\n className: footerRow\n }, footer)));\n}\n/**\n * Calculate the max number of children each column can be filled in the layout\n * @param columns number of columns\n * @param total total child count\n * @description Based on the current implementation in production (as of Jan 20, 2021),\n * - if columns = 1, the max number of children per column = total (render all children vertically)\n * - if columns > 1, the max number of children per column = (total / columns) + 1\n */\n\n\nconst calculateMaxNumOfChildrenPerColumn = (columns, total) => {\n if (columns === 1) {\n return total;\n }\n\n const childrenPerColumn = total / columns;\n\n if (childrenPerColumn % 1 === 0) {\n return childrenPerColumn;\n }\n\n return Math.floor(childrenPerColumn) + 1;\n};\n/**\n * Divide the children array into slices for rendering\n * @param childrenArr - children array\n * @param maxCellsPerCol - maximum number of children per slice\n * @param totalColumns - number of columns\n * @example\n * childrenArr = [option1, option2, option3, option4, option5, option6, option7]\n * childrenPerSlice = 2\n * totalColumns = 3\n * output: [[option1, option2, option3], [option4, option5], [option6, option7]]\n */\n\n\nconst sliceChildren = (childrenArr, maxCellsPerCol, totalColumns) => {\n let index = 0;\n const result = [];\n const partialColumnsCount = totalColumns * maxCellsPerCol - childrenArr.length; // Calculate the number of fullColumns, to conditionally push slice with the correct # of cells\n\n let fullColumnsCount = totalColumns - partialColumnsCount;\n\n while (index < childrenArr.length) {\n if (fullColumnsCount > 0) {\n result.push(childrenArr.slice(index, index + maxCellsPerCol));\n index += maxCellsPerCol;\n } else {\n result.push(childrenArr.slice(index, index + maxCellsPerCol - 1));\n index += maxCellsPerCol - 1;\n }\n\n fullColumnsCount -= 1;\n }\n\n return result;\n};\n\nconst useStyles$8 = createUseStyles(theme => ({\n containerVertical: {\n display: 'initial'\n },\n containerHorizontal: {\n display: 'block'\n },\n\n /** shared between horizontal and vertical columns */\n column: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-start'\n },\n columnHorizontal: {},\n\n /** Horizontal Column that adjust width to content width */\n columnHorizontalAutoAdjust: {\n width: 'auto'\n },\n [`@media (min-width: ${theme.breakpoints.xs.min})`]: {\n containerVertical: {\n display: 'flex'\n },\n containerHorizontal: {\n display: 'flex',\n flexWrap: 'wrap'\n }\n },\n [`@media only screen and (min-width: ${theme.breakpoints.lg.min})`]: {\n columnHorizontal: {\n width: '19%'\n }\n },\n [`@media (min-width: ${theme.breakpoints.sm.min}) and (max-width: ${theme.breakpoints.md.max})`]: {\n columnHorizontal: {\n width: '24%'\n }\n },\n [`@media only screen and (max-width: ${theme.breakpoints.xxs.max})`]: {\n columnHorizontal: {\n width: '100%',\n display: 'block'\n },\n columnHorizontalAutoAdjust: {\n width: '100%',\n display: 'block'\n }\n },\n answerLayoutCell: ({\n gridCellMargin = '0'\n }) => ({\n margin: gridCellMargin,\n flex: [0, 0, 'auto'],\n wordBreak: 'normal',\n overflowWrap: 'anywhere'\n }),\n otherLayoutCell: ({\n otherCellMargin = '0'\n }) => ({\n margin: otherCellMargin\n })\n}));\n\nfunction QuestionAnswerLayoutTemplate({\n children,\n columns = 1,\n other,\n noneOfTheAbove,\n adjustToContent = false,\n gridCellMargin,\n otherCellMargin\n}) {\n const {\n containerVertical,\n containerHorizontal,\n column,\n columnHorizontal,\n columnHorizontalAutoAdjust,\n answerLayoutCell,\n otherLayoutCell\n } = useStyles$8({\n columns,\n adjustToContent,\n gridCellMargin,\n otherCellMargin\n });\n const isHorizontal = columns === 'horizontal';\n /* Based on the columns config, divide the question answers\n (children of this component) into column groups for rendering.\n The reason we need to do this is when there are multiple columns,\n the answers are listed vertically instead of horizontally.\n For example:\n If there are 3 answers and 2 columns,\n Then the ordering will be:\n Answer 1 Answer 3\n Answer 2\n NOT:\n Answer 1 Answer 2\n Answer 3\n * though `horizontal` uses this\n \n */\n\n const columnGroups = useMemo(() => {\n const totalChildren = React__default.Children.count(children);\n const totalColumns = columns === 'horizontal' ? totalChildren : columns;\n const childrenArray = React__default.Children.toArray(children);\n\n if (!other && !!noneOfTheAbove && columns !== 'horizontal') {\n childrenArray.push(noneOfTheAbove);\n }\n\n const answersPerColumn = columns === 'horizontal' ? 1 : calculateMaxNumOfChildrenPerColumn(totalColumns, totalChildren + (!other && !!noneOfTheAbove ? 1 : 0));\n return sliceChildren(childrenArray, answersPerColumn, totalColumns);\n }, [children, columns, noneOfTheAbove, other]);\n const columnClassNames = isHorizontal ? [column, adjustToContent ? columnHorizontalAutoAdjust : columnHorizontal] : column;\n return React__default.createElement(React__default.Fragment, null, React__default.createElement(\"div\", {\n className: isHorizontal ? containerHorizontal : containerVertical\n }, columnGroups.map((col, columnIndex) => React__default.createElement(\"div\", {\n key: `col-${columnIndex + 1}`,\n className: classNames(columnClassNames),\n \"data-testid\": \"answer-layout-column\"\n }, col.map((cell, cellIndex) => React__default.createElement(\"div\", {\n key: `cell-${cellIndex + 1}`,\n \"data-testid\": \"answer-layout-cell\",\n className: answerLayoutCell\n }, cell))))), other && React__default.createElement(\"div\", {\n className: otherLayoutCell\n }, other), (other && noneOfTheAbove || columns === 'horizontal') && React__default.createElement(\"div\", {\n className: otherLayoutCell,\n \"data-testid\": \"Other-NOTA\"\n }, noneOfTheAbove));\n}\n\ncreateUseStyles(theme => {\n var _a;\n\n return {\n icon: {\n color: '#F05B24',\n fontSize: theme.fontSize.body,\n alignSelf: 'flex-start',\n marginTop: 2,\n flexShrink: 0\n },\n validationMessage: {\n fontFamily: theme.fontFamily,\n lineHeight: 1.5,\n color: '#333e48',\n fontWeight: 400,\n fontSize: 16,\n padding: theme.isDark ? 8 : [4, 0],\n backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.9)' : '',\n borderRadius: 2,\n display: 'inline-flex',\n gap: 5,\n alignItems: 'center',\n marginBottom: 8,\n [`@media only screen and (max-width: ${(_a = theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs.max})`]: {\n width: '100%',\n padding: theme.isDark ? 4 : [4, 0]\n }\n }\n };\n});\nconst useStyles$7 = createUseStyles(theme => {\n var _a;\n\n const breakpointMedium = `@media only screen and (max-width: ${theme.breakpoints.md.max})`;\n const breakpointXsMin = `@media only screen and (min-width: ${theme.breakpoints.xs.min})`;\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n inputArea: {\n fontFamily: (_a = theme.questionBody.fontFamily) !== null && _a !== void 0 ? _a : {},\n fontWeight: fontWeightOptions.medium,\n fontSize: '18px',\n [breakpointMedium]: {\n fontSize: '16px'\n },\n lineHeight: '1.15em',\n padding: '6px 60px 6px 6px',\n maxWidth: '100%',\n [breakpointXsMin]: {\n // extra 66px to account for the padding\n width: ({\n cols\n }) => `calc(${cols}ch + 66px)`\n },\n width: '100%',\n border: `1px solid ${theme.answerColor}`,\n borderRadius: '0px',\n backgroundColor: '#fff',\n color: '#000',\n transition: 'all 0.1s linear',\n verticalAlign: 'top',\n textSizeAdjust: 'auto',\n '&:focus, &:hover': {\n outline: `2px solid ${theme.primaryAccentColor}`\n },\n '&:read-only:not(:disabled)': {\n borderColor: 'transparent',\n backgroundColor: theme.input.bgColor,\n color: theme.isDark ? '#fff' : '#000',\n opacity: 0.5\n },\n '&:disabled': {\n opacity: 0.4\n }\n }\n };\n});\n\nfunction TextArea({\n className,\n disabled = false,\n required = false,\n readOnly = false,\n cols = 50,\n ...props\n}, forwardedRef) {\n const {\n inputArea\n } = useStyles$7({\n cols\n });\n return React__default.createElement(\"textarea\", {\n className: classNames(inputArea, className),\n disabled: disabled,\n \"aria-disabled\": disabled,\n required: required,\n \"aria-required\": required,\n readOnly: readOnly,\n \"aria-readonly\": readOnly,\n spellCheck: true,\n ref: forwardedRef,\n ...props\n });\n}\n\nvar CommentBox = forwardRef(TextArea);\nconst useStyles$6 = createUseStyles(theme => {\n var _a;\n\n const breakpointMedium = `@media only screen and (max-width: ${theme.breakpoints.md.max})`;\n const breakpointXsMin = `@media only screen and (min-width: ${theme.breakpoints.xs.min})`;\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n inputField: {\n fontFamily: (_a = theme.questionBody.fontFamily) !== null && _a !== void 0 ? _a : {},\n fontSize: '18px',\n [breakpointMedium]: {\n fontSize: '16px'\n },\n fontWeight: fontWeightOptions.medium,\n lineHeight: '1.5em',\n height: ({\n autoHeight\n }) => autoHeight ? {} : '50px',\n maxWidth: '100%',\n width: '100%',\n [breakpointXsMin]: {\n // extra 12px to account for the padding\n width: ({\n size\n }) => `calc(${size}ch + 12px)`\n },\n padding: '6px',\n border: `1px solid ${theme.answerColor}`,\n borderRadius: '0px',\n backgroundColor: '#fff',\n color: '#000',\n transition: 'all 0.1s linear',\n '&:focus, &:hover': {\n outline: `2px solid ${theme.primaryAccentColor}`\n },\n '&:read-only:not(:disabled)': {\n borderColor: 'transparent',\n backgroundColor: theme.input.bgColor,\n color: theme.isDark ? '#fff' : '#000',\n opacity: 0.5\n },\n '&:disabled': {\n opacity: 0.4\n }\n }\n };\n});\n\nfunction TextInput({\n className,\n autoHeight = false,\n size = 50,\n required = false,\n disabled = false,\n readOnly = false,\n onChange: handleChange,\n ...props\n}, forwardedRef) {\n const {\n inputField\n } = useStyles$6({\n autoHeight,\n size\n });\n return React__default.createElement(\"input\", {\n type: \"text\",\n className: classNames(inputField, className),\n disabled: disabled,\n \"aria-disabled\": disabled,\n required: required,\n \"aria-required\": required,\n readOnly: readOnly,\n \"aria-readonly\": readOnly,\n spellCheck: true,\n onChange: handleChange,\n ...props,\n ref: forwardedRef\n });\n}\n\nvar SingleTextbox = forwardRef(TextInput);\ncreateUseStyles(theme => {\n return {\n commentLabelText: { ...theme.questionBody,\n marginBottom: 5,\n lineHeight: 1.25\n },\n commentLabel: {\n display: 'block'\n }\n };\n});\nconst useStyles$5 = createUseStyles(theme => {\n var _a; // Quiz results uses the default font size\n\n\n const defaultFontSize = theme.fontSize.body;\n const {\n fontFamily = 'inherit',\n fontWeight = 'inherit',\n fontStyle = 'inherit',\n textDecoration = 'inherit',\n highlightColor = 'inherit',\n color = 'inherit'\n } = (_a = theme.questionBody) !== null && _a !== void 0 ? _a : {};\n return {\n componentContainer: {\n position: 'relative'\n },\n labelContainer: {\n display: 'inline-block',\n position: 'relative',\n padding: 0,\n margin: [4, 2],\n borderRadius: 4\n },\n textContainer: {\n margin: [3, 0, 2],\n wordBreak: 'break-word',\n pointerEvents: 'none',\n fontFamily,\n fontWeight,\n fontStyle,\n textDecoration,\n highlightColor,\n color,\n fontSize: defaultFontSize\n },\n textInputContainer: {\n margin: [5, 0, 0, 0]\n }\n };\n});\n\nfunction QuizResultComment({\n optionText,\n textInputValue = '',\n textInputSize = 50,\n textInputParagraphLines = 1,\n id\n}) {\n const {\n componentContainer,\n labelContainer,\n textContainer,\n textInputContainer\n } = useStyles$5();\n return React__default.createElement(React__default.Fragment, null, React__default.createElement(\"div\", {\n className: componentContainer\n }, React__default.createElement(\"label\", {\n htmlFor: id,\n className: labelContainer\n }, React__default.createElement(\"div\", {\n className: textContainer\n }, React__default.createElement(RichText, {\n element: \"span\",\n text: optionText\n })))), React__default.createElement(\"div\", {\n className: textInputContainer\n }, textInputParagraphLines <= 1 ? React__default.createElement(SingleTextbox, {\n id: id,\n name: \"otherOptionText\",\n value: textInputValue,\n size: textInputSize,\n autoHeight: true,\n readOnly: true\n }) : React__default.createElement(CommentBox, {\n id: id,\n name: \"otherOptionText\",\n rows: textInputParagraphLines,\n defaultValue: textInputValue,\n cols: textInputSize,\n translate: \"no\",\n readOnly: true\n })));\n}\n\nvar useStyles$4 = createUseStyles({\n srOnly: visuallyHidden\n});\nconst COPY$1 = defineMessages({\n CORRECT: {\n id: 'SrText.CORRECT',\n defaultMessage: 'Correct',\n description: '[Type: label][Vis: med] - the answer was correct'\n },\n INCORRECT: {\n id: 'SrText.INCORRECT',\n defaultMessage: 'Incorrect',\n description: '[Type: label][Vis: med] - the answer was incorrect '\n }\n});\n\nfunction SrText({\n icon\n}) {\n const {\n srOnly\n } = useStyles$4();\n return React__default.createElement(\"div\", {\n className: srOnly\n }, icon ? React__default.createElement(T, {\n desc: icon === 'correct' ? COPY$1.CORRECT : COPY$1.INCORRECT\n }) : null);\n}\n\nfunction QuizCorrectIcon({\n isAriaHidden = false\n}) {\n return React__default.createElement(\"svg\", {\n width: \"14px\",\n height: \"10px\",\n viewBox: \"0 0 14 10\",\n version: \"1.1\",\n \"data-testid\": \"quiz-result-correct-icon\",\n \"aria-hidden\": isAriaHidden\n }, React__default.createElement(\"g\", {\n stroke: \"none\",\n strokeWidth: \"1\",\n fill: \"none\",\n fillRule: \"evenodd\"\n }, React__default.createElement(\"g\", {\n transform: \"translate(-257, -338.75)\",\n fill: \"#F2FAE8\"\n }, React__default.createElement(\"g\", {\n id: \"check-correct\",\n transform: \"translate(254, 334)\"\n }, React__default.createElement(\"g\", null, React__default.createElement(\"path\", {\n d: \"M4,10.3259737 C4,10.4757908 4.04494448,10.5956428 4.13483478,10.6855331 L7.33716071,13.8990952 C7.42705101,13.9889855 7.55626637,14.069511 7.72481069,14.1406742 C7.893355,14.2118373 8.04504261,14.2474184 8.17987806,14.2474184 L8.78663455,14.2474184 C9.07877802,14.2474184 9.359681,14.1313118 9.6293519,13.8990952 L16.4160356,7.08993903 C16.5059259,7.00004873 16.5508704,6.88206948 16.5508704,6.73599774 C16.5508704,6.589926 16.5059259,6.47194675 16.4160356,6.38205645 L15.1575777,5.13483478 C15.0676874,5.04494448 14.9515809,5 14.8092545,5 C14.6669282,5 14.5433309,5.04494448 14.4384589,5.13483478 L8.85405194,10.7529504 C8.76416164,10.8428407 8.6443097,10.8877852 8.49449253,10.8877852 C8.34467537,10.8877852 8.22482343,10.8428407 8.13493313,10.7529504 L6.11241149,8.7304288 C6.02252119,8.6405385 5.90266926,8.59559403 5.75285209,8.59559403 C5.60303492,8.59559403 5.48318299,8.6405385 5.39329269,8.7304288 L4.13483478,9.96641425 C4.04494448,10.0563045 4,10.1761565 4,10.3259737 L4,10.3259737 Z\"\n }))))));\n}\n\nfunction QuizWrongIcon({\n isAriaHidden = false\n}) {\n return React__default.createElement(\"svg\", {\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n version: \"1.1\",\n \"data-testid\": \"quiz-result-wrong-icon\",\n \"aria-hidden\": isAriaHidden\n }, React__default.createElement(\"g\", {\n stroke: \"none\",\n strokeWidth: \"1\",\n fill: \"none\",\n fillRule: \"evenodd\"\n }, React__default.createElement(\"path\", {\n d: \"M0.281690141,9.92648775 C0.281690141,10.187088 0.368074254,10.4068447 0.54084507,10.5857643 L1.25070423,11.3208868 C1.42347504,11.4998064 1.63567949,11.5892649 1.88732394,11.5892649 C2.13896839,11.5892649 2.35117285,11.4998064 2.52394366,11.3208868 L5.03661972,8.71878646 C5.20939054,8.53986686 5.42159499,8.4504084 5.67323944,8.4504084 C5.92488389,8.4504084 6.1446,8.53986686 6.33239437,8.71878646 L8.82253521,11.3208868 C8.99530603,11.4998064 9.20751048,11.5892649 9.45915493,11.5892649 C9.71079938,11.5892649 9.93051549,11.4998064 10.1183099,11.3208868 L10.828169,10.5857643 C11.0009398,10.4068447 11.0873239,10.187088 11.0873239,9.92648775 C11.0873239,9.66588746 11.0009398,9.43835181 10.828169,9.24387398 L8.31549296,6.66511085 C8.14272214,6.47063302 8.05633803,6.24698687 8.05633803,5.99416569 C8.05633803,5.74134452 8.14272214,5.51769837 8.31549296,5.32322054 L10.828169,2.74445741 C11.0009398,2.54997958 11.0873239,2.32244393 11.0873239,2.06184364 C11.0873239,1.80124335 11.0009398,1.5814867 10.828169,1.40256709 L10.1183099,0.667444574 C9.93051549,0.488524971 9.71079938,0.399066511 9.45915493,0.399066511 C9.20751048,0.399066511 8.99530603,0.488524971 8.82253521,0.667444574 L6.33239437,3.26954492 C6.1446,3.44846453 5.92488389,3.53792299 5.67323944,3.53792299 C5.42159499,3.53792299 5.20939054,3.44846453 5.03661972,3.26954492 L2.52394366,0.667444574 C2.35117285,0.488524971 2.13896839,0.399066511 1.88732394,0.399066511 C1.63567949,0.399066511 1.42347504,0.488524971 1.25070423,0.667444574 L0.54084507,1.40256709 C0.368074254,1.5814867 0.281690141,1.80124335 0.281690141,2.06184364 C0.281690141,2.32244393 0.368074254,2.54997958 0.54084507,2.74445741 L3.05352113,5.32322054 C3.22629194,5.51769837 3.31267606,5.74134452 3.31267606,5.99416569 C3.31267606,6.24698687 3.22629194,6.47063302 3.05352113,6.66511085 L0.54084507,9.24387398 C0.368074254,9.43835181 0.281690141,9.66588746 0.281690141,9.92648775 L0.281690141,9.92648775 Z\",\n fill: \"#FFFFFF\"\n })));\n}\n\nconst icons = {\n correct: QuizCorrectIcon,\n wrong: QuizWrongIcon\n};\nconst useStyles$3 = createUseStyles(theme => {\n const size = {\n height: 20,\n width: 20\n };\n const containerBase = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...size\n };\n\n const getIconContainerBg = (highlight, backgroundColor, iconName) => {\n if (iconName === 'correct') {\n return '#00BF6F';\n }\n\n if (iconName === 'wrong') {\n return '#b32e22';\n }\n\n if (highlight) {\n return theme.correctAnswerHighlightColor;\n }\n\n return 'transparent';\n };\n\n const getIconContainerBorderColor = iconName => {\n if (iconName === 'correct') {\n return theme.border.correctColor;\n }\n\n if (iconName === 'wrong') {\n return theme.border.wrongColor;\n }\n\n return 'inherit';\n };\n\n const getIconContainerBackground = (highlight, backgroundColor) => {\n if (!backgroundColor) {\n return 'inherit';\n }\n\n if (highlight) {\n return theme.primaryBackgroundColor;\n }\n\n return backgroundColor;\n };\n\n return {\n radioContainer: {\n position: 'relative',\n ...size\n },\n radioInput: {\n opacity: 0,\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%'\n },\n iconContainer: ({\n highlight,\n iconName,\n type,\n backgroundColor\n }) => ({ ...containerBase,\n position: 'relative',\n borderRadius: type === 'radio' ? 10 : 2,\n height: iconName ? size.height : size.height - 2,\n border: iconName ? ['1px', 'solid', theme.border.defaultColor] : [],\n backgroundColor: getIconContainerBg(highlight, backgroundColor, iconName),\n borderColor: getIconContainerBorderColor(iconName)\n }),\n // container needed as background for alpha transparency in `correctAnswerHighlightColor`\n iconContainerBackground: ({\n highlight,\n type,\n iconName,\n backgroundColor\n }) => ({ ...containerBase,\n position: 'absolute',\n borderRadius: type === 'radio' ? 10 : 2,\n border: iconName ? [] : ['1px', 'solid', theme.border.defaultColor],\n backgroundColor: getIconContainerBackground(highlight, backgroundColor)\n })\n };\n});\n\nfunction InputIcon({\n type,\n id,\n ariaLabelledby,\n highlight = false,\n checked,\n isCorrect = true,\n ariaDescribedBy = [],\n noScreenReaderText = false,\n backgroundColor\n}) {\n let iconName;\n\n if (checked && isCorrect) {\n iconName = 'correct';\n } else if (checked) {\n iconName = 'wrong';\n }\n\n const {\n radioContainer,\n radioInput,\n iconContainer,\n iconContainerBackground\n } = useStyles$3({\n highlight,\n iconName,\n type,\n backgroundColor\n });\n const Icon = iconName && icons[iconName];\n return React__default.createElement(\"div\", {\n className: radioContainer\n }, React__default.createElement(\"input\", {\n id: id,\n className: radioInput,\n type: type,\n checked: !!checked,\n \"aria-labelledby\": ariaLabelledby || undefined,\n \"aria-describedby\": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined,\n readOnly: true\n }), React__default.createElement(\"div\", {\n className: iconContainerBackground\n }, React__default.createElement(\"div\", {\n className: iconContainer,\n \"data-testid\": \"quiz-results-icon-container\"\n }, Icon && React__default.createElement(Icon, {\n isAriaHidden: true\n }))), iconName && !noScreenReaderText && React__default.createElement(SrText, {\n icon: iconName\n }));\n}\n\nconst useStyles$2 = createUseStyles(theme => {\n var _a; // Quiz results uses the default font size\n\n\n const defaultFrontSize = theme.fontSize.body;\n const {\n fontFamily = 'inherit',\n fontWeight = 'inherit',\n fontStyle = 'inherit',\n textDecoration = 'inherit',\n highlightColor = 'inherit',\n color = 'inherit'\n } = (_a = theme.questionBody) !== null && _a !== void 0 ? _a : {};\n const fontWeightOptions = getFontWeights(theme.questionBody.fontFamily);\n return {\n componentContainer: {\n position: 'relative'\n },\n radioInput: {\n opacity: 0,\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%'\n },\n labelContainer: ({\n highlight,\n type\n }) => ({\n display: 'inline-block',\n position: 'relative',\n padding: [1, 8],\n backgroundColor: highlight ? theme.correctAnswerHighlightColor : 'initial',\n borderRadius: type === 'checkbox' ? 4 : 13,\n // fix for IE11 bug - images leaking out of label container\n boxSizing: 'border-box',\n maxWidth: '100%'\n }),\n textContainer: ({\n highlight\n }) => {\n var _a;\n\n return {\n /* Right and left margin are both defined to account for RTL direction styling. */\n margin: [3, 30, 2],\n wordBreak: 'break-word',\n fontFamily,\n fontWeight,\n fontStyle,\n textDecoration,\n highlightColor,\n color,\n ...(highlight ? {\n fontWeight: (_a = fontWeightOptions.medium) !== null && _a !== void 0 ? _a : {}\n } : {}),\n fontSize: defaultFrontSize\n };\n },\n iconContainer: {\n margin: 2,\n position: 'absolute'\n },\n textInputContainer: {\n margin: [5, 0, 0, 0]\n },\n [`@media (min-width: ${theme.breakpoints.sm.min})`]: {\n textInputContainer: {\n margin: [5, 0, 0, 32]\n }\n }\n };\n});\n\nfunction QuizResultChoices({\n id,\n type,\n optionText,\n highlight = false,\n icon,\n hasTextInput = false,\n textInputValue = '',\n textInputSize = 50,\n textInputParagraphLines = 1\n}) {\n const {\n componentContainer,\n labelContainer,\n textContainer,\n iconContainer,\n textInputContainer\n } = useStyles$2({\n highlight,\n icon,\n type\n });\n const uniqId = useMemo(() => uniqueId('id-'), []);\n const radioButtonId = id || uniqId;\n const textInputId = `caption-${radioButtonId}`;\n const inputId = `input-${radioButtonId}`;\n const ariaDescribedBy = [];\n\n if (hasTextInput) {\n ariaDescribedBy.push(textInputId);\n }\n\n return React__default.createElement(React__default.Fragment, null, React__default.createElement(\"div\", {\n className: componentContainer\n }, React__default.createElement(\"label\", {\n htmlFor: inputId,\n className: labelContainer\n }, React__default.createElement(\"div\", {\n className: iconContainer\n }, React__default.createElement(InputIcon, {\n type: type,\n id: inputId,\n checked: !!icon,\n isCorrect: icon === 'correct',\n highlight: highlight,\n ariaDescribedBy: ariaDescribedBy,\n noScreenReaderText: true\n })), React__default.createElement(\"div\", {\n className: textContainer,\n translate: \"no\"\n }, React__default.createElement(RichText, {\n element: \"span\",\n text: optionText\n })), React__default.createElement(SrText, {\n icon: icon\n }))), React__default.createElement(\"div\", {\n className: textInputContainer,\n translate: \"no\"\n }, hasTextInput && (textInputParagraphLines <= 1 ? React__default.createElement(SingleTextbox, {\n id: textInputId,\n name: \"otherOptionText\",\n value: textInputValue,\n size: textInputSize,\n \"aria-labelledby\": inputId,\n autoHeight: true,\n readOnly: true\n }) : React__default.createElement(CommentBox, {\n id: textInputId,\n name: \"otherOptionText\",\n rows: textInputParagraphLines,\n defaultValue: textInputValue,\n cols: textInputSize,\n \"aria-labelledby\": inputId,\n readOnly: true\n }))));\n}\n\nconst useStyles$1 = createUseStyles(theme => {\n return {\n imageChoice: {\n display: 'inline-block'\n },\n componentContainer: ({\n highlight\n }) => ({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n alignItems: 'center',\n width: 224,\n borderRadius: 2,\n border: highlight ? `2px solid ${theme.answerColor}` : '1px solid #D0D2D3'\n }),\n iconLabel: {\n position: 'absolute',\n zIndex: 1,\n top: 2,\n left: 2\n },\n imageContainer: ({\n highlight\n }) => ({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n height: 168,\n position: 'relative',\n backgroundColor: highlight ? theme.correctAnswerHighlightColor : 'rgb(239, 239, 239)'\n }),\n imageStyle: {\n maxHeight: '100%',\n maxWidth: '100%',\n height: 'auto',\n width: 'auto',\n pointerEvents: 'none',\n flex: 'none' // fix for IE 11 - images leaking out of container\n\n },\n captionStyle: ({\n highlight\n }) => {\n var _a;\n\n return {\n fontFamily: (_a = theme.questionBody.fontFamily) !== null && _a !== void 0 ? _a : {},\n display: 'block',\n backgroundColor: highlight ? theme.correctAnswerHighlightColor : 'initial',\n color: theme.answerColor,\n width: '100%',\n padding: [7, 9, 9, 7],\n fontWeight: highlight ? 500 : 'initial'\n };\n },\n srOnly: {\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n border: 0\n }\n };\n});\n\nfunction QuizResultImageChoice({\n id,\n highlight = false,\n selected = false,\n image,\n caption = '',\n correctMessage,\n selectedMessage,\n isManyAnswers = false\n}) {\n const {\n imageChoice,\n componentContainer,\n imageContainer,\n imageStyle,\n iconLabel,\n captionStyle,\n srOnly\n } = useStyles$1({\n highlight\n });\n const uniqId = useMemo(() => uniqueId('id-'), []);\n const imageChoiceId = id || uniqId;\n const captionId = `caption-${imageChoiceId}`;\n const selectedId = `selected-${imageChoiceId}`;\n const inputId = `input-${imageChoiceId}`;\n const highlightedId = `highlighted-${imageChoiceId}`;\n const ariaDescribedBy = [];\n\n if (highlight) {\n ariaDescribedBy.push(highlightedId);\n }\n\n if (selected) {\n ariaDescribedBy.push(selectedId);\n }\n\n return React__default.createElement(\"div\", {\n className: imageChoice\n }, React__default.createElement(\"div\", {\n className: componentContainer\n }, React__default.createElement(\"div\", {\n className: imageContainer\n }, React__default.createElement(\"label\", {\n htmlFor: inputId,\n className: iconLabel\n }, React__default.createElement(InputIcon, {\n id: inputId,\n type: isManyAnswers ? 'checkbox' : 'radio',\n checked: selected,\n isCorrect: selected && highlight,\n highlight: highlight,\n backgroundColor: \"rgb(239, 239, 239)\",\n ariaDescribedBy: ariaDescribedBy,\n ariaLabelledby: caption ? `${captionId} ${inputId}` : undefined\n })), React__default.createElement(\"img\", {\n className: imageStyle,\n src: image.url,\n // Only add alt text if it's different than the label that describes it\n alt: caption === image.altText ? '' : image.altText,\n \"aria-labelledby\": caption || undefined,\n \"aria-describedby\": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined\n })), caption && React__default.createElement(\"span\", {\n className: captionStyle,\n id: captionId,\n translate: \"no\"\n }, caption), highlight && React__default.createElement(\"span\", {\n className: srOnly,\n id: highlightedId\n }, correctMessage), selected && React__default.createElement(\"span\", {\n className: srOnly,\n id: selectedId\n }, selectedMessage)));\n}\n\nconst useStyles = createUseStyles(theme => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j; // Quiz results has a consistent font size\n\n\n const fontSize = theme.fontSize.body;\n return {\n componentContainer: {\n margin: [5, 0],\n fontFamily: (_b = (_a = theme.questionTitle) === null || _a === void 0 ? void 0 : _a.fontFamily) !== null && _b !== void 0 ? _b : {},\n fontStyle: (_d = (_c = theme.questionTitle) === null || _c === void 0 ? void 0 : _c.fontStyle) !== null && _d !== void 0 ? _d : {},\n fontWeight: (_f = (_e = theme.questionTitle) === null || _e === void 0 ? void 0 : _e.fontWeight) !== null && _f !== void 0 ? _f : {},\n color: ((_g = theme.questionTitle) === null || _g === void 0 ? void 0 : _g.color) || theme.questionColor,\n fontSize,\n textDecoration: (_j = (_h = theme.questionTitle) === null || _h === void 0 ? void 0 : _h.textDecoration) !== null && _j !== void 0 ? _j : {}\n },\n scoreContainer: {\n display: 'inline'\n },\n feedbackContainer: {\n marginTop: 8,\n marginBottom: 0,\n wordWrap: 'wrap'\n },\n skippedBadge: {\n display: 'inline',\n padding: [2, 15],\n borderRadius: 15,\n backgroundColor: 'rgba(0, 0, 0, 0.1)',\n marginLeft: 5\n }\n };\n});\nconst COPY = defineMessages({\n SCORE: {\n id: 'QuizResultScore.SCORE',\n defaultMessage: '{score}/{total} {total, plural, one {point} other {points}}',\n description: '[Type: header][Vis: med] - total achieved point(s) of this quiz question'\n },\n SKIPPED: {\n id: 'QuizResultScore.SKIPPED',\n defaultMessage: 'Skipped',\n description: '[Type: header][Vis: med] - user skipped this quiz question'\n }\n});\n\nfunction QuizResultScore({\n score,\n total,\n feedback,\n skipped = false\n}) {\n const {\n componentContainer,\n scoreContainer,\n feedbackContainer,\n skippedBadge\n } = useStyles();\n return React__default.createElement(\"div\", {\n className: componentContainer\n }, React__default.createElement(\"p\", {\n className: scoreContainer\n }, React__default.createElement(T, {\n desc: COPY.SCORE,\n values: {\n score,\n total\n }\n })), skipped && React__default.createElement(\"span\", {\n className: skippedBadge\n }, React__default.createElement(T, {\n desc: COPY.SKIPPED\n })), feedback && React__default.createElement(\"p\", {\n translate: \"no\",\n className: feedbackContainer,\n dangerouslySetInnerHTML: {\n __html: sanitizeString(unescaper(feedback))\n }\n }));\n}\n/**\n * Get the icon to indicator whether or not user got the answer correct or not\n * @param responded whether user selected the answer option or not\n * @param answerOptionPoints answer option points\n */\n\n\nconst getCorrectnessIndicatorIcon = (responded, answerOptionPoints) => {\n if (!responded) {\n return undefined;\n }\n\n if (answerOptionPoints <= 0) {\n return 'wrong';\n }\n\n return 'correct';\n};\n/** Gets the icon and highlight for `idToSearch` */\n\n\nconst getIconAndHighlight = (answers, idToSearch, highlightCorrectAnswers) => {\n const {\n points = 0,\n responded = false\n } = answers.find(({\n answer\n }) => answer.id === idToSearch) || {};\n const icon = getCorrectnessIndicatorIcon(responded, points);\n return {\n icon,\n highlight: highlightCorrectAnswers && points > 0\n };\n};\n/** Picks feedback string based on user/total score */\n\n\nconst pickFeedback = (feedback, userScore, totalScore) => {\n if (userScore >= totalScore) {\n return feedback.correct;\n }\n\n if (userScore > 0) {\n return feedback.partial;\n }\n\n return feedback.incorrect;\n};\n/**\n * Calculate user score for a quiz question\n * @param quizAnswers Quiz or QuizImage results answers\n */\n\n\nconst getUserScore = quizAnswers => {\n return quizAnswers.reduce((acc, cur) => {\n return cur.responded ? acc + cur.points : acc;\n }, 0);\n};\n/** Helper Type Guard to filter our `undefined` */\n\n\nconst isNotUndefined = a => a !== undefined;\n\nconst isPureQuizAnswer = answer => 'label' in answer.answer && 'visible' in answer.answer;\n/** Filter `answers` to only regular Answers without invisible, \"other\" and \"none of the above\" */\n\n\nconst filterQuizAnswers = (answers, idsToFilter = []) => answers.filter(isPureQuizAnswer).filter(({\n answer: {\n visible\n }\n}) => visible).filter(a => !idsToFilter.filter(isNotUndefined).includes(a.answer.id));\n\nconst isPureQuizImageAnswer = answer => 'label' in answer.answer && 'visible' in answer.answer && 'image' in answer.answer;\n/** QuizImageAnswer without \"other\" and \"none of the above\" */\n\n\nconst filterOtherFromQuizImageAnswer = (answers, idsToFilter = []) => answers.filter(isPureQuizImageAnswer).filter(({\n answer: {\n visible\n }\n}) => visible).filter(a => !idsToFilter.filter(isNotUndefined).includes(a.answer.id));\n\nfunction CheckBox({\n id,\n title,\n questionNumber,\n numberingEnabled,\n highlightCorrectAnswers,\n answerNoneOfTheAbove,\n answerLayoutColumns,\n spacing,\n answerOther,\n quizResults\n}) {\n const userScore = getUserScore(quizResults.answers);\n const totalScore = quizResults.totalPoints;\n const feedback = pickFeedback(quizResults.feedback, userScore, totalScore);\n /** Visible answers without \"other\" and \"none of the above\" */\n\n const regularAnswers = filterQuizAnswers(quizResults.answers, [answerNoneOfTheAbove === null || answerNoneOfTheAbove === void 0 ? void 0 : answerNoneOfTheAbove.id, answerOther === null || answerOther === void 0 ? void 0 : answerOther.id]);\n const isComment = (answerOther === null || answerOther === void 0 ? void 0 : answerOther.type) === 'COMMENT'; // eslint-disable-next-line react/no-unstable-nested-components\n\n function NoneOfTheAboveOption() {\n return (answerNoneOfTheAbove === null || answerNoneOfTheAbove === void 0 ? void 0 : answerNoneOfTheAbove.visible) ? React__default.createElement(QuizResultChoices, {\n id: answerNoneOfTheAbove.id,\n type: \"checkbox\",\n optionText: answerNoneOfTheAbove.label,\n textInputValue: \"\",\n ...getIconAndHighlight(quizResults.answers, answerNoneOfTheAbove.id, highlightCorrectAnswers)\n }) : null;\n } // eslint-disable-next-line react/no-unstable-nested-components\n\n\n function OtherOption() {\n var _a, _b;\n\n if (!(answerOther === null || answerOther === void 0 ? void 0 : answerOther.visible)) {\n return null;\n }\n\n return isComment ? React__default.createElement(QuizResultComment, {\n id: answerOther.id,\n optionText: answerOther.label,\n textInputValue: ((_a = quizResults.answerOther) === null || _a === void 0 ? void 0 : _a.textAnswer) || '',\n textInputSize: answerOther.charsCount,\n textInputParagraphLines: answerOther.linesCount\n }) : React__default.createElement(QuizResultChoices, {\n id: answerOther.id,\n type: \"checkbox\",\n optionText: answerOther.label,\n textInputValue: ((_b = quizResults.answerOther) === null || _b === void 0 ? void 0 : _b.textAnswer) || '',\n hasTextInput: true,\n textInputSize: answerOther.charsCount,\n textInputParagraphLines: answerOther.linesCount,\n ...getIconAndHighlight(quizResults.answers, answerOther.id, !isComment && highlightCorrectAnswers)\n });\n }\n\n return React__default.createElement(QuestionFieldLayoutTemplate, {\n title: React__default.createElement(RespondentQuestionTitle, {\n id: id,\n heading: title,\n required: false,\n numbered: numberingEnabled,\n number: parseInt(questionNumber, 10),\n useDefaultFrontSize: true\n }),\n footer: React__default.createElement(QuizResultScore, {\n score: userScore,\n total: totalScore,\n feedback: feedback,\n skipped: false\n }),\n padding: spacing,\n clickShield: false,\n hasFooterPadding: true\n }, React__default.createElement(QuestionAnswerLayoutTemplate, {\n gridCellMargin: [4, 2],\n columns: answerLayoutColumns,\n noneOfTheAbove: !isComment ? React__default.createElement(NoneOfTheAboveOption, null) : null,\n other: React__default.createElement(OtherOption, null)\n }, regularAnswers.map(({\n answer,\n responded,\n points\n }) => {\n return React__default.createElement(QuizResultChoices, {\n key: answer.id,\n textInputValue: \"\",\n id: answer.id,\n type: \"checkbox\",\n optionText: answer.label,\n icon: getCorrectnessIndicatorIcon(responded, points),\n // Correct answers are expected to have a point value above 0\n // and should be highlighted.\n highlight: highlightCorrectAnswers && points > 0\n });\n }).concat(isComment ? [React__default.createElement(NoneOfTheAboveOption, {\n key: answerNoneOfTheAbove === null || answerNoneOfTheAbove === void 0 ? void 0 : answerNoneOfTheAbove.id\n })] : [])));\n}\n\nvar CheckBox$1 = withErrorBoundary(CheckBox);\n\nfunction MultipleChoice({\n id,\n title,\n questionNumber,\n numberingEnabled,\n highlightCorrectAnswers,\n answerNoneOfTheAbove,\n answerLayoutColumns,\n spacing,\n answerOther,\n quizResults\n}) {\n const userScore = getUserScore(quizResults.answers);\n const totalScore = quizResults.totalPoints;\n const feedback = pickFeedback(quizResults.feedback, userScore, totalScore);\n /** Visible answers without \"other\" and \"none of the above\" */\n\n const regularAnswers = filterQuizAnswers(quizResults.answers, [answerNoneOfTheAbove === null || answerNoneOfTheAbove === void 0 ? void 0 : answerNoneOfTheAbove.id, answerOther === null || answerOther === void 0 ? void 0 : answerOther.id]);\n const isComment = (answerOther === null || answerOther === void 0 ? void 0 : answerOther.type) === 'COMMENT'; // eslint-disable-next-line react/no-unstable-nested-components\n\n function NoneOfTheAboveOption() {\n return (answerNoneOfTheAbove === null || answerNoneOfTheAbove === void 0 ? void 0 : answerNoneOfTheAbove.visible) ? React__default.createElement(QuizResultChoices, {\n type: \"radio\",\n id: answerNoneOfTheAbove.id,\n optionText: answerNoneOfTheAbove.label,\n textInputValue: \"\",\n ...getIconAndHighlight(quizResults.answers, answerNoneOfTheAbove.id, highlightCorrectAnswers)\n }) : null;\n } // eslint-disable-next-line react/no-unstable-nested-components\n\n\n function OtherOption() {\n var _a, _b;\n\n if (!(answerOther === null || answerOther === void 0 ? void 0 : answerOther.visible)) {\n return null;\n }\n\n return isComment ? React__default.createElement(QuizResultComment, {\n id: answerOther.id,\n optionText: answerOther.label,\n textInputValue: ((_a = quizResults.answerOther) === null || _a === void 0 ? void 0 : _a.textAnswer) || '',\n textInputSize: answerOther.charsCount,\n textInputParagraphLines: answerOther.linesCount\n }) : React__default.createElement(QuizResultChoices, {\n type: \"radio\",\n id: answerOther.id,\n optionText: answerOther.label,\n textInputValue: ((_b = quizResults.answerOther) === null || _b === void 0 ? void 0 : _b.textAnswer) || '',\n hasTextInput: true,\n textInputSize: answerOther.charsCount,\n textInputParagraphLines: answerOther.linesCount,\n ...getIconAndHighlight(quizResults.answers, answerOther.id, !isComment && highlightCorrectAnswers)\n });\n }\n\n return React__default.createElement(QuestionFieldLayoutTemplate, {\n title: React__default.createElement(RespondentQuestionTitle, {\n id: id,\n heading: title,\n required: false,\n numbered: numberingEnabled,\n number: parseInt(questionNumber, 10),\n useDefaultFrontSize: true\n }),\n footer: React__default.createElement(QuizResultScore, {\n score: userScore,\n total: totalScore,\n feedback: feedback,\n skipped: false\n }),\n padding: spacing,\n clickShield: false,\n hasFooterPadding: true\n }, React__default.createElement(QuestionAnswerLayoutTemplate, {\n gridCellMargin: [4, 2],\n columns: answerLayoutColumns,\n noneOfTheAbove: !isComment ? React__default.createElement(NoneOfTheAboveOption, null) : null,\n other: React__default.createElement(OtherOption, null)\n }, regularAnswers.map(answerOption => {\n const {\n answer,\n points,\n responded\n } = answerOption;\n const icon = getCorrectnessIndicatorIcon(responded, points);\n return React__default.createElement(QuizResultChoices, {\n type: \"radio\",\n key: answer.id,\n id: answer.id,\n optionText: answer.label,\n textInputValue: \"\",\n icon: icon,\n // Correct answers are expected to have a point value above 0\n // and should be highlighted.\n highlight: highlightCorrectAnswers && points > 0\n });\n }).concat(isComment && answerNoneOfTheAbove ? [React__default.createElement(NoneOfTheAboveOption, {\n key: answerNoneOfTheAbove.id\n })] : [])));\n}\n\nvar MultipleChoice$1 = withErrorBoundary(MultipleChoice);\n\nfunction ImageChoice({\n id,\n title,\n questionNumber,\n highlightCorrectAnswers,\n numberingEnabled,\n answerNoneOfTheAbove,\n quizResults,\n isManyAnswers\n}) {\n const userScore = getUserScore(quizResults.answers);\n const totalScore = quizResults.totalPoints;\n const feedback = pickFeedback(quizResults.feedback, userScore, totalScore);\n const noneOfTheAboveOption = answerNoneOfTheAbove && answerNoneOfTheAbove.visible ? React__default.createElement(QuizResultChoices, {\n type: isManyAnswers ? 'checkbox' : 'radio',\n id: answerNoneOfTheAbove.id,\n optionText: answerNoneOfTheAbove.label,\n textInputValue: \"\",\n ...getIconAndHighlight(quizResults.answers, answerNoneOfTheAbove.id, highlightCorrectAnswers)\n }) : null;\n /** Answers without \"none of the above\" */\n\n const regularAnswers = filterOtherFromQuizImageAnswer(quizResults.answers, [answerNoneOfTheAbove === null || answerNoneOfTheAbove === void 0 ? void 0 : answerNoneOfTheAbove.id]);\n return React__default.createElement(QuestionFieldLayoutTemplate, {\n title: React__default.createElement(RespondentQuestionTitle, {\n id: id,\n heading: title,\n required: false,\n numbered: numberingEnabled,\n number: parseInt(questionNumber, 10),\n useDefaultFrontSize: true\n }),\n footer: React__default.createElement(QuizResultScore, {\n score: userScore,\n total: totalScore,\n feedback: feedback,\n skipped: false\n }),\n clickShield: false,\n hasFooterPadding: true\n }, React__default.createElement(QuestionAnswerLayoutTemplate, {\n columns: \"horizontal\",\n noneOfTheAbove: noneOfTheAboveOption,\n adjustToContent: true,\n otherCellMargin: [4, 2, 9, 2],\n gridCellMargin: [15, 24, 15, 0]\n }, regularAnswers.map(answerOption => {\n const {\n answer,\n points,\n responded\n } = answerOption;\n return React__default.createElement(QuizResultImageChoice, {\n key: answer.id,\n id: answer.id,\n image: answer.image,\n caption: answer.label,\n selected: responded,\n isManyAnswers: isManyAnswers,\n // Correct answers are expected to have a point value above 0\n // and should be highlighted.\n highlight: highlightCorrectAnswers && points > 0\n });\n })));\n}\n\nvar ImageChoice$1 = withErrorBoundary(ImageChoice);\nexport { CheckBox$1 as CheckBox, ImageChoice$1 as ImageChoice, MultipleChoice$1 as MultipleChoice };","import React__default, { useMemo } from 'react';\nimport { selectQuestionTypeDefinition, isExternalQuestionWithTypeId } from '@sm/question-definitions';\nimport { withErrorBoundary } from '@sm/question-ui/helpers';\nimport { u as useProviderAccessContext, a as useExternalQuestionAugmentation, c as createVisualization } from './utils-5126869e.js';\n\nfunction UnsupportedQuestionTypeError({\n question\n}) {\n const typeId = isExternalQuestionWithTypeId(question) && question.typeId;\n return React__default.createElement(\"div\", null, \"Unsupported Question Type: \", typeId);\n}\n\nfunction SingleQuestionController({\n question: externalQuestion,\n displayOptions,\n namedSlots,\n responseSet\n}) {\n const {\n useUpstreamConfig,\n useVisualizationList\n } = useProviderAccessContext();\n const {\n capability,\n upstreamActions,\n renderProps,\n settings\n } = useUpstreamConfig();\n /* NOTE:\n Since Controllers are expected to be capability-independent -- and should not import\n the CapabilityProvider types -- this config is returning the type params as `unknown`s.\n This shouldn't be a problem -- as the Controller doesn't need to know\n any specifics about these types - other than passing them to the compatible\n Visualizations (something that the Visualization Helpers runtime already takes\n care of). However, the consequence is that overall type safety of the Controller\n is not as strict as we would like it to be. We should probably create a task\n to improve this later.\n */\n // TODO: add controller type to the visualization selection -- to allow for different DisplayOptions and better support for nested visualizations\n\n const visualizationOptions = useVisualizationList(capability\n /* , controllerType */\n ); // Augment the external question with the type id\n\n const augmentedExternalQuestion = useExternalQuestionAugmentation(externalQuestion, responseSet);\n const definition = selectQuestionTypeDefinition(augmentedExternalQuestion);\n const ChosenVisualization = useMemo(() => {\n if (!definition) {\n return null;\n } // Is this React.memo necessary?\n\n\n return React__default.memo(createVisualization(capability, definition.typeId, visualizationOptions, upstreamActions, settings, renderProps)); // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [//* * Revisit / Hoist */\n // capability, // causes constant re-renders\n definition === null || definition === void 0 ? void 0 : definition.typeId // settings, // causes constant re-renders\n // renderProps, // causes constant re-renders\n // definition, // causes constant re-renders\n // upstreamActions, // causes constant re-renders\n // visualizationOptions, // causes constant re-renders\n ]);\n\n if (ChosenVisualization === null || !definition) {\n return React__default.createElement(UnsupportedQuestionTypeError, {\n question: augmentedExternalQuestion\n });\n }\n\n const toExternalQuestion = q => definition.toExternalQuestion(externalQuestion, q, capability);\n /* NOTE:\n Type safety improvement: Currently 'QuestionType' is all the possible question types\n -- while createVisualization will choose a visualization that can render\n question types for a specific capability -- meaning that the resulting question\n type of 'ChosenVisualization' is a subset of all the possible QuestionTypes\n (only those that have viable visualizations for that capability -- and, in the\n future, ControllerType)\n */\n\n\n const question = definition.fromExternalQuestion(augmentedExternalQuestion, capability);\n return React__default.createElement(ChosenVisualization, {\n question: question,\n displayOptions: displayOptions,\n namedSlots: namedSlots,\n toExternalQuestion: toExternalQuestion\n });\n}\n\nvar SingleQuestionController$1 = withErrorBoundary(SingleQuestionController);\nexport { SingleQuestionController$1 as S };","import React__default from 'react';\nimport { SurveyThemeWrapper } from '@sm/question-ui/theme-respondent';\nimport { d as declareVisualization, p as providerFactory } from './utils-5126869e.js';\nimport { MultipleChoice, CheckBox, ImageChoice } from '@sm/question-ui/respondent-quiz-results';\nexport { S as SingleQuestionController } from './controllers-8c913634.js';\nimport './vendor-8000eab9.js';\nimport '@sm/question-ui/helpers';\nimport '@sm/question-definitions';\n/**\n * Derive the answer layout columns\n * @param answerLayout answer layout from external question\n */\n\nconst getAnswerLayoutColumns = answerLayout => {\n if (answerLayout === 'VERTICAL') {\n return 1;\n }\n\n if (answerLayout === 'TWO_COLUMNS') {\n return 2;\n }\n\n if (answerLayout === 'THREE_COLUMNS') {\n return 3;\n }\n\n return 'horizontal';\n};\n\nconst isAnswer = maybeAnswer => 'label' in maybeAnswer && 'id' in maybeAnswer && 'visible' in maybeAnswer;\n\nconst quizAnswersToImageAnswers = (quizAnswers, answersImage) => quizAnswers.map(ans => {\n if (!isAnswer(ans.answer)) {\n return ans;\n }\n\n const matchingImageAnswer = answersImage.find(ansImg => ansImg.id === ans.answer.id);\n\n if (!matchingImageAnswer) {\n throw new Error('Image not found'); // TODO: Handle this later\n }\n\n const answer = matchingImageAnswer;\n return { ...ans,\n answer: { ...answer\n }\n };\n});\n/**\n * Map the quiz results with the image answers\n * @param quizResults the quizResults provided by the external question\n * @param answersImage the answersImage provided by the external question\n */\n\n\nconst getQuizResultsWithImage = (quizResults, answersImage) => ({ ...quizResults,\n answers: quizAnswersToImageAnswers(quizResults.answers, answersImage)\n});\n\nfunction MultipleChoiceVisualization({\n question: {\n layout: {\n answerLayout,\n spacing\n },\n quizResults,\n id,\n title,\n questionNumber,\n answerNoneOfTheAbove,\n answerOther\n },\n settings: {\n survey: {\n numberingEnabled,\n highlightCorrectAnswers\n }\n }\n}) {\n // TODO: use a better error handling once we have the error handing\n // pattern designed\n if (!quizResults) {\n /* eslint-disable-next-line no-console */\n console.warn('Missing quiz results in the data');\n return null;\n }\n\n const answerLayoutColumns = getAnswerLayoutColumns(answerLayout);\n return React__default.createElement(MultipleChoice, {\n id: id,\n title: title,\n questionNumber: questionNumber,\n highlightCorrectAnswers: highlightCorrectAnswers,\n numberingEnabled: numberingEnabled,\n answerNoneOfTheAbove: answerNoneOfTheAbove,\n answerLayoutColumns: answerLayoutColumns,\n spacing: spacing,\n answerOther: answerOther,\n quizResults: quizResults\n });\n}\n\nvar MultipleChoiceVisualization$1 = declareVisualization(['multiple_choice'], ['respondent-quiz-results'], MultipleChoiceVisualization);\n\nfunction CheckBoxVisualization({\n question: {\n layout: {\n answerLayout,\n spacing\n },\n quizResults,\n id,\n title,\n questionNumber,\n answerNoneOfTheAbove,\n answerOther\n },\n settings: {\n survey: {\n numberingEnabled,\n highlightCorrectAnswers\n }\n }\n}) {\n // TODO: use a better error handling once we have the error handing\n // pattern designed\n if (!quizResults) {\n /* eslint-disable-next-line no-console */\n console.warn('Missing quiz results in the data');\n return null;\n }\n\n const answerLayoutColumns = getAnswerLayoutColumns(answerLayout);\n return React__default.createElement(CheckBox, {\n id: id,\n title: title,\n questionNumber: questionNumber,\n highlightCorrectAnswers: highlightCorrectAnswers,\n numberingEnabled: numberingEnabled,\n answerNoneOfTheAbove: answerNoneOfTheAbove,\n answerLayoutColumns: answerLayoutColumns,\n spacing: spacing,\n answerOther: answerOther,\n quizResults: quizResults\n });\n}\n\nvar CheckBoxVisualization$1 = declareVisualization(['check_box'], ['respondent-quiz-results'], CheckBoxVisualization);\n\nfunction ImageChoiceVisualization({\n question: {\n quizResults,\n id,\n title,\n questionNumber,\n answerNoneOfTheAbove,\n answersImage,\n variant\n },\n settings: {\n survey: {\n numberingEnabled,\n highlightCorrectAnswers\n }\n }\n}) {\n // TODO: use a better error handling once we have the error handing\n // pattern designed\n if (!quizResults) {\n /* eslint-disable-next-line no-console */\n console.warn('Missing quiz results in the data');\n return null;\n }\n\n const isManyAnswers = variant === 'MANY_ANSWERS_IMAGE';\n const quizResultsWithImage = getQuizResultsWithImage(quizResults, answersImage);\n return React__default.createElement(ImageChoice, {\n id: id,\n title: title,\n questionNumber: questionNumber,\n highlightCorrectAnswers: highlightCorrectAnswers,\n numberingEnabled: numberingEnabled,\n answerNoneOfTheAbove: answerNoneOfTheAbove || null,\n quizResults: quizResultsWithImage,\n isManyAnswers: isManyAnswers\n });\n}\n\nvar ImageChoiceVisualization$1 = declareVisualization(['image_choice'], ['respondent-quiz-results'], ImageChoiceVisualization);\n\nfunction DropdownVisualization({\n question: {\n layout: {\n answerLayout,\n spacing\n },\n quizResults,\n id,\n title,\n questionNumber,\n answerOther\n },\n settings: {\n survey: {\n numberingEnabled,\n highlightCorrectAnswers\n }\n }\n}) {\n // TODO: use a better error handling once we have the error handing\n // pattern designed\n if (!quizResults) {\n /* eslint-disable-next-line no-console */\n console.warn('Missing quiz results in the data');\n return null;\n }\n\n const answerLayoutColumns = getAnswerLayoutColumns(answerLayout);\n return React__default.createElement(MultipleChoice, {\n id: id,\n title: title,\n questionNumber: questionNumber,\n highlightCorrectAnswers: highlightCorrectAnswers,\n numberingEnabled: numberingEnabled,\n answerNoneOfTheAbove: null,\n answerLayoutColumns: answerLayoutColumns,\n spacing: spacing,\n answerOther: answerOther,\n quizResults: quizResults\n });\n}\n\nvar DropdownVisualization$1 = declareVisualization(['dropdown'], ['respondent-quiz-results'], DropdownVisualization);\nvar visualizationList = [MultipleChoiceVisualization$1, CheckBoxVisualization$1, ImageChoiceVisualization$1, DropdownVisualization$1];\nconst ProviderHelper = providerFactory(visualizationList);\n\nfunction QuizResultsCapabilityProvider({\n settings,\n children\n}) {\n return React__default.createElement(ProviderHelper, {\n value: {\n capability: 'respondent-quiz-results',\n upstreamActions: null,\n renderProps: null,\n settings\n }\n }, React__default.createElement(SurveyThemeWrapper, null, children));\n}\n\nexport { QuizResultsCapabilityProvider, visualizationList as QuizResultsVisualizationList };","import React__default, { createContext, useContext, useMemo } from 'react';\nimport { E as ErrorBoundary } from './vendor-8000eab9.js';\nimport { FallbackComponent } from '@sm/question-ui/helpers';\nimport { getTypeId } from '@sm/question-definitions';\n\nconst filterVisualizationByQuestionType = typeId => qd => {\n const [qts] = qd;\n return qts.includes(typeId);\n};\n\nconst getAnswerLayoutColumns = answerLayout => {\n if (answerLayout === 'VERTICAL') {\n return 1;\n }\n\n if (answerLayout === 'TWO_COLUMNS') {\n return 2;\n }\n\n if (answerLayout === 'THREE_COLUMNS') {\n return 3;\n }\n\n return 'horizontal';\n};\n/**\n * Trim leading and trailing whitespace from text inputs\n */\n\n\nconst trimAllValues = values => values.map(value => ({ ...value,\n value: value.value.trim()\n}));\n/**\n * Trim leading and trailing whitespace from \"other\" text inputs - for both `ANSWER` and `COMMENT`\n */\n\n\nconst trimOtherValues = values => values.map(value => {\n if (value.type !== 'ANSWER' && value.type !== 'COMMENT') {\n return value;\n }\n\n return { ...value,\n value: value.value.trim()\n };\n});\n/**\n * Trim leading and trailing whitespace from DateTimeAnswerType\n */\n\n\nconst trimDateTimeValues = values => values.map(response => {\n var _a, _b, _c, _d;\n\n return { ...response,\n value: {\n date: (_a = response.value.date) === null || _a === void 0 ? void 0 : _a.trim(),\n hour: (_b = response.value.hour) === null || _b === void 0 ? void 0 : _b.trim(),\n minute: (_c = response.value.minute) === null || _c === void 0 ? void 0 : _c.trim(),\n period: (_d = response.value.period) === null || _d === void 0 ? void 0 : _d.trim()\n }\n };\n});\n\nconst declareVisualization = (questionTypes, capabilities, component) => {\n return [questionTypes, capabilities, component];\n};\n\nconst providerAccessContext = createContext(null);\n\nconst useProviderAccessContext = () => {\n const access = useContext(providerAccessContext);\n\n if (!access) {\n throw new Error('Must call useProviderAccessContext inside a properly setup Capability Provider');\n }\n\n const {\n useUpstreamConfig,\n useVisualizationList\n } = access;\n return {\n useVisualizationList,\n useUpstreamConfig\n };\n};\n/** providerFactory\n * Creates a helper component that enables a CapabilityProvider to store the appropriate configurations,\n * making them available to the visualizations through the generic controllers. It makes sure that all\n * Visualizations have the proper types passed onto them.\n * @param visualizationList list of visualization definitions for all the visualizations that will be\n * supported by this Capability Provider.\n * @returns React Context Provider accepting the appropriate configuration for the CapabilityProvider\n */\n\n\nconst providerFactory = visualizationList => {\n const ctx = React__default.createContext(null); // TODO: further filter types to match the ones in the right indexes based on capability\n\n const useVisualizationList = capability => visualizationList.filter(([, fs]) => fs.indexOf(capability) >= 0);\n\n const useUpstreamConfig = () => {\n const config = useContext(ctx);\n\n if (!config) {\n throw new Error('Must call useUpstreamConfig inside a properly set up Capability Provider');\n }\n\n return config;\n };\n\n const providerValue = {\n useVisualizationList: useVisualizationList,\n useUpstreamConfig: useUpstreamConfig\n };\n return function ProvidersWrapper({\n children,\n value\n }) {\n return React__default.createElement(ErrorBoundary, {\n FallbackComponent: FallbackComponent\n }, React__default.createElement(providerAccessContext.Provider, {\n value: providerValue\n }, React__default.createElement(ctx.Provider, {\n value: value\n }, children)));\n };\n};\n\nfunction UnsupportedVisualization({\n question: {\n typeId\n }\n}) {\n return React__default.createElement(\"div\", null, \"Unsupported Visualization for \", typeId);\n}\n\nconst createVisualization = (capability, questionTypeId, visualizationOptions, upstreamActions, settings, renderProps) => {\n const [,, VisualizationComponent] = visualizationOptions.find(filterVisualizationByQuestionType(questionTypeId)) || [];\n\n if (!VisualizationComponent) {\n return function UnsupportedVisualizationWrapper({\n question\n }) {\n return React__default.createElement(UnsupportedVisualization, {\n question: question\n });\n };\n }\n\n return function VisualizationComponentWrapper({\n question,\n displayOptions,\n namedSlots,\n toExternalQuestion\n }) {\n return React__default.createElement(VisualizationComponent, {\n capability: capability,\n question: question,\n upstreamActions: upstreamActions,\n settings: settings,\n displayOptions: displayOptions,\n renderProps: renderProps,\n toExternalQuestion: toExternalQuestion,\n namedSlots: namedSlots\n });\n };\n}; // TODO: add to question type definitions\n\n\nconst isRequired = q => {\n var _a;\n\n return ((_a = q.required) === null || _a === void 0 ? void 0 : _a.type) !== undefined;\n};\n\nconst equals = (a, b) => {\n if (a === b) {\n return true;\n }\n\n if (a instanceof Date && b instanceof Date) {\n return a.getTime() === b.getTime();\n }\n\n if (!a || !b || typeof a !== 'object' && typeof b !== 'object') {\n return a === b;\n }\n\n if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) {\n return false;\n }\n\n const objA = a;\n const objB = b;\n const keys = Object.keys(objA);\n\n if (keys.length !== Object.keys(objB).length) {\n return false;\n }\n\n return keys.every(k => equals(objA[k], objB[k]));\n};\n\nconst equalsIgnoreOrder = (a, b) => {\n if (a.length !== b.length) {\n return false;\n }\n\n const uniqueValues = new Set([...a, ...b]); // eslint-disable-next-line no-restricted-syntax\n\n for (const v of uniqueValues) {\n const aCount = a.filter(e => equals(e, v)).length;\n const bCount = b.filter(e => equals(e, v)).length;\n\n if (aCount !== bCount) {\n return false;\n }\n }\n\n return true;\n};\n/** Finds and attaches a typeId to an `ExternalQuestion` */\n\n\nconst useExternalQuestionAugmentation = (externalQuestion, responseSet) => {\n return useMemo(() => {\n const typeId = getTypeId(externalQuestion);\n\n if (!typeId) {\n throw new Error(`Unsupported Question Type of family ${externalQuestion.family}, variant ${externalQuestion.variant}.`);\n }\n\n if (responseSet !== undefined) {\n return { ...externalQuestion,\n typeId,\n ...responseSet\n };\n }\n\n return { ...externalQuestion,\n typeId\n };\n }, [externalQuestion, responseSet]);\n};\n\nexport { useExternalQuestionAugmentation as a, trimAllValues as b, createVisualization as c, declareVisualization as d, equalsIgnoreOrder as e, trimDateTimeValues as f, getAnswerLayoutColumns as g, isRequired as i, providerFactory as p, trimOtherValues as t, useProviderAccessContext as u };","import React__default, { useMemo } from 'react';\nimport { selectQuestionTypeDefinition, isExternalQuestionWithTypeId } from '@sm/question-definitions';\nimport { withErrorBoundary } from '@sm/question-ui/helpers';\nimport { u as useProviderAccessContext, a as useExternalQuestionAugmentation, c as createVisualization } from './utils-3f92f024.js';\n\nfunction UnsupportedQuestionTypeError({\n question\n}) {\n const typeId = isExternalQuestionWithTypeId(question) && question.typeId;\n return React__default.createElement(\"div\", null, \"Unsupported Question Type: \", typeId);\n}\n\nfunction SingleQuestionController({\n question: externalQuestion,\n displayOptions,\n namedSlots,\n responseSet\n}) {\n const {\n useUpstreamConfig,\n useVisualizationList\n } = useProviderAccessContext();\n const {\n capability,\n upstreamActions,\n renderProps,\n settings\n } = useUpstreamConfig();\n /* NOTE:\n Since Controllers are expected to be capability-independent -- and should not import\n the CapabilityProvider types -- this config is returning the type params as `unknown`s.\n This shouldn't be a problem -- as the Controller doesn't need to know\n any specifics about these types - other than passing them to the compatible\n Visualizations (something that the Visualization Helpers runtime already takes\n care of). However, the consequence is that overall type safety of the Controller\n is not as strict as we would like it to be. We should probably create a task\n to improve this later.\n */\n // TODO: add controller type to the visualization selection -- to allow for different DisplayOptions and better support for nested visualizations\n\n const visualizationOptions = useVisualizationList(capability\n /* , controllerType */\n ); // Augment the external question with the type id\n\n const augmentedExternalQuestion = useExternalQuestionAugmentation(externalQuestion, responseSet);\n const definition = selectQuestionTypeDefinition(augmentedExternalQuestion);\n const ChosenVisualization = useMemo(() => {\n if (!definition) {\n return null;\n } // Is this React.memo necessary?\n\n\n return React__default.memo(createVisualization(capability, definition.typeId, visualizationOptions, upstreamActions, settings, renderProps)); // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [//* * Revisit / Hoist */\n // capability, // causes constant re-renders\n definition === null || definition === void 0 ? void 0 : definition.typeId // settings, // causes constant re-renders\n // renderProps, // causes constant re-renders\n // definition, // causes constant re-renders\n // upstreamActions, // causes constant re-renders\n // visualizationOptions, // causes constant re-renders\n ]);\n\n if (ChosenVisualization === null || !definition) {\n return React__default.createElement(UnsupportedQuestionTypeError, {\n question: augmentedExternalQuestion\n });\n }\n\n const toExternalQuestion = q => definition.toExternalQuestion(externalQuestion, q, capability);\n /* NOTE:\n Type safety improvement: Currently 'QuestionType' is all the possible question types\n -- while createVisualization will choose a visualization that can render\n question types for a specific capability -- meaning that the resulting question\n type of 'ChosenVisualization' is a subset of all the possible QuestionTypes\n (only those that have viable visualizations for that capability -- and, in the\n future, ControllerType)\n */\n\n\n const question = definition.fromExternalQuestion(augmentedExternalQuestion, capability);\n return React__default.createElement(ChosenVisualization, {\n question: question,\n displayOptions: displayOptions,\n namedSlots: namedSlots,\n toExternalQuestion: toExternalQuestion\n });\n}\n\nvar SingleQuestionController$1 = withErrorBoundary(SingleQuestionController);\nexport { SingleQuestionController$1 as S };","import React__default, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport { SurveyThemeWrapper } from '@sm/question-ui/theme-respondent';\nimport { d as declareVisualization, i as isRequired, t as trimOtherValues, e as equalsIgnoreOrder, b as trimAllValues, g as getAnswerLayoutColumns, f as trimDateTimeValues, p as providerFactory } from './utils-3f92f024.js';\nimport { Dropdown, CommentBox, SingleTextbox, MultipleTextbox, MultipleChoice, Checkbox, DateTime, TextPresentational, ImagePresentational, ImageChoice, Nps } from '@sm/question-ui/respondent-survey';\nimport { dropdownRespondentSurveyValidation, commentBoxRespondentSurveyValidation, singleTextboxRespondentSurveyValidation, multipleTextboxRespondentSurveyValidation, multipleChoiceRespondentSurveyValidation, checkBoxRespondentSurveyValidation, rankingRespondentSurveyValidation, dateTimeRespondentSurveyValidation, imageChoiceRespondentSurveyValidation, matrixRespondentSurveyValidation } from '@sm/question-definitions';\nexport { S as SingleQuestionController } from './controllers-20aa27dd.js';\nimport './vendor-8000eab9.js';\nimport '@sm/question-ui/helpers';\n\nconst useShowOkButton = (active, dirty) => {\n const [showOkButton, setShowOkButton] = useState(false);\n useEffect(() => {\n if (!active) {\n setShowOkButton(false);\n } else if (dirty) {\n setShowOkButton(true);\n }\n }, [active, dirty, setShowOkButton]);\n return showOkButton;\n};\n\nfunction useFieldIsDirty(active) {\n const [fieldDirty, setFieldIsDirty] = useState(false);\n useEffect(() => {\n setFieldIsDirty(false);\n }, [active]);\n return [fieldDirty, setFieldIsDirty];\n}\n\nconst useWithValidatorRegistration = (question, values, touched, registerValidator, unregisterValidator, questionTypeSpecificValidation) => {\n const {\n id\n } = question;\n const validationFunction = useRef();\n validationFunction.current = useCallback(forceValidation => {\n return questionTypeSpecificValidation(question, values, touched || forceValidation);\n }, [question, values, touched, questionTypeSpecificValidation]);\n useEffect(() => {\n if (registerValidator) {\n registerValidator(id, [forceValidation => {\n if (!validationFunction.current) {\n return null;\n }\n\n return validationFunction.current(forceValidation);\n }]);\n }\n\n return () => unregisterValidator === null || unregisterValidator === void 0 ? void 0 : unregisterValidator(id);\n }, [id, registerValidator, unregisterValidator]);\n}; // Visualization for Question of type Dropdown\n\n\nfunction RespondentDropdownVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.spacing : undefined;\n const width = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.width : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, dropdownRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const required = isRequired(question);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(Dropdown, {\n id: id,\n title: questionTitle,\n okButton: questionOkButton,\n required: required,\n error: error === null || error === void 0 ? void 0 : error.detail,\n onLeave: onLeaveQuestion,\n onChange: values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n const trimmedValues = trimOtherValues(values);\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, trimmedValues);\n return { ...response,\n values: trimmedValues,\n isDirty,\n touched: true\n };\n });\n },\n choices: question.answers,\n choiceOther: question.answerOther,\n choiceComment: question.answerComment,\n responses: defaultAnswer.values,\n ...{\n padding,\n width\n }\n });\n}\n\nvar AnswerDropdownVisualization = declareVisualization(['dropdown'], ['respondent-survey'], RespondentDropdownVisualization);\n\nfunction RespondentCommentBoxVisualization({\n upstreamActions,\n question,\n settings: {\n survey\n },\n toExternalQuestion,\n displayOptions\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout.spacing : undefined;\n const cols = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.charsCount : undefined;\n const rows = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.linesCount : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, commentBoxRespondentSurveyValidation);\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && !!question.required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n if (upstreamActions.onLeaveQuestion) {\n upstreamActions.onLeaveQuestion(toExternalQuestion(question), answer);\n }\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(CommentBox, {\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n ...{\n padding,\n cols,\n rows\n },\n onChange: values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n // Dirty only if change ≠ default\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, values);\n return { ...response,\n values,\n isDirty,\n touched: true\n };\n });\n },\n responses: defaultAnswer.values,\n required: isRequired(question)\n });\n}\n\nvar AnswerCommentBoxVisualization = declareVisualization(['comment_box'], ['respondent-survey'], RespondentCommentBoxVisualization); // Visualization for Question of type SingleTextbox\n\nfunction RespondentSingleTextboxVisualization({\n upstreamActions,\n question,\n settings: {\n survey\n },\n toExternalQuestion,\n displayOptions\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.spacing : undefined;\n const size = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.charsCount : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, singleTextboxRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && !!question.required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n if (upstreamActions.onLeaveQuestion) {\n upstreamActions.onLeaveQuestion(toExternalQuestion(question), answer);\n }\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(SingleTextbox, {\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n ...{\n padding,\n size\n },\n onChange: values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n var _a;\n\n const trimmedValues = trimAllValues(values); // Dirty only if change ≠ default\n\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, trimmedValues); // pass empty Array for values when the trimmedValue is an empty String, to trigger the scroll\n\n if (((_a = trimmedValues[0]) === null || _a === void 0 ? void 0 : _a.value) === '') {\n return { ...response,\n values: [],\n isDirty,\n touched: true\n };\n }\n\n return { ...response,\n values: trimmedValues,\n isDirty,\n touched: true\n };\n });\n },\n responses: defaultAnswer.values,\n required: isRequired(question)\n });\n}\n\nvar AnswerSingleTextboxVisualization = declareVisualization(['single_textbox'], ['respondent-survey'], RespondentSingleTextboxVisualization);\n\nfunction RespondentMultipleTextboxVisualization({\n upstreamActions,\n question,\n settings: {\n survey\n },\n toExternalQuestion,\n displayOptions\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.spacing : undefined;\n const size = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.charsCount : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, multipleTextboxRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && !!question.required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n if (upstreamActions.onLeaveQuestion) {\n upstreamActions.onLeaveQuestion(toExternalQuestion(question), answer);\n }\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(MultipleTextbox, {\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n ...{\n padding,\n size\n },\n onChange: values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n const trimmedValues = trimAllValues(values); // Dirty only if change ≠ default\n\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, trimmedValues);\n return { ...response,\n values: trimmedValues,\n isDirty,\n touched: true\n };\n });\n },\n choices: question.answers,\n responses: defaultAnswer.values,\n required: isRequired(question)\n });\n}\n\nvar AnswerMultipleTextboxVisualization = declareVisualization(['multiple_textbox'], ['respondent-survey'], RespondentMultipleTextboxVisualization); // Visualization for Question of type MultipleChoice\n\nfunction RespondentMultipleChoiceVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout.spacing : undefined;\n const columnLayout = getAnswerLayoutColumns(layout === null || layout === void 0 ? void 0 : layout.answerLayout);\n const width = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.width : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, multipleChoiceRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && !!question.required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(MultipleChoice // required\n , {\n // required\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n // optional\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n ...{\n padding,\n width\n },\n onChange: values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n const trimmedValues = trimOtherValues(values); // Dirty only if change ≠ default\n\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, trimmedValues);\n return { ...response,\n values: trimmedValues,\n isDirty,\n touched: true\n };\n });\n },\n choices: question.answers,\n choiceNoneOfTheAbove: question.answerNoneOfTheAbove ? { ...question.answerNoneOfTheAbove,\n type: 'NOTA'\n } : undefined,\n choiceOther: question.answerOther,\n choiceComment: question.answerComment,\n responses: defaultAnswer.values,\n required: isRequired(question),\n columnLayout: columnLayout\n });\n}\n\nvar AnswerMultipleChoiceVisualization = declareVisualization(['multiple_choice'], ['respondent-survey'], RespondentMultipleChoiceVisualization); // Visualization for Question of type Checkbox\n\nfunction RespondentCheckboxVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout.spacing : undefined;\n const width = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.width : undefined;\n const columnLayout = getAnswerLayoutColumns(layout === null || layout === void 0 ? void 0 : layout.answerLayout);\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, checkBoxRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const required = isRequired(question);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(Checkbox // required\n , {\n // required\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n // optional\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n ...{\n padding,\n width\n },\n onChange: values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n const trimmedValues = trimOtherValues(values); // Dirty only if change ≠ default\n\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, trimmedValues);\n return { ...response,\n values: trimmedValues,\n isDirty,\n touched: true\n };\n });\n },\n choices: question.answers,\n choiceNoneOfTheAbove: { ...question.answerNoneOfTheAbove,\n type: 'NOTA'\n },\n choiceOther: question.answerOther,\n choiceComment: question.answerComment,\n responses: answer.values,\n required: required,\n columnLayout: columnLayout\n });\n}\n\nvar AnswerCheckboxVisualization = declareVisualization(['check_box'], ['respondent-survey'], RespondentCheckboxVisualization); // Visualization for Question of type Ranking\n\nfunction RespondentRankingVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.spacing : undefined;\n const width = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.width : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, rankingRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const required = isRequired(question);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(\"div\", null, React__default.createElement(\"h1\", null, \"Tier 2 Not Implemented yet\"), \"TODO: Wire up Tier 2 and add Tests\", React__default.createElement(\"br\", null), React__default.createElement(\"pre\", null, React__default.createElement(\"code\", {\n onBlur: () => onLeaveQuestion(),\n onFocus: () => {\n setFieldIsDirty(true);\n setAnswer({});\n }\n }, `${JSON.stringify(questionTitle, null, 2)}\\n`, `${JSON.stringify(questionOkButton, null, 2)}\\n`, `${JSON.stringify(error, null, 2)}\\n`, `${JSON.stringify(padding, null, 2)}\\n`, `${JSON.stringify(width, null, 2)}`)));\n}\n\nvar AnswerRankingVisualization = declareVisualization(['ranking'], ['respondent-survey'], RespondentRankingVisualization); // Visualization for Question of type DateTime\n\nfunction RespondentDateTimeVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = upstreamErrors === null || upstreamErrors === void 0 ? void 0 : upstreamErrors.find(e => !e.detail.startsWith('ERROR_'));\n const inlineErrors = upstreamErrors === null || upstreamErrors === void 0 ? void 0 : upstreamErrors.filter(e => e.detail.startsWith('ERROR_')).map(err => ({\n detail: err.detail,\n fieldId: err.fieldId\n }));\n const padding = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.spacing : undefined;\n const width = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.width : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, dateTimeRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const required = isRequired(question);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n\n const onChange = values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n const trimmedValues = trimDateTimeValues(values); // Dirty only if change ≠ default\n\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, trimmedValues);\n return { ...response,\n values: trimmedValues,\n isDirty,\n touched: true\n };\n });\n };\n\n const showDate = question.variant === 'DATETIME' || question.variant === 'DATE';\n const showTime = question.variant === 'DATETIME' || question.variant === 'TIME';\n return React__default.createElement(DateTime // required\n , {\n // required\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n showDate: showDate,\n showTime: showTime,\n // optional\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n inlineErrors: inlineErrors,\n ...{\n padding,\n width\n },\n onChange: onChange,\n choices: question.fieldSets,\n responses: answer.values,\n required: required\n });\n}\n\nvar AnswerDateTimeVisualization = declareVisualization(['date_time'], ['respondent-survey'], RespondentDateTimeVisualization);\n/** Visualization for Question of type Image & Text Presentation */\n\nfunction RespondentPresentationVisualization({\n question,\n displayOptions,\n settings: {\n survey\n }\n}) {\n var _a;\n\n const {\n id,\n layout,\n variant,\n heading: {\n default: {\n text,\n image\n }\n }\n } = question;\n const imageProps = {\n id: image === null || image === void 0 ? void 0 : image.id,\n src: image === null || image === void 0 ? void 0 : image.url,\n alt: (_a = image === null || image === void 0 ? void 0 : image.alt) !== null && _a !== void 0 ? _a : undefined\n };\n const questionOkButton = {\n visible: !survey.isClassic && !!(displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.active),\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const padding = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.spacing : undefined;\n const presentationProps = {\n id,\n text,\n padding,\n okButton: questionOkButton\n };\n return React__default.createElement(\"div\", null, variant === 'TEXT' ? React__default.createElement(TextPresentational, { ...presentationProps\n }) : React__default.createElement(ImagePresentational, { ...presentationProps,\n image: imageProps\n }));\n}\n\nvar AnswerPresentationVisualization = declareVisualization(['text_presentation', 'image_presentation'], ['respondent-survey'], RespondentPresentationVisualization); // Visualization for Question of type ImageChoice\n\nfunction RespondentImageChoiceVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n const {\n id,\n questionNumber,\n title\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, imageChoiceRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const required = isRequired(question);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n let multiple = false;\n\n if (question.variant === 'MANY_ANSWERS_IMAGE') {\n multiple = true;\n }\n\n return React__default.createElement(ImageChoice, {\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n onChange: values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n // Dirty only if change ≠ default\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, values);\n return { ...response,\n values,\n isDirty,\n touched: true\n };\n });\n },\n choices: question.answersImage,\n choiceNoneOfTheAbove: { ...question.answerNoneOfTheAbove,\n type: 'NOTA'\n },\n multiple: multiple,\n responses: defaultAnswer.values,\n required: required\n });\n}\n\nvar AnswerImageChoiceVisualization = declareVisualization(['image_choice'], ['respondent-survey'], RespondentImageChoiceVisualization); // Visualization for Question of type Nps\n\nfunction RespondentNpsVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n var _a;\n\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout.spacing : undefined;\n const width = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.width : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, multipleChoiceRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && !!question.required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n\n const onChange = values => {\n setFieldIsDirty(true);\n setAnswer(response => {\n // Dirty only if change ≠ default\n const isDirty = !equalsIgnoreOrder(defaultAnswer.values, values);\n return { ...response,\n values,\n isDirty,\n touched: true\n };\n });\n };\n\n return React__default.createElement(Nps // required\n , {\n // required\n id: id,\n title: questionTitle,\n onLeave: onLeaveQuestion,\n // optional\n okButton: questionOkButton,\n error: error === null || error === void 0 ? void 0 : error.detail,\n ...{\n padding,\n width\n },\n rowId: question.fieldSet.id,\n onChange: onChange,\n choices: (_a = question.answersWeighted) !== null && _a !== void 0 ? _a : [],\n responses: defaultAnswer.values,\n required: isRequired(question)\n });\n}\n\nvar AnswerNpsVisualization = declareVisualization(['nps'], ['respondent-survey'], RespondentNpsVisualization); // Visualization for Question of type Matrix\n\nfunction RespondentMatrixVisualization({\n question,\n displayOptions,\n upstreamActions,\n toExternalQuestion,\n settings: {\n survey\n }\n}) {\n const {\n id,\n questionNumber,\n title,\n layout\n } = question;\n const {\n active,\n errors: upstreamErrors,\n answer: upstreamAnswer,\n registerValidator,\n unregisterValidator\n } = displayOptions || {};\n const error = (upstreamErrors !== null && upstreamErrors !== void 0 ? upstreamErrors : [])[0];\n const padding = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.spacing : undefined;\n const width = survey.isClassic ? layout === null || layout === void 0 ? void 0 : layout.width : undefined;\n const defaultAnswer = useMemo(() => {\n var _a;\n\n return {\n questionId: id,\n family: question.family,\n variant: question.variant,\n touched: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.touched),\n isDirty: !!(upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.isDirty),\n values: (_a = upstreamAnswer === null || upstreamAnswer === void 0 ? void 0 : upstreamAnswer.values) !== null && _a !== void 0 ? _a : []\n };\n }, [id, upstreamAnswer, question]);\n const [answer, setAnswer] = useState(defaultAnswer);\n useWithValidatorRegistration(question, answer.values, answer.touched, registerValidator, unregisterValidator, matrixRespondentSurveyValidation);\n /**\n * Determines if the field is dirty (changed) internally (not for validation)\n * The OK Button is visible when change is made to the field only. The dirty\n * state resets (false) when activation of the question changes.\n */\n\n const [fieldDirty, setFieldIsDirty] = useFieldIsDirty(!!active);\n const showOkButton = useShowOkButton(!!active, fieldDirty);\n const required = isRequired(question);\n const questionTitle = {\n id: `question-title-${id}`,\n heading: title,\n number: Number(questionNumber),\n numbered: survey.numberingEnabled,\n required: survey.asteriskEnabled && required\n };\n const questionOkButton = {\n visible: !survey.isClassic && showOkButton,\n text: survey.okLabel,\n onClick: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.onSubmit\n };\n const onLeaveQuestion = useCallback(() => {\n var _a;\n\n (_a = upstreamActions.onLeaveQuestion) === null || _a === void 0 ? void 0 : _a.call(upstreamActions, toExternalQuestion(question), answer);\n }, [question, upstreamActions, answer, toExternalQuestion]);\n return React__default.createElement(\"div\", null, React__default.createElement(\"h1\", null, \"Tier 2 Not Implemented yet\"), \"TODO: Wire up Tier 2 and add Tests\", React__default.createElement(\"br\", null), React__default.createElement(\"pre\", null, React__default.createElement(\"code\", {\n onBlur: () => onLeaveQuestion(),\n onFocus: () => {\n setFieldIsDirty(true);\n setAnswer({});\n }\n }, `${JSON.stringify(questionTitle, null, 2)}\\n`, `${JSON.stringify(questionOkButton, null, 2)}\\n`, `${JSON.stringify(error, null, 2)}\\n`, `${JSON.stringify(padding, null, 2)}\\n`, `${JSON.stringify(width, null, 2)}`)));\n}\n\nvar AnswerMatrixVisualization = declareVisualization(['matrix'], ['respondent-survey'], RespondentMatrixVisualization);\nvar visualizationList = [AnswerSingleTextboxVisualization, AnswerMultipleTextboxVisualization, AnswerCommentBoxVisualization, AnswerDropdownVisualization, AnswerMultipleChoiceVisualization, AnswerCheckboxVisualization, AnswerRankingVisualization, AnswerDateTimeVisualization, AnswerPresentationVisualization, AnswerImageChoiceVisualization, AnswerNpsVisualization, AnswerMatrixVisualization]; // Creates the helper to store the configuration\n\nconst ProviderHelper = providerFactory(visualizationList); // Declares the Provider Component itself, with the proper API\n\nfunction RespondentSurveyCapabilityProvider({\n upstreamActions,\n settings,\n children,\n renderProps\n}) {\n // here you can keep capability-specific state, translate actions or make other modifications\n // that are appropriate to your capability-specific behaviour\n return React__default.createElement(ProviderHelper, {\n value: {\n capability: 'respondent-survey',\n upstreamActions,\n renderProps,\n settings\n }\n }, React__default.createElement(SurveyThemeWrapper, null, children));\n}\n\nexport { RespondentSurveyCapabilityProvider as RespondentCapabilityProvider, RespondentSurveyCapabilityProvider, visualizationList as RespondentVisualizations };","import * as React from 'react';\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n\n _setPrototypeOf(subClass, superClass);\n}\n\nvar changedArray = function changedArray(a, b) {\n if (a === void 0) {\n a = [];\n }\n\n if (b === void 0) {\n b = [];\n }\n\n return a.length !== b.length || a.some(function (item, index) {\n return !Object.is(item, b[index]);\n });\n};\n\nvar initialState = {\n error: null\n};\n\nvar ErrorBoundary = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(ErrorBoundary, _React$Component);\n\n function ErrorBoundary() {\n var _this;\n\n for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {\n _args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;\n _this.state = initialState;\n _this.updatedWithError = false;\n\n _this.resetErrorBoundary = function () {\n var _this$props;\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n _this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);\n\n _this.reset();\n };\n\n return _this;\n }\n\n ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {\n return {\n error: error\n };\n };\n\n var _proto = ErrorBoundary.prototype;\n\n _proto.reset = function reset() {\n this.updatedWithError = false;\n this.setState(initialState);\n };\n\n _proto.componentDidCatch = function componentDidCatch(error, info) {\n var _this$props$onError, _this$props2;\n\n (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);\n };\n\n _proto.componentDidMount = function componentDidMount() {\n var error = this.state.error;\n\n if (error !== null) {\n this.updatedWithError = true;\n }\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var error = this.state.error;\n var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error\n // happens to *also* be in the resetKeys array, we'd end up resetting\n // the error boundary immediately. This would likely trigger a second\n // error to be thrown.\n // So we make sure that we don't check the resetKeys on the first call\n // of cDU after the error is set\n\n if (error !== null && !this.updatedWithError) {\n this.updatedWithError = true;\n return;\n }\n\n if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {\n var _this$props$onResetKe, _this$props3;\n\n (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);\n this.reset();\n }\n };\n\n _proto.render = function render() {\n var error = this.state.error;\n var _this$props4 = this.props,\n fallbackRender = _this$props4.fallbackRender,\n FallbackComponent = _this$props4.FallbackComponent,\n fallback = _this$props4.fallback;\n\n if (error !== null) {\n var _props = {\n error: error,\n resetErrorBoundary: this.resetErrorBoundary\n };\n\n if ( /*#__PURE__*/React.isValidElement(fallback)) {\n return fallback;\n } else if (typeof fallbackRender === 'function') {\n return fallbackRender(_props);\n } else if (FallbackComponent) {\n return /*#__PURE__*/React.createElement(FallbackComponent, _props);\n } else {\n throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');\n }\n }\n\n return this.props.children;\n };\n\n return ErrorBoundary;\n}(React.Component);\n\nexport { ErrorBoundary as E };"],"names":["Object","defineProperty","exports","value","default","createBrowserApolloClient","_ref","fragmentMatcherFn","metadata","pageRequestId","_ref$cacheHydration","cacheHydration","_ref$uri","uri","_ref$linkOptions","linkOptions","_ref$devToolsEnabled","devToolsEnabled","_ref$availableLoggedO","availableLoggedOutPaths","authLink","appName","appVersion","cache","_apolloCacheInmemory","InMemoryCache","fragmentMatcher","restore","_linkOptions$headers","headers","otherLinkOptions","_objectWithoutProperties","source","excluded","key","i","target","_objectWithoutPropertiesLoose","sourceKeys","keys","length","indexOf","getOwnPropertySymbols","sourceSymbolKeys","prototype","propertyIsEnumerable","call","apolloLinkMemoizeCache","link","_apolloLink","ApolloLink","operation","_operation$getContext","_operation$getContext2","targetPath","getContext","graphQLPath","includes","apolloLinkFactory","arguments","undefined","DEFAULT_TARGET_PATH","_apolloLinkBatchHttp","BatchHttpLink","_objectSpread","DEFAULT_LINK_OPTIONS","concat","request","Observable","of","_apolloClient","connectToDevTools","name","version","_interopRequireDefault","obj","__esModule","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","configurable","writable","credentials","batchInterval","module","_toPropertyKey","arg","_toPrimitive","input","hint","prim","Symbol","toPrimitive","res","TypeError","String","Number","dateTimeFormat","isBrowser","getClientEnvironmentDetails","numberFormat","reduce","acc","style","currency","timeZone","Intl","DateTimeFormat","resolvedOptions","err","window","setTimeout","_default","number","dateTime","relativeTime","FormattedDateTime","props","_options$currentLocal","restProps","_excluded","options","getOptionsObject","currentLocale","_formats","format","T","defineMessages","v","t","desc","values","opts","id","defaultMessage","html","getHTML","get","_react","_interopRequireWildcard","nodeInterop","_getRequireWildcardCache","has","newObj","hasPropertyDescriptor","hasOwnProperty","set","_propTypes","_intlMessageformat","_escapeHtml","_invariant","_lodash","_utils","_locale","_intlRelativeformat","_excluded2","WeakMap","cacheBabelInterop","cacheNodeInterop","_defineProperties","descriptor","_setPrototypeOf","o","p","setPrototypeOf","bind","__proto__","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","Reflect","construct","sham","Proxy","Boolean","valueOf","e","_createSuperInternal","result","Super","_getPrototypeOf","NewTarget","this","constructor","_possibleConstructorReturn","self","_assertThisInitialized","ReferenceError","getPrototypeOf","_slicedToArray","arr","_arrayWithHoles","Array","isArray","_iterableToArrayLimit","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","return","_unsupportedIterableToArray","_nonIterableRest","_toConsumableArray","_arrayWithoutHoles","_arrayLikeToArray","_iterableToArray","iter","from","_nonIterableSpread","minLen","n","toString","slice","test","len","arr2","intlRelativeFormat","INTL_OPT_KEY","INTL_MSG_STORE_KEY","getStore","glob","g","getDefaultOptions","warningHandler","console","warn","escapeHtml","randomStr","N","map","Math","random","join","keysOf","replacer","elements","part","substitute","message","variables","counter","vars","msg","uid","abs","hashInput","hash","charCodeAt","JSON","stringify","tokenDelimiter","tokenizedValues","generateToken","isValidElement","token","isString","s","formats","context","error","stack","exhausted","runningIndex","match","substr","_ref2","matched","tag","matchIndex","index","popped","pop","content","substring","replace","children","split","element","cloneElement","tokenReplacement","_getOptionsObject","messages","el","createElement","dangerouslySetInnerHTML","__html","defaultMsg","d","defineIntlRelativeFormat","currentLanguage","ReactIntlLocaleData","localeData","__addLocaleData","initIntl","messageStore","langInited","propTypes","shape","string","isRequired","description","arrayOf","objectOf","node","bool","defaultProps","L10NContext","createContext","isRTL","RTLLanguageCodes","LANGUAGES","l","code","L10nProvider","_React$Component","_inherits","subClass","superClass","create","_super","_this","_classCallCheck","instance","Constructor","state","localeCode","languageCode","getMessages","isNode","_createClass","protoProps","staticProps","componentDidUpdate","prevProps","setState","localeMessages","render","Provider","__self","__source","fileName","lineNumber","columnNumber","Component","DataCenterIds","DC_SPECIFIC_SUBDOMAINS","getDataCenterById","getDataCenterIdFromCurrentUrl","url","dataCenterAffinityCookie","subdomain","parseResult","_parseDomain","parseDomain","fromUrl","dataCenterId","US","type","ParseResultType","Listed","subDomains","dcSub","_dataCenters","dataCenterSpecificSubdomains","find","subSpecific","endsWith","CA","getDefaultSubdomainForDataCenter","dc","defaultSubdomain","dataCenters","EU","_languages","LANGUAGES_BY_CODE","LANGUAGES_BY_ID","_languageTags","convertLanguageTag","getAudienceSupportedCountries","AU","NZ","SG","GB","IE","getBenchmarksSupportedCountries","getCookieTransportTLDs","_tlds","tld","enabled","getEUCountries","_localeSets","EUCountryCodes","getLanguageCodeFromCountryCode","country","language","lang","countries","sanitizeCountryCode","getLanguageCodeFromSubdomain","LANGUAGES_WITH_SUBDOMAINS","getLanguageTagByCode","getLanguageTagById","getLanguageTags","getSMSupportedCountries","SMSupportedCountryCodes","getSiteSupportedLanguageCodes","getSiteSupportedLanguages","getSubdomainFromLanguageCodeAndDataCenter","getTldLanguageInfo","data","isDACHCountry","DASHCountryCodes","CountryCodes","isEUCountry","isEUDC","hostname","isEUSubdomain","isGBCountry","GBCountryCodes","isGDPRCountry","GDPRCountryCodes","isUSTerritory","USTerritoryCountryCodes","localeSets","normalizeLanguageTag","parseLanguageTag","GDPR_COUNTRIES","SM_SUPPORTED_COUNTRIES","EU_COUNTRIES","US_TERRITORIES","GB_COUNTRIES","DASH_COUNTRIES","fallBackCountry","isTwoLetterCode","c","toUpperCase","supportLevel","SupportLevels","SITE_WIDE","nt","LANGUAGE_TAGS","def","matches","tagRegEx","exec","groups","_wrapRegExp","re","BabelRegExp","RegExp","_groups","flags","buildGroups","k","str","indices","substitution","_","group","args","primary","script","region","variant","delimiter","toLowerCase","SURVEY_CREATION","codeIETF","displayName","helplink","helpCenterLangCode","displayOrder","LANGUAGES_BY_ID_REC","LANGUAGES_BY_CODE_REC","LANGUAGES_WITH_SUBDOMAINS_REC","freeze","AT","BE","BG","CH","CY","CZ","DE","DK","EE","ES","FI","FR","GR","HR","HU","IM","IT","LT","LU","LV","MC","MT","NL","PL","PT","RO","SE","SI","SK","IS","LI","NO","GG","GI","GS","JE","GU","PR","UM","VI","AE","AR","BR","FO","GL","AD","AL","AX","BA","BY","GF","GP","MD","ME","MF","MK","MQ","PM","RE","RS","RU","SM","TF","TR","UA","VA","YT","HK","IN","JP","KR","MX","TW","AF","AG","AI","AM","AN","AO","AQ","AS","AW","AZ","BB","BD","BF","BH","BI","BJ","BL","BM","BN","BO","BS","BT","BV","BW","BZ","CC","CD","CF","CG","CI","CK","CL","CM","CN","CO","CR","CV","CX","DJ","DM","DO","DZ","EC","EG","EH","ER","ET","FJ","FK","FM","GA","GD","GE","GH","GM","GN","GQ","GT","GW","GY","HM","HN","HT","ID","IL","IO","IQ","JM","JO","KE","KG","KH","KI","KM","KN","KP","KW","KY","KZ","LA","LB","LC","LK","LR","LS","LY","MA","MG","MH","ML","MM","MN","MO","MP","MR","MS","MU","MV","MW","MY","MZ","NA","NC","NE","NF","NG","NI","NP","NR","NU","OM","PA","PE","PF","PG","PH","PK","PN","PS","PW","PY","QA","RW","SA","SB","SC","SH","SJ","SL","SN","SO","SR","ST","SV","SY","SZ","TC","TD","TG","TH","TJ","TK","TL","TM","TN","TO","TT","TV","TZ","UG","UY","UZ","VC","VE","VG","VN","VU","WF","WS","YE","ZM","ZW","ZA","NO_HOSTNAME","urlPattern","urlLike","URL","Error","startsWith","_a","ValidationErrorType","parse_domain_1","from_url_1","sanitize_1","RESERVED_TOP_LEVEL_DOMAINS","serialized_tries_1","look_up_1","parse_trie_1","getAtIndex","array","splitLabelsIntoDomains","labels","max","domain","topLevelDomains","parsedIcannTrie","parsedPrivateTrie","sanitizationResult","sanitize","SanitizationResultType","Invalid","errors","ValidIp","Ip","ip","ipVersion","Reserved","parseTrie","icannTrie","privateTrie","icannTlds","lookUpTldsInTrie","privateTlds","NotListed","indexOfPublicSuffixDomain","indexOfIcannDomain","assign","icann","__importDefault","mod","is_ip_1","createNoHostnameError","NoHostname","column","createDomainMaxLengthError","DomainMaxLength","createLabelMinLengthError","label","LabelMinLength","createLabelMaxLengthError","LabelMaxLength","createLabelInvalidCharacterError","invalidCharacter","LabelInvalidCharacter","inputTrimmed","trim","inputTrimmedAsIp","labelValidationErrors","ValidDomain","icann_json_1","private_json_1","EXCEPTION","WILDCARD","RESET","DOWN","SAME","UP","__createBinding","m","k2","__setModuleDefault","__importStar","characters","trie","labelsToCheck","tlds","labelLowerCase","unshift","createOrGetChild","createRootNode","NODE_TYPE_CHILD","NODE_TYPE_ROOT","Map","parent","child","nodes_1","serializedTrie","rootNode","parentNode","addDomain","char","charAt","createMetricsTracker","getCleanDigitalData","getRoot","setupRoot","GLOBAL_KEY","root","subscribers","automaticSubscribers","config","user","isAuthenticated","dataAnalyticsAPIPath","loggingAPIPath","legacyWeb","gtmId","digitalData","_enums","_helpers","userId","page","pageInfo","pageId","attributes","pathname","events","components","ep201","getCookieValue","ep202","initialize","reset","update","updateUserConfig","userConfigUpdate","getSubscribers","getAutomaticSubscribers","track","event","_event$data","_event$data2","_event$data2$data","maskedEvent","email","maskEmail","COMPONENT_ADD","PAGE_VIEW","VIRTUAL_PAGE_VIEW","pageViewMutation","subscriber","automaticTrack","addSubscriber","addAutomaticSubscriber","getConfig","getDigitalData","MetricsTracker","generateMetricsAttribute","eventData","ELEMENT_INTERACTION","_BaseMetricsTracker","_DataAnalyticsMetricsSubscriber","_LoggingMetricsSubscriber","_GTMMeticsSubscriber","_FacebookPixelSubscriber","_AmplitudeSubscriber","delegatedEvents","setupEvents","on","gce","currentTarget","metricsData","getAttribute","metricsDataJSON","parse","setupAutomaticEvents","clickableLinks","inputTarget","actionType","actionFlow","class","className","text","innerText","checked","cloneDigitalData","a","b","maskString","newDigitalData","_ComponentMetricsProvider","_types","GTMEventData","_MetricsTracker","MetricsTrackerType","_PageMetricsProvider","_SPARouteMetricsProvider","ComponentMetricsProvider","_ref$attributes","_ref$disableDA","disableDA","USER_EVENTS","componentName","PageMetricsProvider","GDPR","_GDPR$hasGDPRConsent","hasGDPRConsent","_user$id","_user$package","package","packageId","_user$email","useEffect","SPARouteMetricsProvider","countryCode","amplitudeSubscriber","digitalDataEvent","_user$session","_amplitudeRequire$def","amplitudeToken","overrideOneTrust","amplitudeEvent","amplitudeUserProperties","session","isAdminImpersonation","blockedByOneTrust","_parseOneTrustCookie","parseOneTrustCookie","hasOneTrustCookie","oneTrustGroups","amplitudeRequire","amplitude","amplitudeInstance","getInstance","init","includeReferrer","setTransport","_group$membership","_group$membership2","membership","groupId","setGroup","setUserId","userProps","hydrateDefaultUserProps","_user$group","_user$group$membershi","conditionallyAddKey","languageId","packageName","subscriptionStatus","joinedAt","subscribedAt","emailDomain","setUserProperties","clearStorage","logEvent","keyName","out","dataAnalyticsMetricsSubscriber","metricsTrackerConfig","eventMeta","ui_event","ui_goal","origin","legacy_web","location","href","fetch","method","body","meta","facebookPixelSubscriber","ReactPixel","_JSON$parse","isValidURL","whiteListedURLs","some","pattern","USER_METADATA","pageView","gtmMetricsSubscriber","gtmDataLayer","pagePath","dataLayer","gtm","eventObj","loadMarketingContainer","user_id","package_id","country_code","virtualPageUrl","virtualPageTitle","GDPR_ACTION","loggingMetricsSubscriber","logEventData","log","bodyRequestObject","USER_SUBSCRIPTION_STATUS","cookieValue","retVal","keyValues","keyVal","piece","decodeURIComponent","shift","tokens","cname","defaultValue","ca","document","cookie","_s3upload","DEFAULT_OPTIONS","preprocess","file","onSignedUrl","onProgress","onFinish","onError","signingUrl","scrubFilename","filename","s3path","autoUpload","S3Uploader","myUploader","uploadFile","abort","abortUpload","PackageType","isTeamPackage","isEnterprisePackage","isBasicPackage","isAnnualPackage","packageID","ENTERPRISE_PLATINUM","ENTERPRISE","STANDARD_ANNUAL","ADVANTAGE_ANNUAL","PREMIER_ANNUAL","TEAM_ADVANTAGE_ANNUAL","TEAM_PREMIER_ANNUAL","BASIC","ENT_GOLD","ENTERPRISE_CONTRIBUTOR_SEAT","ENTERPRISE_CASUAL_USER","environmentDetails","SupportedBrowserVendors","userAgent","userAgentTracker","_initialize","isBrowserSupported","supportedBrowsers","browser","_bowser","getParser","browsers","defaultSupportedBrowsers","cfg","vendor","operator","satisfies","isDesktop","isHeadlessChrome","isMobile","isTablet","isIOS","isAndroid","clientWindowSize","width","height","ua","__LOAD_PAYLOAD_CACHE__","clientWidth","clientHeight","navigator","inspectAgent","Chrome","Firefox","Safari","Edge","_billing","_tsAutoMock","PartialDeep","_S3Uploader","_environment","SupportedBrowsers","VersionOperators","createMock","_createURL","_deepFreeze","_isValidEmail","_sanitizeString","deepFreeze","getOwnPropertyNames","prop","isFrozen","isValidEmail","_dompurify","stringSanitize","JSDOM","overrides","createURL","params","queryString","encodeURIComponent","notNull","u","isNull","isNumber","isOptional","guard","isArrayOf","every","isOneOf","list","isFixed","isEither","isNullable","typeGuard","guards","entries","typeAssertion","assertGuard","questionId","detail","baseQuestionGuards","typeId","family","respondentSurveyMapping","externalQuestion","position","questionNumber","heading","title","imageChoiceCrossCapabilityMapping","respondentQuizResultsMapping","quizResults","aggregateResponseDashboardMapping","dashboardType","filterCount","selectedCount","skippedCount","answeredCount","responseData","aggregateResponse","aggregateResponseCustomizableSolutionsMapping","displayNumber","mapRespondentQuizResultsAnswerOther","answerOther","base","requiredErrorText","visible","linesCount","layout","charsCount","mapRespondentSurveyAnswerOther","shared","touched","selected","answerComment","mapRespondentSurveyRequiredAll","errorMessage","fillSpacing","spacing","_b","_c","top","bottom","left","right","checkBoxCrossCapabilityMapping","dropdownCrossCapabilityMapping","commentBoxCrossCapabilityMapping","singleTextboxCrossCapabilityMapping","matrixCrossCapabilityMapping","multipleChoiceCrossCapabilityMapping","multipleTextboxCrossCapabilityMapping","rankingCrossCapabilityMapping","sliderCrossCapabilityMapping","starRatingCrossCapabilityMapping","imagePresentationCrossCapabilityMapping","textPresentationCrossCapabilityMapping","npsCrossCapabilityMapping","isTextLengthValidation","minLength","maxLength","isNumericalValidation","minValue","maxValue","isDateValidation","minDate","maxDate","isDateFormatValidation","dateTimeCrossCapabilityMapping","CAPABILITIES","invalidCombination","questionTypeAndCapabilityMapping","single_textbox","q","validation","required","fieldSet","comment_box","multiple_textbox","answers","sumValidation","fieldSets","check_box","answerNA","answerNoneOfTheAbove","image_choice","answersImage","multiple_choice","dropdown","slider","scaleOptions","hideNumericalInput","star_rating","answersWeighted","symbolOptions","ranking","matrix","isExternalMatrixWithRadio","isForcedRanking","isWeighted","answerNotApplicable","isExternalMatrixWithCheckboxes","nps","date_time","image_presentation","assignments","text_presentation","mapDynamic","capability","mapInternalDynamicToExternal","cleanExternalQuestion","isCompatible$f","baseGuards$b","isQuestionTypeSingleTextbox","typeId$e","isOfQuestionType$e","runValidators","validators","question","validateEmptyValue","validationErrors","validator","newError","createValidationError","fieldId","checkValueTextLength","valueToValidate","validateTextLength","DATE_PATTERNS","DATE_INTL","DATE_US","DATE_BUILDERS","dd","mm","yyyy","Date","isDateValidationType","validationType","validateDate","dateType","date","dmin","dmax","getMinAndMaxDate","getTime","checkValueDateFormat","isNumericalValidationType","isSumValidationType","isValidInteger","maybeInteger","checkValueNumericalFormat","parsedNumber","parseFloat","isNaN","isValidDecimal","validateNumber","getDefaultExportFromCjs","x","isEmailExports","isEmail$1","assertStringExports","_typeof","assertString","invalidType","mergeExports","merge","defaults","isByteLengthExports","isByteLength","min","_assertString","encodeURI","isFQDNExports","isFQDN","_merge","default_fqdn_options","allow_trailing_dot","parts","require_tld","allow_numeric_tld","allow_underscores","isIPExports","isIP","ipv4Maybe","sort","addressAndZone","blocks","foundOmissionBlock","foundIPv4TransitionBlock","expectedNumberOfBlocks","ipv6Block","isEmail","default_email_options","require_display_name","allow_display_name","display_email","splitNameAddress","display_name","_display_email","validateDisplayName","trim_quotes","display_name_without_quotes","ignore_max_length","lower_domain","domain_specific_validation","username","_isByteLength","_user_parts","gmailUserPart","_isFQDN","allow_ip_domain","_isIP","noBracketdomain","allow_utf8_local_part","quotedEmailUserUtf8","quotedEmailUser","emailUserUtf8Part","emailUserPart","user_parts","_i2","blacklisted_chars","search","checkValueEmailFormat","validateEmail","validateRequired","choiceCount","otherRequiredErrorText","noRangeValidation","isResponseValueArray","hasError","hasTypeAllValidationErrorWithoutRangeSelection","hasTypeAllValidationError","hasTypeAtLeastValidationError","hasTypeAtMostValidationError","hasTypeExactlyValidationError","hasTypeRangeValidationError","hasEmptyOtherAnswer","checkValueRequired","total","answerCount","allChoicesRequired","standAloneRequiredValidator","valueError","openEndedValidators","openEndedMultipleValueValidators","sum","valueSum","reduceSum","validateFixedSum","validateRespondentSurveyOpenEndedQuestion","answer","validateRespondentSurveyMultipleOpenEndedQuestion","valueErrors","answerValues","validateRespondentSurveySelectionAndOtherValue","selectedChoices","otherValue","hasRequiredAnswerError","selectedAnswerOtherRequiredError","returnValueErrors","singleTextboxQuestionDefinition","fromExternalQuestion","mapFromExternalQuestion$e","toExternalQuestion","eq","isOfQuestionType","isCompatible","baseGuards$a","isQuestionTypeMultipleTextbox","mapFromExternalQuestion$d","questionType","assertQuestionTypeMultipleTextbox","typeId$d","multipleTextboxQuestionDefinition","baseGuards$9","isQuestionTypeCommentBox","mapFromExternalQuestion$c","assertQuestionTypeCommentBox","typeId$c","commentBoxQuestionDefinition","baseGuards$8","isQuestionTypeMultipleChoice","typeId$b","multipleChoiceQuestionDefinition","mapFromExternalQuestion$b","baseGuards$7","isQuestionTypeCheckBox","mapFromExternalQuestion$a","assertQuestionTypeCheckBox","typeId$a","checkBoxQuestionDefinition","baseGuards$6","isQuestionTypeDropdown","mapFromExternalQuestion$9","assertQuestionTypeDropdown","typeId$9","dropdownQuestionDefinition","baseGuards$5","isQuestionTypeImageChoice","mapFromExternalQuestion$8","assertQuestionTypeImageChoice","typeId$8","imageChoiceQuestionDefinition","baseGuards$4","isQuestionTypeSlider","mapFromExternalQuestion$7","assertQuestionTypeSlider","typeId$7","sliderQuestionDefinition","baseStarRatingMatrixGuards","baseStarRatingScaleGuards","isQuestionTypeStarRating","mapFromExternalQuestion$6","assertQuestionTypeStarRating","typeId$6","starRatingQuestionDefinition","baseSingleAnswerGuards","baseManyAnswersGuards","isQuestionTypeMatrix","mapFromExternalQuestion$5","assertQuestionTypeMatrix","typeId$5","matrixQuestionDefinition","baseGuards$3","isQuestionTypeRanking","mapFromExternalQuestion$4","assertQuestionTypeRanking","typeId$4","rankingQuestionDefinition","baseGuards$2","isQuestionTypeNps","npsQuestionDefinition","mapFromExternalQuestion$3","baseDateTimeGuards","baseDateGuards","baseTimeGuards","isQuestionTypeDateTime","typeId$2","errorMessageTokens","dateTimeAnswerPayloadToString","hour","minute","period","hasValidTime","validateTimeFormat","hourParsed","parseInt","minParsed","dateTimeRespondentSurveyValidation","simplifiedAnswers","stringifyAnswerValues","curr","checkValueFormat","dateTimeQuestionDefinition","mapFromExternalQuestion$2","baseGuards$1","isQuestionTypeImagePresentation","mapFromExternalQuestion$1","assertQuestionTypeImagePresentation","typeId$1","imagePresentationQuestionDefinition","baseGuards","isQuestionTypeTextPresentation","mapFromExternalQuestion","assertQuestionTypeTextPresentation","questionTypeDefinitionModules","selectQuestionTypeDefinition","isAggregateResponseHeaderItem","weight","isAggregateResponseHeader","items","isAggregateResponseBasicStats","rowItem","columnItem","groupItem","percentage","across","row","isAggregateResponseOtherAnswerItem","isAggregateResponseOtherAnswer","totalCount","isOneDimensionalAggregateResponseCell","isTwoDimensionalAggregateResponseCell","rowHeader","columnHeader","groupHeader","otherAnswers","stats","isThreeDimensionalAggregateResponseCell","isOneDimensionalChartData","rowID","rowLabel","isTwoDimensionalData","columnID","columnLabel","getTypeId","groupID","groupLabel","isExternalQuestionWithTypeId","initialState","ErrorBoundary","_len","_args","_key","updatedWithError","resetErrorBoundary","_this$props","_len2","_key2","onReset","_inheritsLoose","getDerivedStateFromError","_proto","componentDidCatch","info","_this$props$onError","_this$props2","componentDidMount","_this$props$onResetKe","_this$props3","resetKeys","changedArray","item","is","onResetKeysChange","_this$props4","fallbackRender","FallbackComponent","fallback","_props","classnamesExports","hasOwn","classNames","classes","argType","inner","useStyles$1","theme","wdsIcons","color","size","fontSize","iconSize","display","verticalAlign","textAlign","fill","palette","main","svgContainer","IconDocumentX","withIcon","WithIcon","rest","viewBox","preserveAspectRatio","role","getDisplayName","getOriginalComponent","DocumentXIconPath","useStyles","fallbackComponent","fontFamily","questionBody","questionColor","border","borderRadius","minHeight","justifyContent","alignItems","marginLeft","COPY","ERROR","withErrorBoundary","ComponentWithErrorBoundary","lessThanXSeconds","one","other","xSeconds","halfAMinute","lessThanXMinutes","xMinutes","aboutXHours","xHours","xDays","aboutXWeeks","xWeeks","aboutXMonths","xMonths","aboutXYears","xYears","overXYears","almostXYears","r","defaultWidth","full","long","medium","short","time","lastWeek","yesterday","today","tomorrow","nextWeek","formattingValues","defaultFormattingWidth","argumentCallback","matchPatterns","defaultMatchWidth","parsePatterns","defaultParseWidth","valueCallback","formatDistance","addSuffix","comparison","formatLong","formatRelative","localize","ordinalNumber","era","narrow","abbreviated","wide","quarter","month","day","dayPeriod","am","pm","midnight","noon","morning","afternoon","evening","night","matchPattern","parsePattern","any","weekStartsOn","firstWeekContainsDate","f","NaN","ceil","floor","h","w","y","D","P","getTimezoneOffset","setSeconds","C","M","U","RangeError","S","locale","getUTCDay","setUTCDate","getUTCDate","setUTCHours","getUTCFullYear","setUTCFullYear","Y","O","Ut","St","Xt","G","unit","Pt","R","Q","getUTCMonth","Et","L","H","round","I","B","Yt","setUTCMonth","E","getUTCHours","Nt","qt","K","getUTCMinutes","Bt","getUTCSeconds","Ot","getUTCMilliseconds","pow","Ht","X","_originalDate","At","zt","Gt","z","jt","Kt","Jt","Zt","_t","$t","Vt","useAdditionalWeekYearTokens","useAdditionalDayOfYearTokens","te","setDate","getDate","ee","start","end","setHours","step","ne","getDay","ae","ue","se","ce","de","year","firstDayOfWeek","dayLabelFormat","weekdayLabelFormat","monthLabelFormat","days","useMemo","oe","getMonth","setFullYear","getFullYear","dayLabel","weekdayLabels","ie","monthLabel","le","fe","he","me","we","ge","setMonth","ve","ke","Ce","xe","now","Me","Se","startDate","endDate","isDateBlocked","minBookingDays","exactMinBookingDays","minBookingDate","maxBookingDate","Ye","focusedInput","onDatesChange","initialVisibleMonth","numberOfMonths","unavailableDates","changeActiveMonthOnSelect","useState","addEventListener","removeEventListener","pe","isDateBlockedFn","W","useCallback","F","activeMonths","isDateSelected","ye","isDateHovered","hoveredDate","isFirstOrLastSelectedDate","be","isStartDate","De","isEndDate","Te","isDateFocused","focusedDate","onResetDates","onDateHover","onDateSelect","onDateFocus","goToPreviousMonths","goToPreviousMonthsByOneMonth","goToNextMonths","goToNextMonthsByOneMonth","goToDate","goToPreviousYear","goToNextYear","_extends","safeIsNaN","ponyfill","areInputsEqual","newInputs","lastInputs","first","second","memoizeOne","resultFn","isEqual","lastThis","lastResult","lastArgs","calledOnce","memoized","newArgs","performance","cancelTimeout","timeoutID","cancelAnimationFrame","cachedRTLResult","getRTLOffsetType","recalculate","outerDiv","outerStyle","overflow","direction","innerDiv","innerStyle","appendChild","scrollLeft","removeChild","defaultItemKey$1","defaultItemKey","createListComponent","_class","_temp","getItemOffset","getEstimatedTotalSize","getItemSize","getOffsetForIndexAndAlignment","getStartIndexForOffset","getStopIndexForStartIndex","initInstanceProps","shouldResetStyleCacheOnItemSizeChange","validateProps","_PureComponent","List","_instanceProps","_outerRef","_resetIsScrollingTimeoutId","isScrolling","scrollDirection","scrollOffset","initialScrollOffset","scrollUpdateWasRequested","_callOnItemsRendered","overscanStartIndex","overscanStopIndex","visibleStartIndex","visibleStopIndex","onItemsRendered","_callOnScroll","onScroll","_getItemStyle","itemSize","itemStyleCache","_getItemStyleCache","_offset","isHorizontal","isRtl","offsetHorizontal","__","___","_onScrollHorizontal","_event$currentTarget","scrollWidth","prevState","_resetIsScrollingDebounced","_onScrollVertical","_event$currentTarget2","scrollHeight","scrollTop","_outerRefSetter","ref","outerRef","current","requestTimeout","callback","delay","requestAnimationFrame","tick","_resetIsScrolling","getDerivedStateFromProps","nextProps","validateSharedProps$1","scrollTo","scrollToItem","align","itemCount","_callPropsCallbacks","_this$state","componentWillUnmount","innerRef","innerElementType","innerTagName","itemData","_this$props4$itemKey","itemKey","outerElementType","outerTagName","useIsScrolling","_this$_getRangeToRend","_getRangeToRender","startIndex","stopIndex","_index","estimatedTotalSize","WebkitOverflowScrolling","willChange","pointerEvents","_this$_getRangeToRend2","_overscanStartIndex","_overscanStopIndex","_visibleStartIndex","_visibleStopIndex","_this$state2","_scrollDirection","_scrollOffset","_scrollUpdateWasRequested","_this$props5","overscanCount","_this$state3","overscanBackward","overscanForward","PureComponent","validateSharedProps","_ref3","FixedSizeList","_ref4","lastItemOffset","maxOffset","minOffset","middleOffset","_ref5","offset","_ref6","numVisibleItems","_ref7","canUseDOM","isWindow","elementString","getWindow","_target$ownerDocument","_target$ownerDocument2","ownerDocument","defaultView","isDocument","Document","isHTMLElement","HTMLElement","getOwnerDocument","createAdjustmentFn","modifier","adjustments","accumulator","adjustment","valueAdjustment","add","subtract","isKeyboardEvent","KeyboardEvent","getEventCoordinates","isTouchEvent","TouchEvent","touches","clientX","clientY","changedTouches","hasViewportRelativeCoordinates","Action","defaultCoordinates","parseTransform","transform","transformArray","scaleX","scaleY","defaultOptions","ignoreTransform","getClientRect","rect","getBoundingClientRect","getComputedStyle","transformOrigin","inverseTransform","parsedTransform","translateX","translateY","getTransformAgnosticClientRect","getScrollableAncestors","limit","scrollParents","findScrollableAncestors","scrollingElement","isSVGElement","SVGElement","computedStyle","isScrollable","overflowRegex","property","getFirstScrollableAncestor","firstScrollableAncestor","Direction","isDocumentScrollingElement","getScrollPosition","scrollingContainer","minScroll","dimensions","innerHeight","innerWidth","maxScroll","isTop","isLeft","isBottom","isRight","getScrollElementRect","scrollIntoViewIfNeeded","measure","scrollIntoView","block","inline","Listeners","listeners","removeAll","listener","_this$target","eventName","handler","_this$target2","hasExceededDistance","delta","measurement","dx","dy","sqrt","EventName","KeyboardCode","preventDefault","stopPropagation","defaultKeyboardCodes","Space","Enter","cancel","Esc","defaultKeyboardCoordinateGetter","currentCoordinates","Right","Left","Down","Up","autoScrollEnabled","referenceCoordinates","windowListeners","handleKeyDown","handleCancel","attach","handleStart","Resize","VisibilityChange","Keydown","activeNode","onStart","active","keyboardCodes","coordinateGetter","scrollBehavior","handleEnd","collisionRect","newCoordinates","coordinatesDelta","scrollDelta","scrollableAncestors","scrollContainer","scrollElementRect","clampedCoordinates","canScrollX","canScrollY","newScrollCoordinates","canScrollToNewCoordinates","behavior","scrollBy","handleMove","coordinates","onMove","onEnd","detach","onCancel","isDistanceConstraint","constraint","isDelayConstraint","activators","onActivation","nativeEvent","activator","activatorNode","AbstractPointerSensor","listenerTarget","_getEventCoordinates","getEventListenerTarget","EventTarget","activated","initialCoordinates","timeoutId","documentListeners","handleKeydown","removeTextSelection","activationConstraint","move","passive","DragStart","ContextMenu","clearTimeout","Click","capture","SelectionChange","_getEventCoordinates2","tolerance","distance","cancelable","_this$document$getSel","getSelection","removeAllRanges","super","isPrimary","button","events$1","MouseButton","RightClick","events$2","AutoScrollActivator","TraversalOrder","noop","teardown","Backward","Forward","MeasuringStrategy","MeasuringFrequency","WhileDragging","Optimized","Status","contrastColor","rgb","useStyles$R","rowStyles","flexWrap","Row","useStyles$Q","tooltip","breakpoints","md","center","zIndex","backgroundColor","boxShadow","tooltipBody","maxWidth","fontWeight","fontStyle","background","padding","lineHeight","defaultSelectors","useFocusTrap","selectors","focusRef","focusableEls","setEls","els","querySelectorAll","handleFocus","focusableElements","firstElement","lastElement","shiftKey","activeElement","focus","useStyles$P","modalOverlay","modal","marginBottom","closeBtn","cursor","marginTop","tooltipText","COPY$d","CLOSE_MODAL","Modal","closeModal","closeRef","tooltipId","handleClick","onClick","Tooltip","container","offsetWidth","showModal","setShowModal","mode","setMode","setAttribute","hasAttribute","openModal","matchMedia","modalEl","tooltipEl","containerEl","listSpacing","margin","mediaReset","useStyles$O","richTextContent","textDecoration","outline","listStyleType","listStyle","borderBottom","sanitizeOptions","ADD_TAGS","ADD_ATTR","RichText","elementId","Element","containerProps","tooltipNodes","setTooltipNodes","tooltipRef","sanitizeString","translate","useStyles$N","useSurveyIconStyles","withSvgIcon","SvgIcon","ariaLabelledBy","styles","hasTitle","iconTitleId","focusable","useStyles$M","COPY$c","createFieldId","createErrorId","useQuestionChoices","choices","sortableOptions","notaOption","otherOption","commentOption","useStyles$L","nextButton","minWidth","overflowWrap","transition","outlineOffset","answerColor","COPY$b","OK_LABEL","Button","slicedText","EmptyFn","easingFunctions","linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","animate","fromValue","toValue","onUpdate","onComplete","duration","easingType","startTime","elapsed","getValue","useStyles$K","visuallyHidden","VisuallyHidden$1","useStyles$J","paddingBox","paddingTop","paddingBottom","paddingLeft","paddingRight","QuestionSpacing","useOnFocusLeave","focusCallback","ele","contains","relatedTarget","useStyles$I","footerRow","hasFooterPadding","containerStyles","errorRow","formReset","headerRow","COPY$a","QUESTION_TITLE","QuestionFieldLayoutTemplate","footer","clickShield","onSubmit","onLeave","containerRef","useRef","errorRef","lastShownError","setLastShownError","isAnimating","useLayoutEffect","initialHeight","offsetHeight","fieldsetRef","errorRowId","questionTitleId","createLegendId","tabIndex","useStyles$H","containerVertical","containerHorizontal","flexDirection","columnHorizontal","columnHorizontalAutoAdjust","xs","lg","sm","xxs","answerLayoutCell","gridCellMargin","flex","wordBreak","otherLayoutCell","otherCellMargin","QuestionAnswerLayoutTemplate","columns","noneOfTheAbove","adjustToContent","columnGroups","totalChildren","totalColumns","childrenArray","childrenArr","maxCellsPerCol","fullColumnsCount","sliceChildren","childrenPerColumn","calculateMaxNumOfChildrenPerColumn","columnClassNames","col","columnIndex","cell","cellIndex","WarningIcon$1","WarningIcon","clipRule","fillRule","stroke","useStyles$G","icon","alignSelf","flexShrink","validationMessage","isDark","gap","ValidationMessage","Wrapper","useStyles$F","breakpointMedium","breakpointXsMin","fontWeightOptions","getFontWeights","inputArea","cols","textSizeAdjust","primaryAccentColor","borderColor","bgColor","opacity","TextArea$1","forwardRef","TextArea","disabled","readOnly","forwardedRef","spellCheck","useStyles$E","inputField","autoHeight","TextInput$1","TextInput","onChange","handleChange","useStyles$D","commentLabelText","commentLabel","CommentChoice","lineCount","charCount","multipleTextLines","htmlFor","rows","textReset","useStyles$C","questionTitleFormatting","questionTitle","questionTitleFontSize","addonContainer","useDefaultFrontSize","isAccessible","whiteSpace","wordWrap","requiredAsterisk","RespondentQuestionTitle","addon","numbered","useContext","defaultOKConfig","QuestionField","titleProps","okButton","showButton","okButtonProps","errorId","errorIdProp","useInputStyles","isChecked","defaultChecked","isDefaultChecked","isDisabled","isAriaDisabled","isReadOnly","isAriaReadOnly","setIsChecked","styleProps","inputProps","radioGroupContext","useRadioGroup","useControlledState","controlled","defaultProp","isControlled","valueState","setValue","newValue","setRef","useForkRef","refA","refB","refValue","RadioGroup","nameProp","valueProp","divProps","setValueState","useStyles$B","inputContainer","controlIcon","BaseInput$1","BaseInput","checkedProp","disabledProp","ariaDisabledProp","readOnlyProp","ariaReadOnlyProp","setChecked","defaultPrevented","newChecked","RadioIcon$1","RadioIcon","rx","ry","useStyles$A","radioInput","RadioInput$1","RadioInput","marginTopHelper$1","useStyles$z","controlLabel","borderStyle","light","inputSize","marginRight","Radio$1","Radio","radioGroup","useStyles$y","breakpointSmMax","rowRadio","radioWidth","BestWorstRow","rowId","columnIds","onKeyDown","bestColId","worstColId","bestRadioId","worstRadioId","labelId","radioEvents","useStyles$x","rowList","headerColumn","labelColumn","labelWidth","BestWorst","_dis","_ro","fields","responses","columnChoices","questionFieldProps","setSelectedChoices","bestAnswerColumn","worstAnswerColumn","rowFields","getRadioSelection","unCheckOption","radioId","newChoices","rowValue","handleKeyboard","isSelected","field","CheckboxIcon$1","CheckboxIcon","SelectIcon$1","SelectIcon","points","strokeLinejoin","strokeWidth","CaretDownIcon","CaretDown","CaretDownOutlineIcon","CaretDownOutline","CaretUpOutline","CaretLeftOutlineIcon","CaretLeftOutline","CaretRightOutlineIcon","CaretRightOutline","DragHandleIcon$1","DragHandleIcon","CalendarIcon","Calendar","useStyles$w","checkboxInput","checkBgColor","CheckboxInput$1","CheckboxInput","marginTopHelper","useStyles$v","checkboxContainer","Checkbox$3","Checkbox$2","useStyles$u","checkbox","labelContainer","textInput","checkHover","CheckboxTextfield","inputValue","checkboxProps","handleValueChange","inputRef","TEXT_INPUT_MAX_CHARS","useStyles$t","commentChoiceContainer","Checkbox$1","Checkbox","_req","columnLayout","choiceNoneOfTheAbove","choiceOther","choiceComment","newState","handleDefault","choice","getDefaultValueById","CommentBox$1","CommentBox","defaultResponses","fieldProps","titleId","useSSRSafeLayoutEffect","useStyles$s","selectContainerStyles","selectStyles","mozAppearance","webkitAppearance","appearance","selectIconStyles","disabledStyles","NativeSelect","iconClasses","iconProps","useStyles$r","selectOption","SelectAnswerOption","useStyles$q","inputGroup","rtl","buttonIcon","isOpen","ComboBoxInputGroup","open","close","ariaActiveDescendant","ariaAutocomplete","ariaControls","ariaLabel","useImperativeHandle","useStyles$p","listBox","overflowY","overflowX","numItemsVisible","containerHeight","itemHeight","focusNext","focusedIndex","visibleItemCount","focusItem","lastIndex","externalFocusedIndex","setFocusedIndex","itemsRef","ulRef","itemRect","ulRect","dataset","interactiveProps","HTMLUListElement","HTMLLIElement","useStyles$o","listBoxItem","ListBoxItem","useStyles$n","listBoxContainer","ARIA_ACTIVEDESCENDANT","VirtualizedListBox","listRef","listElement","removeAttribute","useStyles$m","comboBox","ComboBox","filterOnChange","outsideValue","optionAlign","comboBoxRef","listBoxRef","setIsOpen","currentOptions","setCurrentOptions","filterActive","setFilterActive","valueOnOpen","setValueOnOpen","firstRender","closeListBox","openListBox","option","matchingOption","activeDescendant","altKey","textContent","clip","clipPath","useStyles$l","srOnly","VisuallyHidden","Tag","useCalendarStyles","calendarPickerWrapper","calendarControls","comboboxWrapper","flexGrow","monthWrapper","gridTemplateColumns","gridGap","useMonthStyles","weekdayLabel","weekGrid","useDayStyles","dayDefault","daySelected","daySelectedFirstOrLast","dayDisabled","COPY$9","DAY_OF_MONTH","Day","dayRef","isSelectedStartOrEnd","isWithinHoverRange","disabledDate","onMouseEnter","Ne","dayInCalendar","COPY$8","DAY_OF_WEEK_LEGEND_SHORT","DAY_OF_WEEK_LEGEND_FULL","Month","dayProps","dayOfTheWeek","emptyDayKey","COPY$7","PREVIOUS_MONTH","NEXT_MONTH","MONTH_SELECT","YEAR_SELECT","MONTHS","startingYear","yearOptions","comboBoxSeedId","CalendarPicker","onDaySelect","onDateChange","initialSelectedDate","startingDayOfWeek","focusTrapRef","comboboxId","selectId","currentMonth","monthNames","months","monthOptions","newDate","getPreviousMonth","prevMonthLastDay","monthNamesIndex","monthIndex","findIndex","getNextMonth","nextMonthLastDay","useStyles$k","visibility","calendarVisibility","DisclosureContainer","onClose","disclosureRef","clickedOutside","comboBoxOptionClicked","US_DATE_FORMAT","stringToDate","dateString","badValues","isValid","validDateStringCheck","padStart","useStyles$j","dateInputWrapper","dateInput","maxHeight","calendarButton","calendarWrapper","calendarPosition","COPY$6","DATE_LABEL","DATE_BUTTON_LABEL","DateInput","dateFormat","ariaDescribedBy","setCalendarVisibility","dateInputID","calendarButtonRef","inputBound","disclosureBound","lastFocus","handleDisclosureClose","placeholder","segments","toISOString","toDateString","useStyles$i","separator","COPY$5","TIME_LABEL","HOUR_LABEL","MINUTES_LABEL","DAYTIME_LABEL","TimeInput","timeLabelID","hourLabelID","hourInputID","minuteLabelID","minuteInputID","periodLabelID","periodSelectID","onBlur","useStyles$h","inlineErrorContainer","COPY$4","ERROR_PROVIDE_DATE_INTL_FORMAT","ERROR_PROVIDE_DATE_US_FORMAT","ERROR_ENTER_HOURS","ERROR_ENTER_MINUTES","ERROR_SELECT_PERIOD","DateTime$1","DateTime","showDate","showTime","inlineErrors","responseValues","setResponseValues","getDateValueById","getTimeValueById","newResponse","handleDateChange","handleTimeChange","useStyles$g","defaultFontSize","highlightColor","otherStyles","hiddenInput","commentChoice","Dropdown$1","Dropdown","_required","_readOnly","responseValue","setResponseValue","defaultChoice","otherText","setOtherText","handleTextChange","choiceData","isOtherAnswerSelected","autoFocus","useStyles$f","imageChoice","controlImage","transitionDuration","optionLabel","imageContainer","objectFit","useStyles$e","imageInput","activeColor","ImageInput$1","ImageInput","ImageChoiceOption","ImageChoice$2","alt","src","imageSrc","imageId","ariaDescribeId","imageInputEvents","isDefaultPrevented","checkVal","useStyles$d","isFull","isThird","isHalf","cols3","cols2","cols1","imageChoiceContainer","xl","noneOfTheAboveContainer","ImageChoice$1","ImageChoice","multiple","imageChoiceType","groupName","image","altText","useStyles$c","imageStyles","Image","useStyles$b","presentationalTitleStyles","buttonStyles","ImagePresentational$1","ImagePresentational","richTextId","buttonProps","useStyles$a","RadioTextfield","refs","radioProps","radioRef","radio","textInputRef","handleInputChange","handleFocusChange","onFocus","useStyles$9","MultipleChoice","radioGroupProps","useStyles$8","MultipleTextbox","response","useStyles$7","npsContainer","npsLabel","npsRatingButtonList","npsRatingButton","borderLeft","borderRight","minLabel","maxLabel","useStyles$6","focusBackgroundColor","correctAnswerHighlightColor","primaryBackgroundColor","NpsRatingButton","component","COPY$3","NPS_QUESTION_TITLE","Nps","ratingChanged","clickedAnswerValue","scaleId","minFullLabel","maxFullLabel","minLabelText","maxLabelText","instructionsId","accessibleHeading","srOnlyClass","accessibleTitle","useStyles$5","listItemBackground","listItemBorderActive","flexStart","controlsFontSize","labelOffset","controlsPadding","rankItem","userSelect","ghost","outlineWidth","outlineStyle","outlineColor","orderIndex","ranksVisible","borderWidth","dragHandle","touchAction","controls","RankingRow","dragListeners","dragRef","contentContainer","dragHandleContainer","controlsContainer","indexLabel","orderButton","applicableControl","RANK_NA","ARIA_RANK_NA","itemDisabled","ARIA_RANK_MOVE_UP","ARIA_RANK_MOVE_DOWN","shouldHandleEvent","cur","noDnd","parentElement","PointerSensor","listItem","dragOverlay","ARIA_RANK_MOVED_UP","ARIA_RANK_MOVED_DOWN","ARIA_RANK_AT_TOP","ARIA_RANK_AT_BOTTOM","SingleTextbox$1","SingleTextbox","_f","textPresentationalStyles","TextPresentational$1","TextPresentational","smFont","grey","themeAugmentation","ultralight","regular","bold","defaultColor","correctColor","wrongColor","applySurveyThemeAugmentation","questionHighlightColor","isNps","titleColor","getQuestionHighlightColor","secondaryAccentColor","prefix","boxSizing","MIN_SAFE_INTEGER","SurveyGlobalStyles","SurveyStylesProvider","generateJssId","generateId","rule","srcSheet","sheet","classNamePrefix","SurveyThemeWrapper","declareVisualization","questionTypes","capabilities","providerAccessContext","UnsupportedVisualization","COPY$2","componentContainer","textContainer","textInputContainer","QuizResultComment","optionText","textInputValue","textInputSize","textInputParagraphLines","useStyles$4","COPY$1","CORRECT","INCORRECT","SrText","icons","correct","QuizCorrectIcon","isAriaHidden","wrong","QuizWrongIcon","useStyles$3","containerBase","getIconContainerBg","highlight","iconName","getIconContainerBorderColor","getIconContainerBackground","radioContainer","iconContainer","iconContainerBackground","InputIcon","ariaLabelledby","isCorrect","noScreenReaderText","Icon","useStyles$2","defaultFrontSize","QuizResultChoices","hasTextInput","uniqId","radioButtonId","textInputId","inputId","iconLabel","imageStyle","captionStyle","QuizResultImageChoice","caption","correctMessage","selectedMessage","isManyAnswers","imageChoiceId","captionId","selectedId","highlightedId","_g","_h","_j","scoreContainer","feedbackContainer","skippedBadge","SCORE","SKIPPED","QuizResultScore","score","feedback","skipped","getCorrectnessIndicatorIcon","responded","answerOptionPoints","getIconAndHighlight","idToSearch","highlightCorrectAnswers","pickFeedback","userScore","totalScore","partial","incorrect","getUserScore","quizAnswers","isNotUndefined","isPureQuizAnswer","filterQuizAnswers","idsToFilter","isPureQuizImageAnswer","CheckBox$1","CheckBox","numberingEnabled","answerLayoutColumns","totalPoints","regularAnswers","isComment","NoneOfTheAboveOption","OtherOption","textAnswer","MultipleChoice$1","answerOption","noneOfTheAboveOption","filterOtherFromQuizImageAnswer","UnsupportedQuestionTypeError","SingleQuestionController$1","SingleQuestionController","displayOptions","namedSlots","responseSet","useUpstreamConfig","useVisualizationList","access","useProviderAccessContext","upstreamActions","renderProps","settings","visualizationOptions","augmentedExternalQuestion","useExternalQuestionAugmentation","definition","ChosenVisualization","questionTypeId","VisualizationComponent","qd","qts","VisualizationComponentWrapper","UnsupportedVisualizationWrapper","createVisualization","getAnswerLayoutColumns","answerLayout","quizAnswersToImageAnswers","ans","maybeAnswer","matchingImageAnswer","ansImg","ProviderHelper","visualizationList","ctx","providerValue","fs","ProvidersWrapper","providerFactory","MultipleChoiceVisualization","survey","CheckBoxVisualization","ImageChoiceVisualization","quizResultsWithImage","getQuizResultsWithImage","DropdownVisualization","QuizResultsCapabilityProvider","trimAllValues","trimOtherValues","equals","objA","objB","equalsIgnoreOrder","uniqueValues","Set","useShowOkButton","dirty","showOkButton","setShowOkButton","useFieldIsDirty","fieldDirty","setFieldIsDirty","useWithValidatorRegistration","registerValidator","unregisterValidator","questionTypeSpecificValidation","validationFunction","forceValidation","AnswerDropdownVisualization","RespondentDropdownVisualization","upstreamErrors","upstreamAnswer","isClassic","defaultAnswer","isDirty","setAnswer","asteriskEnabled","questionOkButton","okLabel","onLeaveQuestion","trimmedValues","AnswerCommentBoxVisualization","RespondentCommentBoxVisualization","RespondentSingleTextboxVisualization","RespondentMultipleTextboxVisualization","RespondentMultipleChoiceVisualization","RespondentCheckboxVisualization","RespondentRankingVisualization","RespondentDateTimeVisualization","trimDateTimeValues","RespondentPresentationVisualization","imageProps","presentationProps","RespondentImageChoiceVisualization","RespondentNpsVisualization","RespondentMatrixVisualization","RespondentSurveyCapabilityProvider"],"sourceRoot":""}