From b8805b3b35ec2d6692c06648eebfc20be3434b8f Mon Sep 17 00:00:00 2001 From: Kasper Baun Date: Tue, 27 Feb 2024 09:29:03 +0100 Subject: [PATCH 1/4] fix: Changed some typing for React.FC in registerInputControl() --- .../input-types/multiline/MultilineInput.tsx | 22 ++++++++++--------- .../defaults/DefaultInputTypeResolver.ts | 15 ++++++++----- packages/playground/dist/bundle.js | 2 +- packages/playground/dist/index.html | 2 +- packages/playground/src/App.tsx | 1 - .../src/components/slider/SliderInput.tsx | 2 +- .../src/components/toggle/Toggle.module.css | 0 .../src/components/toggle/ToggleInput.tsx | 14 ------------ 8 files changed, 24 insertions(+), 34 deletions(-) delete mode 100644 packages/playground/src/components/toggle/Toggle.module.css delete mode 100644 packages/playground/src/components/toggle/ToggleInput.tsx diff --git a/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx b/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx index b49a216..c450a54 100644 --- a/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx +++ b/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx @@ -6,15 +6,7 @@ import { useQuickForm } from "../../../../state/QuickFormContext"; import React from "react"; import { InputProps } from "../../../../model/index"; -export type MultilineInput = { - readonly placeholder?: string; - readonly className?: string; - readonly value?: string; - readonly onChange?: ChangeEventHandler; - readonly width?: string; - readonly focus?: boolean; - readonly maxLength?: number; -} + export function MultilineInput({ questionModel, onOutputChange }: InputProps) { const { isFirstQuestionInCurrentSlide } = useQuickForm(); @@ -45,9 +37,19 @@ export function MultilineInput({ questionModel, onOutputChange }: InputProps) { ); } +type MultilineInputProps = { + readonly placeholder?: string; + readonly className?: string; + readonly value?: string; + readonly onChange?: ChangeEventHandler; + readonly width?: string; + readonly focus?: boolean; + readonly maxLength?: number; +} + const QuestionTextArea = forwardRef( ( - { placeholder, className, value, onChange, width, focus = true, maxLength }: MultilineInput, + { placeholder, className, value, onChange, width, focus = true, maxLength }: MultilineInputProps, passedRef: ForwardedRef ) => { const textareaRef = (passedRef as RefObject) ?? useRef(null); diff --git a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts index 0dab75d..dacf8e3 100644 --- a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts +++ b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts @@ -1,3 +1,4 @@ +import { FC } from "react"; import { DropDownProperties, RadioProperties, SliderProperties } from "../../model"; import { QuestionJsonModel } from "../../model/json/JsonDataModels"; import { registerQuickFormService } from "../QuickFormServices"; @@ -51,25 +52,27 @@ function parseInputProperties(questionJsonModel: QuestionJsonModel): DropDownPro registerQuickFormService("inputTypePropertiesTransformer", parseInputProperties); -import React from "react"; import { TextInput, MultilineInput, DropDownInput } from "../../components/question/input-types/index"; import { InputProps } from "../../model/InputType"; -export type InputComponentType = React.ComponentType; +export type InputComponentType = FC; export type InputComponentDictionary = { [key: string]: InputComponentType; }; const inputComponents: InputComponentDictionary = { - "text": TextInput, // TODO - Create Radio "radio": TextInput, - // TODO - Create Slider - "slider": TextInput, - "multilinetext": MultilineInput, // TODO - Create Email "email": TextInput, + // TODO - Create Toggle + "toggle": TextInput, + + + "text": TextInput, + "slider": TextInput, + "multilinetext": MultilineInput, "dropdown": DropDownInput, "none": TextInput, }; diff --git a/packages/playground/dist/bundle.js b/packages/playground/dist/bundle.js index b39b58e..5f02279 100644 --- a/packages/playground/dist/bundle.js +++ b/packages/playground/dist/bundle.js @@ -1,2 +1,2 @@ /*! For license information please see bundle.js.LICENSE.txt */ -(()=>{var e={258:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,"@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}",""]);const i=o},696:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,":root {\n\n --primary: #154068;\n\n /* Blue 1 */\n --primary-light: #225A99;\n\n /* Blue 3 */\n --primary-dark: #112D4D;\n\n /* Specifying white in case a different tone is required in the future */\n --white: #ffffff;\n --black: #000;\n\n /* Secondary Colors */\n --secondary: #24517b;\n --secondary-light: #567fa5;\n --secondary-dark: #133a5e;\n\n --sand: #DDCBA5;\n\n\n /* Text and Background Colors */\n --background: var(--primary);\n --on-background: var(--primary-dark);\n /* Text or icons on background */\n --surface: transparen;\n /* Cards, sheets, etc. */\n --on-surface: var(--white);\n /* Text or icons on surface */\n --border-color: var(--white);\n\n /* Feedback Colors (for alerts, success, error messages, etc.) */\n --error: #DB4437;\n --warning: #FFCA28;\n --success: #0F9D58;\n --info: #4285F4;\n\n /* Other Variables */\n --disabled-opacity: 0.38;\n --divider-opacity: 0.12;\n --low-emphasis-opacity: 0.38;\n --medium-emphasis-opacity: 0.60;\n --high-emphasis-opacity: 0.87;\n\n\n /* Font family */\n --font-family: 'var(--chivo), Monaco, Consolas';\n}",""]);const i=o},158:(e,n,t)=>{"use strict";t.d(n,{Z:()=>s});var r=t(601),a=t.n(r),l=t(609),o=t.n(l),i=t(696),u=o()(a());u.i(i.Z),u.push([e.id,".container {\n display: flex;\n flex-direction: column;\n min-height: 550px;\n height: 550px;\n min-width: 80%;\n width: 80%;\n transition: all 0.3s ease;\n z-index: 1;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);\n border-radius: 20px;\n}\n\n/* Media query for viewports with a max-width of 600px */\n@media screen and (max-width: 600px) {\n .container {\n width: 95%;\n }\n}\n\n.form-header {\n display: flex;\n align-items: center;\n height: 10%;\n min-height: 10%;\n width: 100%;\n -webkit-font-smoothing: antialiased;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n background: var(--primary-dark);\n}\n\n.form-content {\n height: 100%;\n width: 100%;\n -webkit-font-smoothing: antialiased;\n background-color: var(--surface);\n color: var(--on-surface);\n}\n\n.form-footer {\n align-items: end;\n height: 10%;\n min-height: 10%;\n width: 100%;\n margin: auto;\n -webkit-font-smoothing: antialiased;\n border-bottom-left-radius: 20px;\n border-bottom-right-radius: 20px;\n color: var(--on-surface);\n background-color: var(--surface);\n}\n\n@keyframes slide-up {\n from {\n opacity: 0;\n transform: translateY(90%);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}",""]);const s=u},674:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,'/* Base button container styles */\n.FmWKJH8wJHvkHsrme40k {\n display: flex;\n align-items: center;\n gap: 12.5px;\n margin-top: 32px;\n width: 100%;\n}\n\n/* Base button styles */\n .FmWKJH8wJHvkHsrme40k > button {\n color: var(--on-surface);\n background-color: transparent;\n border: thin solid var(--on-surface);\n border-radius: 8px;\n cursor: pointer;\n font-size: 2rem;\n font-weight: 700;\n padding: 10px 14px;\n }\n\n .FmWKJH8wJHvkHsrme40k > button:hover {\n color: var(--white);\n background-color: var(--on-background);\n }\n\n@keyframes uJpjSZXO6krFIgFmymXi {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4; /* Adjust as needed for desired "blink" effect */\n }\n}\n\n@keyframes FjDpuUb2ZiV7ZO2IklSj {\n 0%, 100% {\n opacity: 1;\n }\n 25%, 75% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n\n.FmWKJH8wJHvkHsrme40k > button:active {\n animation: FjDpuUb2ZiV7ZO2IklSj 0.6s 0.5;\n background-color: var(--primary);\n color: var(--on-surface);\n}\n\n.FmWKJH8wJHvkHsrme40k > button:focus-visible {\n outline: none;\n}\n\n.FmWKJH8wJHvkHsrme40k > button > img {\n bottom: 2.5px;\n position: absolute;\n right: 5px;\n}\n\n/* Base span styles */\n.FmWKJH8wJHvkHsrme40k > span {\n color: var(--on-surface);\n font-size: 1.25rem;\n}\n\n.FmWKJH8wJHvkHsrme40k > span > strong {\n font-weight: bolder;\n letter-spacing: 0.04em;\n}\n\n/* Media query for smaller screens */\n@media screen and (max-width: 599px) {\n .FmWKJH8wJHvkHsrme40k {\n align-items: flex-start;\n flex-direction: column;\n gap: 17.5px;\n }\n\n .FmWKJH8wJHvkHsrme40k > span {\n font-size: 1.5rem;\n }\n}\n\n/* Modifier class for .btn-container */\n.FmWKJH8wJHvkHsrme40k.lfW2KAcNlvubjrNjo3vl {\n margin-top: 15px;\n}\n\n.FmWKJH8wJHvkHsrme40k.lfW2KAcNlvubjrNjo3vl > button {\n padding-right: 38px;\n position: relative;\n}\n',""]),o.locals={"btn-container":"FmWKJH8wJHvkHsrme40k",fastBlink:"FjDpuUb2ZiV7ZO2IklSj",ok:"lfW2KAcNlvubjrNjo3vl",blink:"uJpjSZXO6krFIgFmymXi"};const i=o},34:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".k_sb7bfWnhClhfLfCTEg {\n color: var(--on-surface);\n font-size: 2.4rem;\n font-weight: unset;\n \n}\n\n.KSNJTxFu2KWIzWtlFI0g{\n stroke:var(--on-surface);\n}",""]),o.locals={ending:"k_sb7bfWnhClhfLfCTEg",endingSvg:"KSNJTxFu2KWIzWtlFI0g"};const i=o},147:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".ow_NQHspBPLmu8Sqexm4 {\n align-items: flex-end;\n animation: LLgbWFo5fI7itDAaLyP5 0.35s linear 1 forwards;\n background-color: var(--surface);\n border-radius: 3px;\n color: var(--error);\n display: flex;\n font-size: 1.5rem;\n margin-top: 15px;\n padding: 8px 12px;\n width: max-content;\n}\n\n.ow_NQHspBPLmu8Sqexm4 > img {\n margin-right: 4px;\n}\n\n@keyframes LLgbWFo5fI7itDAaLyP5 {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media screen and (max-width: 599px) {\n .ow_NQHspBPLmu8Sqexm4 {\n font-size: 1.75rem;\n margin-top: 22px;\n width: 100%;\n }\n}\n",""]),o.locals={error:"ow_NQHspBPLmu8Sqexm4","slide-up":"LLgbWFo5fI7itDAaLyP5"};const i=o},536:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".Li50CLfcKsU912Od0X7q {\n /* Size & alignment */\n display:flex;\n justify-content: center;\n flex-direction: column;\n width: 100%;\n height: 100%;\n transition: height 0.3s ease;\n}\n",""]),o.locals={formContent:"Li50CLfcKsU912Od0X7q"};const i=o},602:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".ZJmsYdmMLxhD5S0BiBju {\n color: var(--on-surface);\n font-size: 2.4rem;\n font-weight: unset;\n }\n \n @media screen and (max-width: 599px) {\n .ZJmsYdmMLxhD5S0BiBju {\n line-height: 1.35em;\n margin-top: -15px;\n }\n }\n \n .ZJmsYdmMLxhD5S0BiBju.UppDStb33OiuWzJvyRQY {\n position: relative;\n }\n \n .ZJmsYdmMLxhD5S0BiBju.UppDStb33OiuWzJvyRQY > span {\n font-size: 16px;\n margin-left: -36px;\n margin-top: 5px;\n position: absolute;\n }\n \n .ZJmsYdmMLxhD5S0BiBju.UppDStb33OiuWzJvyRQY > span > img {\n margin-bottom: -3px;\n }\n \n @media screen and (max-width: 599px) {\n .ZJmsYdmMLxhD5S0BiBju.UppDStb33OiuWzJvyRQY > span {\n font-size: 14px;\n margin-left: -26px;\n margin-top: 0;\n }\n \n .ZJmsYdmMLxhD5S0BiBju.UppDStb33OiuWzJvyRQY > span > img {\n height: 14px;\n width: 12px;\n }\n }",""]),o.locals={heading:"ZJmsYdmMLxhD5S0BiBju",num:"UppDStb33OiuWzJvyRQY"};const i=o},728:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".Dj9_T4ekEiODTnPTKiro {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 40px;\n border-radius: 50px;\n margin:'auto';\n transition: all 0.3s ease;\n cursor: pointer;\n background-color: var(--primary);\n color: var(--on-surface);\n}\n\n.AAq_bsCUoJXYy87RcDH2 {\n color: var(--on-surface);\n flex: 1;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n width: 100%;\n height: 100%;\n}\n\n.nDoVe4y8lrmh6P3fHYdY {\n border-top-left-radius: 50px;\n border-bottom-left-radius: 50px;\n color: var(--on-surface);\n}\n\n.E0wCkiYiu9FNwxL7bXBB {\n border-top-right-radius: 50px;\n border-bottom-right-radius: 50px;\n color: var(--on-surface);\n}\n\n.nDoVe4y8lrmh6P3fHYdY:hover,\n.E0wCkiYiu9FNwxL7bXBB:hover {\n background-color: var(--white);\n color: var(--primary);\n}\n\n#FfBetdRZo_7X7TGYGs2Y {\n border-left: 1px solid white;\n height: 100%;\n}",""]),o.locals={"slide-navigation":"Dj9_T4ekEiODTnPTKiro","slide-navigation-button":"AAq_bsCUoJXYy87RcDH2",left:"nDoVe4y8lrmh6P3fHYdY",right:"E0wCkiYiu9FNwxL7bXBB",divider:"FfBetdRZo_7X7TGYGs2Y"};const i=o},926:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,"/* Overview Container */\n.NYICjUOTLhx4brWhc3FP {\n /* Size & alignment */\n display: flex;\n flex-direction: column;\n background-color: var(--surface);\n padding-left: 20px;\n padding-right: 20px;\n}\n\n/* Styles for the left side */\n.VCfGgPL6rtya2KUr0g_m {\n /* Adjust the width as needed */\n flex: 1;\n}\n\n/* Styles for the right side */\n.AkDB5UN5j2hxdg5TEolA {\n /* Adjust the width as needed */\n flex: 1;\n}\n\n/* Progress Section */\n.ffyFQrIndrtQeqLWpr7k {\n display: flex;\n justify-content: space-between;\n margin-bottom: 5px;\n}\n\n.ffyFQrIndrtQeqLWpr7k p {\n font-size: 18px;\n margin-bottom: 5px;\n}\n\n/* Question List */\n.Jns_BtWwLfjSe1q1j8I_ {\n list-style-type: none;\n margin: 0;\n padding-left: 20px;\n overflow-y: scroll;\n overflow: hidden;\n\n}\n\n.Jns_BtWwLfjSe1q1j8I_ li {\n display: list-item;\n justify-content: space-between;\n align-items: center;\n padding: 8px 0;\n font-size: 16px;\n transition: background-color 0.3s ease;\n}\n\n.Jns_BtWwLfjSe1q1j8I_ li:hover {\n /* background-color: var(--primary); */\n cursor: pointer;\n}\n\n.Jns_BtWwLfjSe1q1j8I_ a {\n color: var(--on-surface);\n}\n\n.Jns_BtWwLfjSe1q1j8I_ a:hover {\n text-decoration: underline;\n}\n\n.Jns_BtWwLfjSe1q1j8I_ a + span {\n color: var(--on-surface);\n height: 24px;\n width: 24px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n margin-left: 10px;\n}\n\n",""]),o.locals={overview:"NYICjUOTLhx4brWhc3FP","overview-left":"VCfGgPL6rtya2KUr0g_m","overview-right":"AkDB5UN5j2hxdg5TEolA",overviewProgress:"ffyFQrIndrtQeqLWpr7k",overviewList:"Jns_BtWwLfjSe1q1j8I_"};const i=o},761:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".ZvQHS04dbOl2YPxZE9O6 {\n color: var(--on-surface);\n font-size: 2rem;\n font-weight: unset;\n line-height: 1.4em;\n margin-top: 12px;\n}\n\n@media screen and (max-width: 599px) {\n .ZvQHS04dbOl2YPxZE9O6 {\n font-size: 1.9rem;\n }\n}\n",""]),o.locals={para:"ZvQHS04dbOl2YPxZE9O6"};const i=o},38:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".Qofpv2rdsLB_TjihuDgS {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n /* Change to width instead of height */\n height: 100vh;\n background: rgba(0, 0, 0, 0.5);\n justify-content: center;\n align-items: center;\n z-index: 9999;\n}\n\n.KdQ4TzRRnNerbBS4KR5b {\n display: flex;\n flex-direction: column;\n}\n\n.DEf8MF0pjnnWAVn6prTA {\n margin: auto;\n width: 80vw;\n height: 80vh;\n}\n\n.AkJGaJnaZ5A8bHlbOtlw {\n margin-top: 10px;\n}",""]),o.locals={pdfModalContainer:"Qofpv2rdsLB_TjihuDgS",pdfModalContent:"KdQ4TzRRnNerbBS4KR5b",iframe:"DEf8MF0pjnnWAVn6prTA",button:"AkJGaJnaZ5A8bHlbOtlw"};const i=o},778:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".WjN5nKNTSMsGYgEzNmn8 {\n animation: QUuNVOg7g_6EiFc7eRYs 0.5s ease-out 1 forwards;\n background-color: var(--on-surface);\n height: 4px;\n}\n\n@keyframes QUuNVOg7g_6EiFc7eRYs {\n from {\n opacity: 0;\n width: 0;\n }\n\n to {\n opacity: 1;\n width: 100%;\n }\n}\n\n.uq2XMJitRgLTTPCxhanP {\n background-color: var(--background);\n height: 100%;\n transition: width 0.5s;\n}\n",""]),o.locals={"progress-bar__path":"WjN5nKNTSMsGYgEzNmn8","grow-right":"QUuNVOg7g_6EiFc7eRYs","progress-bar":"uq2XMJitRgLTTPCxhanP"};const i=o},738:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".Xo3O3W34SLfhWWnQ5zCP {\n transform: rotate(-90deg); /* Start progress from the top */\n}\n ",""]),o.locals={progressCircle:"Xo3O3W34SLfhWWnQ5zCP"};const i=o},963:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".lTn9bxrmPUN977wsvHp9 {\n opacity:0;\n margin: 0 auto;\n max-width: 72rem;\n transition: transform 0.3s ease-out;\n transform: translateY(100%);\n}\n.lTn9bxrmPUN977wsvHp9.Jm_IF8fCffSQHdefE9tw {\n opacity: 1;\n}\n \n.lwX4UDjkAqpwa1IPrOD_ {\n margin-top: 14px;\n}\n\n/* Media Queries */\n@media screen and (max-width: 599px) {\n .kwW8TyUin4tBA2eh81eV.YaN8ZRegNNeIsDzafpIf {\n margin-top: 22px;\n }\n\n .kwW8TyUin4tBA2eh81eV > button > img {\n margin-top: -9px;\n }\n}\n\n/* Animations */\n@keyframes eg6XYPml9KPoYyl7prkD {\n from {\n transform: translateY(100vh);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes tjphyE3DKd9VVSV24Eoo {\n from {\n transform: translateY(-100vh);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes s_TlFo7KS30JEQx4cDxj {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n 25% {\n opacity: 0;\n }\n\n to {\n height: 0;\n opacity: 0;\n transform: translateY(-100vh);\n }\n}\n\n@keyframes NZhoASMQyShvPWpbqsmQ {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n 25% {\n opacity: 0;\n }\n\n to {\n height: 0;\n opacity: 0;\n transform: translateY(100vh);\n }\n}\n\n@keyframes fIDyjmqtapf_adFBTEgA {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes hf8ieKO5sHB5VR7UcyTu {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n/* For slide-in animations */\n.d8zZqDy0KyKWp5HRgbAB {\n \n animation: eg6XYPml9KPoYyl7prkD 0.3s ease-out forwards;\n}\n\n/* For slide-out animations */\n.TLWGSjt4EsnzLqyDgHoc {\n animation: NZhoASMQyShvPWpbqsmQ 0.3s ease-out forwards;\n}\n\n/* Rendered state, question should be in its natural position */\n.BDgjMxwu08WHskepUU1k {\n transform: translateY(0);\n opacity:1;\n}\n",""]),o.locals={"question-box":"lTn9bxrmPUN977wsvHp9",active:"Jm_IF8fCffSQHdefE9tw",ending__links__container:"lwX4UDjkAqpwa1IPrOD_","btn-container":"kwW8TyUin4tBA2eh81eV",ok:"YaN8ZRegNNeIsDzafpIf","slide-in":"d8zZqDy0KyKWp5HRgbAB","in-up":"eg6XYPml9KPoYyl7prkD","slide-out":"TLWGSjt4EsnzLqyDgHoc","out-down":"NZhoASMQyShvPWpbqsmQ",rendered:"BDgjMxwu08WHskepUU1k","in-down":"tjphyE3DKd9VVSV24Eoo","out-up":"s_TlFo7KS30JEQx4cDxj",visible:"fIDyjmqtapf_adFBTEgA",twinkle:"hf8ieKO5sHB5VR7UcyTu"};const i=o},187:(e,n,t)=>{"use strict";t.d(n,{Z:()=>i});var r=t(601),a=t.n(r),l=t(609),o=t.n(l)()(a());o.push([e.id,".aF9YpZkEe3YNTZykt0YH {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 40px;\n border-radius: 50px;\n margin: 'auto';\n transition: all 0.3s ease;\n cursor: pointer;\n background-color: var(--primary);\n color: var(--on-surface);\n}\n\n._yDeqcMmKpae_McLGvFB {\n color: var(--on-surface);\n flex: 1;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n width: 100%;\n height: 100%;\n}\n\n._yDeqcMmKpae_McLGvFB:hover {\n background-color: var(--white);\n color: var(--primary);\n border-radius: 50px;\n}",""]),o.locals={"toggle-overview":"aF9YpZkEe3YNTZykt0YH","toggle-overview-button":"_yDeqcMmKpae_McLGvFB"};const i=o},609:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,a,l){"string"==typeof e&&(e=[[null,e,void 0]]);var o={};if(r)for(var i=0;i0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=l),t&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=t):c[2]=t),a&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=a):c[4]="".concat(a)),n.push(c))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},967:(e,n,t)=>{"use strict";var r=t(784),a=t(616);function l(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t