Variables
Const A
A: string & StyledComponentBase<"a", DefaultTheme, {}, never> & {} = styled.a`cursor: pointer;`
Const Active
Active: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, { animate: object; exit: object; initial: object }, "animate" | "initial" | "exit"> & {} = styled(motion.div).attrs({initial: { opacity: 0 },animate: { opacity: 1 },exit: { opacity: 0 },})`margin: ${(p) => p.theme.toggleAssessment.buttonMargin}px;height: 26px;width: ${(p) => p.theme.toggleAssessment.buttonWidth}%;border-radius: ${(p) => p.theme.toggleAssessment.activeButtonBorderRadius}px;background: linear-gradient(180deg,${(p) => p.theme.toggleAssessment.activeButtonBackgroundColor1} 10%,${(p) => p.theme.toggleAssessment.activeButtonBackgroundColor2} 90%);color: ${(p) => p.theme.toggleAssessment.activeButtonTextColor};float: left;`
Const Age
Age
: string & StyledComponentBase<"article", DefaultTheme, TileProps, never> & {} = styled.article<TileProps>`@media screen and (max-width: 355px) {font-size: clamp(${(p) => 2 - p.heat / 2 + 0.4}rem,${(p) => 2 - p.heat / 2 + 0.5}vw,${(p) => 3 - p.heat / 2}rem);}@media screen and (min-width: 356px) {font-size: clamp(${(p) => 3 - p.heat / 2}rem,${(p) => 3 - p.heat / 2 + 0.5}vw,${(p) => 4 - p.heat / 2}rem);}font-weight: 300;`
Const AgeOptions
AgeOptions: number[] = [50, 60, 70, 80, 90, 100, 110]
Const AgeOptions
AgeOptions: number[] = [50, 60, 70, 80, 90, 100, 110]
Const AgeOptions
AgeOptions: number[] = [80, 90, 100, 110]
Const AlgoName
AlgoName: string & StyledComponentBase<"h2", DefaultTheme, {}, never> & {} = styled.h2`margin: 0;padding: ${(p) => p.theme.algoname.padding}px 0;font-family: ${(p) => p.theme.algoname.fontFamily};font-size: ${(p) => p.theme.algoname.fontSize}px;line-height: ${(p) => p.theme.algoname.lineHeight}px;`
Const AnswerText
AnswerText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div``
Const Answers
Answers: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`color: ${(p) => p.theme.summary.color};`
Const Arc
Arc: string & StyledComponentBase<"path", DefaultTheme, {}, never> & {} = styled.path`fill: none;stroke: url(#rag-gradient);stroke-linecap: round;`
Const BackDropMotion
BackDropMotion: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never> & {} = styled(motion.div)`background-color: rgba(0, 0, 0, 0.8);position: fixed;top: 0;height: 100%;right: 0;width: 100%;z-index: 100;`
Const Bar
Bar: string & StyledComponentBase<"polygon", DefaultTheme, {}, never> & {} = styled.polygon`width: 100%;fill: url(#rag-gradient);`
Const Bar
Bar: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`height: 8px;width: 100%;border-radius: 4px;margin-bottom: 8px;background: linear-gradient(270deg,${colors.green100} 0%,${colors.greenyellow} 25%,${colors.orange200} 50%,${colors.redgreen} 75%,${colors.red300} 100%);`
Const Body
Body: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding: ${(p) => p.theme.modal.padding}px;`
Const BottomBar
BottomBar: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`@media screen and (max-width: 799px) {margin-top: ${(p) => p.theme.toggleAssessment.marginTop}px;display: block;box-sizing: border-box;height: 42px;border: 1px solid ${(p) => p.theme.toggleAssessment.borderColor};border-radius: ${(p) => p.theme.toggleAssessment.borderRadius}px;letter-spacing: 0;line-height: ${(p) => p.theme.toggleAssessment.lineHeight}px;text-align: center;}`
Const BottomBar
BottomBar: string & StyledComponentBase<"footer", DefaultTheme, {}, never> & {} = styled.footer`position: fixed;top: calc(100% - ${bottomBarHeight});left: 0;width: 100%;height: ${bottomBarHeight};background-color: #fff;box-shadow: 0 -1px 5px ${colors.grey200};`
Const BottomBar
BottomBar: string & StyledComponentBase<"footer", DefaultTheme, {}, never> & {} = styled.footer`position: fixed;top: calc(100% - ${bottomBarHeight});left: 0;width: 100%;height: ${bottomBarHeight};background-color: #fff;box-shadow: 0 -1px 5px ${colors.grey200};`
Const Button
Button: string & StyledComponentBase<"button", DefaultTheme, { type: "button" }, "type"> & {} = styled(IconButton)`width: 16px;height: 16px;`
Const Button
Button: string & StyledComponentBase<"button", DefaultTheme, {}, never> & {} = styled.button`font-family: ${(props) => props.theme.button.fontFamily};transition: all 150ms;background-color: ${(props) => props.theme.button.color};border: none;border-radius: ${(props) => props.theme.button.borderRadius}px;color: white;padding: ${(props) => props.theme.button.padding};text-align: center;text-decoration: none;display: inline-block;font-size: ${(props) => props.theme.button.fontSize}px;cursor: pointer;&:hover {background: ${(props) => props.theme.button.hoverColor};}&:disabled {cursor: not-allowed;background: ${(props) => props.theme.button.disabled.color};&:hover {background: ${(props) => props.theme.button.disabled.hoverColor};}}`
Const Button
Button: string & StyledComponentBase<"button", DefaultTheme, { type: "button" }, "type"> & {} = styled.button.attrs({ type: 'button' })``
Const Button
Button: string & StyledComponentBase<"button", DefaultTheme, { type: "button" }, "type"> & {} = styled(IconButton)`&:hover {${Icon} {fill: ${(p) => p.theme.editAnswerIcon.hoverColor};}}&:focus {${Icon} {fill: ${(p) => p.theme.editAnswerIcon.focusColor};}}`
Const Button
Button: string & StyledComponentBase<"button", DefaultTheme, { type: "button" }, "type"> & {} = withDefaultTheme(styled(IconButton)`&:focus {${Icon} {stroke: ${(p) => p.theme.infoicon.focusColor};}}&:hover {${Icon} {stroke: ${(p) => p.theme.infoicon.hoverColor};}}`)
Const Button
Button: string & StyledComponentBase<"button", DefaultTheme, {}, never> & {} = styled(SimpleButton)`width: 100%;`
Const ButtonContainer
ButtonContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`margin: 0 10px;${Button}:not(:last-child) {margin-right: 10px;}`
Const ButtonGroup
ButtonGroup: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;`
Const Buttons
Buttons: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;flex-direction: column;`
Const CarouselNav
CarouselNav: string & StyledComponentBase<"nav", DefaultTheme, {}, never> & {} = styled.nav`display: flex;flex-direction: column;align-items: center;padding: 5px;`
Const Centered
Centered
: string & StyledComponentBase<"div", DefaultTheme, PanelBodyTextProps, never> & {} = styled(PanelBodyText)`text-align: center;@media screen and (max-width: 355px) {font-size: 0.9rem;}`
Const Centered
Centered
: string & StyledComponentBase<"div", DefaultTheme, PanelBodyTextProps, never> & {} = styled(PanelBodyText)`text-align: center;`
Const ChatContainer
Chat
Container: string & StyledComponentBase<"div", DefaultTheme, ChatContainerProps, never> & {} = styled.div<ChatContainerProps>`box-sizing: border-box;padding: 0 10px;min-height: ${(props) => props.minHeight}px;`
Const ChatContent
ChatContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`max-width: 440px;text-align: left;margin: 0px auto;`
Const ChatForm
Chat
Form: ForwardRefExoticComponent<ChatFormProps & RefAttributes<HTMLFormElement>> = React.forwardRef<HTMLFormElement, ChatFormProps>(function ChatForm({ disableSubmit, ...props }, ref) {return (<Form ref={ref} {...props}><HiddenSubmit disabled={disableSubmit} />{props.children}</Form>);})
Const ChatGroupContainer
ChatGroupContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`margin-bottom: 34px;text-align: center;width: 100%;font-size: 18px;line-height: 18px;`
Const ChatPreviousAnswer
Chat
PreviousAnswer: ForwardRefExoticComponent<ChatPreviousAnswerProps & RefAttributes<HTMLButtonElement>> = React.forwardRef<HTMLButtonElement,ChatPreviousAnswerProps>(function ChatPreviousAnswer({ answer, jumpBack }, ref) {if (!answer.controlChecked || answer.controlType === 'Dropdown') return null;const text = `${answer.controlValue ? answer.controlValue + ' ' : ''}${answer.displayText}`;return (<PreviousAnswer ref={ref} onClick={jumpBack}><PreviousAnswerText dangerouslySetInnerHTML={{ __html: text }} /></PreviousAnswer>);})
Const ChatPreviousAnswers
Chat
PreviousAnswers: ForwardRefExoticComponent<ChatPreviousAnswersProps & RefAttributes<HTMLDivElement>> = React.forwardRef<HTMLDivElement,ChatPreviousAnswersProps>(function ChatPreviousAnswers({ jumpBack, children, ...props }, ref) {return (<motion.div ref={ref} {...props}><PreviousAnswersContent><div>{children}</div><EditAnswerButton onClick={jumpBack} /></PreviousAnswersContent></motion.div>);})
Const ChatQuestion
Chat
Question: ForwardRefExoticComponent<ChatQuestionProps & RefAttributes<HTMLDivElement>> = React.forwardRef<HTMLDivElement, ChatQuestionProps>(function ChatQuestion({ displayText, error, current, children, ...props },ref) {return (<QuestionWrapper current={current} ref={ref} {...props}><QuestionContent><QuestionText dangerouslySetInnerHTML={{ __html: displayText }} />{children}</QuestionContent>{error && <ErrorText>{error.text}</ErrorText>}</QuestionWrapper>);})
Const ChatTextField
ChatTextField: string & StyledComponentBase<"input", DefaultTheme, {}, never> & {} = styled.input`width: 100%;transition: all 0.4s ease-out;vertical-align: baseline;color: rgb(87, 87, 87);margin: 0px;font: inherit inherit inherit inherit inherit inherit inherit;outline: none;border-width: initial;border-style: none;border-color: initial;border-image: initial;background: transparent;padding: 15px 18px;flex: 1 1 0%;font-size: 18px;`
Const CheckboxContainer
CheckboxContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: inline-block;vertical-align: middle;`
Const ChoiceContainer
ChoiceContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;align-items: center;border-top: 1px solid rgb(200, 205, 215);&:last-child {border-bottom: 1px solid rgb(200, 205, 215);margin-bottom: 24px;}`
Const ComboBoxList
ComboBoxList: string & StyledComponentBase<"ul", DefaultTheme, { role: "listbox" }, "role"> & {} = styled.ul.attrs({ role: 'listbox' })`position: absolute;top: 55px; // Height of ChatTextWrapper + 1pxleft: 0;width: 100%;max-height: 300px;list-style: none;border: 1px solid rgb(222, 222, 222);border-radius: 3px;margin: 0;padding: 0;z-index: 100;overflow-y: auto;background-color: rgb(255, 255, 255);`
Const ComboBoxOption
ComboBoxOption: string & StyledComponentBase<"li", DefaultTheme, { role: "option" }, "role"> & {} = styled.li.attrs({ role: 'option' })`margin: 0;padding: 8px 16px;line-height: 24px;font-size: 16px;cursor: pointer;&.focused {background-color: #f1f1fd;}`
Const ComboBoxPlaceholderOption
ComboBoxPlaceholderOption: string & StyledComponentBase<"li", DefaultTheme, { role: "option" }, "role"> & {} = styled(ComboBoxOption)`color: rgb(154, 154, 154);font-style: italic;`
Const ComboBoxWrapper
ComboBoxWrapper: string & StyledComponentBase<"div", DefaultTheme, { role: "combobox" }, "role"> & {} = styled.div.attrs({ role: 'combobox' })`position: relative;width: 100%;`
Const ComparisonContent
ComparisonContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding: 10px;`
Const ComparisonPanel
ComparisonPanel: string & StyledComponentBase<FunctionComponent<any>, DefaultTheme, {}, never> & {} = styled(PanelBox)`@media screen and (min-width: 800px) {width: 49.2%;float: left;}`
Const ComparisonReportTitle
ComparisonReportTitle: string & StyledComponentBase<"h2", DefaultTheme, {}, never> & {} = styled.h2`color: ${(p) => p.theme.comparisonreporttitle.color};font-family: ${(p) => p.theme.comparisonreporttitle.fontFamily};font-weight: ${(p) => p.theme.comparisonreporttitle.fontWeight};font-size: ${(p) => p.theme.comparisonreporttitle.fontSize}px;line-height: ${(p) => p.theme.comparisonreporttitle.lineHeight}px;@media screen and (min-width: 800px) {padding-left: ${(p) => p.theme.comparisonreporttitle.paddingLeft}px;}`
Const ConclusionContainer
ConclusionContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;justify-content: space-between;`
Const ConclusionContent
ConclusionContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = withDefaultTheme(styled.div`display: flex;justify-content: space-between;width: 100%;font-size: ${(p) => p.theme.healthReportConclusion.fontSize}px;line-height: ${(p) => p.theme.healthReportConclusion.lineHeight}px;padding: ${(p) => p.theme.healthReportConclusion.verticalPadding}px 0;`)
Const ConclusionLabel
ConclusionLabel: string & StyledComponentBase<"label", DefaultTheme, {}, never> & {} = styled(Label)`padding: 0;box-shadow: none;`
Const ConclusionsTitle
ConclusionsTitle: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`background-color: ${(p) => p.theme.colors.brand100};height: 80px;padding-top: 10px;line-height: 2;margin-top: 1px;@media screen and (min-width: 800px) {border-radius: 8px 8px 0 0;}`
Const Container
Container: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`position: relative;display: inline-block;width: ${(p) => p.theme.infoicon.size}px;height: ${(p) => p.theme.infoicon.size}px;flex-basis: ${(p) => p.theme.infoicon.size}px;flex-grow: 0;flex-shrink: 0;align-self: flex-start;vertical-align: bottom;margin-left: ${(p) => p.theme.infoicon.padding / 2}px;&:focus {box-shadow: 0 0 2px 0.1px ${(p) => p.theme.infoicon.focusColor};}${Button} {box-sizing: content-box;border: 0;background: transparent;outline: none;position: absolute;cursor: pointer;padding: ${(p) => p.theme.infoicon.padding}px${(p) => p.theme.infoicon.padding / 2}px;top: -${(p) => p.theme.infoicon.padding}px;left: -${(p) => p.theme.infoicon.padding / 2}px;width: ${(p) => p.theme.infoicon.size}px;height: ${(p) => p.theme.infoicon.size}px;${Icon} {transition: all 150ms;fill: none;stroke: ${(p) => p.theme.infoicon.color};stroke-width: 2px;stroke-linecap: round;stroke-linejoin: round;}&:focus {${Icon} {stroke: ${(p) => p.theme.infoicon.hoverColor};}}}&:hover {${Button} {${Icon} {stroke: ${(p) => p.theme.infoicon.hoverColor};}}}`
Const Container
Container
: string & StyledComponentBase<"div", DefaultTheme, ContainerProps, never> & {} = styled.div<ContainerProps>`display: flex;justify-content: ${(props) => props.justifyContent || 'flex-start'};text-align: ${(p) => p.textAlign};`
Const Container
Container: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`margin: 5px 0;`
Const Container
Container: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`transition: all 300ms;`
Const Container
Container: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;flex-direction: column;${Buttons} {@media screen and (min-width: 450px) {flex-direction: row;}}${PrevButton} {margin-right: ${(p) => p.theme.spacing.padding}px;}${ButtonGroup} {margin-bottom: ${(p) => p.theme.spacing.padding}px;@media screen and (min-width: 450px) {margin-bottom: 0;}}`
Const Container
Container: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`white-space: normal;cursor: auto;width: 100%;position: relative;display: inline-block;vertical-align: middle;margin: 0 auto;text-align: left;`
Const Container
Container: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`font-family: ${(props) => props.theme.typography.fontFamily};`
Const Content
Content: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`margin-top: 30px;max-width: 1240px;width: 100%;display: table;box-sizing: border-box;`
Const Content
Content: string & StyledComponentBase<"main", DefaultTheme, {}, never> & {} = styled.main`margin-bottom: ${bottomBarHeight};overflow: hidden;`
Const Content
Content: string & StyledComponentBase<"main", DefaultTheme, {}, never> & {} = styled.main`margin-bottom: ${bottomBarHeight};overflow: hidden;`
Const DisplayText
DisplayText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`font-family: ${(p) => p.theme.displayText.fontFamily};padding-left: ${(p) => p.theme.displayText.padding}px;font-size: ${(p) => p.theme.displayText.fontSize}px;line-height: ${(p) => p.theme.displayText.lineHeight}px;`
Const DisplayText
DisplayText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: inline-block;font-family: ${(p) => p.theme.question.fontFamily};font-size: ${(p) => p.theme.question.fontSize}px;line-height: ${(p) => p.theme.question.lineHeight}px;white-space: pre-wrap;.e24subtext {font-size: ${(p) => p.theme.question.fontSize * 0.8}px;line-height: ${(p) => p.theme.question.lineHeight * 0.6}px;font-style: italic;}`
Const DisplayText
DisplayText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`font-family: ${(p) => p.theme.tableheadercell.fontFamily};font-size: ${(p) => p.theme.tableheadercell.fontSize}px;line-height: ${(p) => p.theme.tableheadercell.lineHeight}px;display: inline-block;font-weight: normal;white-space: pre-wrap;.e24subtext {font-size: ${(p) => p.theme.tableheadercell.fontSize * 0.8}px;line-height: ${(p) => p.theme.tableheadercell.lineHeight * 0.6}px;font-style: italic;}`
Const DisplayText
DisplayText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`width: 100%;transition: all 0.4s ease-out;vertical-align: baseline;color: rgb(87, 87, 87);margin: 0px;font: inherit inherit inherit inherit inherit inherit inherit;outline: none;border-width: initial;border-style: none;border-color: initial;border-image: initial;background: transparent;padding: 10px 18px 0;flex: 1 1 0%;font-size: 14px;line-height: 22px;box-sizing: border-box;`
Const Div
Div: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`min-height: 160px;margin: 20px;`
Const Dot
Dot
: string & StyledComponentBase<"div", DefaultTheme, Props, never> & {} = styled.div<Props>`width: 9px;height: 9px;border-radius: 50%;background-color: black;opacity: 0.6;animation: ${animation} 1.2s ${(props) => props.delay}s infinite ease-out;`
Const DotsContainer
DotsContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`width: 40px;display: flex;justify-content: space-between;`
Const Empty
Empty: string & StyledComponentBase<"h4", DefaultTheme, {}, never> & {} = styled.h4`padding: 10px;margin: 0;`
Const EmptyAnswerText
EmptyAnswerText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div``
Const ErrorText
ErrorText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding: 0 ${(p) => p.theme.tableheadercell.padding}px ${(p) =>p.theme.tableheadercell.padding}px;font-family: ${(p) => p.theme.tableheadercell.fontFamily};/* font-size: ${(p) => p.theme.tableheadercell.errorFontSize}px; */font-size: ${(p) => p.theme.tableheadercell.fontSize * 0.8}px;line-height: ${(p) => p.theme.tableheadercell.lineHeight * 0.6}px;color: ${(p) => p.theme.tableheadercell.errorColor};text-align: left;`
Const ErrorText
ErrorText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`font-size: 12px;font-weight: normal;color: rgb(179, 0, 0);`
Const ErrorText
ErrorText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`/* padding: 0 ${(p) => p.theme.errortext.padding}px; */font-family: ${(p) => p.theme.errortext.fontFamily};font-size: ${(p) => p.theme.errortext.fontSize}px;color: ${(p) => p.theme.errortext.color};`
Const Expandable
Expandable: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`overflow: hidden;transition: height 0.3s;`
Const FadedAge
Faded
Age: string & StyledComponentBase<"article", DefaultTheme, TileProps, never> & {} = styled(Age)`opacity: 0.2;`
Const FlexBox
FlexBox: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;font-size: ${(p) => p.theme.typography.regular.size}px;font-weight: 600;margin-bottom: ${(p) => p.theme.spacing.padding}px;`
Const FlexBox
FlexBox: string & StyledComponentBase<"div", DefaultTheme, { mobileView?: undefined | false | true }, never> & {} = withDefaultTheme(styled.div<{ mobileView?: boolean }>`width: 100%;display: flex;flex-direction: row;justify-content: ${(p) => (p.mobileView ? 'flex-start' : 'flex-end')};align-items: center;font-size: ${(p) => p.theme.typography.regular.size}px;font-weight: 600;margin-bottom: ${(p) => p.theme.spacing.padding}px;`)
Const FlexButton
FlexButton: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`flex: 1;`
Const Form
Form: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLFormElement>>, DefaultTheme, {}, never> & {} = styled(motion.form)`padding: 0;margin: 0;border: 0;border-top: 0;display: flex;flex-direction: column;`
Const Form
Form: string & StyledComponentBase<"form", DefaultTheme, {}, never> & {} = styled.form``
Const Header
Header: ForwardRefExoticComponent<{} & RefAttributes<any>> = createSummaryChild(styled(motion.div)`padding: 10px;display: flex;align-items: flex-start;`)
Const Header
Header: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;align-items: center;padding: ${(p) => p.theme.modal.padding}px;background: ${(p) => p.theme.modal.header.background};color: ${(p) => p.theme.modal.header.color};border-top-left-radius: ${(p) => p.theme.modal.borderRadius}px;border-top-right-radius: ${(p) => p.theme.modal.borderRadius}px;`
Const Header
Header: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`line-height: 2;`
Const HealthReportExplanationBody
HealthReportExplanationBody: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = withDefaultTheme(styled.div`font-size: ${(p) => p.theme.healthReportExplanation.fontSize}px;line-height: ${(p) => p.theme.healthReportExplanation.lineHeight}px;`)
Const HealthReportTitle
HealthReportTitle: string & StyledComponentBase<"h2", DefaultTheme, {}, never> & {} = styled.h2`color: ${(p) => p.theme.healthreporttitle.color};font-family: ${(p) => p.theme.healthreporttitle.fontFamily};font-weight: ${(p) => p.theme.healthreporttitle.fontWeight};font-size: ${(p) => p.theme.healthreporttitle.fontSize}px;line-height: ${(p) => p.theme.healthreporttitle.lineHeight}px;margin-top: 0;`
Const HiddenInput
HiddenInput: string & StyledComponentBase<"input", DefaultTheme, {}, never> & {} = styled.input`// Hide checkbox visually but remain accessible to screen readers.// Source: https://polished.js.org/docs/#hidevisuallyborder: 0;clip: rect(0 0 0 0);clip-path: inset(50%);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;`
Const HiddenSubmit
HiddenSubmit: string & StyledComponentBase<"input", DefaultTheme, { tabIndex: -1; type: "submit" }, "type" | "tabIndex"> & {} = styled.input.attrs({type: 'submit',tabIndex: -1,})`position: absolute;left: -9999px;width: 1px;height: 1px;`
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg``
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg``
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg``
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg`fill: ${(p) => p.theme.infoicon.color};width: ${(p) => p.theme.infoicon.size}px;height: ${(p) => p.theme.infoicon.size}px;`
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg`fill: ${(p) => p.theme.editAnswerIcon.color};width: ${(p) => p.theme.editAnswerIcon.size}px;height: ${(p) => p.theme.editAnswerIcon.size}px;`
Const Icon
Icon: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled(DisplayText)`width: 10%;`
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = withDefaultTheme(styled.svg`fill: none;stroke: ${(p) => p.theme.infoicon.color};stroke-width: 2px;stroke-linecap: round;stroke-linejoin: round;cursor: pointer;width: 24px;`)
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg`fill: none;stroke: black;stroke-width: 2px;stroke-linecap: round;stroke-linejoin: round;cursor: pointer;width: 24px;`
Const Icon
Icon: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg`fill: none;stroke: ${(p) => p.theme.modal.header.closeIconColor};stroke-width: 2px;stroke-linecap: round;stroke-linejoin: round;cursor: pointer;width: 24px;`
Const IconButton
IconButton: string & StyledComponentBase<"button", DefaultTheme, { type: "button" }, "type"> & {} = styled.button.attrs({ type: 'button' })`background: transparent;border: 0;cursor: pointer;display: inline-flex;outline: none;align-items: center;user-select: none;vertical-align: middle;justify-content: center;text-decoration: none;background-color: transparent;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;flex: 0 0 auto;width: 48px;height: 48px;padding: 0;transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;`
Const IconContent
IconContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding-left: 10px;`
Const Inactive
Inactive: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, { animate: object; exit: object; initial: object }, "animate" | "initial" | "exit"> & {} = styled(motion.div).attrs({initial: { opacity: 0 },animate: { opacity: 1 },exit: { opacity: 0 },})`margin: ${(p) => p.theme.toggleAssessment.buttonMargin}px;height: 26px;width: ${(p) => p.theme.toggleAssessment.buttonWidth}%;color: ${(p) => p.theme.toggleAssessment.inactiveTextColor};float: left;`
Const InfoButton
InfoButton: string & StyledComponentBase<"button", DefaultTheme, { type: "button" }, "type"> & {} = styled(IconButton)`&:hover {${Icon} {fill: ${(p) => p.theme.infoicon.hoverColor};}}&:focus {${Icon} {fill: ${(p) => p.theme.infoicon.focusColor};}}`
Const InfoButtonContainer
InfoButtonContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`height: 100%;max-height: 60px;display: flex;align-items: center;`
Const InlineDropdown
Inline
Dropdown: string & StyledComponentBase<FunctionComponent<{ className?: undefined | string; onChange: (event: ChangeEvent<HTMLSelectElement>) => void; options: Option[]; value: string | number }>, DefaultTheme, {}, never> & {} = styled(Dropdown)`font: inherit;margin: 0 0.8rem;padding: 0 0.6rem;box-sizing: border-box;height: 40px;width: 100px;border: 1px solid ${colors.dropdownBorder};border-radius: 3px;background-color: ${colors.white};font-weight: 600;font-size: 1rem;text-indent: 12%;background-image: linear-gradient(45deg,transparent 50%,${colors.grey400} 50%),linear-gradient(135deg, ${colors.grey400} 50%, transparent 50%),linear-gradient(to right,${colors.dropdownArrowBackground},${colors.dropdownArrowBackground});background-position: calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px), 100% 0;background-size: 5px 5px, 5px 5px, 2.5em 2.5em;background-repeat: no-repeat;margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;`
Const Label
Label: string & StyledComponentBase<"label", DefaultTheme, {}, never> & {} = styled.label`position: absolute;top: 0;bottom: 0;left: 0;right: 0;cursor: pointer;`
Const Label
Label: string & StyledComponentBase<"label", DefaultTheme, {}, never> & {} = styled.label`box-sizing: border-box;background: transparent;align-items: center;user-select: none;vertical-align: middle;text-decoration: none;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;font-family: ${(p) => p.theme.chatAnswer.fontFamily};display: flex;min-height: 36px;position: relative;cursor: pointer;font-size: ${(p) => p.theme.chatAnswer.fontSize}px;width: 100%;line-height: 24px;white-space: pre-line;padding: 0;input:checked + & {background-color: ${(p) => p.theme.chatAnswer.checkedColor};}input:focus + & {box-shadow: 0 0 2px 0.1px ${(p) => p.theme.chatAnswer.focusColor};}&:disabled {opacity: 0.5;}`
Const Label
Label: string & StyledComponentBase<"label", DefaultTheme, {}, never> & {} = styled.label`display: flex;align-items: center;margin-bottom: 20px;`
Const Label
Label: string & StyledComponentBase<"label", DefaultTheme, {}, never> & {} = styled.label`display: flex;align-items: center;margin-bottom: 20px;`
Const ModalMotion
ModalMotion: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never> & {} = styled(motion.div)`box-sizing: border-box;background-color: #fff;border-radius: ${(p) => p.theme.modal.borderRadius}px;text-align: left;position: relative;max-width: 650px;margin: ${(p) => p.theme.modal.marginY}px auto;font-family: ${(p) => p.theme.modal.fontFamily};font-size: ${(p) => p.theme.modal.fontSize}px;line-height: ${(p) => p.theme.modal.lineHeight}px;`
Const ModalWindow
ModalWindow: ForwardRefExoticComponent<RefAttributes<HTMLDivElement>> = React.forwardRef<HTMLDivElement>(function ModalWindow({ children }, ref) {return (<ModalMotionref={ref}variants={{enter: {y: 0,opacity: 1,transition: {y: { type: 'spring', stiffness: 1000, damping: 15, delay: 0.1 },default: { duration: 0.3, delay: 0.1 },},},exit: {y: 50,opacity: 0,transition: { duration: 0.3 },},}}initial="exit"animate="enter"exit="exit">{children}</ModalMotion>);})
Const NameContent
NameContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`margin-bottom: 3px;`
Const NotAvailableContent
NotAvailableContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding: ${theme.spacing.padding}px;`
Const NumberTextContent
NumberTextContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;flex-direction: row;justify-content: flex-start;align-items: center;width: 50%;`
Const PanelBodyText
Panel
BodyText: string & StyledComponentBase<"div", DefaultTheme, PanelBodyTextProps, never> & {} = styled.div<PanelBodyTextProps>`margin: 0;display: block;color: ${(p) =>p.contrastText ? p.theme.colors.white : p.theme.panelbodytext.color};font-size: ${(p) => p.theme.panelbodytext.fontSize}px;font-family: ${(p) => p.theme.panelbodytext.fontFamily};line-height: ${(p) => p.theme.panelbodytext.lineHeight}px;font-weight: ${(p) => (p.bold ? 'bold' : 'normal')};${(p) =>p.bullet &&css`display: list-item;margin-left: 14px;`}${(p) => {const size = p.theme.panelbodytext.fontSize;return (p.bullet === 'warning' &&css`list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='${size}px' width='${size}px' viewBox='0 0 24 20' fill='none' stroke='%23ff6c6c' stroke-width='2'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='14'%3E%3C/line%3E%3Cline x1='12' y1='16.5' x2='12' y2='18'%3E%3C/line%3E%3C/svg%3E");`);}}`
Const PanelConclusionTitle
PanelConclusionTitle: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: inline;font-weight: normal;font-size: ${(p) => p.theme.panelconclusiontitle.fontSize}px;font-family: ${(p) => p.theme.panelconclusiontitle.fontFamily};line-height: ${(p) => p.theme.panelconclusiontitle.lineHeight}px;::after {content: ' ';}`
Const PanelContent
PanelContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`box-sizing: border-box;padding: ${(p) => p.theme.panelcontent.padding}px;@media screen and (min-width: 800px) {padding: ${(p) => p.theme.panelcontent.padding}px${(p) => p.theme.panelcontent.padding * 1.5}px;}`
Const PanelHeader
Panel
Header: string & StyledComponentBase<"div", DefaultTheme, PanelHeaderProps, never> & {} = styled.div<PanelHeaderProps>`box-sizing: border-box;display: flex;align-items: center;padding: ${(p) => p.theme.panelheader.padding}px;background-color: ${(p) => p.color || '#666'};@media screen and (min-width: 800px) {padding: ${(p) => p.theme.panelheader.padding}px${(p) => p.theme.panelheader.padding * 1.5}px;}`
Const PanelTitle
Panel
Title: string & StyledComponentBase<"div", DefaultTheme, PanelTitleProps, never> & {} = styled.div<PanelTitleProps>`color: ${(p) => p.color || 'white'};font-weight: ${(p) => p.theme.paneltitle.fontWeight};font-size: ${(p) => p.theme.paneltitle.fontSize}px;font-family: ${(p) => p.theme.paneltitle.fontFamily};line-height: ${(p) => p.theme.paneltitle.lineHeight}px;`
Const Pip
Pip
: string & StyledComponentBase<"div", DefaultTheme, Props, never> & {} = styled.div<Props>`display: inline-block;width: ${pipDiameter}px;height: ${pipDiameter}px;border-radius: ${pipDiameter / 2}px;background-color: #d2d2d2;box-shadow: inset 0 2px 2px #a4a4a4;margin: ${pipDiameter / 2}px;transition: all 0.3s;${(p) =>p.selected &&css`background-color: ${(props) => props.theme.colors.brand100};box-shadow: none;`}`
Const PrevButton
PrevButton: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled(FlexButton)``
Const PreviousAnswer
PreviousAnswer: string & StyledComponentBase<"button", DefaultTheme, { tabindex: string }, "tabindex"> & {} = styled.button.attrs({ tabindex: '0' })`background: transparent;outline: none;align-items: center;user-select: none;border-radius: 0;vertical-align: middle;justify-content: center;text-decoration: none;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;font-family: ${(props) => props.theme.chatpreviousanswer.fontFamily};display: block;min-height: 36px;align-self: flex-end;background-color: ${(props) => props.theme.chatpreviousanswer.color};color: white;position: relative;cursor: pointer;font-size: ${(props) => props.theme.chatpreviousanswer.fontSize}px;width: 100%;margin-bottom: 2px;line-height: 24px;font-weight: 200;min-width: 100px;text-align: center;white-space: pre-line;border-width: initial;border-style: none;border-color: initial;border-image: initial;padding: ${(props) => props.theme.chatpreviousanswer.padding}px;&:first-child {border-top-left-radius: ${(props) =>props.theme.chatpreviousanswer.borderRadius}px;border-top-right-radius: ${(props) =>props.theme.chatpreviousanswer.borderRadius}px;}&:last-child {border-bottom-left-radius: ${(props) =>props.theme.chatpreviousanswer.borderRadius}px;border-bottom-right-radius: ${(props) =>props.theme.chatpreviousanswer.borderRadius}px;}&:focus {box-shadow: 0 0 5px 0${(props) => props.theme.chatpreviousanswer.focusColor};}&:hover {background-color: ${(props) => props.theme.chatpreviousanswer.hoverColor};}`
Const PreviousAnswerText
PreviousAnswerText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`text-align: left;display: inline-block;white-space: pre-line;`
Const PreviousAnswersContent
PreviousAnswersContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;justify-content: flex-end;align-items: center;`
Const PrimaryChoice
Primary
Choice: ForwardRefExoticComponent<PrimaryChoiceProps & RefAttributes<HTMLLabelElement>> = React.forwardRef<HTMLLabelElement, PrimaryChoiceProps>(function PrimaryChoice({ displayText, input, infoIcon, ...props }, ref) {return (<Label ref={ref} {...props}>{input ?? null}<Text dangerouslySetInnerHTML={{ __html: displayText }} />{infoIcon ?? null}</Label>);})
Const Question
Question: ForwardRefExoticComponent<{} & RefAttributes<any>> = createSummaryChild(styled(motion.div)`padding: 10px;border-bottom: 1px solid #f1f1f1;cursor: pointer;`)
Const QuestionContainer
QuestionContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;padding: ${(p) => p.theme.question.padding}px 0;`
Const QuestionContent
QuestionContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`white-space: pre-line;display: flex;align-items: center;box-sizing: border-box;color: inherit;font-size: ${(p) => p.theme.chatQuestion.fontSize}px;line-height: ${(p) => p.theme.chatQuestion.lineHeight}px;font-weight: ${(p) => p.theme.chatQuestion.fontWeight};animation: 0s ease 0s 1 normal none running none;.e24subtext {font-size: ${(p) => p.theme.chatQuestion.subtext.fontSize}px;line-height: ${(p) => p.theme.chatQuestion.subtext.lineHeight}px;font-weight: ${(p) => p.theme.chatQuestion.subtext.fontWeight};font-style: ${(p) => p.theme.chatQuestion.subtext.fontStyle};}`
Const QuestionText
QuestionText: string & StyledComponentBase<"span", DefaultTheme, {}, never> & {} = styled.span`flex: 1;`
Const QuestionText
QuestionText: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`color: #666;`
Const QuestionTitle
QuestionTitle: string & StyledComponentBase<"h3", DefaultTheme, {}, never> & {} = styled.h3`margin: 0;padding: ${(p) => p.theme.questiontitle.padding}px 0;font-family: ${(p) => p.theme.questiontitle.fontFamily};font-size: ${(p) => p.theme.questiontitle.fontSize}px;line-height: ${(p) => p.theme.questiontitle.lineHeight}px;`
Const QuestionWrapper
Question
Wrapper: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, QuestionWrapperProps, never> & {} = styled(motion.div)<QuestionWrapperProps>`width: 100%;box-sizing: border-box;transition: width 300ms ease 0s;padding: ${(p) => p.theme.chatQuestion.padding}px 0;${QuestionContent} {width: ${(p) => (p.current ? '100%' : 'auto')};}`
Const RadioContainer
RadioContainer: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: inline-block;vertical-align: middle;`
Const Response
Response: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`margin-bottom: ${(p) => p.theme.spacing.responseMargin}px;`
Const Right
Right: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding-right: 1%;`
Const Right
Right: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding-left: 10px;`
Const Section
Section: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`font-family: 'Noto Sans', sans-serif;font-weight: bold;padding: 16px;background-color: #1018d5;color: white;`
Const Select
Select
: string & StyledComponentBase<FunctionComponent<{ className
?: undefined | string; onChange
: (event
: ChangeEvent<HTMLSelectElement>) => void; options
: Option[]; value
: string | number }>, DefaultTheme, {}, never> & {} = styled(Dropdown)`font-family: ${(p) => p.theme.typography.fontFamily};font-size: ${(p) => p.theme.typography.inputField.size}px;`
Const Styled
Styled
: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, PanelContainerProps, never> & {} = styled(motion.div)<PanelContainerProps>`box-sizing: border-box;float: ${(p) => p.float || 'left'};@media screen and (min-width: 800px) {padding: 0 10px;width: 50%;}@media screen and (max-width: 799px) {width: 100%;}`
Const Styled
Styled
: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, PanelContainerProps, never> & {} = styled(motion.div)<PanelContainerProps>`box-sizing: border-box;float: ${(p) => p.float || 'left'};@media screen and (min-width: 600px) {width: 33.3%;&:not(:last-child) {padding-right: 16px;}}@media screen and (max-width: 799px) {width: 100%;}`
Const StyledBody
StyledBody: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding-top: 1.5rem;`
Const StyledCheckbox
Styled
Checkbox: string & StyledComponentBase<"div", DefaultTheme, StyledCheckboxProps, never> & {} = styled.div<StyledCheckboxProps>`width: ${(props) => props.theme.checkbox.size}px;height: ${(props) => props.theme.checkbox.size}px;box-sizing: border-box;border-radius: ${(props) => props.theme.checkbox.borderRadius}px;border: 1px solid;border-color: ${(props) =>props.checked? props.theme.checkbox.checked.color: props.theme.checkbox.unchecked.color};transition: all 150ms;${HiddenInput}:focus + & {box-shadow: ${(props) => props.theme.checkbox.focus.color} 0px 0px 3px 2px;}${Icon} {visibility: ${(props) => (props.checked ? 'visible' : 'hidden')};fill: none;stroke: ${(props) => props.theme.checkbox.checked.color};stroke-width: 4px;}`
Const StyledClearButton
Styled
ClearButton: string & StyledComponentBase<"button", DefaultTheme, IClearButton, never> & {} = styled.button<IClearButton>`position: relative;padding: 4px;border: 1px solid transparent;background-color: transparent;display: ${(p) => (p.show ? 'inline-block' : 'none')};vertical-align: middle;outline: 0;cursor: pointer;&:after {content: 'X';display: block;width: 15px;height: 15px;position: absolute;background-color: #e50f0f;z-index: 1;right: 185px;top: 0;bottom: 0;margin: auto;padding: 2px;border-radius: 50%;text-align: center;color: white;font-weight: normal;font-size: 12px;box-shadow: 0 0 2px #e50f0f;cursor: pointer;}`
Const StyledHeader
StyledHeader: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`cursor: pointer;display: flex;align-items: center;justify-content: space-between;width: 100%;`
Const StyledInput
StyledInput: string & StyledComponentBase<"input", DefaultTheme, { type: "date" }, "type"> & {} = styled.input.attrs({ type: 'date' })`width: ${(p) => p.theme.datefield.width}px;height: ${(p) => p.theme.datefield.height}px;font-family: ${(p) => p.theme.datefield.fontFamily};font-size: ${(p) => p.theme.datefield.fontSize}px;text-align: ${(p) => p.theme.datefield.textAlign};border: 1px solid ${(p) => p.theme.datefield.borderColor};border-radius: 3px;transition: all 150ms;&:focus {outline: 0;border-color: ${(p) => p.theme.datefield.hoverColor};box-shadow: ${(p) => p.theme.datefield.focusColor} 0px 0px 3px 2px;}`
Const StyledInput
StyledInput: string & StyledComponentBase<"input", DefaultTheme, { type: "number" }, "type"> & {} = styled.input.attrs({ type: 'number' })`width: ${(p) => p.theme.numberfield.width}px;height: ${(p) => p.theme.numberfield.height}px;font-family: ${(p) => p.theme.numberfield.fontFamily};font-size: ${(p) => p.theme.numberfield.fontSize}px;text-align: ${(p) => p.theme.numberfield.textAlign};border: 1px solid ${(p) => p.theme.numberfield.borderColor};border-radius: 3px;transition: all 150ms;&:focus {outline: 0;border-color: ${(p) => p.theme.numberfield.hoverColor};box-shadow: ${(p) => p.theme.numberfield.focusColor} 0px 0px 3px 2px;}`
Const StyledInput
StyledInput: string & StyledComponentBase<"input", DefaultTheme, {}, never> & {} = styled.input`width: ${(p) => p.theme.textfield.width}px;height: ${(p) => p.theme.textfield.height}px;font-family: ${(p) => p.theme.textfield.fontFamily};font-size: ${(p) => p.theme.textfield.fontSize}px;text-align: ${(p) => p.theme.textfield.textAlign};border: 1px solid ${(p) => p.theme.textfield.borderColor};border-radius: 3px;transition: all 150ms;&:focus {outline: 0;border-color: ${(p) => p.theme.textfield.hoverColor};box-shadow: ${(p) => p.theme.textfield.focusColor} 0px 0px 3px 2px;}`
Const StyledInput
StyledInput: string & StyledComponentBase<"input", DefaultTheme, {}, never> & {} = styled.input`width: ${(p) => p.theme.textfield.width}px;height: ${(p) => p.theme.textfield.height}px;font-family: ${(p) => p.theme.textfield.fontFamily};font-size: ${(p) => p.theme.textfield.fontSize}px;text-align: ${(p) => p.theme.textfield.textAlign};border: 1px solid ${(p) => p.theme.textfield.borderColor};border-radius: 3px;transition: all 150ms;&:focus {outline: 0;border-color: ${(p) => p.theme.textfield.hoverColor};box-shadow: ${(p) => p.theme.textfield.focusColor} 0px 0px 3px 2px;}position: relative;`
Const StyledLabel
StyledLabel: string & StyledComponentBase<"label", DefaultTheme, {}, never> & {} = styled.label`display: flex;width: 100%;cursor: pointer;padding: ${(p) => p.theme.label.vertical}px 0;align-items: center;box-shadow: inset 0 -1px 0 0 ${(p) => p.theme.label.borderColor};`
Const StyledLine
StyledLine: string & StyledComponentBase<"line", DefaultTheme, {}, never> & {} = styled.line`stroke: ${colors.grey300};stroke-width: 0.5;stroke-dasharray: 0.3 0.6;opacity: 0.5;`
Const StyledLink
StyledLink: string & StyledComponentBase<"a", DefaultTheme, {}, never> & {} = withDefaultTheme(styled.a`cursor: pointer;color: ${(p) => p.theme.colors.linkBlue};text-decoration: underline;font-size: ${(p) => p.theme.healthReportConclusion.fontSize}px;`)
Const StyledLink
StyledLink: string & StyledComponentBase<"a", DefaultTheme, {}, never> & {} = withDefaultTheme(styled.a`cursor: pointer;color: ${(p) => p.theme.colors.linkBlue};text-decoration: underline;`)
Const StyledPanel
StyledPanel: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never> & {} = styled(motion.div)`background-color: white;box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);margin-bottom: 30px;overflow: hidden;border: 1px solid #dbdbdb;border-radius: 8px;`
Const StyledPanel
StyledPanel: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never> & {} = styled(motion.div)`@media screen and (min-width: 800px) {border-radius: 8px;background-color: white;border: 1px solid #dbdbdb;box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);margin-bottom: 30px;overflow: hidden;}`
Const StyledPanel
Styled
Panel: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, SymptomReportMessageProps, never> & {} = styled(motion.div)<SymptomReportMessageProps>`box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);margin-bottom: 30px;overflow: hidden;border: 1px solid #dbdbdb;border-radius: 8px;border-left: 8px solid ${(p) => p.color};`
Const StyledPanelBlock
StyledPanelBlock: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`@media screen and (max-width: 799px) {padding-top: 10px;}@media screen and (min-width: 800px) {padding-top: 30px;}`
Const StyledPanelBox
StyledPanelBox: string & StyledComponentBase<FunctionComponent<any>, DefaultTheme, {}, never> & {} = styled(PanelBox)`overflow: auto;@media screen and (min-width: 800px) {min-height: 470px;max-height: 485px;}padding-top: 13px;`
Const StyledPanelContent
StyledPanelContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled(PanelContent)`padding: 16px 0;@media screen and (min-width: 800px) {padding: ${(p) => p.theme.panelcontent.padding}px;}`
Const StyledPanelContent
StyledPanelContent: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled(PanelContent)`border-radius: 0 0 8px 8px;`
Const StyledPolygon
Styled
Polygon: string & StyledComponentBase<"polygon", DefaultTheme, StyledPolygonProps, never> & {} = styled.polygon<StyledPolygonProps>`fill: #666;stroke: #666;stroke-linejoin: round;transform: translateX(${(p) => p.position}px);transition: transform 0.5s;`
Const StyledPolyline
StyledPolyline: string & StyledComponentBase<"polyline", DefaultTheme, {}, never> & {} = styled.polyline`fill: none;stroke: ${colors.grey300};stroke-width: 2px;stroke-linecap: round;stroke-linejoin: miter;transition: transform 0.3s;transform-origin: 8px 8px;&.open {transform: rotate(180deg);}`
Const StyledRadio
Styled
Radio: string & StyledComponentBase<"div", DefaultTheme, StyledRadioProps, never> & {} = styled.div<StyledRadioProps>`width: ${(props) => props.theme.radio.size}px;height: ${(props) => props.theme.radio.size}px;border-radius: ${(props) => props.theme.radio.size / 2}px;transition: all 150ms;border: 1px solid;border-color: ${(props) =>props.checked? props.theme.radio.checked.color: props.theme.radio.unchecked.color};box-sizing: border-box;${HiddenInput}:focus + & {box-shadow: ${(props) => props.theme.radio.focus.color} 0px 0px 3px 2px;}${Icon} {fill: ${(props) => props.theme.radio.checked.color};stroke: none;stroke-width: 2px;visibility: ${(props) => (props.checked ? 'visible' : 'hidden')};}`
Const StyledRect
StyledRect: string & StyledComponentBase<"rect", DefaultTheme, {}, never> & {} = styled.rect`transition: width 0.3s, x 0.3s;`
Const StyledReportTitle
StyledReportTitle: string & StyledComponentBase<"h2", DefaultTheme, {}, never> & {} = styled(ComparisonReportTitle)`color: ${(p) => p.theme.healthreporttitle.color};padding-top: 10px;`
Const StyledSvg
StyledSvg: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg`overflow: visible;width: 100%;display: block;margin: auto;@media screen and (max-width: 375px) {font-size: ${chartSettings.fontSize};}@media screen and (min-width: 376px) {font-size: ${chartSettings.desktopFontSize};}`
Const StyledSvg
StyledSvg: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg`margin-bottom: -2px;`
Const Summary
Summary: ForwardRefExoticComponent<{} & RefAttributes<any>> = React.forwardRef<any, any>(({ children }, ref) => (<SummaryContainerDivref={ref}initial="hidden"animate="show"exit="hidden"variants={{show: {x: '0%',y: '0%',height: '100%',transition: {x: { type: 'tween', easeing: 'easeInOut' },staggerChildren: 0.025,},},hidden: {x: '100%',y: '0%',height: '100%',transition: {x: { type: 'tween', easeing: 'easeInOut' },},},}}>{children}</SummaryContainerDiv>))
Const SummaryButton
SummaryButton: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled(FlexButton)`@media screen and (min-width: 450px) {flex: none;margin-left: auto;}`
Const SummaryContainerDiv
SummaryContainerDiv: string & StyledComponentBase<ForwardRefExoticComponent<{} & MotionProps & RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never> & {} = styled(motion.div)`font-family: ${(p) => p.theme.summary.fontFamily};font-size: ${(p) => p.theme.summary.fontSize}px;line-height: ${(p) => p.theme.summary.lineHeight}px;padding: ${(p) => p.theme.summary.padding}px;background: white;position: fixed;top: 0;height: 100%;right: 0;max-width: 500px;width: 100%;border-left: 1px solid #f1f1f1;overflow-y: auto;box-sizing: border-box;`
Const SummaryDivider
SummaryDivider: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`@media screen and (max-width: 799px) {margin-left: -${(p) => p.theme.summaryDivider.paddingLeft}px;margin-right: -${(p) => p.theme.summaryDivider.paddingRight}px;height: ${(p) => p.theme.summaryDivider.height}px;background-color: ${(p) => p.theme.summaryDivider.backgroundColor};box-shadow: inset 0 1px 0 0 ${(p) => p.theme.summaryDivider.boxShadowColor};}@media screen and (min-width: 450px) {margin-right: -${(p) => p.theme.summaryDivider.paddingRight * 2.5}px;}`
Const SummaryKey
SummaryKey: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled(DisplayText)`padding-left: 0px;width: 50%;`
Const SummaryRow
SummaryRow: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;justify-content: space-between;padding: 15px 0 15px 0;box-shadow: 0 1px 0 0 #e2e2e2;&:last-of-type {box-shadow: none;padding: 15px 0 0 0;}&:first-of-type {border-top: 1px solid #e2e2e2;}`
Const SummaryValue
SummaryValue: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled(DisplayText)`text-align: right;width: 40%;`
Const Svg
Svg: string & StyledComponentBase<"svg", DefaultTheme, {}, never> & {} = styled.svg`width: 100%;height: 100%;`
Const SvgBox
SvgBox: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`padding-top: 10px;`
Const SymptomReportMessageTitle
SymptomReportMessageTitle: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = withDefaultTheme(styled.div`display: flex;align-items: center;font-weight: ${(p) => p.theme.symptomReport.messageTitle.fontWeight};font-size: ${(p) => p.theme.symptomReport.messageTitle.fontSize}px;font-family: ${(p) => p.theme.symptomReport.messageTitle.fontFamily};line-height: ${(p) => p.theme.symptomReport.messageTitle.lineHeight}px;padding-bottom: ${(p) => p.theme.symptomReport.messageTitle.paddingBottom}px;`)
Const TD
TD: string & StyledComponentBase<"td", DefaultTheme, {}, never> & {} = styled.td`position: relative;text-align: center;vertical-align: top;`
Const Table
Table: string & StyledComponentBase<"table", DefaultTheme, { cellPadding: 0; cellSpacing: 0 }, "cellPadding" | "cellSpacing"> & {} = styled.table.attrs({ cellSpacing: 0, cellPadding: 0 })`width: 100%;margin-bottom: 20px;border-collapse: collapse;table-layout: fixed;`
Const TableQuestionRow
TableQuestionRow: string & StyledComponentBase<"tr", DefaultTheme, {}, never> & {} = styled.tr`/* border-bottom: ${(p) => p.theme.tablerow.borderWidth}px solid ${(p) =>p.theme.tablerow.borderColor};border-bottom: 1px solid rgb(222, 222, 222); */box-shadow: inset 0 -1px 0 0 ${(p) => p.theme.tablerow.borderColor};th {padding: ${(p) => p.theme.tablerow.vertical}px 0;}td {padding: ${(p) => p.theme.tablerow.vertical}px ${(p) =>p.theme.tablerow.horizontal}px;}`
Const Text
Text: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`font-family: 'Noto Sans', sans-serif;font-weight: bold;padding: 10px;`
Const Text
Text: string & StyledComponentBase<"span", DefaultTheme, {}, never> & {} = styled.span`padding: 16px;width: 100%;box-sizing: border-box;transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;`
Const Text
Text: string & StyledComponentBase<"span", DefaultTheme, {}, never> & {} = styled.span`font-family: ${(p) => p.theme.typography.fontFamily};font-size: ${(p) => p.theme.typography.title.small.size}px;line-height: ${(p) => p.theme.typography.title.small.lineHeight}px;width: 150px;`
Const Text
Text: string & StyledComponentBase<"span", DefaultTheme, {}, never> & {} = styled.span`font-family: ${(p) => p.theme.typography.fontFamily};font-size: ${(p) => p.theme.typography.title.small.size}px;line-height: ${(p) => p.theme.typography.title.small.lineHeight}px;width: 100px;`
Const TextFieldInner
TextFieldInner: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`vertical-align: baseline;display: flex;align-items: center;height: 54px;background-color: rgb(255, 255, 255);box-sizing: content-box;margin: 0px;padding: 0px;border-image: initial;font: inherit inherit inherit inherit inherit inherit inherit;outline: none;border-width: 1px;border-style: solid;border-color: rgb(222, 222, 222);border-radius: 4px;`
Const TextFieldPadding
TextFieldPadding: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`margin-bottom: 0px;padding-bottom: 18px;`
Const TextWrapper
TextWrapper: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`display: flex;flex-direction: row;justify-content: space-between;font-size: 0.75rem;`
Const Tiles
Tiles: string & StyledComponentBase<"section", DefaultTheme, {}, never> & {} = styled.section`display: flex;flex-direction: row;justify-content: space-between;align-items: center;`
Const Title
Title: string & StyledComponentBase<"h1", DefaultTheme, {}, never> & {} = styled.h1`font-family: ${(p) => p.theme.title.fontFamily};font-size: ${(p) => p.theme.title.fontSize}px;line-height: ${(p) => p.theme.title.lineHeight}px;cursor: pointer;`
Const Title
Title: string & StyledComponentBase<"h2", DefaultTheme, {}, never> & {} = styled.h2`flex: 1;margin: 0;`
Const Title
Title: string & StyledComponentBase<"h3", DefaultTheme, {}, never> & {} = styled.h3`flex: 1;margin: 0;`
Const Wrap
Wrap: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`box-sizing: border-box;text-align: center;position: fixed;width: 100%;height: 100%;left: 0;top: 0;padding: 0 8px;white-space: nowrap;overflow-x: hidden;overflow-y: auto;z-index: 1;-webkit-animation-iteration-count: 2;animation-iteration-count: 2;zoom: 1;transform-style: preserve-3d;/* This keeps smaller modals centered vertically and prevents tall ones from disappearing off the top of the screen */::before {content: '';display: inline-block;height: 100%;vertical-align: middle;}`
Const Wrapper
Wrapper: string & StyledComponentBase<"div", DefaultTheme, {}, never> & {} = styled.div`position: relative;`
Const ageOptions
ageOptions: number[] = [80, 90, 100, 110]
Const animation
animation: Keyframes = keyframes`0% {transform: translate3d(0, 0, 0);}25% {transform: translate3d(0, -5px, 0);}50% {transform: translate3d(0, 0, 0);}100% {transform: translate3d(0, 0, 0);}`
Const barArrowLength
barArrowLength: 1 = 1
Const barHeight
barHeight: 3 = 3
barHeight
barHeight: 3
Const barHeight
barHeight: 2 = 2
Const barInterval
barInterval: 6 = 6
barInterval
barInterval: 6
barInterval
barInterval: 6
Const barLabelWidth
barLabelWidth: 32 = 32
barLabelWidth
barLabelWidth: 32
barLabelWidth
barLabelWidth: 32
Const barPoints
barPoints: string = [[0, 0],[barWidth - barArrowLength, 0],[barWidth, barHeight / 2],[barWidth - barArrowLength, barHeight],[0, barHeight],].map((pt) => pt.join(' ')).join(',')
Const barWidth
barWidth: 58 = 58
barWidth
barWidth: 58
barWidth
barWidth: 58
barWidth
barWidth: 58
Const bottomBarHeight
bottomBarHeight: "100px" = "100px"
Const bottomBarHeight
bottomBarHeight: "100px" = "100px"
Const changeableRiskColor
changeableRiskColor: string = colors.chartRed
Const defaultAges
defaultAges: number[] = [90]
Const desktopFontSize
desktopFontSize: "2.75px" = "2.75px"
Const fontSize
fontSize: "3.5px" = "3.5px"
Const gridlineLabelHeight
gridlineLabelHeight: 8 = 8
gridlineLabelHeight
gridlineLabelHeight: 8
gridlineLabelHeight
gridlineLabelHeight: 8
Const height
height: 6.2 = 6.2
Const intervals
intervals: number[] = [0, 25, 50, 75, 100]
Const minimumRiskColor
minimumRiskColor: string = colors.chartGreen
Const pipDiameter
pipDiameter: 10 = 10
Const pointerHeight
pointerHeight: 1.75 = 1.75
Const pointerHeight
pointerHeight: 3 = 3
Const pointerWidth
pointerWidth: 1.75 = 1.75
Const pointerWidth
pointerWidth: 3 = 3
Const width
width: 100 = 100